diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js index 9c780164dd650e..ae548e435016b6 100644 --- a/bin/packages/build-worker.js +++ b/bin/packages/build-worker.js @@ -115,7 +115,7 @@ const BUILD_TASK_BY_EXTENSION = { } ); const result = await postcss( - require( '@wordpress/postcss-config' ) + require( '@wordpress/postcss-config' ).plugins() ).process( builtSass.css, { from: 'src/app.css', to: 'dest/app.css', diff --git a/package-lock.json b/package-lock.json index d6f327402b52f9..081ce79aab1e36 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10661,6 +10661,7 @@ "eslint": "^6.8.0", "eslint-plugin-markdown": "^1.0.2", "got": "^10.7.0", + "ignore-emit-webpack-plugin": "^2.0.2", "jest": "^25.3.0", "jest-puppeteer": "^4.4.0", "js-yaml": "^3.13.1", @@ -22671,6 +22672,12 @@ "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==", "dev": true }, + "ignore-emit-webpack-plugin": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/ignore-emit-webpack-plugin/-/ignore-emit-webpack-plugin-2.0.2.tgz", + "integrity": "sha512-mlwNY4ocAFJ+gzvIdbWdF2nPszE5CdZYJBvI38XEJnW2/qV7kA5HenzGE0XdS4nzoSqEIj268y2y4K6WTLFm8Q==", + "dev": true + }, "ignore-walk": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz", diff --git a/packages/postcss-config/lib/index.js b/packages/postcss-config/lib/index.js index f36dc876cecddd..84a3ecddbc5653 100644 --- a/packages/postcss-config/lib/index.js +++ b/packages/postcss-config/lib/index.js @@ -2,10 +2,11 @@ * WordPress dependencies */ const { adminColorSchemes } = require( '@wordpress/base-styles' ); -const postcssThemes = require( '@wordpress/postcss-themes' ); -module.exports = [ - postcssThemes( adminColorSchemes ), - require( 'autoprefixer' )( { grid: true } ), - require( 'postcss-color-function' ), -]; +module.exports = { + plugins: () => [ + require( '@wordpress/postcss-themes' )( adminColorSchemes ), + require( 'autoprefixer' )( { grid: true } ), + require( 'postcss-color-function' ), + ], +}; diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index 2d27a0b9a71b1d..4404a2efbd90de 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -2,14 +2,16 @@ * External dependencies */ const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' ); +const IgnoreEmitPlugin = require( 'ignore-emit-webpack-plugin' ); const LiveReloadPlugin = require( 'webpack-livereload-plugin' ); -const path = require( 'path' ); const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); +const path = require( 'path' ); /** * WordPress dependencies */ const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' ); +const postcssConfig = require( '@wordpress/postcss-config' ); /** * Internal dependencies @@ -35,24 +37,13 @@ const config = { }, optimization: { splitChunks: { - chunks: 'all', cacheGroups: { - editor: { - name: 'editor', - test: /editor\.(sc|sa|c)ss$/, - enforce: true, - }, - theme: { - name: 'theme', - test: /theme\.(sc|sa|c)ss$/, + styles: { + name: 'style', + test: /style\.(sc|sa|c)ss$/, + chunks: 'all', enforce: true, }, - style: { - name: 'styles', - test: /\.(sc|sa|c)ss$/, - enforce: true, - }, - default: false, }, }, @@ -90,44 +81,50 @@ const config = { }, { test: /\.svg$/, + exclude: /node_modules/, use: [ '@svgr/webpack', 'url-loader' ], }, { test: /\.(sc|sa|c)ss$/, + exclude: /node_modules/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: require.resolve( 'css-loader' ), + options: { + sourceMap: ! isProduction, + }, }, - /** - * Configuring PostCSS with Webpack - * https://github.com/postcss/postcss-loader#plugins - */ { loader: require.resolve( 'postcss-loader' ), options: { ident: 'postcss', - plugins: () => - require.resolve( '@wordpress/postcss-config' ), + plugins: postcssConfig.plugins, }, }, { loader: require.resolve( 'sass-loader' ), + options: { + sourceMap: ! isProduction, + }, }, ], }, ], }, plugins: [ - // WP_BUNDLE_ANALYZER global variable enables utility that represents bundle content - // as convenient interactive zoomable treemap. + // WP_BUNDLE_ANALYZER global variable enables utility that represents + // bundle content as convenient interactive zoomable treemap. process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(), // MiniCssExtractPlugin to extract the CSS thats gets imported into JavaScript. - new MiniCssExtractPlugin(), - // WP_LIVE_RELOAD_PORT global variable changes port on which live reload works - // when running watch mode. + new MiniCssExtractPlugin( { esModule: false, filename: '[name].css' } ), + // MiniCssExtractPlugin creates JavaScript assets for CSS that are + // obsolete and should be removed. + new IgnoreEmitPlugin( [ 'style.js' ] ), + // WP_LIVE_RELOAD_PORT global variable changes port on which live reload + // works when running watch mode. ! isProduction && new LiveReloadPlugin( { port: process.env.WP_LIVE_RELOAD_PORT || 35729, diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 30c7719bee60fc..71d0d17df8a83f 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -53,6 +53,7 @@ "eslint": "^6.8.0", "eslint-plugin-markdown": "^1.0.2", "got": "^10.7.0", + "ignore-emit-webpack-plugin": "^2.0.2", "jest": "^25.3.0", "jest-puppeteer": "^4.4.0", "js-yaml": "^3.13.1", diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js index 6cfd137561faaa..a6356bc3eb9a21 100644 --- a/storybook/webpack.config.js +++ b/storybook/webpack.config.js @@ -1,5 +1,12 @@ +/** + * External dependencies + */ const path = require( 'path' ); -const postCssConfigPlugins = require( '@wordpress/postcss-config' ); + +/** + * WordPress dependencies + */ +const postcssConfig = require( '@wordpress/postcss-config' ); module.exports = ( { config } ) => { config.module.rules.push( @@ -13,15 +20,11 @@ module.exports = ( { config } ) => { use: [ 'style-loader', 'css-loader', - /** - * Configuring PostCSS with Webpack - * https://github.com/postcss/postcss-loader#plugins - */ { loader: 'postcss-loader', options: { ident: 'postcss', - plugins: () => postCssConfigPlugins, + plugins: postcssConfig.plugins, }, }, 'sass-loader',