fix: css check

Author: SoonIter

packages/core/src/config.ts

@@ -1007,18 +1007,6 @@ const composeBundlelessExternalConfig = (
             if (contextInfo.issuer) {
               let resolvedRequest: string = request;
 
-              const cssExternal = cssExternalHandler(
-                resolvedRequest,
-                callback,
-                jsExtension,
-                cssModulesAuto,
-                isStyleRedirected,
-              );
-
-              if (cssExternal !== false) {
-                return cssExternal;
-              }
-
               if (jsRedirectPath) {
                 try {
                   resolvedRequest = await resolver(context, resolvedRequest);
@@ -1043,6 +1031,21 @@ const composeBundlelessExternalConfig = (
                 }
               }
 
+              const cssExternal = cssExternalHandler(
+                resolvedRequest,
+                callback,
+                jsExtension,
+                jsRedirectExtension,
+                cssModulesAuto,
+                isStyleRedirected,
+              );
+
+              console.log(cssExternal, resolvedRequest, 11111);
+
+              if (cssExternal !== false) {
+                return cssExternal;
+              }
+
               // Node.js ECMAScript module loader does no extension searching.
               // Add a file extension according to autoExtension config
               // when data.request is a relative path and do not have an extension.

packages/core/src/css/cssConfig.ts

@@ -83,11 +83,10 @@ export function cssExternalHandler(
   request: string,
   callback: ExternalCallback,
   jsExtension: string,
+  jsRedirectExtension: boolean,
   auto: CssLoaderOptionsAuto,
   isStyleRedirect: boolean,
 ): void | false {
-  const isCssModulesRequest = isCssModulesFile(request, auto);
-
   // cssExtract would execute the file handled by css-loader, so we cannot external the "helper import" from css-loader
   // do not external @rsbuild/core/compiled/css-loader/noSourceMaps.js, sourceMaps.js, api.mjs etc.
   if (/compiled\/css-loader\//.test(request)) {
@@ -101,8 +100,14 @@ export function cssExternalHandler(
     if (!isStyleRedirect) {
       return callback(undefined, request);
     }
+    const isCssModulesRequest = isCssModulesFile(request, auto);
     if (isCssModulesRequest) {
-      return callback(undefined, request.replace(/\.[^.]+$/, jsExtension));
+      return callback(
+        undefined,
+        jsRedirectExtension
+          ? request.replace(/\.[^.]+$/, jsExtension)
+          : request,
+      );
     }
     return callback(undefined, request.replace(/\.[^.]+$/, '.css'));
   }

tests/integration/redirect/js-import-css/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "redirect-js-import-css-test",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module"
+}

tests/integration/redirect/js-import-css/rslib.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [
+    generateBundleEsmConfig({
+      bundle: false,
+    }),
+    generateBundleCjsConfig({
+      bundle: false,
+    }),
+  ],
+  source: {
+    entry: {
+      index: ['./src/**'],
+    },
+  },
+  output: {
+    target: 'web',
+  },
+});

tests/integration/redirect/js-import-css/src/css/index.css

@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}

tests/integration/redirect/js-import-css/src/css/index.ts

@@ -0,0 +1 @@
+import '@/css/index.css';

tests/integration/redirect/js-import-css/src/module/index.module.css

@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}

tests/integration/redirect/js-import-css/src/module/index.ts

@@ -0,0 +1,4 @@
+// @ts-ignore env.d.ts
+import styles from '@/module/index.module.css';
+
+styles;

tests/integration/redirect/js-import-css/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@rslib/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

tests/integration/redirect/jsImportCss.test.ts

@@ -0,0 +1,41 @@
+import path from 'node:path';
+import { buildAndGetResults, getFileBySuffix } from 'test-helper';
+import { expect, test } from 'vitest';
+
+test('should handle the crossing case import "@/css/button.css"', async () => {
+  const fixturePath = path.resolve(__dirname, './js-import-css');
+  const { contents } = await buildAndGetResults({ fixturePath });
+  console.log(contents);
+  const esmFiles = Object.keys(contents.esm);
+  expect(esmFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/redirect/js-import-css/dist/esm/css/index.js",
+      "<ROOT>/tests/integration/redirect/js-import-css/dist/esm/module/index.js",
+      "<ROOT>/tests/integration/redirect/js-import-css/dist/esm/module/index.module.js",
+    ]
+  `);
+  const cssIndexJs = getFileBySuffix(contents.esm, 'css/index.js');
+  expect(cssIndexJs).toMatchInlineSnapshot(`
+    "import "./index.css";
+    "
+  `);
+  const cssModuleIndexJs = getFileBySuffix(contents.esm, 'module/index.js');
+  expect(cssModuleIndexJs).toMatchInlineSnapshot(`
+    "import * as __WEBPACK_EXTERNAL_MODULE__index_module_js_6796f91d__ from "./index.module.js";
+    __WEBPACK_EXTERNAL_MODULE__index_module_js_6796f91d__["default"];
+    "
+  `);
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/redirect/js-import-css/dist/cjs/css/index.cjs",
+      "<ROOT>/tests/integration/redirect/js-import-css/dist/cjs/module/index.cjs",
+      "<ROOT>/tests/integration/redirect/js-import-css/dist/cjs/module/index.module.cjs",
+    ]
+  `);
+  const cssIndexCjs = getFileBySuffix(contents.cjs, 'css/index.cjs');
+  expect(cssIndexCjs).toContain('require("./index.css")');
+  const cssModuleIndexCjs = getFileBySuffix(contents.cjs, 'module/index.cjs');
+  expect(cssModuleIndexCjs).toContain('require("./index.module.cjs")');
+});