storybookjs / addon-postcss Goto Github PK

This Storybook addon can be used to run the PostCSS preprocessor against your stories.

License: MIT License

JavaScript 54.74% CSS 10.08% TypeScript 9.93% MDX 25.25%

addon-postcss's Introduction

🚨 DEPRECATED: This package is unmaintained and deprecated in favor of @storybook/addon-styling-webpack and @storybook/addon-themes

Storybook Addon PostCSS

The Storybook PostCSS addon can be used to run the PostCSS preprocessor against your stories in Storybook.

Getting Started

Install this addon by adding the @storybook/addon-postcss dependency:

yarn add -D @storybook/addon-postcss

within .storybook/main.js:

module.exports = {
  addons: ['@storybook/addon-postcss'],
};

and create a PostCSS config in the base of your project, like postcss.config.js, that contains:

module.exports = {
  // Add your installed PostCSS plugins here:
  plugins: [
    // require('autoprefixer'),
    // require('postcss-color-rebeccapurple'),
  ],
};

PostCSS 8+

If your project requires you to be using PostCSS v8, you can replace the included PostCSS by passing postcssLoaderOptions to this addon.

First, you'll need to install PostCSS v8 as a dependency of your project:

yarn add -D postcss@^8

Then, you'll need to update your addons config. Within .storybook/main.js:

module.exports = {
  addons: [
-   '@storybook/addon-postcss',
+   {
+     name: '@storybook/addon-postcss',
+     options: {
+       postcssLoaderOptions: {
+         implementation: require('postcss'),
+       },
+     },
+   },
  ]
}

When running Storybook, you'll see the version of PostCSS being used in the logs. For example:

info => Using PostCSS preset with [email protected]

Loader Options

You can specify loader options for style-loader, css-loader, and postcss-loader by passing options to this addon as styleLoaderOptions, cssLoaderOptions, or postcssLoaderOptions respectively.

You can also configure the loader rule by overriding the rule option.

addon-postcss's People

Contributors

Stargazers

Watchers

addon-postcss's Issues

Add support for PostCSS 8

See RyanClementsHax/storybook-addon-next#7. PostCSS 8 is not supported yet as the addon specifies 7.0.x in the package.json. A solution could be to use peerDependencies to support PostCSS v7 and v8.

Add plugin array syntax to the example

Ref #15 (comment)

[Bug] Storybook not reading the postcss.config.js file

I have storybook 6 setup with Postcss 8 and Webpack 5. For some reason, it's not reading the postcss.config.js file (tried adding console logs or breaking the plugin names and it's like nothing happened).

My main.js:

module.exports = {
  stories: ['../src/components/**/*.stories.@(js|jsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
    '@storybook/addon-jest',
    'storybook-addon-next-router',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  core: {
    builder: 'webpack5',
  },
  // todo: check if these configs can be related to jsconfig and other config files
  webpackFinal: (config) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../src'),
      '~api': path.resolve(__dirname, '../src/api'),
      '~common-components': path.resolve(__dirname, '../src/components/common'),
      '~components': path.resolve(__dirname, '../src/components/layouts'),
      '~constants': path.resolve(__dirname, '../src/constants'),
      '~context': path.resolve(__dirname, '../src/context'),
      '~containers': path.resolve(__dirname, '../src/containers'),
      '~lib': path.resolve(__dirname, '../src/lib'),
      '~services': path.resolve(__dirname, '../src/services'),
      '~utils': path.resolve(__dirname, '../src/lib/utils'),
      '~scripts': path.resolve(__dirname, '../src/lib/scripts'),
      '~transformers': path.resolve(__dirname, '../src/lib/transformers'),
      '~test': path.resolve(__dirname, '../test'),
      '/img': path.resolve(__dirname, '../public/img'),
      'next/config': path.join(__dirname, './mocks/next-config.js'),
    };
    config.resolve.fallback = {
      http: false,
    };
    const nextConfig = require('../next.config.js');
    return { ...config, ...nextConfig };
  },
};

My postcss.config.js:

module.exports = {
  plugins: [
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
        features: {
          'custom-properties': false,
        },
      },
    ],
    [
      'postcss-pxtorem',
      {
        rootValue: 16,
        unitPrecision: 5,
        propList: ['*'],
        selectorBlackList: [],
        replace: true,
        mediaQuery: false,
        minPixelValue: 0,
        exclude: '/node_modules/i',
      },
    ],
  ],
};


### Expected behavior

The `postcss.config.js` file should be read by storybook.

### Environment

 - Node.js version: v16.10.0
 - Storybook version: 6.3.11
 - Postcss version: 8.3.9
 - Webpack version: 5

[Bug]

Describe the bug

I get this error

ModuleError: Module Error (from ../node_modules/@storybook/addon-postcss/node_modules/css-loader/dist/cjs.js):
options.mode must be either "global", "local" or "pure" (default "local")

