Handle CSS build process with Webpack #6057

delawski · 2021-04-08T11:04:40Z

Summary

So far, all stylesheets that were not imported in JS files were handled with plain CLI commands. The simple "build" process consisted of copying all CSS files from ./assets/css/src to ./assets/css and generating RTL stylesheets with the rtlcss CLI command.

With this update, all files in the ./assets/css/src folder are handled by the new 'Styles' Webpack entry point. Thanks to that, they are watched and rebuilt on the fly with the regular npm run dev task. Also, it is now possible to use the SASS/SCSS preprocessing, if needed.

Checklist

My code is tested and passes existing tests.
My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

So far, all stylesheets that were not imported in JS files were handled with plain CLI commands. The simple "build" process consisted of copying all CSS files from `./assets/css/src` to `./assets/css` and generating RTL stylesheets with the `rtlcss` CLI command. With this update, all files in the `./assets/css/src` folder are handled by the new 'Styles' Webpack entry point. Thanks to that, they are watched and rebuilt on-the-fly with the regular `npm run dev` task. Also, it is now possible to use the SASS/SCSS preprocessing, if needed.

github-actions · 2021-04-08T11:10:50Z

Plugin builds for 075b1ae are ready 🛎️!

Download development build
Download production build

delawski · 2021-04-08T11:13:16Z

Since the CI complained about missing build:css npm task, I've added it back. I think it could possibly be removed from the CI since it doesn't make sense to run the same underlying task (wp-scripts build) twice, for build:js and for build:css.

swissspidy · 2021-04-08T15:44:13Z

Doesn't this cause tons of empty JS chunks for these CSS files?

delawski · 2021-04-08T16:32:37Z

Doesn't this cause tons of empty JS chunks for these CSS files?

@swissspidy Well, yes, it does. Obviously, not the nicest side effect. Do you think there's a way to get rid of them?

delawski · 2021-04-09T06:50:33Z

It seems that it's possible to not generate those empty chunks by using the ignore-emit-webpack-plugin. I've borrowed this idea from @wordpress/scripts and applied it in e64576a.

This, along with the previous commit that disables the dependency-extraction-webpack-plugin for stylesheets, ensures that only CSS files are being built by Webpack in the styles task.

package.json

westonruter · 2021-04-13T05:40:33Z

Since the CI complained about missing build:css npm task, I've added it back. I think it could possibly be removed from the CI since it doesn't make sense to run the same underlying task (wp-scripts build) twice, for build:js and for build:css.

Makes sense. I've removed all traces of build:css in de08737.

westonruter · 2021-04-13T16:36:41Z

Comparing develop with this PR, I see the output here is even better as it now minifies the CSS whereas before it was not:

westonruter · 2021-04-13T16:40:44Z

And when comparing with the development build, I can see now we get vendor-prefixed properties and sourcemaps whereas before we didn't:

westonruter

The output looks great.

The webpack config changes I'm not very familiar with, so I request @pierlon to verify.

Otherwise, looks great to merge!

pierlon · 2021-04-13T17:30:07Z

webpack.config.js

@@ -340,6 +341,80 @@ const settingsPage = {
 	],
 };

+const styles = {


I see that Gutenberg had a similar problem and so created the FixStyleWebpackPlugin plugin to prevent those JS chunks from being generated. That plugin would only apply chunk assets that match the style cache group, however (that is, it would only apply to files named style.css).

Although the plugin is included in sharedConfig.plugins, it would not be applying anything as we're not including the aforementioned style optimization cache group.

pierlon · 2021-04-13T18:02:26Z

webpack.config.js

+		...sharedConfig.plugins.filter(
+			( plugin ) => plugin.constructor.name !== 'DependencyExtractionWebpackPlugin',
+		),


This shouldn't be necessary if the IgnoreEmitPlugin plugin was before the DependencyExtractionWebpackPlugin plugin, but this works 👍.

I tried to avoid adding that but haven't thought about the order of the plugins and so the .asset.php files were always generated. I guess we could improve the implementation in the future.

pierlon · 2021-04-13T18:04:11Z

webpack.config.js

+			const match = entryPath.match( /^.*\/(.*)\..*$/ );
+
+			return match && match[ 1 ] ? `${ match[ 1 ] }.js` : null;
+		} )
+		.filter( Boolean );


