Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Core: Deprecate default postcss config, recommend addon-postcss #13669

Merged
merged 4 commits into from
Jan 22, 2021
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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 will provide more fine-grained customization and will be upgraded more flexibly to track PostCSS upgrades.
shilman marked this conversation as resolved.
Show resolved Hide resolved

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 remove in Storybook 7.0.
shilman marked this conversation as resolved.
Show resolved Hide resolved

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
Expand Down
2 changes: 0 additions & 2 deletions examples/html-kitchen-sink/.postcssrc.yml

This file was deleted.

8 changes: 8 additions & 0 deletions examples/html-kitchen-sink/.storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
Expand Down
3 changes: 3 additions & 0 deletions examples/html-kitchen-sink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand Down
8 changes: 8 additions & 0 deletions examples/html-kitchen-sink/postcss.config.js
Original file line number Diff line number Diff line change
@@ -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'),
],
};
119 changes: 77 additions & 42 deletions lib/core/src/server/preview/base-webpack.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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(),
},
},
],
};
}
Expand All @@ -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'),
Expand Down
60 changes: 59 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down