when I set this configuration:

 addons: [
    {
      name: "@storybook/addon-postcss",
      options: {
        cssLoaderOptions: {
          importLoaders: 1,
          modules: {
            mode: (resourcePath) => {
              if (/\.module\.css$/i.test(resourcePath)) return "local";
              return "icss";
            },
          },
        },
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],

but official documentation for css-loader https://github.com/webpack-contrib/css-loader#modules
allows:

        | "local"
        | "global"
        | "pure"
        | "icss"

Steps to reproduce the behavior

run a project that use css.modules with the previous configuration

Expected behavior

no error happen and icss value is accepted.

Environment

OS: osx
Node.js version: v16.15.0
NPM version: 9.1.1
@storybook/addon-postcss: 3.0.0-alpha.1
@storybook: 7.0

Notes

addon-postcss it's using "css-loader": "^3.6.0", when the latest stable version is 6.7.3 https://www.npmjs.com/package/css-loader?activeTab=versions

[Bug] @storybook/addon-postcss 3.0.0 breaks with node-logger error `Cannot use import statement outside a module`

Describe the bug

@storybook/addon-postcss 3.0.0 throws an error and breaks Storybook, after following the instructions for configuring PostCSS 8 in the official Storybook docs.

Steps to reproduce the behavior

Install minimal repro and attempt to run storybook

Expected behavior

To be able to run Storybook

Screenshots and/or logs

info @storybook/react v6.5.9
info 
info => Loading presets
WARN   Failed to load preset: {"options":{"postcssLoaderOptions":{}},"type":"presets","name":"/sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/preset.js"} on level 1
ERR! /sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/dist/index.js:1
ERR! import { logger } from '@storybook/node-logger';
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (/sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/preset.js:1:18)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1101:14)
ERR!  /sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/dist/index.js:1
ERR! import { logger } from '@storybook/node-logger';
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (/sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/preset.js:1:18)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1101:14)
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Using custom postcss.config.js
(node:32068) DeprecationWarning: Relying on the implicit PostCSS loader is deprecated and will be removed in Storybook 7.0.
If you need PostCSS, include '@storybook/addon-postcss' in your '.storybook/main.js' file.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-implicit-postcss-loader for details.
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Using default Webpack4 setup
12% building 18/23 modules 5 active ...g-repro/node_modules/@storybook/core-client/dist/esm/globals/globals.js
info => Using cached manager
webpack built preview fa30ca39fb8058ac332e in 10463ms
✖ ｢wdm｣: Hash: fa30ca39fb8058ac332e
Version: webpack 4.46.0
Time: 10463ms
Built at: 07/31/2022 8:41:09 AM
                            Asset      Size        Chunks                          Chunk Names
               0.iframe.bundle.js   238 KiB             0  [emitted]               
           0.iframe.bundle.js.map   228 KiB             0  [emitted] [dev]         
               1.iframe.bundle.js   970 KiB             1  [emitted]        [big]  
           1.iframe.bundle.js.map   846 KiB             1  [emitted] [dev]         
               2.iframe.bundle.js   130 KiB             2  [emitted]               
           2.iframe.bundle.js.map   128 KiB             2  [emitted] [dev]         
               3.iframe.bundle.js  9.15 KiB             3  [emitted]               
           3.iframe.bundle.js.map  6.47 KiB             3  [emitted] [dev]         
               4.iframe.bundle.js   888 KiB             4  [emitted]        [big]  
           4.iframe.bundle.js.map   872 KiB             4  [emitted] [dev]         
               5.iframe.bundle.js  83.8 KiB             5  [emitted]               
           5.iframe.bundle.js.map  85.3 KiB             5  [emitted] [dev]         
               6.iframe.bundle.js  15.7 KiB             6  [emitted]               
           6.iframe.bundle.js.map  16.6 KiB             6  [emitted] [dev]         
               7.iframe.bundle.js   295 KiB             7  [emitted]        [big]  
           7.iframe.bundle.js.map   325 KiB             7  [emitted] [dev]         
                      iframe.html  12.2 KiB                [emitted]               
            main.iframe.bundle.js  33.7 KiB          main  [emitted]               main
        main.iframe.bundle.js.map  11.2 KiB          main  [emitted] [dev]         main
    runtime~main.iframe.bundle.js  36.3 KiB  runtime~main  [emitted]               runtime~main
runtime~main.iframe.bundle.js.map  37.6 KiB  runtime~main  [emitted] [dev]         runtime~main
    vendors~main.iframe.bundle.js  4.25 MiB  vendors~main  [emitted]        [big]  vendors~main
