storybookjs / addon-postcss

This Storybook addon can be used to run the PostCSS preprocessor against your stories.
MIT License
20 stars 22 forks source link

[QUESTION] Support for .cjs extension of postcss config file? #28

Open danawoodman opened 3 years ago

danawoodman commented 3 years ago

Is it possible to specify a different extension for the PostCSS config file, e.g. postcss.config.cjs? Is this a configuration option available?

I'm using SvelteKit which requires the .cjs extensions since it is using ESM as the default import for .js files. I'm assuming perhaps the issue I'm facing has to do with the .cjs extension.

The exact issue is I'm using postcss-nesting to have nested styles but the following fails:

ModuleBuildError: Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ParseError: Identifier is expected (24:5)
22: <style lang="postcss">
23:   section {
24:     & dl {
         ^
25:       @apply mr-6 border-r pr-6 border-gray-300 text-center;

It seems to be choking on the nesting syntax which I assume is either from my PostCSS config not being imported or perhaps the PostCSS addon is not being picked up in the Svelte template

ksawery29 commented 1 year ago

I'm getting the same issue... Is there any fix for that?

ksawery29 commented 1 year ago

so if anyone is having the same issue I found a fix for that: in storybook main.js addons change

- '@storybook/addon-postcss'
+   {
+      name: '@storybook/addon-postcss',
+      options: {
+       postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },

@danawoodman the issue can be closed