Scripts: The build command does not minify CSS files

[TobiasBg]

Description

When using @wordpress/scripts, npm run build does not minify CSS files (from /src to /build) - but it does minify SCSS files.
Also see https://wordpress.slack.com/archives/C5UNMSU4R/p1626967073250600.

Step-by-step reproduction instructions

Create a very basic project:

• package.json:

{
  "name": "css-minify-test",
  "devDependencies": {
    "@wordpress/scripts": "^17.0.0"
  },
  "scripts": {
    "build": "wp-scripts build"
  }
}

• /src/index.css:

.test {
    color: #ff0000;
}

• /src/index.js:

import './index.css';
console.log( 'test' );

• Run npm install.
• Run npm run build.

Expected behaviour

There should be a minified index.css file in /build.

Actual behaviour

index.css is not minified, but just an unminified copy from /src.
(The index.js and index.asset.php files are fine.)

The console output of npm run build is

% npm run build

> build
> wp-scripts build

Hash: 147a619670267d633bd4
Version: webpack 4.46.0
Time: 1222ms
Built at: 23.07.2021 09:59:59
          Asset       Size  Chunks             Chunk Names
index.asset.php  108 bytes       0  [emitted]  index
      index.css   31 bytes       0  [emitted]  index
       index.js  971 bytes       0  [emitted]  index
Entrypoint index = index.css index.js index.asset.php
[0] ./src/index.js + 1 modules 92 bytes {0} [built]
    | ./src/index.js 42 bytes [built]
    | ./src/index.css 50 bytes [built]
    + 1 hidden module

If all this is done with a SCSS file /src/index.scss, the /build/index.css is properly minified. Thus, this seems to be affecting CSS files only!

Version information

• macOS Catalina 10.15.7
• node 16.5.0, npm 7.19.1 (both installed via Homebrew)
• @wordpress/scripts: 17.0.0 (16.1.4 has the same problem)

[christianztamayo]

Hi @TobiasBg I would like to take on this issue

[TobiasBg]

Hi @christianztamayo! Sure, feel free to do so! Thanks a lot!

[christianztamayo]

Great @TobiasBg. I just became available today and have now submitted a PR. Thanks!