fix: svgr should not work in css file (#1106)

Author: Timeless0911

packages/core/src/asset/assetConfig.ts

@@ -139,7 +139,9 @@ const pluginLibAsset = ({ bundle }: { bundle: boolean }): RsbuildPlugin => ({
           const rule = config.module
             .rule(CHAIN_ID.RULE.SVG)
             .oneOf(CHAIN_ID.ONE_OF.SVG);
-          rule.issuer([]);
+          rule.issuer({
+            not: CSS_EXTENSIONS_PATTERN,
+          });
         }
       }
 

tests/integration/asset/index.test.ts

@@ -370,8 +370,9 @@ test('use json / yaml / toml', async () => {
 
 test('use svgr', async () => {
   const fixturePath = join(__dirname, 'svgr');
-  const { contents } = await buildAndGetResults({ fixturePath });
-
+  const { js, css } = await buildAndGetResults({ fixturePath, type: 'all' });
+  const contents = js.contents;
+  const cssContents = css.contents;
   // 0. bundle
   // esm
   const { content: indexJs } = queryContent(contents.esm0!, /index\.js/);
@@ -396,6 +397,7 @@ test('use svgr', async () => {
   );
 
   // 2. bundleless only svgr
+  // esm
   const { content: svgrLogoJs } = queryContent(
     contents.esm2!,
     /assets\/logo\.js/,
@@ -420,6 +422,27 @@ test('use svgr', async () => {
     /assets\/logo2\.cjs/,
   );
   expect(urlLogoCjs).toMatchSnapshot('should only contain url default export');
+
+  // 3. bundleless svg in css
+  // esm
+  const { content: cssEsm } = queryContent(cssContents.esm3!, /css-entry.css/);
+  expect(cssEsm).toMatchInlineSnapshot(`
+    ".logo {
+      background-image: url(./static/svg/logo.svg);
+    }
+
+    "
+  `);
+
+  // cjs
+  const { content: cssCjs } = queryContent(cssContents.cjs3!, /css-entry.css/);
+  expect(cssCjs).toMatchInlineSnapshot(`
+    ".logo {
+      background-image: url(./static/svg/logo.svg);
+    }
+
+    "
+  `);
 });
 
 test('use asset/source', async () => {

tests/integration/asset/svgr/rslib.config.ts

@@ -36,6 +36,11 @@ export default defineConfig({
     // esm
     generateBundleEsmConfig({
       bundle: false,
+      source: {
+        entry: {
+          index: ['src', '!src/css-entry.css'],
+        },
+      },
       output: {
         distPath: {
           root: './dist/esm/bundleless-mixed',
@@ -50,6 +55,11 @@ export default defineConfig({
     // cjs
     generateBundleCjsConfig({
       bundle: false,
+      source: {
+        entry: {
+          index: ['src', '!src/css-entry.css'],
+        },
+      },
       output: {
         distPath: {
           root: './dist/cjs/bundleless-mixed',
@@ -65,6 +75,11 @@ export default defineConfig({
     // esm
     generateBundleEsmConfig({
       bundle: false,
+      source: {
+        entry: {
+          index: ['src', '!src/css-entry.css'],
+        },
+      },
       output: {
         distPath: {
           root: './dist/esm/bundleless-only-svgr',
@@ -82,6 +97,11 @@ export default defineConfig({
     // cjs
     generateBundleCjsConfig({
       bundle: false,
+      source: {
+        entry: {
+          index: ['src', '!src/css-entry.css'],
+        },
+      },
       output: {
         distPath: {
           root: './dist/cjs/bundleless-only-svgr',
@@ -96,6 +116,49 @@ export default defineConfig({
         }),
       ],
     }),
+    // 3. bundleless svg in css
+    // esm
+    generateBundleEsmConfig({
+      bundle: false,
+      source: {
+        entry: {
+          index: ['src/css-entry.css'],
+        },
+      },
+      output: {
+        distPath: {
+          root: './dist/esm/bundleless-css-svg',
+        },
+      },
+      plugins: [
+        pluginSvgr({
+          svgrOptions: {
+            exportType: 'default',
+          },
+        }),
+      ],
+    }),
+    // cjs
+    generateBundleCjsConfig({
+      bundle: false,
+      source: {
+        entry: {
+          index: ['src/css-entry.css'],
+        },
+      },
+      output: {
+        distPath: {
+          root: './dist/cjs/bundleless-css-svg',
+        },
+      },
+      plugins: [
+        pluginSvgr({
+          svgrOptions: {
+            exportType: 'default',
+          },
+        }),
+      ],
+    }),
   ],
   output: {
     target: 'web',

tests/integration/asset/svgr/src/css-entry.css

@@ -0,0 +1,3 @@
+.logo {
+  background-image: url('./assets/logo.svg');
+}