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

pierlon · 2021-04-19T15:03:09Z

Summary

Follow up of #6057.

This PR adds a custom Webpack plugin that identifies stylesheet entries and prevents empty JS chunks and PHP asset files from being emitted for each entry. The plugin has been added to the shared config so that each Webpack config now makes use of it by default.

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).

…sed as entrypoint

pierlon · 2021-04-19T15:04:35Z

webpack.config.js

@@ -334,6 +335,8 @@ const settingsPage = {
 				}
 			},
 		} ),
+		// Ensure assets generated by `DependencyExtractionWebpackPlugin` are also ignored for styles entries.


This should prevent the empty JS chunk and PHP asset file for the wp-components entry from being generated.

github-actions · 2021-04-19T15:09:45Z

Plugin builds for 6c9e5da are ready 🛎️!

Download development build
Download production build

pierlon · 2021-04-19T15:26:49Z

Investigating CI issues...

codecov · 2021-04-19T20:08:57Z

Codecov Report

Merging #6078 (6c9e5da) into develop (c9c3784) will decrease coverage by 0.01%.
The diff coverage is n/a.

@@              Coverage Diff              @@
##             develop    #6078      +/-   ##
=============================================
- Coverage      74.92%   74.91%   -0.02%     
  Complexity      5775     5775              
=============================================
  Files            231      231              
  Lines          17484    17487       +3     
=============================================
  Hits           13100    13100              
- Misses          4384     4387       +3

