Scripts: Fix style.css handling in the build and start commands (#23127)

* Scripts: Fix style.css handling in the build and start commands

* Scripts: Fix style.css handling in the build and start commands

* Docs: Add changelog entry

* Update packages/scripts/config/webpack.config.js

Co-authored-by: Dominik Schilling <dominikschilling+git@gmail.com>

* Docs: Add tweaks to the CSS support description

Co-authored-by: Dominik Schilling <dominikschilling+git@gmail.com>

packages/create-block/lib/templates/esnext/$slug.php.mustache

@@ -51,7 +51,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 		filemtime( "$dir/$editor_css" )
 	);
 
-	$style_css = 'build/style.css';
+	$style_css = 'build/style-index.css';
 	wp_register_style(
 		'{{namespace}}-{{slug}}-block',
 		plugins_url( $style_css, __FILE__ ),

packages/scripts/CHANGELOG.md

@@ -5,17 +5,18 @@
 ### Breaking Changes
 
 -   The `env` family of scripts has been removed. Finally, exceeded in functionality and replaced by [`wp-env`](https://www.npmjs.com/package/@wordpress/env).
--   The default babel configuration has changed to only support stage-4 proposals. This affects the `build` and `start` commands that use the bundled babel configuration; if a project provides its own, this change doesn't affect it. [#22083](https://github.com/WordPress/gutenberg/pull/22083)
+-   The default Babel configuration has changed to only support stage-4 proposals. This affects the `build` and `start` commands that use the bundled Babel configuration; if a project provides its own, this change doesn't affect it ([#22083](https://github.com/WordPress/gutenberg/pull/22083)).
 -   The bundled `wp-prettier` dependency has been upgraded from `1.19.1` to `2.0.5`. Refer to the [Prettier 2.0 "2020" blog post](https://prettier.io/blog/2020/03/21/2.0.0.html) for full details about the major changes included in Prettier 2.0.
 -   The bundled `eslint` dependency has been updated from requiring `^6.8.0` to requiring `^7.1.0`.
 
 ### New Feature
 
 -   The PostCSS loader now gives preference to a `postcss.config.js` configuration file if present.
 
-### Bug fix
+### Bug Fixes
 
 -   Update webpack configuration to not run the Sass loader on CSS files. It's now limited to .scss and .sass files.
+-   Fix broken `style.(sc|sa|c)ss` handling in the `build` and `start` scripts ([#23127](https://github.com/WordPress/gutenberg/pull/23127)).
 
 ## 10.0.0 (2020-05-28)
 

packages/scripts/README.md

@@ -528,7 +528,7 @@ import './style.css';
 When you run the build using the default command `wp-scripts build` (also applies to `start`) in addition to the JavaScript file `index.js` generated in the `build` folder, you should see two more files:
 
 1. `index.css` – all imported CSS files are bundled into one chunk named after the entry point, which defaults to `index.js`, and thus the file created becomes `index.css`. This is for styles used only in the editor.
-2. `style.css` – imported `style.css` file(s) (applies to SASS and SCSS extensions) get bundled into one `style.css` file that is meant to be used both on the front-end and in the editor.
+2. `style-index.css` – imported `style.css` file(s) (applies to SASS and SCSS extensions) get bundled into one `style-index.css` file that is meant to be used both on the front-end and in the editor.
 
 You can also have multiple entry points as described in the docs for the script:
 
@@ -538,7 +538,7 @@ wp-scripts start entry-one.js entry-two.js --output-path=custom
 
 If you do so, then CSS files generated will follow the names of the entry points: `entry-one.css` and `entry-two.css`.
 
-You can have only one entry point and name it differently if you will. Avoid using `style` for an entry point name, this will break your build process.
+Avoid using `style` keyword in an entry point name, this might break your build process.
 
 #### Using SVG
 

packages/scripts/config/fix-style-webpack-plugin/index.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+const { ConcatSource } = require( 'webpack-sources' );
+const IgnoreEmitWebpackPlugin = require( 'ignore-emit-webpack-plugin' );
+
+// This is a simple webpack plugin to merge the JS files generated for styles by
+// MiniCssExtractPlugin into their corresponding entrypoints.
+// Despited basically being noop files, they are required to get the real JS
+// files to load, silently failing without them.
+// @see https://github.com/webpack-contrib/mini-css-extract-plugin/issues/85
+class FixStyleWebpackPlugin {
+	constructor() {
+		// Offload removing JS assets for styles the ExternalsPlugin.
+		this.ignoreEmitPlugin = new IgnoreEmitWebpackPlugin( /style-(.*).js/ );
+	}
+
+	apply( compiler ) {
+		compiler.hooks.compilation.tap(
+			'FixStyleWebpackPlugin',
+			( compilation ) => {
+				compilation.hooks.optimizeChunkAssets.tap(
+					'FixStyleWebpackPlugin',
+					( chunks ) => {
+						for ( const chunk of chunks ) {
+							if ( ! chunk.canBeInitial() ) {
+								continue;
+							}
+
+							const file = `${ chunk.name }.js`;
+							const styleFile = `style-${ chunk.name }.js`;
+							const styleFileAsset = compilation.getAsset(
+								styleFile
+							);
+							if ( ! styleFileAsset ) {
+								continue;
+							}
+							compilation.updateAsset( file, ( oldSource ) => {
+								return new ConcatSource(
+									oldSource,
+									'\n\n' + styleFileAsset.source.source()
+								);
+							} );
+						}
+					}
+				);
+			}
+		);
+
+		this.ignoreEmitPlugin.apply( compiler );
+	}
+}
+
+module.exports = FixStyleWebpackPlugin;

packages/scripts/config/webpack.config.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
-const IgnoreEmitPlugin = require( 'ignore-emit-webpack-plugin' );
 const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
 const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
 const path = require( 'path' );
@@ -17,6 +16,7 @@ const postcssPlugins = require( '@wordpress/postcss-plugins-preset' );
  * Internal dependencies
  */
 const { hasBabelConfig, hasPostCSSConfig } = require( '../utils' );
+const FixStyleWebpackPlugin = require( './fix-style-webpack-plugin' );
 
 const isProduction = process.env.NODE_ENV === 'production';
 const mode = isProduction ? 'production' : 'development';
@@ -64,11 +64,11 @@ const config = {
 			mode === 'production' && ! process.env.WP_BUNDLE_ANALYZER,
 		splitChunks: {
 			cacheGroups: {
-				styles: {
-					name: 'style',
-					test: /style\.(sc|sa|c)ss$/,
+				style: {
+					test: /[\\/]style\.(sc|sa|c)ss$/,
 					chunks: 'all',
 					enforce: true,
+					automaticNameDelimiter: '-',
 				},
 				default: false,
 			},
@@ -139,7 +139,7 @@ const config = {
 		// MiniCSSExtractPlugin creates JavaScript assets for CSS that are
 		// obsolete and should be removed. Related webpack issue:
 		// https://github.com/webpack-contrib/mini-css-extract-plugin/issues/85
-		new IgnoreEmitPlugin( [ 'style.js' ] ),
+		new FixStyleWebpackPlugin(),
 		// WP_LIVE_RELOAD_PORT global variable changes port on which live reload
 		// works when running watch mode.
 		! isProduction &&