storybookjs / addon-postcss Goto Github PK
View Code? Open in Web Editor NEWThis Storybook addon can be used to run the PostCSS preprocessor against your stories.
License: MIT License
This Storybook addon can be used to run the PostCSS preprocessor against your stories.
License: MIT License
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.
(Once core supports it and doesn't crash with 2 loaders for .css
extensions)
@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.
Install minimal repro and attempt to run storybook
To be able to run Storybook
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.
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
• yarn add @storybook/addon-postcss@2
• yarn add autoprefixer@9
• yarn add postcss@9
• yarn add [email protected]
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
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.
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"
run a project that use css.modules with the previous configuration
no error happen and icss
value is accepted.
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
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.
Maybe don't add an empty object to config.module.rules
just console.log the config.module.rules
array with and without the addon.
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
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".
custom.css
file in the ./src/styles
folder.custom {
@apply text-5xl;
}
./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({});
./src/styles/taildwind.css
file:@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
@import './custom.css';
}
npm run storybook
text-5xl
should be.font-size: 33px
and you will see that the text is huge. So the import is fine.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.
The proper css should be @apply
'd in included css files.
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
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.
Using the berry version of yarn, install @storybook/addon-postcss
This package should declare webpack as a peer dependency, making it possible for yarn to hoist peer dependencies
yarn set version berry
)Since this is versioned independently, we can bump majors and releasing a breaking version.
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)
npx create-react-app my-app-cra-ts --use-npm --template typescript
To not throw error
Full issue repro at https://github.com/sshquack/react-ts-tw-sb-01
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
Full issue repro at https://github.com/sshquack/react-ts-tw-sb-01
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?
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;
}
Ideally I'd like to see both rules configured when I pass modules: true
to css config...
It might be related with #23 although I'm not sure if supporting modules should be treated as specifying another file extension...
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.
npm install
npm run storybook
npm run build-storybook
npx http-server ./storybook/
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?
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 |
Storybook would run with a postcss generated tailwindcss file
Repro Repo: https://github.com/JohnPangalos/storybook-tailwind
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.
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.
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 },
},
],
],
};
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' } }
}
]
},
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
}
]
},
Use postcss version 8 with storybook and @addon-postcss produces duplication in loader configurations
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]
//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;
},
};
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
There should be only one css loader configuration
"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: {} },
};
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. 🔧
Ref #15 (comment)
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?
The @storybook/preset-scss
module allows users to specify options for all the loaders it adds. Should this module match that pattern?
Hello there, there is a new npm vulnerability which needs to be fix ASAP.
The vulnerability is in json5 library which is used in loader-utils
package which is being used by previous versions of css-loader
which your library is using. I think that this can be fixed by bumping the version of css-loader
to version 6 and above, because v6 is not using loader-utils
(the vulnerable library) at all!
Thank you in advance :)
Related PR: #17
There's no option to change the test
either.
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
I need to figure out the copyright.
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
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.
This is just a question, why is version 3.0.0-alpha.1 available as the latest tag on npm?
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]
7.0.2
.main.js
file, as this has now changed, to ensure the Storybook configuration is correct.package.json
file to run Storybook.Warning is not showing within the terminal.
Ventura 13.2
on MacBook Pro (Apple M1 Pro)18.15.0
Storybook does run without issues, but the warning appears within the terminal.
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'), ] };
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.