Does the match regex need to be this generic? Since all the entry points are CSS files this could be made simpler:

Suggested change

const match = entryPath.match( /^.*\/(.*)\..*$/ );

return match && match[ 1 ] ? `${ match[ 1 ] }.js` : null;

} )

.filter( Boolean );

const match = entryPath.match( /([^\/]+)\.s?css$/ );

return `${ match[ 1 ] }.js`;

} );

The entry points may also be SCSS files, but I guess the regex could still get simplified to something like:

/([^\/]+)\.s?css$/

Ah right, that works as well.

@pierlon Would you apply that change and verify it produces the expected output? Then we can merge this PR if I'm not mistaken, at least for beta2.

I've noticed that an empty JS chunk is also being generated for the wp-components entrypoint on the "Settings page" webpack config. We can either move it to the "Styles" webpack config, or extract these set of changes into a new webpack plugin so that we can apply it to multiple webpack configs.

I think we can go for the former right now, and then deal with the latter later on. I can create an issue for that if needed.

delawski · 2021-04-27T11:16:09Z

QA passed.

delawski added Enhancement New feature or improvement of an existing one CSS WS:UX Work stream for UX/Front-end labels Apr 8, 2021

delawski added this to the v2.1 milestone Apr 8, 2021

delawski requested review from westonruter and pierlon April 8, 2021 11:04

delawski self-assigned this Apr 8, 2021

Move the entrypoint config so that it is in alphabetical order

78e1de3

Add build:css back so that CI continues to work

4824c2e

delawski added 2 commits April 8, 2021 18:56

Omit DependencyExtractionWebpackPlugin for CSS

5cb48d0

Do not generate empty JS chunks for stylesheets

e64576a

delawski commented Apr 9, 2021

View reviewed changes

package.json Show resolved Hide resolved

Merge branch 'develop' into add/css-webpack-watch

817be4f

Remove redundant build:css script

de08737

westonruter approved these changes Apr 13, 2021

View reviewed changes

pierlon suggested changes Apr 13, 2021

View reviewed changes

Make entry path regex match simpler

075b1ae

westonruter enabled auto-merge April 13, 2021 21:43

pierlon approved these changes Apr 13, 2021

View reviewed changes

westonruter merged commit 89aa65d into develop Apr 13, 2021

westonruter deleted the add/css-webpack-watch branch April 13, 2021 21:44

pierlon mentioned this pull request Apr 19, 2021

Add Webpack plugin to ignore JS and PHP asset files when stylesheet used as entrypoint #6078

Merged

2 tasks

jwold unassigned delawski Apr 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Handle CSS build process with Webpack #6057

Handle CSS build process with Webpack #6057

delawski commented Apr 8, 2021

github-actions bot commented Apr 8, 2021 •

edited

Loading

delawski commented Apr 8, 2021

swissspidy commented Apr 8, 2021

delawski commented Apr 8, 2021

delawski commented Apr 9, 2021

westonruter commented Apr 13, 2021

westonruter commented Apr 13, 2021

westonruter commented Apr 13, 2021

westonruter left a comment

pierlon Apr 13, 2021

pierlon Apr 13, 2021

delawski Apr 14, 2021

pierlon Apr 13, 2021 •

edited

Loading

delawski Apr 13, 2021

pierlon Apr 13, 2021

westonruter Apr 13, 2021

pierlon Apr 13, 2021

pierlon Apr 13, 2021

delawski commented Apr 27, 2021

Handle CSS build process with Webpack #6057

Handle CSS build process with Webpack #6057

Conversation

delawski commented Apr 8, 2021

Summary

Checklist

github-actions bot commented Apr 8, 2021 • edited Loading

delawski commented Apr 8, 2021

swissspidy commented Apr 8, 2021

delawski commented Apr 8, 2021

delawski commented Apr 9, 2021

westonruter commented Apr 13, 2021

westonruter commented Apr 13, 2021

westonruter commented Apr 13, 2021

westonruter left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pierlon Apr 13, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

delawski commented Apr 27, 2021

github-actions bot commented Apr 8, 2021 •

edited

Loading

pierlon Apr 13, 2021 •

edited

Loading