Vanilla Extract Component Library + Gatsby

[RaulEscobarRivas]

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!

[mattcompiles]

Hey Bud 👋

Your gatsby project doesn't install vanilla-extract or the component library so I think you might have missed something there. However I can see in the component library rollup config you're missing the @vanilla-extract/babel-plugin. Add that and see how you go on the consumer side.

[RaulEscobarRivas]

@mattcompiles (sorry seems like I was too burned out I forgot to commit something on the consumer project)

I added the @vanilla-extract/babel-plugin to the rollup's config and added both @vanilla-extract/css and the component library to the consumer project, unfortunately the outcome was the same

[RaulEscobarRivas]

seems like a problem with rollup, moved on to esbuild.

[AbdallahAbis]

Hey @RaulEscobarRivas, Would you recommend building a components library using vanilla-extract and consuming it on Gatsby projects? we are planning on a new component library, we really like vanilla-extract but we are afraid of the Gatsby projects failing the Lighthouse scores, as I believe the whole CSS of the lib will need to be imported into Gatsby's project. so I would appreciate if you link a site that you built using your components library, so I can see the perf.

[RaulEscobarRivas]

Hey @AbdallahAbis yes I can recommend doing so. We managed to get our site to a decent lighthouse score after getting rid of run-time jss (styled-components) and using a build-time css approach (vanilla-extract). Check out the results https://www.tourlane.de/afrika/

also, you can always use https://purgecss.com/ to trim down your css file.

[AbdallahAbis]

Alright, Thank you.

[madebydor]

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

Any solution?

[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