Does not use postcss.config.js

[IanVS]

Describe the bug

I'm able to get correct styling if I specify my postcss options directly inside the addon-postcss config in main.js, but not if I move them to a postcss.config.js file.

Steps to reproduce the behavior

Add a postcss.config.js file in your project root, like:

module.exports = {
    plugins: [
        [
            require('postcss-preset-env'),
            {
                browsers: 'ie >= 11',
                stage: 0,
                autoprefixer: { grid: true },
            },
        ],
    ],
};

Expected behavior

The configuration should be respected. When using --debug-webpack, I expected to see my config file being detected and used in the css webpack rule. On storybook 6.1.11, before adding this plugin, I got a info => Using custom postcss.config.js debug line, and the webpack debug looked like:

{
        test: /\.css$/,
        sideEffects: true,
        use: [
          'node_modules/style-loader/dist/cjs.js',
          {
            loader: 'node_modules/css-loader/dist/cjs.js',
            options: { importLoaders: 1 }
          },
          {
            loader: 'node_modules/postcss-loader/src/index.js',
            options: { config: { path: 'path/to/my/code' } }
          }
        ]
      },

Screenshots and/or logs

This is what I see in my debug webpack output:

{
  test: /\.css$/,
  sideEffects: true,
  use: [
    {
      loader: '/node_modules/style-loader/dist/cjs.js',
      options: undefined
    },
    {
      loader: 'node_modules/@storybook/addon-postcss/node_modules/css-loader/dist/cjs.js',
      options: undefined
    },
    {
      loader: 'node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js',
      options: undefined
    }
  ]
},

Environment

• OS: MacOS
• Node.js version: 14.15.1
• NPM version: Yarn

[phated]

Hey @IanVS! It turns out that postcss-loader added postcss.config.js lookup in the latest major version, so you don't need to worry about that path being in the config! Since we are deferring the config loading to the loader, we don't log that the file is being used, but it is.

[IanVS]

Hmmmmmm. I'll do some more investigating then, and try to figure out why my config isn't actually being used. Thanks for the help.

[IanVS]

Ah HAH! I was using the require syntax as shown in https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#62-deprecations, but that seemed to be breaking my config. Changing from:

const path = require('path');
module.exports = {
    plugins: [
        [
            require('postcss-preset-env'),
            {
                browsers: 'ie >= 11',
                stage: 0,
                autoprefixer: { grid: true },
            },
        ],
        [
            require('postcss-custom-properties'),
            {
                importFrom: path.resolve(__dirname, 'global/styles/variables/variables.css'),
            },
        ],
    ],
};

to:

const path = require('path');
module.exports = {
    plugins: [
        [
            'postcss-preset-env',
            {
                browsers: 'ie >= 11',
                stage: 0,
                autoprefixer: { grid: true },
            },
        ],
        [
            'postcss-custom-properties',
            {
                importFrom: path.resolve(__dirname, 'global/styles/variables/variables.css'),
            },
        ],
    ],
};

Solved my problems and resulted in the styles I expected. Thanks again! I love the idea of decoupling postcss from the core storybook like this addon allows.

[phated]

Ah! I believe the array syntax needs that [moduleNameString, moduleOptions] opposed to require(moduleNameString)(moduleOptions) syntax.

[IanVS]

Should I make a PR to storybook to update the migration example?

Edit: I just saw I was mixing the styles. Maybe what's shown in the migration docs does work. I can't confirm at the moment.

[phated]

I don't think we should update the migration example as it shows the function call syntax:

module.exports = {
  plugins: [
    require('postcss-flexbugs-fixes'),
    require('autoprefixer')({
      flexbox: 'no-2009',
    }),
  ]
}

Which is the exact config someone needs to do to mimic storybook's embedded behavior now.

I think we can add an example in this repo to show the syntax you are using, too.

[IanVS]

Thanks again. I guess this is the downside to having a hundred different ways to do something (postcss is very flexible). It ends up confusing folks like me. 😆

[blowsie]

It looks like my postcss config is incompatible or is not being loaded either.

¬app/
¬¬.storybook/
¬¬¬main.js
¬¬src/
¬¬postcss.config.js

main.js

module.exports = {
  stories: [
    '../stories/**/*.stories.@(js|mdx)',
    '../src/**/*.stories.@(js|mdx)',
  ],
  addons: [
    '@storybook/addon-postcss',
    '@storybook/addon-links',
    '@storybook/addon-a11y',
    '@storybook/addon-essentials',
    '@storybook/addon-notes',
    '@etchteam/storybook-addon-status',
  ],
}

postcss.config.js

module.exports = {
  parser: 'postcss-scss',
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-nested'),
  ],
}

Error (postcss-scss supports inline comments, but the storybook isnt handling the parser)

ModuleBuildError: Module build failed (from > >C:/Projects/moneytransfer.web/ui/node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(30:5) Unknown word

28 |
29 | //.input-input {
> 30 | // @apply bg-white text-tertiary-text;
| ^