Polish configuration for CSS support in wp-scripts

WordPress · Apr 29, 2020 · d6e09b8 · d6e09b8
1 parent 2f5f97a
commit d6e09b8
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 40 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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',