Scripts: Webpack config update to minimize CSS

[christianztamayo]

Description

The previous configuration does not have CSS minification included aside from the sass-loader built-in which only affects SCSS files. (Closes #33643, Related: #29624)

How has this been tested?

• Followed reproduction steps on Scripts: The build command does not minify CSS files #33643 and checked that regular CSS are now minified
• Ran the build on Gutenberg and made sure it's still working as expected

Types of changes

Added the optimize-css-assets-webpack-plugin to the minimizer config.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• [-] My code follows the accessibility standards.
• [-] I've tested my changes with keyboard and screen readers.
• [-] My code has proper inline documentation.
• [-] I've included developer documentation if appropriate.
• [-] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @christianztamayo! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[gziolo]

I tested this PR and it works as advertised. Thank you for the improvement 👍🏻

[github-actions]

Congratulations on your first merged pull request, @christianztamayo! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

[ocean90]

@gziolo This should probably be released as a breaking change because it can impact users which have their own PostCSS config which already includes cssnano (which optimize-css-assets-webpack-plugin uses by default) with a custom config for allowed optimisations.

Since sass-loader seems to minify the CSS already, should we maybe extend the default PostCSS config to use cssnano instead?

Related:

• github.com/WordPress/gutenberg/blob/44212878dcbf6f4616266eb0fb4756293a471615/tools/webpack/shared.js#L82-L93
• github.com/WordPress/gutenberg/blob/44212878dcbf6f4616266eb0fb4756293a471615/packages/scripts/config/webpack.config.js#L47-L55
• github.com/WordPress/gutenberg/blob/44212878dcbf6f4616266eb0fb4756293a471615/packages/postcss-plugins-preset/lib/index.js

[gziolo]

@ocean90, if we can avoid all the hassle by extending the default PostCSS config then it would be the best solution. Let's explore that approach. We have some time (2 weeks) because the new Gutenberg plugin was cut before I merged these changes 😄

[gziolo]

I opened a follow-up: #33750.