wp-scripts build doesn't minify CSS that was @import

[cawa-93]

Description

When building, part of the CSS is imported from another file. The CSS at the entry point is minified and processed with prefixes. However, the imported CSS is inserted "as is" without minification and prefix processing.

Step-by-step reproduction instructions

Create external.css with

.external {
    /* Comment */
    appearance: none;
}

Create entry.css with

@import "external.css";

.entry {
    /* Comment  */
    appearance: none;
}

In package.json add browserslist property:

{
  "browserslist": [
    "ff 10"
  ],
}

In project root add webpack.config.js:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const path = require( 'path' );

module.exports = {
    ...defaultConfig,
    mode: 'production',
    entry: 'path/to/entry.css',
};

Run wp-scripts build

After that you should find build/main.css folder in project root.

Expected main.css content

.external{-moz-appearance:none;appearance:none}
.entry{-moz-appearance:none;appearance:none}

/* or */
.entry,.external{-webkit-appearance:none;appearance:none}

Actual main.css content

.external {
    /* Comment */
    appearance: none;
}

.entry{-moz-appearance:none;appearance:none}

Screenshots, screen recording, code snippet

No response

Environment info

@wordpress/scripts: 26.16.0,

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[gziolo]

I was able to reproduce the issue. It looks like adding importLoaders option to the css-loader configuration in the default webpack config does the trick:

I used:

	{
		loader: require.resolve( 'css-loader' ),
		options: {
			sourceMap: ! isProduction,
			importLoaders: 1,
			modules: {
				auto: true,
			},
		},
	},

This way PostCSS also runs on the imported files.

[benoitchantre]

Thank you @gziolo !

I was also able to reproduce and can confirm that your suggestion works.