Flag	Coverage Δ	Complexity Δ
javascript	`79.84% <ø> (ø)`	`0.00 <ø> (ø)`
php	`74.68% <ø> (-0.02%)`	`5775.00 <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ	Complexity Δ
src/Cli/ValidationCommand.php	`15.82% <0.00%> (-0.31%)`	`34.00% <0.00%> (ø%)`

pierlon · 2021-04-19T20:10:39Z

tests/php/bootstrap.php

+$logger = new WP_CLI\Loggers\Regular( true );
+WP_CLI::set_logger( $logger );


PHPUnit tests were failing due to a call to WP_CLI::warning() failing to log a message:

amp-wp/amp.php

Line 217 in 1e7ea02

WP_CLI::warning( $message );

PHP Fatal error: Uncaught Error: Call to a member function warning() on null in /tmp/wordpress/src/wp-content/plugins/amp/vendor/wp-cli/wp-cli/php/class-wp-cli.php:808

It turns out the deafult WP CLI logger is set defined when WP_CLI::bootstrap() is called, but that isn't applicable in a testing environment. Instead, I've manually initialized and set a logger during the PHPUnit bootstrap process.

What is the warning that is being emitted?

The amp-block-editor.js file was previously not being emitted by Webpack (which is now fixed in 4b47698). Because of that the following error was being emitted:

amp-wp/amp.php

Lines 160 to 169 in 1e7ea02

if ( ! file_exists( AMP__DIR__ . '/vendor/autoload.php' ) || ! file_exists( AMP__DIR__ . '/vendor/sabberworm/php-css-parser' ) || ! file_exists( AMP__DIR__ . '/assets/js/amp-block-editor.js' ) ) {

$_amp_load_errors->add(

'build_required',

sprintf(

/* translators: %s: composer install && npm install && npm run build:prod */

__( 'You appear to be running the AMP plugin from source. Please do %s to finish installation.', 'amp' ), // phpcs:ignore WordPress.Security.EscapeOutput

'<code>composer install && npm install && npm run build:prod</code>'

)

);

}

So now the warning is not being emitted? But if it were to be emitted again, then the logger change will ensure the warning will be emitted without a failure?

Yes and yes.

westonruter

Output checks out!

I defer to @delawski for the webpack changes.

delawski

@pierlon This looks really good!

Thank you for improving the workflow introduced in #6057.

I left one minor and optional suggestion.

bin/ignore-extraneous-style-assets.js

delawski · 2021-04-20T10:25:28Z

webpack.config.js

-			new TerserPlugin( {
-				parallel: true,
-				sourceMap: false,
-				cache: true,
-				terserOptions: {
-					output: {
-						comments: /translators:/i,
-					},
-				},
-				extractComments: false,
-			} ),


Out of curiosity: why are we no longer overriding the TerserPlugin config (or why have we done so before at all)?

The config we're importing from @wordpress/scripts already configures the TerserPlugin the same way we do (with the additional config of not mangling translations).

As for why we were overriding it, we actually were not. The TerserPlugin config was only "recently" added to the default Webpack config (see WordPress/gutenberg#22990) (relative to when this plugin config was first added, that is).

Thanks for the explanation 🙏

delawski · 2021-04-20T10:25:50Z

webpack.config.js

+	entry: () => {
+		const entries = {};
+		const dir = './assets/css/src';
+		fs.readdirSync( dir ).forEach( ( fileName ) => {
+			entries[ fileName.replace( /\.[^/.]+$/, '' ) ] = `${ dir }/${ fileName }`;
+		} );
+
+		return entries;


I like that!

…lugin # Conflicts: # webpack.config.js

Co-authored-by: Piotr Delawski <delawski@users.noreply.github.com>

pierlon · 2021-04-21T17:17:37Z

Thanks for the review @delawski and @westonruter. This should be good to ship now 😄.

westonruter · 2021-04-21T17:23:33Z

bin/ignore-extraneous-style-assets.js

-			.flat()
-			.join( '|' );
+			.reduce( ( acc, entry ) => `${ acc }|${ entry }.js|${ entry }.asset.php`, '' )
+			.substr( 1 );


I was thinking this could be more clear:

Suggested change

.substr( 1 );

.trimStart( '|' );

But alas trimStart() doesn't take any arguments like ltrim() does in PHP.

Also it seems that substr() is depracated and substring() should be used instead.

So ideally this would be something like:

Suggested change

.substr( 1 );

.substring( 1 ); // Remove a leading '|'

@westonruter to your point - I guess we can use a comment to clarify.

westonruter · 2021-04-21T17:24:54Z

@pierlon There's a build error now:

ERROR in Entry module not found: Error: Can't resolve './assets/css/src/components' in '/home/runner/work/amp-wp/amp-wp'

bin/ignore-extraneous-style-assets.js

Co-authored-by: Piotr Delawski <delawski@users.noreply.github.com>

bin/ignore-extraneous-style-assets.js

pierlon · 2021-04-21T18:13:54Z

webpack.config.js

@@ -349,7 +349,10 @@ const styles = {
 		const entries = {};
 		const dir = './assets/css/src';
 		fs.readdirSync( dir ).forEach( ( fileName ) => {
-			entries[ fileName.replace( /\.[^/.]+$/, '' ) ] = `${ dir }/${ fileName }`;
+			const fullPath = `${ dir }/${ fileName }`;
+			if ( ! fs.lstatSync( fullPath ).isDirectory() ) {


I've updated this to ignore directories in assets/css/src, i.e. only root files in that directory will be used as entries.

delawski · 2021-04-27T08:55:06Z

QA passed. Found no issues in the "Network" tab in the Chrome dev tools.

Add Webpack plugin to ignore JS and PHP asset files when stylesheet u…

b01eafb

…sed as entrypoint

pierlon added the WS:Core Work stream for Plugin core label Apr 19, 2021

pierlon added this to the v2.1 milestone Apr 19, 2021

pierlon requested review from westonruter and delawski April 19, 2021 15:03

pierlon self-assigned this Apr 19, 2021

pierlon added this to Ready for Review in Ongoing Apr 19, 2021

pierlon commented Apr 19, 2021

View reviewed changes

pierlon added 2 commits April 19, 2021 16:02

Scope CSS entries to current Webpack compilation

4b47698

Define a logger for WP CLI in PHPUnit bootstrap

0d15bdb

pierlon commented Apr 19, 2021

View reviewed changes

westonruter approved these changes Apr 19, 2021

View reviewed changes

delawski approved these changes Apr 20, 2021

View reviewed changes

pierlon and others added 2 commits April 21, 2021 13:10

Merge branch 'develop' into enhancement/ignore-style-assets-webpack-p…

6d012dd

…lugin # Conflicts: # webpack.config.js

Map expression in single pass

7ab7c82

Co-authored-by: Piotr Delawski <delawski@users.noreply.github.com>

pierlon requested review from westonruter and delawski April 21, 2021 17:16

westonruter reviewed Apr 21, 2021

View reviewed changes

pierlon commented Apr 21, 2021

View reviewed changes

bin/ignore-extraneous-style-assets.js Outdated Show resolved Hide resolved

pierlon and others added 2 commits April 21, 2021 13:54

Ignore directories in CSS source directory

f538053

Make expression reduction clearer

6c9e5da

Co-authored-by: Piotr Delawski <delawski@users.noreply.github.com>

westonruter reviewed Apr 21, 2021

View reviewed changes

bin/ignore-extraneous-style-assets.js Show resolved Hide resolved

pierlon commented Apr 21, 2021

View reviewed changes

westonruter merged commit 7419cdf into develop Apr 21, 2021

westonruter deleted the enhancement/ignore-style-assets-webpack-plugin branch April 21, 2021 19:44

westonruter unassigned pierlon Apr 21, 2021

westonruter moved this from Ready for Review to Ready for QA in Ongoing Apr 21, 2021

delawski moved this from Ready for QA to QA Passed in Ongoing Apr 27, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

pierlon commented Apr 19, 2021

pierlon Apr 19, 2021

westonruter Apr 19, 2021 •

edited

github-actions bot commented Apr 19, 2021 •

edited

pierlon commented Apr 19, 2021

codecov bot commented Apr 19, 2021 •

edited

pierlon Apr 19, 2021

westonruter Apr 19, 2021

pierlon Apr 19, 2021

westonruter Apr 19, 2021

pierlon Apr 19, 2021

westonruter left a comment

delawski left a comment

delawski Apr 20, 2021

pierlon Apr 21, 2021

delawski Apr 21, 2021

delawski Apr 20, 2021

pierlon commented Apr 21, 2021

westonruter Apr 21, 2021

delawski Apr 21, 2021

westonruter commented Apr 21, 2021

pierlon Apr 21, 2021

delawski commented Apr 27, 2021

		$logger = new WP_CLI\Loggers\Regular( true );
		WP_CLI::set_logger( $logger );

	if ( ! file_exists( AMP__DIR__ . '/vendor/autoload.php' ) \|\| ! file_exists( AMP__DIR__ . '/vendor/sabberworm/php-css-parser' ) \|\| ! file_exists( AMP__DIR__ . '/assets/js/amp-block-editor.js' ) ) {
	$_amp_load_errors->add(
	'build_required',
	sprintf(
	/* translators: %s: composer install && npm install && npm run build:prod */
	__( 'You appear to be running the AMP plugin from source. Please do %s to finish installation.', 'amp' ), // phpcs:ignore WordPress.Security.EscapeOutput
	'<code>composer install && npm install && npm run build:prod</code>'
	)
	);
	}

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

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

Conversation

pierlon commented Apr 19, 2021

Summary

Checklist

Choose a reason for hiding this comment

westonruter Apr 19, 2021 • edited

Choose a reason for hiding this comment

github-actions bot commented Apr 19, 2021 • edited

pierlon commented Apr 19, 2021

codecov bot commented Apr 19, 2021 • edited

Codecov Report

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

westonruter left a comment

Choose a reason for hiding this comment

delawski 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

Choose a reason for hiding this comment

pierlon commented Apr 21, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter commented Apr 21, 2021

Choose a reason for hiding this comment

delawski commented Apr 27, 2021

westonruter Apr 19, 2021 •

edited

github-actions bot commented Apr 19, 2021 •

edited

codecov bot commented Apr 19, 2021 •

edited