fix(css): ignore css imports with URL query (#806)

ocavue · sxzz · web-flow · commit c1d23a9a1687 · 2026-03-07T20:48:00.000+08:00
Co-authored-by: Kevin Deng &lt;sxzz@sxzz.moe&gt;
diff --git a/package.json b/package.json
@@ -175,6 +175,7 @@
     "typescript": "catalog:dev",
     "unocss": "catalog:docs",
     "unplugin-ast": "catalog:dev",
+    "unplugin-raw": "catalog:dev",
     "unplugin-unused": "catalog:peer",
     "unplugin-vue": "catalog:dev",
     "vite": "catalog:docs",
diff --git a/packages/css/src/preprocessors.ts b/packages/css/src/preprocessors.ts
@@ -25,7 +25,7 @@ export function getPreprocessorLang(
   return PREPROCESSOR_LANGS[ext]
 }
 
-const CSS_LANGS_RE = /\.(?:css|less|sass|scss|styl|stylus)(?:$|\?)/
+const CSS_LANGS_RE = /\.(?:css|less|sass|scss|styl|stylus)$/
 
 export function isCssOrPreprocessor(filename: string): boolean {
   return CSS_LANGS_RE.test(filename)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -35,6 +35,7 @@ catalogs:
     sass: ^1.97.3
     typescript: ~5.9.3
     unplugin-ast: ^0.16.0
+    unplugin-raw: ^0.6.4
     unplugin-vue: ^7.1.1
     vitest: ^4.0.18
   docs:
diff --git a/src/features/css/plugin.ts b/src/features/css/plugin.ts
@@ -2,7 +2,7 @@ import { createCssPostHooks, type CssStyles } from './post.ts'
 import type { ResolvedConfig } from '../../config/index.ts'
 import type { Plugin } from 'rolldown'
 
-export const RE_CSS: RegExp = /\.css(?:$|\?)/
+export const RE_CSS: RegExp = /\.css$/
 
 export function getCleanId(id: string): string {
   const queryIndex = id.indexOf('?')
diff --git a/tests/__snapshots__/css/handle-css-raw-with-unplugin-raw.snap.md b/tests/__snapshots__/css/handle-css-raw-with-unplugin-raw.snap.md
@@ -0,0 +1,10 @@
+## index.mjs
+
+```mjs
+//#endregion
+//#region index.ts
+console.log(".foo{color:red;}");
+//#endregion
+export {};
+
+```
diff --git a/tests/css.test.ts b/tests/css.test.ts
@@ -351,6 +351,24 @@ describe('css', () => {
     expect(fileMap['style.css']).not.toContain('should-not-appear')
   })
 
+  test('handle .css?raw with unplugin-raw', async (context) => {
+    const raw = await import('unplugin-raw/rolldown')
+
+    const { fileMap, outputFiles } = await testBuild({
+      context,
+      files: {
+        'index.ts': `import cssText from './foo.css?raw'; console.log(cssText);`,
+        'foo.css': `.foo{color:red;}`,
+      },
+      options: {
+        entry: ['index.ts'],
+        plugins: [raw.default({})],
+      },
+    })
+    expect(outputFiles).toEqual(['index.mjs'])
+    expect(fileMap['index.mjs']).toContain(`.foo{color:red;}`)
+  })
+
   describe('@import bundling', () => {
     test('diamond dependency graph', async (context) => {
       // From esbuild TestCSSAtImport

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ export function getPreprocessorLang(`
`25`	`25`	`return PREPROCESSOR_LANGS[ext]`
`26`	`26`	`}`
`27`	`27`
`28`		`-const CSS_LANGS_RE = /\.(?:css\|less\|sass\|scss\|styl\|stylus)(?:$\|\?)/`
	`28`	`+const CSS_LANGS_RE = /\.(?:css\|less\|sass\|scss\|styl\|stylus)$/`
`29`	`29`
`30`	`30`	`export function isCssOrPreprocessor(filename: string): boolean {`
`31`	`31`	`return CSS_LANGS_RE.test(filename)`