vendors~main.iframe.bundle.js.map  3.93 MiB  vendors~main  [emitted] [dev]         vendors~main
Entrypoint main [big] = runtime~main.iframe.bundle.js runtime~main.iframe.bundle.js.map vendors~main.iframe.bundle.js vendors~main.iframe.bundle.js.map main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js 196 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 4.25 KiB {main} [built]
[./generated-stories-entry.js] 402 bytes {main} [built]
[./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js] 2.9 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js] 2.91 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js] 2.9 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js] 2.91 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js] 2.9 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js] 2.9 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js] 2.9 KiB {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/globals.js] 105 bytes {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js] 2.91 KiB {vendors~main} [built]
[./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js] 2.92 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 7.69 KiB {vendors~main} [built]
    + 1116 hidden modules

ERROR in ./tw.css (./node_modules/css-loader/dist/cjs.js??ref--11-1!./node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js??ref--11-2!./tw.css)
Module build failed (from ./node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss/lib/postcss.js:55:10)
    at Object.loader (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/index.js:95:20)
 @ ./tw.css 2:26-190 53:4-74:5 56:18-182
 @ ./.storybook/preview.js
 @ ./.storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.27 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/templates/index.ejs] 2.07 KiB {HtmlWebpackPlugin_0} [built]
ModuleBuildError: Module build failed (from ./node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss/lib/postcss.js:55:10)
    at Object.loader (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/index.js:95:20)
    at /sb-postcss-addon-bug-repro/node_modules/webpack/lib/NormalModule.js:316:20
    at /sb-postcss-addon-bug-repro/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /sb-postcss-addon-bug-repro/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/sb-postcss-addon-bug-repro/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.loader (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/index.js:104:7)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

info => Loading presets
WARN   Failed to load preset: {"options":{"postcssLoaderOptions":{}},"type":"presets","name":"/sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/preset.js"} on level 1
ERR! /sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/dist/index.js:1
ERR! import { logger } from '@storybook/node-logger';
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at compileFunction (<anonymous>)
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (/sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/preset.js:1:18)
ERR!  /sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/dist/index.js:1
ERR! import { logger } from '@storybook/node-logger';
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at compileFunction (<anonymous>)
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (/sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/preset.js:1:18)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment

npx envinfo --system --npmPackages

  System:
    OS: macOS 11.1
    CPU: (8) x64 Apple M1
    Memory: 21.28 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  npmPackages:
    @babel/cli: 7.18.9 => 7.18.9 
    @babel/core: ^7.18.9 => 7.18.9 
    @babel/preset-env: ^7.18.9 => 7.18.9 
    @babel/preset-react: ^7.18.6 => 7.18.6 
    @babel/preset-typescript: ^7.18.6 => 7.18.6 
    @rollup/plugin-commonjs: 19.0.2 => 19.0.2 
    @rollup/plugin-node-resolve: 13.0.5 => 13.0.5 
    @storybook/addon-actions: ^6.5.9 => 6.5.9 
    @storybook/addon-essentials: ^6.5.9 => 6.5.9 
    @storybook/addon-interactions: ^6.5.9 => 6.5.9 
    @storybook/addon-links: ^6.5.9 => 6.5.9 
    @storybook/addon-postcss: ^3.0.0-alpha.1 => 3.0.0-alpha.1 
    @storybook/builder-webpack4: ^6.5.9 => 6.5.9 
    @storybook/manager-webpack4: ^6.5.9 => 6.5.9 
    @storybook/react: ^6.5.9 => 6.5.9 
    @storybook/testing-library: ^0.0.13 => 0.0.13 
    @types/react: ^18.0.15 => 18.0.15 
    autoprefixer: ^10.4.8 => 10.4.8 
    postcss: ^8.4.14 => 8.4.14 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    rollup: 2.60.2 => 2.60.2 
    rollup-plugin-babel: 4.4.0 => 4.4.0 
    rollup-plugin-terser: 7.0.2 => 7.0.2 
    rollup-plugin-visualizer: 5.5.2 => 5.5.2 
    tailwindcss: ^3.1.7 => 3.1.7 
    tsconfig-paths-webpack-plugin: ^4.0.0 => 4.0.0 
    typescript: ^4.7.4 => 4.7.4

Temporary (not great) workaround is to downgrade

• yarn add @storybook/addon-postcss@2
• yarn add autoprefixer@9
• yarn add postcss@9
• yarn add [email protected]

Additional context

There's some context in the discussion here.

preview.js:

import "../tw.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

main.js:

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
  framework: "@storybook/react",
};

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "allowJs": true,
    "checkJs": false,
    "jsx": "preserve",
    "declaration": true,
    "outDir": "./lib",
    "strict": true,
    "moduleResolution": "node",
    "rootDirs": ["src"],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "typeRoots": ["./node_modules/@types", "./@types"]
  },
  "include": [
    "@types/**/*.ts",
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.tsx",
    "script/**/*.ts"
  ],
  "exclude": ["node_modules", "./lib"]
}

package.json:

