fix(css): support external CSS with lightningcss (#18389)

sapphi-red · web-flow · commit d64a1a5557b3 · 2026-06-11T19:09:16.000+09:00
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -3194,6 +3194,8 @@ function isPreProcessor(lang: any): lang is PreprocessLang {
   return lang && preprocessorSet.has(lang)
 }
 
+const absoluteOrProtocolRelativeUrlRE = /^(?:[a-z]+:)?\/\//i
+
 const importEsbuild = createCachedImport(() => import('esbuild'))
 
 const importLightningCSS = createCachedImport(() => import('lightningcss'))
@@ -3268,6 +3270,12 @@ async function compileLightningCSS(
                 return publicFile
               }
 
+              // contrary to lightningcss, postcss-import does this internally
+              if (absoluteOrProtocolRelativeUrlRE.test(id)) {
+                // @ts-expect-error -- https://github.com/parcel-bundler/lightningcss/pull/1261
+                return { external: id } as string
+              }
+
               // NOTE: with `transformer: 'postcss'`, CSS modules `composes` tried to resolve with
               //       all resolvers, but in `transformer: 'lightningcss'`, only the one for the
               //       current file type is used.
@@ -3308,7 +3316,7 @@ async function compileLightningCSS(
             config.command === 'build'
               ? !!config.build.sourcemap
               : config.css.devSourcemap,
-          analyzeDependencies: true,
+          analyzeDependencies: { preserveImports: true },
           cssModules: cssModuleRE.test(id)
             ? (config.css.lightningcss?.cssModules ?? true)
             : undefined,
@@ -3391,8 +3399,14 @@ async function compileLightningCSS(
         )
         break
       }
+      case 'import': {
+        css = css.replace(dep.placeholder, dep.url)
+        break
+      }
       default:
-        throw new Error(`Unsupported dependency type: ${dep.type}`)
+        throw new Error(
+          `Unsupported dependency type: ${(dep satisfies never as any).type}`,
+        )
     }
   }
 
diff --git a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
@@ -45,6 +45,13 @@ test('css import from js', async () => {
   await expect.poll(() => getColor(atImport)).toBe('blue')
 })
 
+test('@import external css', async () => {
+  const icon = page.locator('.icon--mdi-light--help-circle')
+  expect(
+    await icon.evaluate((span) => getComputedStyle(span).maskImage),
+  ).toContain('data:image/svg+xml,')
+})
+
 test('css modules', async () => {
   const imported = await page.$('.modules')
   expect(await getColor(imported)).toBe('turquoise')
diff --git a/playground/css-lightningcss/external.css b/playground/css-lightningcss/external.css
@@ -0,0 +1 @@
+@import 'https://api.iconify.design/mdi-light.css?icons=help-circle';
diff --git a/playground/css-lightningcss/index.html b/playground/css-lightningcss/index.html
@@ -11,6 +11,11 @@ <h1>Lightning CSS</h1>
     @import in import from js: This should be purple
   </p>
 
+  <p>
+    External CSS:
+    <span class="icon--mdi-light icon--mdi-light--help-circle"></span>
+  </p>
+
   <p class="modules">CSS modules: this should be turquoise</p>
   <p>Imported CSS module:</p>
   <pre class="modules-code"></pre>
diff --git a/playground/css-lightningcss/main.js b/playground/css-lightningcss/main.js
@@ -1,5 +1,6 @@
 import './minify.css'
 import './imported.css'
+import './external.css'
 import mod from './mod.module.css'
 import './external-url.css'
 import './css-url.css'
diff --git a/playground/css/__tests__/tests.ts b/playground/css/__tests__/tests.ts
@@ -242,6 +242,13 @@ test('layers', async () => {
   expect(await getColor('.layers-green')).toMatch('green')
 })
 
+test('@import external css', async () => {
+  const icon = page.locator('.icon--mdi-light--help-circle')
+  expect(
+    await icon.evaluate((span) => getComputedStyle(span).maskImage),
+  ).toContain('data:image/svg+xml,')
+})
+
 test('@import dependency w/ style entry', async () => {
   expect(await getColor('.css-dep')).toBe('purple')
 })
diff --git a/playground/css/external.css b/playground/css/external.css
@@ -0,0 +1 @@
+@import 'https://api.iconify.design/mdi-light.css?icons=help-circle';
diff --git a/playground/css/index.html b/playground/css/index.html
@@ -158,6 +158,11 @@ <h1>CSS</h1>
     <span class="layers-green">green</span>
   </p>
 
+  <p>
+    External CSS:
+    <span class="icon--mdi-light icon--mdi-light--help-circle"></span>
+  </p>
+
   <p class="css-dep">
     @import dependency w/ style entrypoints: this should be purple
   </p>
diff --git a/playground/css/main.js b/playground/css/main.js
@@ -52,6 +52,7 @@ import charset from './charset.css?inline'
 text('.charset-css', charset)
 
 import './layered/index.css'
+import './external.css'
 
 import './dep.css'
 import './glob-dep.css'

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+@import 'https://api.iconify.design/mdi-light.css?icons=help-circle';`