@nx/webpack scss / style processing doesn't use webpack 5 asset module processing of images

ziacik commented 1 year ago

Current Behavior

Hi. Once again I'm going to report this, since I still believe the implementation of image processing in the css files is not correct in @nx/webpack.

I would expect, that stuff like this:

body {
  background-image: url('./placeholder.png');
}

would let webpack's asset processor to process the image, and depending on the image asset settings, it would inline the image if possible.

Current default setting for image processing is "asset" with a dataUrlCondition of maxSize: 10000, so the small enough image should be inlined.

But it isn't.

Expected Behavior

Image asset rule should be respected in url() references of styles.

So with default setting, an image < 10000 should be inlined.

GitHub Repo

https://github.com/ziacik/nx-bug-1

Steps to Reproduce

Put a small enough image in the app
Import it via url() in scss
Build the app
Check if the image is inlined (it isn't)

(See my repo, build the main app nx build)

Nx Report

>  NX   Its time to update Nx 🎉

   Your repository uses a higher version of Nx (16.5.1) than your global CLI version (15.9.2)
   For more information, see https://nx.dev/more-concepts/global-nx

 >  NX   Report complete - copy this into the issue template

   Node   : 16.17.1
   OS     : linux-x64
   npm    : 9.6.3

   nx (global)        : 15.9.2
   nx                 : 16.5.1
   @nx/js             : 16.5.1
   @nx/jest           : 16.5.1
   @nx/linter         : 16.5.1
   @nx/workspace      : 16.5.1
   @nx/cypress        : 16.5.1
   @nx/devkit         : 16.5.1
   @nx/eslint-plugin  : 16.5.1
   @nrwl/tao          : 16.5.1
   @nx/web            : 16.5.1
   @nx/webpack        : 16.5.1
   typescript         : 5.1.6

Failure Logs

No response

Operating System

[ ] macOS
[X] Linux
[ ] Windows
[ ] Other (Please specify)

Additional Information

I tried to investigate and figured out that this is probably caused by hardcoded image processing via postcss specifically the nx's PostcssCliResources postcss plugin.

Because of that, css-loader is configured with { url: false } option which I believe disables processing of urls by css-loader which (as I found) doesn't have such problem with the images and leverages the webpack's asset image processing correctly.

I don't know why this is configured like that. I don't know what else the PostCss loader does (is it documented? i don't think so). Looking at the PostcssCliResources plugin, it uses webpack to emit files, but they don't seem to be further processed by webpack (is this the bug? maybe it should be emitted some other way? i don't know, i'm no expert on webpack).

I can have a workaround by removing the css rules configured by withWeb() and adding something like this back:

{
    test: /\.(scss|css)$/i,
    use: ['style-loader', 'css-loader', 'sass-loader'],
}

With this, the inlining works as expected. But as I said, I don't know what the postcss-loader does and whether I should use it or what. (See in my repo when you uncomment the rules: line).

I'd be happy if there was less messing with standard ways of webpack configuration so that I can know what to expect. Or at least if the stuff was documented and configurable in such a way that workarounds are not needed, especially when the workaround means inspecting current configuration of rules, finding the correct rules and "subrules", splicing and replacing and hoping it won't break with the next nx version upgrade (as happened to me).

Anyway, besides the criticism, I still thank you for the work you do on this.

kazamov commented 1 year ago

Hello. I have a similar issue, but I am importing the scss file inside by global styles.scss endpoint that has references to the local font files. If I remove the PostcssCliResources plugin, everything works perfectly. There was already a Pull Request 14616 where that plugin was disabled for the CSS module. But it looks like the fix should be more profound.

@leosvelperez can you tell me the purpose of the PostcssCliResources plugin just out of curiosity? I did not find the comments in your repository regarding it.

edwardw-cit commented 9 months ago

Yeah, I face a similar issue. After days of struggling, I finally found the cause of the problem.

the PostcssCliResources will always emit the file, is there any one can tell me why we do that?

nrwl / nx