From 567b159f6756168a83f01a8acacaa10a9b2a2fa3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Mon, 15 Jun 2020 09:44:43 +0200 Subject: [PATCH] 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 * Docs: Add tweaks to the CSS support description Co-authored-by: Dominik Schilling --- .../lib/templates/esnext/$slug.php.mustache | 2 +- packages/scripts/CHANGELOG.md | 5 +- packages/scripts/README.md | 4 +- .../config/fix-style-webpack-plugin/index.js | 54 +++++++++++++++++++ packages/scripts/config/webpack.config.js | 10 ++-- 5 files changed, 65 insertions(+), 10 deletions(-) create mode 100644 packages/scripts/config/fix-style-webpack-plugin/index.js diff --git a/packages/create-block/lib/templates/esnext/$slug.php.mustache b/packages/create-block/lib/templates/esnext/$slug.php.mustache index cc68e73249496..ad238617fa84f 100644 --- a/packages/create-block/lib/templates/esnext/$slug.php.mustache +++ b/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__ ), diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index e029d42374e77..781715b7e93e4 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -5,7 +5,7 @@ ### 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`. @@ -13,9 +13,10 @@ - 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) diff --git a/packages/scripts/README.md b/packages/scripts/README.md index 1c7c4fbcb0cc3..4e5bf733e431d 100644 --- a/packages/scripts/README.md +++ b/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 diff --git a/packages/scripts/config/fix-style-webpack-plugin/index.js b/packages/scripts/config/fix-style-webpack-plugin/index.js new file mode 100644 index 0000000000000..a6a2083357023 --- /dev/null +++ b/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; diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index 3020f31f7a996..c13d5b47d84bb 100644 --- a/packages/scripts/config/webpack.config.js +++ b/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 &&