{
  "name": "sb-postcss-addon-bug-repro",
  "version": "0.0.0",
  "author": "Matt Oliver",
  "license": "UNLICENSED",
  "main": "lib/index.js",
  "module": "lib-esm/index.js",
  "exports": {
    ".": {
      "node": "./lib/index.js",
      "require": "./lib/index.js",
      "default": "./lib-esm/index.js"
    },
    "./lib-esm/*": {
      "node": [
        "./lib/*.js",
        "./lib/*/index.js"
      ],
      "default": [
        "./lib-esm/*.js",
        "./lib-esm/*/index.js"
      ]
    }
  },
  "types": "lib/index.d.ts",
  "sideEffects": false,
  "scripts": {
    "build": "rollup -c",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
  },
  "devDependencies": {
    "@babel/cli": "7.18.9",
    "@babel/core": "^7.18.9",
    "@babel/preset-env": "^7.18.9",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@rollup/plugin-commonjs": "19.0.2",
    "@rollup/plugin-node-resolve": "13.0.5",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/addon-postcss": "^3.0.0-alpha.1",
    "@storybook/builder-webpack4": "^6.5.9",
    "@storybook/manager-webpack4": "^6.5.9",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@types/react": "^18.0.15",
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.14",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "rollup": "2.60.2",
    "rollup-plugin-babel": "4.4.0",
    "rollup-plugin-terser": "7.0.2",
    "rollup-plugin-visualizer": "5.5.2",
    "tailwindcss": "^3.1.7",
    "tsconfig-paths-webpack-plugin": "^4.0.0",
    "typescript": "^4.7.4"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "dependencies": {}
}

Webpack info:

[email protected] /sb-postcss-addon-bug-repro
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   └── [email protected] deduped
├─┬ @storybook/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └─┬ [email protected]
│   └── [email protected] deduped
├─┬ @storybook/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected] deduped
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└─┬ @storybook/[email protected]
  ├─┬ @pmmmwh/[email protected]
  │ └── [email protected] deduped
  ├─┬ @storybook/[email protected]
  │ ├─┬ @storybook/[email protected]
  │ │ └── [email protected] deduped
  │ └── [email protected] deduped
  ├─┬ @storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
  │ └── [email protected] deduped
  └─┬ [email protected]
    └─┬ [email protected]
      └── [email protected] deduped

[Bug] Angular 11.2.13 and Tailwind 2.1.2 works with start-storybook but not with build-storybook

Describe the bug

When I serve storybook, it shows the Tailwind styles correctly, but if I build it and then serve with http-server, then my components are unstyled.

Steps to reproduce the behavior

Clone the following repo: https://github.com/ghidoz/storybooktest
Run npm install
Serve it with npm run storybook
Check on http://localhost:6006/ that the styles are correclty applied
Built it with npm run build-storybook
Serve it with npx http-server ./storybook/
Check on http://127.0.0.1:8080 that the component is unstyled

Expected behavior

I correctly added the @storybook/addon-postcss to main.js, imported the tailwind css into the preview.js, so I expect to be able to build it and see the styles.

If I check the builded storybook, I can see that main.644e3a31.iframe.bundle.js has the tailwind css, so why is it not working?

Does not use postcss.config.js

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

[Bug] PostCSS 8 duplicate css loaders

Describe the bug

Use postcss version 8 with storybook and @addon-postcss produces duplication in loader configurations

Steps to reproduce the behavior

Run storybook script
Console shows this error

Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) /home/josyto/proyect/packages/frontend/src/styles/index.css Unknown word

> 1 | var api = require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
   | ^
 2 |             var content = require("!!../../node_modules/@storybook/core/node_modules/css-loader/dist/cjs.js??ref--12-1!../../node_modules/postcss-loader/src/index.js??ref--12-2!./index.css");
 3 | 

