astroturfcss / astroturf

Better Styling through Compiling: CSS-in-JS for those that want it all.
https://astroturfcss.github.io/astroturf/
MIT License
2.28k stars 60 forks source link

Gatsby v3 support? #709

Open Kilian opened 3 years ago

Kilian commented 3 years ago

I've been juggling configurations to get Astroturf (via gatsby-plugin-astroturf) to play nicely with Gatsby v3 but to no avail.

There's this change which is the primary cause (I think): CSS Modules are imported as ES Modules.

Setting these options in the gatsby-plugin-postcss should solve that:

options: {
  cssLoaderOptions: {
    esModule: false,
    modules: {
      namedExport: true,
    },
  },
},

But that results in styles being a string (Component-styles-module--cls2--C4dLH Component-styles-module--cls1--2BuO7) instead of an object so none of the classes are added to the DOM.

Gatsby v3 wants css module imports in the form of import * as ..., and that options configuration disables that.

If you look here: https://github.com/4Catalyzer/astroturf/blob/master/src/utils/ImportInjector.ts#L58 then you see it does not use the import * as module notation. If I change that however (and set esModule: true) it results in the follow error:

Attempted import error: 'cls2' is not exported from './Component-styles.module.css' (imported as '_styles').

On the other hand, I saw the altLoader option mentioned in a few tickets. Trying that (without the above options) results in the following error in the console during build:

Attempted import error: './Component-styles.module.css' does not contain a default export (imported as '_styles').

And likewise no styles.

Combining both the altLoader and the esModule: false option behave the same as just setting esModules: false, in that styles is a string and not an object.

So, eh, I'm out of ideas. Is Gatsby v3 supported at all and if so, what is the correct configuration?

Weeee04 commented 2 years ago

@Kilian have you tried setting namedExports to false?