Getting Sprinkles running in a Gatsby project

[cycleseven]

Hey, really interested to try vanilla-extract and Sprinkles out on a Gatsby side project, but I've found myself stuck at the first hurdle 😓 when I try to add my first call to createAtomicStyles in a *.css.js file in my project, I hit this build error:

@vanilla-extract/webpack-plugin: An error occured during compilation:
Error: New styles cannot be registered dynamically after initial boot. This is to ensure that styles are statically extractible.
    at Object.getFileScope (/Users/owen/Code/vanilla-extract-gatsby-test/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.cjs.prod.js:20:11)
    at generateIdentifier (/Users/owen/Code/vanilla-extract-gatsby-test/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.prod.js:370:92)
    at style (/Users/owen/Code/vanilla-extract-gatsby-test/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.prod.js:441:21)
    at processValue (/Users/owen/Code/vanilla-extract-gatsby-test/src/components/bad.css.ts:1666:54)
    at _loop (/Users/owen/Code/vanilla-extract-gatsby-test/src/components/bad.css.ts:1688:9)
    at createAtomicStyles (/Users/owen/Code/vanilla-extract-gatsby-test/src/components/bad.css.ts:1694:5)
    at /Users/owen/Code/vanilla-extract-gatsby-test/src/components/bad.css.ts:1719:11
    at /Users/owen/Code/vanilla-extract-gatsby-test/src/components/bad.css.ts:1720:2
    at Object.956 (/Users/owen/Code/vanilla-extract-gatsby-test/src/components/bad.css.ts:1722:12)
    at __webpack_require__ (/Users/owen/Code/vanilla-extract-gatsby-test/src/components/bad.css.ts:1755:41)
    at /Users/owen/Code/vanilla-extract-gatsby-test/src/components/bad.css.ts:1811:68
    at /Users/owen/Code/vanilla-extract-gatsby-test/src/components/bad.css.ts:1814:2
    at /Users/owen/Code/vanilla-extract-gatsby-test/src/components/bad.css.ts:1816:12
    at Script.runInContext (vm.js:130:18)
    at Script.runInNewContext (vm.js:135:17)
    at Object.module.exports [as default] (/Users/owen/Code/vanilla-extract-gatsby-test/node_modules/eval/eval.js:74:12)

Here's a test repo demonstrating the issue: https://github.com/cycleseven/vanilla-extract-gatsby-test/

• I have a component called <Good /> styled using plain vanilla-extract, no atoms/sprinkles yet (could we call that vanilla vanilla-extract?!). This works fine, so the basic setup of gatsby-plugin-vanilla-extract seems healthy.
• Then to add Sprinkles into the mix, I've added another component called <Bad /> which attempts to create the same styles, except this time using an atoms() function.
• When importing <Bad />, both gatsby build and gatsby develop break with the above error.

Here's essentially the same test in Codesandbox form. It's slightly flaky though, since it currently doesn't build, but with some luck you can see the same error message.

I tried the same experiment in Typescript too, just in case that's behind it, but didn't have any luck there either.

Is there anyone out there has Sprinkles working with Gatsby and can point out where I'm going wrong? 👼

[cycleseven]

Tip: try explaining a bug to strangers to instantly understand it 😅

My project builds if I use resolutions in my package.json to force the latest versions of the @vanilla-extract/* packages, eg.

  "resolutions": {
    "@vanilla-extract/babel-plugin": "0.4.0",
    "@vanilla-extract/css": "0.4.3",
    "@vanilla-extract/webpack-plugin": "0.3.0"
  },

(Here's the working codebase: https://github.com/cycleseven/vanilla-extract-gatsby-test/tree/force-vanilla-extract-versions)

So I think the dependency versions just need to be bumped in gatsby-plugin-vanilla-extract.

Edit: have submitted a PR to gatsby-plugin-vanilla-extract.

[mattcompiles]

Note: This problem should improve once we go to v1 as npm resolution will be less strict.