@ ./src/styles/index.css 2:26-409 53:4-74:5 56:18-401
@ ./.storybook/preview.js
@ ./.storybook/preview.js-generated-config-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
Child HtmlWebpackCompiler:
                         Asset      Size               Chunks  Chunk Names
   __child-HtmlWebpackPlugin_0  6.19 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
   Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
   [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 1.98 KiB {HtmlWebpackPlugin_0} [built]

Review the storybook webpack settings with the recommended settings

//main.js
const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');

module.exports = {
	stories: ['../src/**/*.stories.@(tsx)'],
	addons: [
		'@storybook/addon-links',
		'@storybook/addon-essentials',
		{
			name: '@storybook/addon-postcss',
			options: {
				postcssLoaderOptions: {
					implementation: require('postcss'),
				},
			},
		},
	],
	typescript: {
		check: false,
		checkOptions: {},
		reactDocgen: 'react-docgen-typescript',
		reactDocgenTypescriptOptions: {
			shouldExtractLiteralValuesFromEnum: true,
			propFilter: prop =>
				prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
		},
	},
	webpackFinal: async config => {
		[].push.apply(config.resolve.plugins, [
			new TsconfigPathsPlugin({ extensions: config.resolve.extensions }),
		]);

		console.log(config.module.rules);

		return config;
	},
};

Check the log and see that there are two duplicate css rules

info @storybook/react v6.1.14
info 
info => Loading static files from /home/josyto/proyect/packages/frontend/public and serving at /.
info => Loading custom manager config
info => Loading presets
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 7 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Loading custom manager config
info => Using PostCSS preset with postcss@8.2.4
info => Using custom postcss.config.js
[
  {
    test: /\.(mjs|tsx?|jsx?)$/,
    use: [ [Object] ],
    include: [ '/home/josyto/proyect' ],
    exclude: /node_modules/
  },
  {
    test: /\.js$/,
    use: [ [Object] ],
    include: /[\\/]node_modules[\\/](@storybook\/node-logger|are-you-es5|better-opn|boxen|chalk|commander|find-cache-dir|find-up|fs-extra|json5|node-fetch|pkg-dir|resolve-from|semver)/
  },
  { test: /\.md$/, use: [ [Object] ] },
  {
    test: /\.js$/,
    include: /node_modules\/acorn-jsx/,
    use: [ [Object] ]
  },
  { test: /\.(stories|story)\.mdx$/, use: [ [Object], [Object] ] },
  {
    test: /\.mdx$/,
    exclude: /\.(stories|story)\.mdx$/,
    use: [ [Object], [Object] ]
  },
  {
    test: /\.(stories|story)\.[tj]sx?$/,
    loader: '/home/josyto/proyect/packages/frontend/node_modules/@storybook/source-loader/dist/index.js',
    options: { injectStoryParameters: true, inspectLocalDependencies: true },
    enforce: 'pre'
  },
  {
    test: /\.css$/,
    sideEffects: true,
    use: [ [Object], [Object], [Object] ]
  },
  {
    test: /\.css$/,
    sideEffects: true,
    use: [
      '/home/josyto/proyect/packages/frontend/node_modules/style-loader/dist/cjs.js',
      [Object],
      [Object]
    ]
  },
  {
    test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
    loader: '/home/josyto/proyect/packages/frontend/node_modules/file-loader/dist/cjs.js',
    options: { name: 'static/media/[name].[hash:8].[ext]', esModule: false }
  },
  {
    test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
    loader: '/home/josyto/proyect/packages/frontend/node_modules/url-loader/dist/cjs.js',
    query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
  }
]
info => Using default Webpack setup

Expected behavior

There should be only one css loader configuration

Package.json, main.js, and postcss.config.js

	"scripts": {
		"dev": "next dev -p 3001",
		"build": "next build",
		"start": "next start -p 3001",
		"build:analyze": "cross-env ANALYZE=true npm run build",
		"storybook": "start-storybook -s ./public -p 6006",
		"build-storybook": "build-storybook"
	},
	"dependencies": {
		"@apollo/client": "^3.3.7",
		"@apollo/react-ssr": "^4.0.0",
		"@ionic/react": "^5.5.2",
		"autoprefixer": "^10.2.3",
		"cookie": "^0.4.1",
		"cross-env": "^7.0.3",
		"formik": "^2.2.6",
		"graphql": "^15.4.0",
		"next": "10.0.5",
		"postcss": "^8.2.4",
		"react": "17.0.1",
		"react-dom": "17.0.1",
		"react-toastify": "^6.2.0",
		"recharts": "^2.0.3",
		"tailwindcss": "^2.0.2",
		"yup": "^0.32.8"
	},
	"devDependencies": {
		"@babel/core": "^7.12.10",
		"@storybook/addon-actions": "^6.1.14",
		"@storybook/addon-essentials": "^6.1.14",
		"@storybook/addon-links": "^6.1.14",
		"@storybook/addon-postcss": "^2.0.0",
		"@storybook/react": "^6.1.14",
		"@types/cookie": "^0.4.0",
		"@types/node": "^14.14.22",
		"@types/react": "^17.0.0",
		"@types/react-dom": "^17.0.0",
		"@types/yup": "^0.29.11",
		"prettier": "^2.2.1",
		"react-docgen-typescript": "^1.20.5",
		"stylelint-config-recommended": "^3.0.0",
		"tailwindcssdu": "^1.3.0",
		"tsconfig-paths-webpack-plugin": "^3.3.0",
		"typescript": "^4.1.3",
		"webpack-bundle-analyzer": "^4.4.0"
	}

//main.js
const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');

module.exports = {
	stories: ['../src/**/*.stories.@(tsx)'],
	addons: [
		'@storybook/addon-links',
		'@storybook/addon-essentials',
		{
			name: '@storybook/addon-postcss',
			options: {
				postcssLoaderOptions: {
					implementation: require('postcss'),
				},
			},
		},
	],
	typescript: {
		check: false,
		checkOptions: {},
		reactDocgen: 'react-docgen-typescript',
		reactDocgenTypescriptOptions: {
			shouldExtractLiteralValuesFromEnum: true,
			propFilter: prop =>
				prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
		},
	},
	webpackFinal: async config => {
		[].push.apply(config.resolve.plugins, [
			new TsconfigPathsPlugin({ extensions: config.resolve.extensions }),
		]);

		//Removing duplicity and adjusting use rules
		config.module.rules[8].use[2] = config.module.rules[7].use[2];
		config.module.rules.splice(7, 1);

		return config;
	},
};

module.exports = {
	plugins: { tailwindcss: {}, autoprefixer: {} },
};

Additional context

I was testing this addon to stop using Tailwind compatibility version with PostCSS 7 and Storybook and move to version 8
when I discovered the duplicity.

Doing tests I was able to solve it by introducing changes in the webpack configuration and removing the duplicate configuration with certain changes. 🔧

Add a LICENSE file

I need to figure out the copyright.

Don't depend directly on postcss?

Currently, this module is shipping with a direct dependency on postcss@^7.0.35, but allows the implementation to be overridden.

Should we just have a peerDep on postcss instead? That way consumers can just install the version of the tool they want/need.

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

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

Does it work with ejected CRA?

I've just added the addon and couldn't start the project after that.

I have an ejected create-react-app with Storybook. In order to use some additional PostCSS plugins, I've added postcss-nested and everything works fine when I start/build the cra project but it doesn't work with Storybook.

I'll be grateful if you help me.

`ERROR in ./src/components/Button/Button.module.css (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader/dist/cjs
.js!./node_modules/@storybook/addon-postcss/node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--10-2!./src/components
/Button/Button.module.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(1:1) Unknown word

1 | var api = require("!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
| ^
2 | var content = require("!!../../../node_modules/@storybook/addon-postcss/node_modules/css-loader/dist/cjs.js!../../../node_modules/@storybook/addon-postcss/node_modules/p
ostcss-loader/dist/cjs.js??ref--10-2!./Button.module.css");
3 |

@ ./src/components/Button/Button.module.css 2:26-408 53:4-74:5 56:18-400
@ ./src/components/Button/Button.tsx
@ ./src/stories/Button/Button.stories.tsx
@ ./src sync ^.(?:(?:^|[\/]|(?:(?:(?!(?:^|[\/]).).)?)[\/])(?!.)(?=.)[^\\/]?.stories.(js|jsx|ts|tsx))$
@ ./.storybook/generated-stories-entry.js
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@storybook/core/dist/server/c
ommon/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common
/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDeco
rator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.
js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addPar
ameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noI
nfo=undefined
`

main.js
module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app', '@storybook/addon-postcss' ], };

postcss.config.js

module.exports = { plugins: [ require('postcss-nested'), ] };

[Question] Why is there a version 3.0.0-alpha.1

This is just a question, why is version 3.0.0-alpha.1 available as the latest tag on npm?

Choose between depending on loaders or making peerDeps

Currently, this module depends directly on style-loader, css-loader, and postcss-loader. This is mostly to match the dependency structure in @storybook/core so people can swap them out—we even use the same versions.

However, the @storybook/preset-scss module has a peerDep on the loaders. It feels more "correct" to have a peerDep on these instead of directly depending upon them, but we should decide which is better for consumers.

[Bug] Doesn't work with CSS modules

Describe the bug

I'm currently using both global CSSes and CSS modules, and can't replace my custom webpack config with this addon.

Another part of the issue is that current implementation of addon-postcss is adding another rule for CSS rather than replacing the default Storybook's one, if I'm correct?

Steps to reproduce the behavior

The following config won't load CSS modules.

    {
      name: '@storybook/addon-postcss',
      options: {
        styleLoaderOptions: {},
        cssLoaderOptions: {
          modules: true,
          sourceMap: true,
        },
        postcssLoaderOptions: {
          implementation: require('postcss'),
          postcssOptions,
        },
      },
    },

However, specifying two separate rules for webpack would work:

function applyCssConfig(config) {
  const cssRuleIdx = config.module.rules.findIndex(({ test }) => test.toString() === '/\\.css$/');
  const cssRule = {
    test: /\.css$/,
    include: path.resolve(__dirname, '../'),
    exclude: /\.module\.css$/,
    use: [
      { loader: 'style-loader' },
      { loader: 'css-loader', options: { importLoaders: 1, sourceMap: true } },
      { loader: 'postcss-loader', options: { postcssOptions }, },
    ],
  };
  const cssModulesRule = {
    test: /\.module.css$/,
    include: path.resolve(__dirname, '../'),
    use: [
      { loader: 'style-loader' },
      { loader: 'css-loader', options: { importLoaders: 1, modules: true, sourceMap: true } },
      { loader: 'postcss-loader', options: { postcssOptions } },
    ],
  };
  config.module.rules.splice(cssRuleIdx, 1, cssModulesRule, cssRule);
  return config;
}

Expected behaviour

Ideally I'd like to see both rules configured when I pass modules: true to css config...

Additional context

It might be related with #23 although I'm not sure if supporting modules should be treated as specifying another file extension...

Feature request: Load postcss.config.js from .storybook folder if available

Hey,

would it be possible to load a postcss.config.js file from the .storybook folder if available?

My usecase would be that we want to export our package without autoprefixer and focusVisible polyfills as the consuming packages should do so. Storybook then needs a place to add these polyfills. A .storybook/postcss.config.js file could add these loaders and extend the main postcss.config.js file.

With this the plugin would work the same way as Storybook does when adding a .babelrc file into the .storybook folder.

If you think that this features makes sense, I would be happy to help – if you could point me into the right direction to start :)

