Styles optimization is not applied when using Webpack 5

[markogresak]

Current Behavior

The output CSS is not minified when running the production build with webpack 5.

Expected Behavior

The CSS should be minified when using --prod or NODE_ENV=production. The minification works with webpack 4.

Steps to Reproduce

Can you reproduce this on https://github.com/nrwl/nx-examples?

No, because that's using webpack 4. However, upgrading to webpack 5 would highlight the problem.

I have created a project to reproduce the problem: https://github.com/markogresak/nx-styles-bug#reproducing-the-css-minification-problem

It's a project where I've added only some randomly generated css to the output.

Failure Logs

head dist/apps/nx-styles-bug/591.*.css
# .class-379ede02-a93d-42b1-8b32-b0f3d3bbe848 {
#   color: #3b82f6;
#   color: red;
#   background-color: rgb(1,2,3);
#   color: #3b82f6;
# }
#
# .class-8ca8dc36-4d18-4c2b-8aea-9d12461cdabc {
#   border-color: rgba(255,255,255,1);
#   border-color: #0f0;

As you can see, the output is not minified.

Environment

nx report

>  NX  Report complete - copy this into the issue template

  Node : 16.4.0
  OS   : darwin x64
  npm  : 7.19.0

  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 12.8.0
  @nrwl/cypress : 12.8.0
  @nrwl/devkit : 12.8.0
  @nrwl/eslint-plugin-nx : 12.8.0
  @nrwl/express : Not Found
  @nrwl/jest : 12.8.0
  @nrwl/linter : 12.8.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/nx-cloud : Not Found
  @nrwl/react : 12.8.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.8.0
  @nrwl/web : 12.8.0
  @nrwl/workspace : 12.8.0
  @nrwl/storybook : 12.8.0
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

[markogresak]

Update: I have upgraded the project to 12.8.0, and I have removed tailwind to avoid any external factors. Now using only randomly generated css. I have pushed the changes to the repo (link in my previous comment).

Still experiencing the same problem, css is not minified with wepback 5.

[markogresak]

I have tested with nx 12.9.0 and the css is still not minified in production build.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.