Scripts: Import CSS files before optimization (WordPress#61121)

* Import CSS files before optimization

Closes WordPress#61112.

* Update changelog

Co-authored-by: benoitchantre <[email protected]>
Co-authored-by: gziolo <[email protected]>

Author: 3 people

package-lock.json

@@ -228,6 +228,7 @@
 		"npm-run-all": "4.1.5",
 		"patch-package": "8.0.0",
 		"postcss": "8.4.38",
+		"postcss-import": "16.1.0",
 		"postcss-loader": "6.2.1",
 		"postcss-local-keyframes": "^0.0.2",
 		"prettier": "npm:[email protected]",

package.json

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+- Inlines CSS files imported from other CSS files before optimization in the `build` command ([#61121](https://github.com/WordPress/gutenberg/pull/61121)).
+
 ### Bug Fixes
 
 -   Added chunk filename in webpack config to avoid reading stale files ([#58176](https://github.com/WordPress/gutenberg/pull/58176)).

packages/scripts/CHANGELOG.md

@@ -119,6 +119,7 @@ const cssLoaders = [
 					plugins: isProduction
 						? [
 								...postcssPlugins,
+								require( 'postcss-import' ),
 								require( 'cssnano' )( {
 									// Provide a fallback configuration if there's not
 									// one explicitly available in the project.

packages/scripts/config/webpack.config.js

@@ -73,6 +73,7 @@
 		"npm-package-json-lint": "^6.4.0",
 		"npm-packlist": "^3.0.0",
 		"postcss": "^8.4.5",
+		"postcss-import": "^16.1.0",
 		"postcss-loader": "^6.2.1",
 		"prettier": "npm:[email protected]",
 		"puppeteer-core": "^13.2.0",