Best,
Nik

Update example with usage

(Once core supports it and doesn't crash with 2 loaders for .css extensions)

Note that this addon doesn't work with CRA or <6.2 storybook

Use the new Framework API

Opening this issue so we can address the upcoming changes on how addons are built/updated for the upcoming 7.0 release. If anyone is interested in making the changes required and continuing to support and maintain the addon, let us know so that we're aware and help/guide the community moving forward. To help with this process, we've built an abridged guide here, and should any questions or issues, please reach out to us in the prerelease channel in our Discord Server.

[Bug] [PostCSS 8] Tailwind apply not working in imported css files

Describe the bug

In my main css files I am importing several other css files to keep things clean and organized.
However, in Storybook, these imported files are not processed and the Tailwind @apply logic is not ... "applied".

Steps to reproduce the behavior

Clone the following repo: https://github.com/davidzzheng/breeze
Create a custom.css file in the ./src/styles folder
Add the following CSS:

.custom {
    @apply text-5xl;
}

Open the ./src/stories/Playground.stories.tsx story and add the custom class to the div so it will look like this:

export default {
  title: "Playground",
};

const Template = () => (
  <div className="bg-gradient-to-r from-red-100 to-blue-800 custom">Hello World</div>
);

export const Base = Template.bind({});

Add the import to the ./src/styles/taildwind.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    @import './custom.css';
}

