Vanilla Extract Component Library + Gatsby

Describe the bug

I’ve been trying to write a components library based on Vanilla Extract and then consume the components on one of my Gatsby projects.

The problem is that on the consumer side, I’m getting the (in)famous error:

Styles were unable to be assigned to a file. This is generally caused by one of the following: 
- You may have created styles outside of a '.css.ts' context 
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/setup

Link to reproduction

Components Library Gatsby Project

Steps to reproduce

1. Clone the gatsby project
2. npm install
3. npm start
4. in your preferred browser, visit localhost:8000

System Info

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Memory: 2.08 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  npmPackages:
    @vanilla-extract/babel-plugin: ^1.1.2 => 1.1.2 
    gatsby: ^4.1.1 => 4.1.1 
    react: ^17.0.1 => 17.0.2 
    react-dom: ^17.0.1 => 17.0.2 
    vanilla-extract-components: github:RaulEscobarRivas/vanilla-extract-components => 0.0.1 

Disclaimer

I’m not entirely sure if this is a problem with Vanilla Extract or my components library setup, but I couldn’t find any components library out there using vanilla extract as base, so apologies in advance if this is unrelated!

[joaogarin]

Facing the same error but with a different setup I’m using Vanilla + Vite + Storybook

I created the issue here https://github.com/seek-oss/vanilla-extract/issues/835 I have the same problem. Started a vite storybook as documented in https://storybook.js.org/blog/storybook-for-vite/ and then added Vanilla extract

Edit :

FYI @madebydor I found the aswer, posted the answer in the issue mentioned above. The trick was to add :

 async viteFinal(config) {
    return mergeConfig(config, {
      plugins: [require("@vanilla-extract/vite-plugin").vanillaExtractPlugin()],
    });
  },

At the end of the main.js file in the .storybook folder

[madebydor]

Facing the same error but with a different setup I’m using Vanilla + Vite + Storybook

Any solution?