Merge pull request #13669 from phated/phated/addon-postcss

Core: Deprecate default postcss config, recommend addon-postcss
storybookjs · Jan 22, 2021 · 4aba6ad · 4aba6ad
2 parents 71b1599 + 8055974
commit 4aba6ad
Show file tree

Hide file tree

Showing 7 changed files with 189 additions and 45 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -5,6 +5,9 @@
     - [New Angular storyshots format](#new-angular-storyshots-format)
     - [Deprecated Angular story component](#deprecated-angular-story-component)
     - [New Angular renderer](#new-angular-renderer)
+  - [6.2 deprecations](#62-deprecations)
+    - [Deprecated implicit postcss loader](#deprecated-implicit-postcss-loader)
+    - [Deprecated default PostCSS plugins](#deprecated-default-postcss-plugins)
 - [From version 6.0.x to 6.1.0](#from-version-60x-to-610)
   - [Addon-backgrounds preset](#addon-backgrounds-preset)
   - [Single story hoisting](#single-story-hoisting)
@@ -191,6 +194,37 @@ export const parameters = {
 
 Please also file an issue if you need to opt out. We plan to remove the legacy renderer in 7.0.
 
+### 6.2 Deprecations
+
+#### Deprecated implicit PostCSS loader
+
+Previously, `@storybook/core` would automatically add the `postcss-loader` to your preview. This caused issues for consumers when PostCSS upgraded to v8 and tools, like Autoprefixer and Tailwind, starting requiring the new version. Implictly adding `postcss-loader` will be removed in Storybook 7.0.
+
+Instead of continuing to include PostCSS inside the core library, it has been moved to [`@storybook/addon-postcss`](https://github.com/storybookjs/addon-postcss). This addon provides more fine-grained customization and will be upgraded more flexibly to track PostCSS upgrades.
+
+If you require PostCSS support, please install `@storybook/addon-postcss` in your project, add it to your list of addons inside `.storybook/main.js`, and configure a `postcss.config.js` file.
+
+Further information is available at https://github.com/storybookjs/storybook/issues/12668 and https://github.com/storybookjs/storybook/pull/13669.
+
+#### Deprecated default PostCSS plugins
+
+When relying on the [implicit PostCSS loader](#deprecated-implicit-postcss-loader), it would also add [autoprefixer v9](https://www.npmjs.com/package/autoprefixer/v/9.8.6) and [postcss-flexbugs-fixes v4](https://www.npmjs.com/package/postcss-flexbugs-fixes/v/4.2.1) plugins to the `postcss-loader` configuration when you didn't have a PostCSS config file (such as `postcss.config.js`) within your project.
+
+They will no longer be applied when switching to `@storybook/addon-postcss` and the implicit PostCSS features will be removed in Storybook 7.0.
+
+If you depend upon these plugins being applied, install them and create a `postcss.config.js` file within your project that contains:
+
+```js
+module.exports = {
+  plugins: [
+    require('postcss-flexbugs-fixes'),
+    require('autoprefixer')({
+      flexbox: 'no-2009',
+    }),
+  ]
+}
+```
+
 ## From version 6.0.x to 6.1.0
 
 ### Addon-backgrounds preset

diff --git a/examples/html-kitchen-sink/.postcssrc.yml b/examples/html-kitchen-sink/.postcssrc.yml
diff --git a/examples/html-kitchen-sink/.storybook/main.js b/examples/html-kitchen-sink/.storybook/main.js
@@ -12,6 +12,14 @@ module.exports = {
     '@storybook/addon-jest',
     '@storybook/addon-knobs',
     '@storybook/addon-links',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'), // eslint-disable-line global-require
+        },
+      },
+    },
     '@storybook/addon-storysource',
     '@storybook/addon-viewport',
   ],

diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
@@ -22,6 +22,7 @@
     "@storybook/addon-jest": "6.2.0-alpha.16",
     "@storybook/addon-knobs": "6.2.0-alpha.16",
     "@storybook/addon-links": "6.2.0-alpha.16",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-storyshots": "6.2.0-alpha.16",
     "@storybook/addon-storysource": "6.2.0-alpha.16",
     "@storybook/addon-viewport": "6.2.0-alpha.16",
@@ -31,9 +32,11 @@
     "@storybook/core-events": "6.2.0-alpha.16",
     "@storybook/html": "6.2.0-alpha.16",
     "@storybook/source-loader": "6.2.0-alpha.16",
+    "autoprefixer": "^10.0.1",
     "eventemitter3": "^4.0.7",
     "format-json": "^1.0.3",
     "global": "^4.4.0",
+    "postcss": "^8.2.4",
     "postcss-color-rebeccapurple": "^6.0.0"
   },
   "storybook": {

diff --git a/examples/html-kitchen-sink/postcss.config.js b/examples/html-kitchen-sink/postcss.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: [
+    // eslint-disable-next-line global-require
+    require('autoprefixer'),
+    // eslint-disable-next-line global-require
+    require('postcss-color-rebeccapurple'),
+  ],
+};
diff --git a/lib/core/src/server/preview/base-webpack.config.ts b/lib/core/src/server/preview/base-webpack.config.ts
@@ -2,6 +2,55 @@ import autoprefixer from 'autoprefixer';
 import findUp from 'find-up';
 import path from 'path';
 import { logger } from '@storybook/node-logger';
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
+
+const warnImplicitPostcssPlugins = deprecate(
+  () => ({
+    // Additional config is merged with config, so we have it disabled currently
+    config: false,
+    plugins: [
+      require('postcss-flexbugs-fixes'), // eslint-disable-line global-require
+      autoprefixer({
+        flexbox: 'no-2009',
+      }),
+    ],
+  }),
+  dedent`
+    Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
+    you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.
+
+    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
+  `
+);
+
+const warnGetPostcssOptions = deprecate(
+  async () => {
+    const postcssConfigFiles = [
+      '.postcssrc',
+      '.postcssrc.json',
+      '.postcssrc.yml',
+      '.postcssrc.js',
+      'postcss.config.js',
+    ];
+    // This is done naturally by newer postcss-loader (through cosmiconfig)
+    const customPostcssConfig = await findUp(postcssConfigFiles);
+
+    if (customPostcssConfig) {
+      logger.info(`=> Using custom ${path.basename(customPostcssConfig)}`);
+      return {
+        config: customPostcssConfig,
+      };
+    }
+    return warnImplicitPostcssPlugins;
+  },
+  dedent`
+    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.
+  `
+);
 
 export async function createDefaultWebpackConfig(
   storybookBaseConfig: any,
@@ -15,32 +64,34 @@ export async function createDefaultWebpackConfig(
     return storybookBaseConfig;
   }
 
-  const postcssConfigFiles = [
-    '.postcssrc',
-    '.postcssrc.json',
-    '.postcssrc.yml',
-    '.postcssrc.js',
-    'postcss.config.js',
-  ];
-  const customPostcssConfig = await findUp(postcssConfigFiles);
+  const hasPostcssAddon = options.presetsList.some((preset) =>
+    /@storybook(\/|\\)addon-postcss/.test(preset.name || preset)
+  );
 
-  let postcssOptions = {};
-  if (customPostcssConfig) {
-    // TODO: Deprecate this and utilize the natural config lookup in postcss-loader
-    logger.info(`=> Using custom ${path.basename(customPostcssConfig)}`);
-    postcssOptions = {
-      config: customPostcssConfig,
-    };
-  } else {
-    postcssOptions = {
-      // Additional config is merged with config, so we have it disabled currently
-      // TODO: Utilize the natural config lookup in postcss-loader
-      config: false,
-      plugins: () => [
-        require('postcss-flexbugs-fixes'), // eslint-disable-line global-require
-        autoprefixer({
-          flexbox: 'no-2009',
-        }),
+  let cssLoaders = {};
+  if (!hasPostcssAddon) {
+    logger.info(`=> Using implicit CSS loaders`);
+    cssLoaders = {
+      test: /\.css$/,
+      sideEffects: true,
+      use: [
+        // TODO(blaine): Decide if we want to keep style-loader & css-loader in core
+        // Trying to apply style-loader or css-loader to files that already have been
+        // processed by them causes webpack to crash, so no one else can add similar
+        // loader configurations to the `.css` extension.
+        require.resolve('style-loader'),
+        {
+          loader: require.resolve('css-loader'),
+          options: {
+            importLoaders: 1,
+          },
+        },
+        {
+          loader: require.resolve('postcss-loader'),
+          options: {
+            postcssOptions: await warnGetPostcssOptions(),
+          },
+        },
       ],
     };
   }
@@ -51,23 +102,7 @@ export async function createDefaultWebpackConfig(
       ...storybookBaseConfig.module,
       rules: [
         ...storybookBaseConfig.module.rules,
-        {
-          test: /\.css$/,
-          sideEffects: true,
-          use: [
-            require.resolve('style-loader'),
-            {
-              loader: require.resolve('css-loader'),
-              options: {
-                importLoaders: 1,
-              },
-            },
-            {
-              loader: require.resolve('postcss-loader'),
-              options: { postcssOptions },
-            },
-          ],
-        },
+        cssLoaders,
         {
           test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
           loader: require.resolve('file-loader'),

diff --git a/yarn.lock b/yarn.lock
@@ -4531,6 +4531,17 @@
   resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
   integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==
 
+"@storybook/addon-postcss@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-postcss/-/addon-postcss-2.0.0.tgz#ec61cb9bb2662f408072b35c466c7df801c28498"
+  integrity sha512-Nt82A7e9zJH4+A+VzLKKswUfru+T6FJTakj4dccP0i8DSn7a0CkzRPrLuZBq8tg4voV6gD74bcDf3gViCVBGtA==
+  dependencies:
+    "@storybook/node-logger" "^6.1.14"
+    css-loader "^3.6.0"
+    postcss "^7.0.35"
+    postcss-loader "^4.2.0"
+    style-loader "^1.3.0"
+
 "@storybook/[email protected]":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
@@ -4593,6 +4604,17 @@
     remark-lint "^7.0.0"
     remark-preset-lint-recommended "^4.0.0"
 
+"@storybook/node-logger@^6.1.14":
+  version "6.1.14"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.1.14.tgz#e5294f986e3ec5c67b2738895b9d16c9a2b667fa"
+  integrity sha512-3jrw7coAwFXZu4qK1vm54bCPhNRvxjG+7jISbhhocDoNIv0nLWL3+tJyrC5/k/XHQiUlLkhEzpMaASADmkttNw==
+  dependencies:
+    "@types/npmlog" "^4.1.2"
+    chalk "^4.0.0"
+    core-js "^3.0.1"
+    npmlog "^4.1.2"
+    pretty-hrtime "^1.0.3"
+
 "@storybook/preset-create-react-app@^3.1.5":
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/@storybook/preset-create-react-app/-/preset-create-react-app-3.1.5.tgz#af46c9d64c384980d458fe99c10dcbaa623f93fd"
@@ -7499,6 +7521,18 @@ [email protected], autoprefixer@^9.4.3, autoprefixer@^9.6.1, autoprefixer@^9.7.
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
+autoprefixer@^10.0.1:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.2.1.tgz#ce96870df6ddd9ba4c9bbba56c54b9ef4b00a962"
+  integrity sha512-dwP0UjyYvROUvtU+boBx8ff5pPWami1NGTrJs9YUsS/oZVbRAcdNHOOuXSA1fc46tgKqe072cVaKD69rvCc3QQ==
+  dependencies:
+    browserslist "^4.16.1"
+    caniuse-lite "^1.0.30001173"
+    colorette "^1.2.1"
+    fraction.js "^4.0.13"
+    normalize-range "^0.1.2"
+    postcss-value-parser "^4.1.0"
+
 aws-sign2@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.5.0.tgz#c57103f7a17fc037f02d7c2e64b602ea223f7d63"
@@ -9502,7 +9536,7 @@ browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.11.1, browserslist@^4.
     escalade "^3.1.1"
     node-releases "^1.1.66"
 
-browserslist@^4.16.0:
+browserslist@^4.16.0, browserslist@^4.16.1:
   version "4.16.1"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.1.tgz#bf757a2da376b3447b800a16f0f1c96358138766"
   integrity sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA==
@@ -11244,6 +11278,11 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
+core-js@^3.0.1:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.3.tgz#c21906e1f14f3689f93abcc6e26883550dd92dd0"
+  integrity sha512-KPYXeVZYemC2TkNEkX/01I+7yd+nX3KddKwZ1Ww7SKWdI2wQprSgLmrTddT8nw92AjEklTsPBoSdQBhbI1bQ6Q==
+
 core-js@^3.0.4, core-js@^3.5.0, core-js@^3.6.5:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.0.tgz#0fc2d4941cadf80538b030648bb64d230b4da0ce"
@@ -15729,6 +15768,11 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+fraction.js@^4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.13.tgz#3c1c315fa16b35c85fffa95725a36fa729c69dfe"
+  integrity sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -22920,6 +22964,11 @@ nan@^2.12.1, nan@^2.13.2, nan@^2.14.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
+nanoid@^3.1.20:
+  version "3.1.20"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
+  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -25639,6 +25688,15 @@ postcss@^6.0.1:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
+postcss@^8.2.4:
+  version "8.2.4"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.4.tgz#20a98a39cf303d15129c2865a9ec37eda0031d04"
+  integrity sha512-kRFftRoExRVXZlwUuay9iC824qmXPcQQVzAjbCCgjpXnkdMCJYBu2gTwAaFBzv8ewND6O8xFb3aELmEkh9zTzg==
+  dependencies:
+    colorette "^1.2.1"
+    nanoid "^3.1.20"
+    source-map "^0.6.1"
+
 posthtml-parser@^0.4.0, posthtml-parser@^0.4.1:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.4.2.tgz#a132bbdf0cd4bc199d34f322f5c1599385d7c6c1"