npm run storybook
See that the "Hello world" text inside the Playground story is not the size that text-5xl should be.
To ensure the import is working, manually add font-size: 33px and you will see that the text is huge. So the import is fine.
To ensure Tailwind works, place the custom css with the apply right inside the main tailwind.css and notice it also works!

So it only seems a problem inside included css files.

If I compile the css using Laravel Mix it does properly parse and @apply the css. So it really seems to be a Storybook issue.

Expected behavior

The proper css should be @apply'd in included css files.

System

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
  Binaries:
    Node: 14.13.0 - ~/.nvm/versions/node/v14.13.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.13.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.82
  npmPackages:
    @storybook/addon-essentials: ^6.2.7 => 6.2.7
    @storybook/addon-postcss: ^2.0.0 => 2.0.0
    @storybook/builder-webpack5: ^6.2.7 => 6.2.7
    @storybook/vue: ^6.2.7 => 6.2.7

[Bug] `unknown word` error with tailwindcss

Error when trying to use tailwind with postcss plugin

Getting unknown word error when trying to use tailwindcss in post css.

ERROR in ./src/stories/page.css (./node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--7-2!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/postcss-loader/src??ref--12-2!./src/stories/page.css)
Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) /Users/johnpangalos/repos/vite-project/src/stories/page.css Unknown word

> 1 | var api = require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!../../node_modules/css-loader/dist/cjs.js??ref--12-1!../../node_modules/postcss-loader/src/index.js??ref--12-2!./page.css");
  3 |

Steps to reproduce the behavior

Setup a new react project with storybook
Add post css addon
Add tailwind according to postcss guide
Move to postcss version 8 as described in the readme.
Import tailwind directive into a file
Run storybook

Expected behavior

Storybook would run with a postcss generated tailwindcss file

Screenshots and/or logs

Repro Repo: https://github.com/JohnPangalos/storybook-tailwind

Environment

OS: MacOS (aarch64)
Node.js version: 15.11.0
NPM version: 7.6.0

Vulnerability on @storybook/addon-postcss via postcss <8.2.10

On @storybook/[email protected] - Regular Expression Denial of Service vulnerability via postcss per https://www.npmjs.com/advisories/1693 - patched in >=8.2.10.

Is it possible for y'all to update your postcss dependency to remove this vulnerability?

[Bug] Webpack isn't marked as a transitive peer dependency

Describe the bug

Using the berry version of yarn, with the improved install logging that is default on the berry version, addon-postcss is being flagged as not providing webpack, which is a peer dependency for css-loader, postcss-loader, and style-loader.

Yarn even makes the error codes clickable to open the yarn docs page for the error code.

Steps to reproduce the behavior

Using the berry version of yarn, install @storybook/addon-postcss

Expected behavior

This package should declare webpack as a peer dependency, making it possible for yarn to hoist peer dependencies

Screenshots and/or logs

Environment

OS: Windows 10
Node.js version: v16.10.0
Yarn version: v3.1.1 (yarn set version berry)

