Build: Drop cssFilename option from root webpack config

[ockham]

Changes proposed in this Pull Request

Remove the cssFilename option from the Calypso root webpack config, inferring its value from outputFilename instead; dito for cssChunkFilename. For more background and a rationale, see #32194, which does the same for calypso-build's webpack config.

This also requires some re-arranging of filename logic in the webpack config.

There is one behavioral change: In production, CSS filenames previously followed the [name].[chunkhash].css pattern. Since they're now modeled after outputFilename, they now include a min particle, i.e. [name].[chunkhash].min.css. AFAICS, that shouldn't really matter much though.

Testing instructions

npm run distclean && npm ci
npm start

Does Calypso start and build properly?

[matticbot]

Test live: https://calypso.live/?branch=remove/css-filename-arg-from-root-webpack-config

[scruffian]

This seems to work fine, but I noticed two things:

1. I don't see .min in the CSS file names. Maybe I'm looking in the wrong place?

2. I get this warning in my console:

  Multiple versions of @wordpress/compose found:
    3.0.1 ./~/@wordpress/compose
    3.2.0 ./~/@wordpress/data/~/@wordpress/compose


WARNING in @wordpress/element
  Multiple versions of @wordpress/element found:
    2.1.9 ./~/@wordpress/element
    2.3.0 ./~/@wordpress/data/~/@wordpress/element


WARNING in hoist-non-react-statics
  Multiple versions of hoist-non-react-statics found:
    2.5.5 ./~/hoist-non-react-statics
    3.3.0 ./~/react-redux/~/hoist-non-react-statics


WARNING in immutable
  Multiple versions of immutable found:
    3.7.6 ./~/draft-js/~/immutable
    3.8.2 ./~/immutable

[ockham]

Thanks for rebasing @scruffian!

This seems to work fine, but I noticed two things:

1. I don't see .min in the CSS file names. Maybe I'm looking in the wrong place?

No, that's expected -- .min is only used in production 🙂 Try NODE_ENV=production npm run build-client and check the contents of public/evergreen to verify.

2. I get this warning in my console:

  Multiple versions of @wordpress/compose found:
    3.0.1 ./~/@wordpress/compose
    3.2.0 ./~/@wordpress/data/~/@wordpress/compose


WARNING in @wordpress/element
  Multiple versions of @wordpress/element found:
    2.1.9 ./~/@wordpress/element
    2.3.0 ./~/@wordpress/data/~/@wordpress/element


WARNING in hoist-non-react-statics
  Multiple versions of hoist-non-react-statics found:
    2.5.5 ./~/hoist-non-react-statics
    3.3.0 ./~/react-redux/~/hoist-non-react-statics


WARNING in immutable
  Multiple versions of immutable found:
    3.7.6 ./~/draft-js/~/immutable
    3.8.2 ./~/immutable

These are also present on master (we have a webpack plugin that warns about different versions of npm deps that get pulled in via different branches of the dependency tree). Safe to ignore for the purposes of this PR 😬

[scruffian]

Retested. LGTM 🚢

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Webpack Runtime
webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

name      parsed_size           gzip_size
manifest         +8 B  (+0.0%)       +9 B  (+0.0%)

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[ockham]

Thank @scruffian!

I also tested this in a local wpcalypso Docker env to make sure the changed .min.css filenames don't break things in production ✅