[Bug] Loader won't work for files with an extension other than ".css" (such as ".pcss" or ".postcss")

[zakkor]

Related PR: #17
There's no option to change the test either.

[danawoodman]

Coming across this myself, any change this will be addressed?

[fvanwijk]

This also happens with .vue files that have <style lang="postcss">.
As workaround remove the lang attribute (but then syntax highlighting breaks).

Or fix it by setting the webpack config yourself:

webpackFinal(webpackConfig) {
    // Same config as what @storybook/addon-postcss produces, but for Vue <style lang="postcss"> blocks
    webpackConfig.module?.rules.push({
      test: /\.postcss$/, // Matches lang="postcss" in Vue files
      sideEffects: true,
      use: [
        require.resolve("style-loader"),
        require.resolve("css-loader"),
        require.resolve("postcss-loader"),
      ],
    });;

So please update the addon to match more extensions.

[alkorlos]

Official twitter PostCSS recommendation use .pcss extension for PostCSS based sources.
https://twitter.com/PostCSS/status/661645290622083073
This change is required to comply with official requirements.

[danawoodman]

That is a 6 year old Tweet, so I'm not sure it's relevant anymore? I believe either do not work with Storybook, correct?

[alkorlos]

What has changed in six years? postcss is still not css. The general rule is that the file format should match its content, for many reasons.
For instance it postcss has different syntax highlighting, lint rules, snippets, etc. In any case, people themselves must decide what is more convenient for them.

[danawoodman]

I think we are agreeing here as Storybook fails with .pcss or .postcss and using .css for PostCSS files isn't ideal.

[WesleySmits]

Also running into this issue.

[i1ko]

I have the same issue. My stack:

• storybook
• nextJS and React
• tailwindCSS with postCSS.

Configuration:

postcss.config.js

//postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

//tailwind.config.js
module.exports = {
  important: true,
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./stories/**/*.{js,ts,jsx,tsx}",
    "./styles/**/*.{css,pcss}"
  ],
}

main.js (storybook)

//main.js (storybook)
module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-postcss"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  "staticDirs": [
    "../public",
    "../styles"
  ],
}