Support css-modules #4405
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import semver from 'semver'; | ||
| import { normalizeCondition } from 'webpack/lib/RuleSet'; | ||
|
|
||
| export function isReactScriptsInstalled() { | ||
| try { | ||
| // eslint-disable-next-line global-require, import/no-extraneous-dependencies | ||
| const reactScriptsJson = require('react-scripts/package.json'); | ||
| if (semver.lt(reactScriptsJson.version, '2.0.0')) return false; | ||
| return true; | ||
| } catch (e) { | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| export function getStyleRules(rules) { | ||
|
There was a problem hiding this comment. I'd love to get some comments throughout this function. Not certain what's occurring. It looks like a way to concatenate across the subset of style loading possibilities given the array of file suffixes we're sifting? |
||
| // Extensions of style rules we're interested in | ||
| const extensions = ['.css', '.scss', '.sass', '.module.css', '.module.scss', '.module.sass']; | ||
|
|
||
| return rules.reduce((styleRules, rule) => { | ||
| // If at least one style extension satisfies the rule test, the rule is one | ||
| // we want to extract | ||
| if (rule.test && extensions.some(normalizeCondition(rule.test))) { | ||
| // If the base test is for styles, return early | ||
| return styleRules.concat(rule); | ||
| } | ||
|
|
||
| // Get any style rules contained in rule.oneOf | ||
| if (!rule.test && rule.oneOf) { | ||
| styleRules.push(...getStyleRules(rule.oneOf)); | ||
| } | ||
|
|
||
| // Get any style rules contained in rule.rules | ||
| if (!rule.test && rule.rules) { | ||
| styleRules.push(...getStyleRules(rule.rules)); | ||
| } | ||
|
|
||
| return styleRules; | ||
| }, []); | ||
| } | ||
|
|
||
| export function getCraWebpackConfig(mode) { | ||
| if (mode === 'production') { | ||
| // eslint-disable-next-line global-require, import/no-extraneous-dependencies | ||
| return require('react-scripts/config/webpack.config.prod'); | ||
| } | ||
|
|
||
| // eslint-disable-next-line global-require, import/no-extraneous-dependencies | ||
| return require('react-scripts/config/webpack.config.dev'); | ||
| } | ||
|
|
||
| export function applyCRAWebpackConfig(baseConfig) { | ||
| // Remove any rules from baseConfig that test true for any one of the extensions | ||
| const baseRulesExcludingStyles = baseConfig.module.rules.filter( | ||
|
|
||
| rule => !rule.test || !['.css', '.scss', '.sass'].some(normalizeCondition(rule.test)) | ||
| ); | ||
|
|
||
| // Load create-react-app config | ||
| const craWebpackConfig = getCraWebpackConfig(baseConfig.mode); | ||
|
|
||
| const craStyleRules = getStyleRules(craWebpackConfig.module.rules); | ||
|
|
||
| // Add css minification for production | ||
| const plugins = [...baseConfig.plugins]; | ||
| if (baseConfig.mode === 'production') { | ||
| // eslint-disable-next-line global-require, import/no-extraneous-dependencies | ||
| const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | ||
|
There was a problem hiding this comment. On a second thought, I think this can make problems if 'mini-css-extract-plugin' is not installed as the root package in node_modules 🤔 There was a problem hiding this comment. Maybe we need to do something like this instead ? const miniCssExtractPlugin = craWebpackConfig.plugins.find(plugin => plugin.constructor.name === 'MiniCssExtractPlugin');There was a problem hiding this comment. I think you were right initially. Since we check to make sure There was a problem hiding this comment. If we want to use it, we have to depend on it There was a problem hiding this comment.
There's no guarantee that it's available in root There was a problem hiding this comment. Looks like #4524 is broken now because of this There was a problem hiding this comment. Created #4534 to hopefully resolve this |
||
| plugins.push( | ||
| new MiniCssExtractPlugin({ | ||
|
There was a problem hiding this comment. Do we really need this, though? There was a problem hiding this comment. Nope! I just thought minification would be good for production. Also, if we don't want to include this plugin, then we have to filter out the related rule from all of the style rules. Adding the plugin was less work than removing it. There was a problem hiding this comment. Does this exclude interop for CRAv1? I don't really care about that, but it could be something to consider. There was a problem hiding this comment. FWIW we dont really need autoprefixer in the default ruleset either 🤷♂️ I'm a fan of good defaults 👍 There was a problem hiding this comment. @kylemh This preset checks for |
||
| // Options similar to the same options in webpackOptions.output | ||
| // both options are optional | ||
| filename: 'static/css/[name].[contenthash:8].css', | ||
| chunkFilename: 'static/css/[name].[contenthash:8].chunk.css', | ||
| }) | ||
| ); | ||
| } | ||
|
|
||
| return { | ||
| ...baseConfig, | ||
| module: { | ||
| ...baseConfig.module, | ||
| rules: [...baseRulesExcludingStyles, ...craStyleRules], | ||
| }, | ||
| plugins, | ||
| }; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { logger } from '@storybook/node-logger'; | ||
| import { applyCRAWebpackConfig, isReactScriptsInstalled } from './cra_config'; | ||
|
|
||
| export function webpackFinal(config) { | ||
igor-dv marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| if (!isReactScriptsInstalled()) { | ||
| logger.info('=> Using base config because react-scripts is not installed.'); | ||
| return config; | ||
| } | ||
|
|
||
| logger.info('=> Loading create-react-app config.'); | ||
|
|
||
| return applyCRAWebpackConfig(config); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It should be
"4.0.0-rc.3"