Scripts: Add PostCSS (.pcss extension) file support to wp-scripts (#4…

…5352)

* Add pcss file extension to splitChunks cache group test regex.

* Add .pcss loader rule for processing PostCSS files via the existing cssLoaders config.

* Add PostCSS files (.pcss extension) to SVG asset-inlining loader to allow inlining SVGs from PostCSS files.

* Add PostCSS files (.pcss extension) default stylelint rules.

* Add PostCSS (.pcss extension) file support to README.md

* Add CHANGELOG.md entry.

* Add PR number to changelog entry.

---------

Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>

packages/scripts/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### New Features
 
 -   The `WP_DEVTOOL` environment variable can now be used to set the Webpack devtool option for sourcemaps in production builds ([#46812](https://github.com/WordPress/gutenberg/pull/46812)). Previously, this only worked for development builds.
+-   Update default webpack config and lint-style script to allow PostCSS (`.pcss` extension) file usage ([#45352](https://github.com/WordPress/gutenberg/pull/45352)).
 
 ## 25.3.0 (2023-02-01)
 

packages/scripts/README.md

@@ -275,7 +275,7 @@ _Example:_
 
 This is how you execute the script with presented setup:
 
--   `npm run lint:style` - lints CSS and SCSS files in the entire project’s directories.
+-   `npm run lint:style` - lints CSS, PCSS, and SCSS files in the entire project’s directories.
 -   `npm run lint:css:src` - lints only CSS files in the project’s `src` subfolder’s directories.
 
 When you run commands similar to the `npm run lint:css:src` example above, be sure to include the quotation marks around file globs. This ensures that you can use the powers of [globby](https://github.com/sindresorhus/globby) (like the `**` globstar) regardless of your shell. See [more examples](https://github.com/stylelint/stylelint/blob/HEAD/docs/user-guide/cli.md#examples).
@@ -587,14 +587,15 @@ $body-color: red;
 
 ```js
 // index.js
+import './index.pcss';
 import './index.scss';
 import './style.css';
 ```
 
 When you run the build using the default command `wp-scripts build` (also applies to `start`) in addition to the JavaScript file `index.js` generated in the `build` folder, you should see two more files:
 
 1. `index.css` – all imported CSS files are bundled into one chunk named after the entry point, which defaults to `index.js`, and thus the file created becomes `index.css`. This is for styles used only in the editor.
-2. `style-index.css` – imported `style.css` file(s) (applies to SASS and SCSS extensions) get bundled into one `style-index.css` file that is meant to be used both on the front-end and in the editor.
+2. `style-index.css` – imported `style.css` file(s) (applies to PCSS, SASS and SCSS extensions) get bundled into one `style-index.css` file that is meant to be used both on the front-end and in the editor.
 
 You can also have multiple entry points as described in the docs for the script:
 

packages/scripts/config/webpack.config.js

@@ -109,7 +109,7 @@ const config = {
 			cacheGroups: {
 				style: {
 					type: 'css/mini-extract',
-					test: /[\\/]style(\.module)?\.(sc|sa|c)ss$/,
+					test: /[\\/]style(\.module)?\.(pc|sc|sa|c)ss$/,
 					chunks: 'all',
 					enforce: true,
 					name( _, chunks, cacheGroupKey ) {
@@ -180,6 +180,10 @@ const config = {
 				test: /\.css$/,
 				use: cssLoaders,
 			},
+			{
+				test: /\.pcss$/,
+				use: cssLoaders,
+			},
 			{
 				test: /\.(sc|sa)ss$/,
 				use: [
@@ -200,7 +204,7 @@ const config = {
 			},
 			{
 				test: /\.svg$/,
-				issuer: /\.(sc|sa|c)ss$/,
+				issuer: /\.(pc|sc|sa|c)ss$/,
 				type: 'asset/inline',
 			},
 			{

packages/scripts/scripts/lint-style.js

@@ -18,7 +18,7 @@ const {
 
 const args = getArgsFromCLI();
 
-const defaultFilesArgs = hasFileArgInCLI() ? [] : [ '**/*.{css,scss}' ];
+const defaultFilesArgs = hasFileArgInCLI() ? [] : [ '**/*.{css,pcss,scss}' ];
 
 // See: https://stylelint.io/user-guide/configuration
 const hasLintConfig =