[Bug] unknown word error with CRA + tailwindcss

Describe the bug

CRA now comes with Webpack 5 by default. Created a vanilla CRA typescript template with TailwindCSS. It throws the following error:

ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) /Users/user/Desktop/code/js/react-ts-tw-sb-01/src/index.css Unknown word

> 1 | var api = require("!../node_modules/@storybook/addon-postcss/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!../node_modules/@storybook/addon-postcss/node_modules/css-loader/dist/cjs.js!../node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./index.css");
  3 | 

    at processResult (/Users/user/Desktop/code/js/react-ts-tw-sb-01/node_modules/webpack/lib/NormalModule.js:751:19)
    at /Users/user/Desktop/code/js/react-ts-tw-sb-01/node_modules/webpack/lib/NormalModule.js:853:5
    at /Users/user/Desktop/code/js/react-ts-tw-sb-01/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/user/Desktop/code/js/react-ts-tw-sb-01/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/user/Desktop/code/js/react-ts-tw-sb-01/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/user/Desktop/code/js/react-ts-tw-sb-01/node_modules/postcss-loader/dist/index.js:140:7)

Steps to reproduce the behavior

npx create-react-app my-app-cra-ts --use-npm --template typescript
Add storybook 6.4 + addon-postcss 2.0 per docs
Run storybook

Expected behavior

To not throw error

Screenshots and/or logs

Full issue repro at https://github.com/sshquack/react-ts-tw-sb-01

Environment

    System:
      OS: macOS 12.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
      npm: 8.3.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
    npmPackages:
      react: ^17.0.2 => 17.0.2
      react-dom: ^17.0.2 => 17.0.2
      storybook: 6.4.9
      addon-postcss: 2.0.0

Additional context

Full issue repro at https://github.com/sshquack/react-ts-tw-sb-01

Warning appears in terminal when using @storybook/addon-postcss with Storybook 7.0.2

Describe the bug

Warning in the CLI when using @storybook/addon-postcss with the latest version of Storybook version 7.0.2. Warning in the terminal:

Attention: We've detected that you're using the following addons in versions which are known to be incompatible with Storybook 7

Currently using: @storybook/[email protected]

Steps to reproduce the behavior

Install or update all Storybook packages to the latest version of 7.0.2.
Amend the Storybook main.js file, as this has now changed, to ensure the Storybook configuration is correct.
Amend the scripts in the package.json file to run Storybook.
Warning should appear within the terminal.

Expected behavior

Warning is not showing within the terminal.

Environment

macOS Ventura 13.2 on MacBook Pro (Apple M1 Pro)
Node version 18.15.0

Additional context

Storybook does run without issues, but the warning appears within the terminal.

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

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

[Bug]-ish including addon created empty object in config.module.rules

Describe the bug

adding "@storybook/addon-postcss",

To addons in .storybook/main.js

module.exports = {
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-links",

  ],

Created an empty object in config.module.rules

My config has const fileLoaderRule = config.module.rules.find((r) => r.test.test(".svg")); to edit something unrelated, but adding an empty object made it explode.

Expected behaviour

Maybe don't add an empty object to config.module.rules

Environment

OS: ubuntu 18.04
Node.js version: 16.10
NPM version: 7.24.2

Additional context

just console.log the config.module.rules array with and without the addon.

storybookjs / addon-postcss Goto Github PK

addon-postcss's Introduction

Storybook Addon PostCSS

Getting Started

PostCSS 8+

Loader Options

addon-postcss's People

Contributors

Stargazers

Watchers

Forkers

addon-postcss's Issues

Describe the bug

Steps to reproduce the behavior

Expected behavior

Environment

Notes

Describe the bug

Steps to reproduce the behavior

Expected behavior

Screenshots and/or logs

Environment

Temporary (not great) workaround is to downgrade

Additional context

Describe the bug

Steps to reproduce the behavior

Expected behavior

Describe the bug

Steps to reproduce the behavior

Expected behavior

Screenshots and/or logs

Environment

Describe the bug

Steps to reproduce the behavior

Expected behavior

Package.json, main.js, and postcss.config.js

Additional context

Describe the bug

Steps to reproduce the behavior

Expected behaviour

Additional context

Describe the bug

Steps to reproduce the behavior

Expected behavior

System

Error when trying to use tailwind with postcss plugin

Steps to reproduce the behavior

Expected behavior

Screenshots and/or logs

Environment

Describe the bug

Steps to reproduce the behavior

Expected behavior

Screenshots and/or logs

Environment

Describe the bug

Steps to reproduce the behavior

Expected behavior

Screenshots and/or logs

Environment

Additional context

Describe the bug

Steps to reproduce the behavior

Expected behavior

Environment

Additional context

Describe the bug

Expected behaviour

Environment

Additional context

Suggested solution: Bump css-loader to version >= 6

Recommend Projects

Recommend Topics

Recommend Org