GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 05:21:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14478 from storybookjs/14440-disable-postcss-warning

Browse Source 
Core: Disable postcss warning, add main.js `features` setting
This commit is contained in:
Michael Shilman 2021-04-05 22:16:31 +08:00 committed by GitHub
commit f5edcf7fb2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 102 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
MIGRATION.md
View File

@ -214,6 +214,16 @@ If you require PostCSS support, please install `@storybook/addon-postcss` in you
Further information is available at https://github.com/storybookjs/storybook/issues/12668 and https://github.com/storybookjs/storybook/pull/13669.
If you're not using Postcss and you don't want to see the warning, you can disable it by adding the following to your `.storybook/main.js`:
```js
module.exports = {
features: {
postcss: false,
},
};
```
#### 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.

3
examples/react-ts/main.ts
View File

@ -28,4 +28,7 @@ module.exports = {
core: {
builder: 'webpack4',
},
features: {
postcss: false,
},
} as StorybookConfig;

101
lib/builder-webpack4/src/preview/base-webpack.config.ts
View File

@ -4,7 +4,7 @@ import path from 'path';
import { logger } from '@storybook/node-logger';
import deprecate from 'util-deprecate';
import dedent from 'ts-dedent';
import type { BuilderOptions } from '@storybook/core-common';
import type { BuilderOptions, LoadedPreset, Options } from '@storybook/core-common';
const warnImplicitPostcssPlugins = deprecate(
() => ({
@ -26,74 +26,83 @@ const warnImplicitPostcssPlugins = deprecate(
);
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,
options: { presetsList: any[] }
) {
const getPostcssOptions = 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)}`);
warnGetPostcssOptions();
return {
config: customPostcssConfig,
};
}
return warnImplicitPostcssPlugins();
};
const presetName = (preset: LoadedPreset | string): string =>
typeof preset === 'string' ? preset : preset.name;
export async function createDefaultWebpackConfig(storybookBaseConfig: any, options: Options) {
if (
options.presetsList.some((preset) =>
/@storybook(\/|\\)preset-create-react-app/.test(preset.name || preset)
/@storybook(\/|\\)preset-create-react-app/.test(presetName(preset))
)
) {
return storybookBaseConfig;
}
const hasPostcssAddon = options.presetsList.some((preset) =>
/@storybook(\/|\\)addon-postcss/.test(preset.name || preset)
/@storybook(\/|\\)addon-postcss/.test(presetName(preset))
);
const features = await options.presets.apply<{ postcss?: boolean }>('features');
let cssLoaders = {};
if (!hasPostcssAddon) {
logger.info(`=> Using implicit CSS loaders`);
const 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,
},
},
features?.postcss !== false
? {
loader: require.resolve('postcss-loader'),
options: {
postcssOptions: await getPostcssOptions(),
},
}
: null,
];
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(),
},
},
],
use: use.filter(Boolean),
};
}

2
lib/builder-webpack5/src/preview/base-webpack.config.ts
View File

@ -1,5 +1,5 @@
import { logger } from '@storybook/node-logger';
import type { Options, BuilderOptions } from '@storybook/core-common';
import type { Options } from '@storybook/core-common';
import type { Configuration } from 'webpack';
export async function createDefaultWebpackConfig(

8
lib/core-server/src/__snapshots__/vue-3-cli_preview-dev
View File

@ -425,7 +425,13 @@ Object {
Object {
"loader": "NODE_MODULES/postcss-loader/dist/cjs.js",
"options": Object {
"postcssOptions": [Function],
"postcssOptions": Object {
"config": false,
"plugins": Array [
[Function],
[Function],
],
},
},
},
],

8
lib/core-server/src/__snapshots__/vue-3-cli_preview-prod
View File

@ -424,7 +424,13 @@ Object {
Object {
"loader": "NODE_MODULES/postcss-loader/dist/cjs.js",
"options": Object {
"postcssOptions": [Function],
"postcssOptions": Object {
"config": false,
"plugins": Array [
[Function],
[Function],
],
},
},
},
],

8
lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev
View File

@ -456,7 +456,13 @@ Object {
Object {
"loader": "NODE_MODULES/postcss-loader/dist/cjs.js",
"options": Object {
"postcssOptions": [Function],
"postcssOptions": Object {
"config": false,
"plugins": Array [
[Function],
[Function],
],
},
},
},
],

8
lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod
View File

@ -455,7 +455,13 @@ Object {
Object {
"loader": "NODE_MODULES/postcss-loader/dist/cjs.js",
"options": Object {
"postcssOptions": [Function],
"postcssOptions": Object {
"config": false,
"plugins": Array [
[Function],
[Function],
],
},
},
},
],

5
lib/core-server/src/presets/common-preset.ts
View File

@ -55,3 +55,8 @@ export const typescript = () => ({
savePropValueAsString: true,
},
});
export const features = async (existing: Record<string, boolean>) => ({
...existing,
postcss: true,
});