Styles bundle is not included when using Webpack 5

[markogresak]

Current Behavior

The styles bundle is not included in the dist/.../index.html when using Webpack 5. This happens if there is more than one file in build.styles config of workspace.json.

Expected Behavior

All of the files listed in build.styles are bundled into a single styles.[hash].css and included in the dist/.../index.html file. It worked like this in webpack 4.

Steps to Reproduce

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

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

Failure Logs

grep css dist/apps/nx-styles-bug/index.html
# <link rel="stylesheet" href="main.79da9420fe0c20301be7.css"></head>

It's missing the 591.f4af1e18666da591d76a.css, which includes the stylesheets listed in workspace.json under build.styles. Also, the missing file should be named styles.[hash].css.

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

[danr-za]

I think it relates to my issue as well - #6664
It might due to size as well

[jaysoo]

Can you try again with Nx 12.8.0?

Also make sure to refer to the tailwind guide. https://nx.dev/latest/react/guides/using-tailwind-css-in-react#using-tailwind-css-in-react

If it's because of #6558, I know what the issue is and it will be patched soon.

[markogresak]

@jaysoo I have tried with nx 12.8.0, still the same problem. I have pushed the updates to my repo at https://github.com/markogresak/nx-styles-bug#reproducing-the-problem-with-missing-styles-bundle.
I have updated my original comment to reflect the changes.

Tailwind is irrelevant here. To avoid any external factors, I have changed my reproduction repo to remove tailwind and use custom generated css.

And yes, you're correct; the issue happens when there's > 50kB css. I've changed the generate script in my repo to generate smaller css and it did include it, but as soon as it hit 50kB mark, it was skipped.

[jaysoo]

I have a fix ready for this. Going to see if we can cut a patch release for 12.8.0. We're also releasing 12.9.0 next week.

In the meantime the only workaround is going back to webpack 4, or you can customize the webpack to remove the optimization.splitChunks.styles entry.

[markogresak]

My workaround for now was to move the styles to import statements in JS and that works. And I’ve added a custom css minifier config to also fix #6816.

[jaysoo]

Great, sorry for the inconvenience. We'll get both the split chunks and minification fixed soon.

[markogresak]

Great, sorry for the inconvenience. We'll get both the split chunks and minification fixed soon.

No worries, no inconvenience caused, the workaround was simple. I’ve accepted the fact that webpack 5 support is still new and can have issues. I’m happy to test it out and provide feedback.
Thank you for working on Nx and making it available for free, it saves us a lot of time.

[danr-za]

Great, sorry for the inconvenience. We'll get both the split chunks and minification fixed soon.

No worries, no inconvenience caused, the workaround was simple. I’ve accepted the fact that webpack 5 support is still new and can have issues. I’m happy to test it out and provide feedback.
Thank you for working on Nx and making it available for free, it saves us a lot of time.

+1

[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.