fix(angular-rspack): process styles correctly handling urls (#40)

Author: Coly010

Diff for: e2e/fixtures/rspack-csr-css/rspack.config.js

@@ -7,8 +7,15 @@ module.exports = () => {
           root: __dirname,
           name: 'rspack-csr-css',
           index: './src/index.html',
-          assets: [{ glob: '**/*', input: 'public' }],
-          styles: ['./src/styles.css'],
+          assets: [
+            {
+              input: '../shared/assets/src/assets',
+              glob: '**/*',
+              output: 'assets',
+            },
+            { glob: '**/*', input: 'public' },
+          ],
+          styles: ['../shared/styles/src/index.scss', './src/styles.css'],
           polyfills: ['zone.js'],
           main: './src/main.ts',
           outputPath: {

Diff for: e2e/fixtures/rspack-csr-css/src/app/app.component.html

@@ -1,4 +1,5 @@
 <p>{{ greeting$ | async }}</p>
+<p class="icon-github">&nbsp;</p>
 <app-scss-inline-test></app-scss-inline-test>
 <app-nx-welcome></app-nx-welcome>
 <router-outlet></router-outlet>

Diff for: e2e/fixtures/shared/assets/src/assets/icons/github.png

@@ -0,0 +1 @@
+@import './lib/global';

Diff for: e2e/fixtures/shared/styles/src/index.scss

@@ -0,0 +1,3 @@
+.icon-github {
+  background-image: url('/assets/icons/github.png');
+}

Diff for: e2e/fixtures/shared/styles/src/lib/global.scss

@@ -72,6 +72,7 @@
     "less-loader": "^12.2.0",
     "nx": "20.3.0",
     "prettier": "^2.6.2",
+    "resolve-url-loader": "^5.0.0",
     "sass": "^1.79.3",
     "sass-embedded": "^1.79.3",
     "sass-loader": "^16.0.2",

Diff for: package.json

@@ -48,13 +48,14 @@
     "@nx/angular-rspack-compiler": "workspace:*",
     "@nx/devkit": "^20.0.0",
     "express": "4.21.1",
-    "source-map-loader": "^5.0.0",
+    "css-loader": "^7.1.2",
     "jsonc-parser": "^3.3.1",
     "less-loader": "^12.2.0",
     "license-webpack-plugin": "^4.0.2",
+    "resolve-url-loader": "^5.0.0",
     "sass-embedded": "^1.79.3",
     "sass-loader": "^16.0.2",
-    "css-loader": "^7.1.2",
+    "source-map-loader": "^5.0.0",
     "tslib": "^2.3.0",
     "webpack-merge": "^6.0.1",
     "ws": "^8.18.0"

Diff for: packages/angular-rspack/package.json

@@ -6,6 +6,7 @@ import {
   SourceMapDevToolPlugin,
   RspackPluginInstance,
   RuleSetRule,
+  CssExtractRspackPlugin,
 } from '@rspack/core';
 import { merge as rspackMerge } from 'webpack-merge';
 import { resolve } from 'path';
@@ -18,7 +19,7 @@ import {
   JS_ALL_EXT_REGEX,
   TS_ALL_EXT_REGEX,
 } from '@nx/angular-rspack-compiler';
-import { getStyleLoaders } from './style-config-utils';
+import { getStyleLoaders, getStylesEntry } from './style-config-utils';
 import { getOutputHashFormat } from './helpers';
 import { getProxyConfig } from './dev-server-config-utils';
 import { DevToolsIgnorePlugin } from '../plugins/tools/dev-tools-ignore-plugin';
@@ -116,18 +117,12 @@ export async function _createConfig(
         configFile: normalizedOptions.tsConfig,
       },
     },
-    experiments: {
-      css: true,
-    },
     module: {
       parser: {
         javascript: {
           requireContext: false,
           url: false,
         },
-        'css/auto': {
-          esModule: true,
-        },
       },
       rules: [
         ...getStyleLoaders(
@@ -169,7 +164,12 @@ export async function _createConfig(
         },
       ],
     },
-    plugins: [...sourceMapPlugins],
+    plugins: [
+      ...sourceMapPlugins,
+      new CssExtractRspackPlugin({
+        filename: `[name]${hashFormat.extract}.css`,
+      }),
+    ],
   };
 
   const configs: Configuration[] = [];
@@ -316,6 +316,9 @@ export async function _createConfig(
       main: {
         import: [normalizedOptions.browser],
       },
+      styles: {
+        import: getStylesEntry(normalizedOptions),
+      },
     },
     devServer: {
       headers: {

Diff for: packages/angular-rspack/src/lib/config/create-config.ts

@@ -1,5 +1,6 @@
 import { StylePreprocessorOptions } from '@nx/angular-rspack-compiler';
-import { SourceMap } from '../models';
+import { NormalizedAngularRspackPluginOptions, SourceMap } from '../models';
+import { CssExtractRspackPlugin } from '@rspack/core';
 
 export function getIncludePathOptions(includePaths?: string[]) {
   if (!includePaths || includePaths.length === 0) {
@@ -20,18 +21,33 @@ export function getSassLoaderConfig(
   return {
     test: /\.?(sa|sc)ss$/,
     use: [
+      CssExtractRspackPlugin.loader,
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          url: false,
+          sourceMap: sourceMap?.styles,
+          importLoaders: 1,
+        },
+      },
+      {
+        loader: require.resolve('resolve-url-loader'),
+        options: {
+          sourceMap: sourceMap?.styles,
+        },
+      },
       {
         loader: 'sass-loader',
         options: {
           api: 'modern-compiler',
           sourceMap: sourceMap?.styles,
+          sourceMapIncludeSources: true,
           implementation: require.resolve('sass-embedded'),
           ...(sassPathOptions ?? []),
           ...(sassOptions ?? {}),
         },
       },
     ],
-    type: 'css/auto',
   };
 }
 
@@ -42,6 +58,15 @@ export function getLessLoaderConfig(
   return {
     test: /\.less$/,
     use: [
+      CssExtractRspackPlugin.loader,
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          url: false,
+          sourceMap: sourceMap?.styles,
+          importLoaders: 1,
+        },
+      },
       {
         loader: 'less-loader',
         options: {
@@ -51,7 +76,6 @@ export function getLessLoaderConfig(
         },
       },
     ],
-    type: 'css/auto',
   };
 }
 
@@ -69,6 +93,20 @@ export function getStyleLoaders(
     getIncludePathOptions(stylePreprocessorOptions?.includePaths);
 
   return [
+    {
+      test: /\.css$/i,
+      use: [
+        CssExtractRspackPlugin.loader,
+        {
+          loader: require.resolve('css-loader'),
+          options: {
+            url: false,
+            sourceMap: sourceMap?.styles,
+            importLoaders: 1,
+          },
+        },
+      ],
+    },
     getSassLoaderConfig(
       sassPathOptions,
       stylePreprocessorOptions?.sass,
@@ -77,3 +115,16 @@ export function getStyleLoaders(
     getLessLoaderConfig(lessPathOptions, sourceMap),
   ];
 }
+
+export function getStylesEntry(
+  options: NormalizedAngularRspackPluginOptions
+): string[] {
+  const styles = options.globalStyles ?? [];
+  const allStyleEntries: string[] = [];
+  for (const style of styles) {
+    for (const file of style.files) {
+      allStyleEntries.push(file);
+    }
+  }
+  return allStyleEntries;
+}