vitejs · patak-dev · Aug 9, 2022 · Aug 2, 2022 · Aug 2, 2022
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
@@ -657,18 +657,22 @@ export function tryNodeResolve(
     if (!externalize) {
       return resolved
     }
-    // dont external symlink packages
+    // don't external symlink packages
     if (!allowLinkedExternal && !resolved.id.includes('node_modules')) {
       return resolved
     }
     const resolvedExt = path.extname(resolved.id)
+    // don't external non-js imports
+    if (
+      resolvedExt &&
+      resolvedExt !== '.js' &&
+      resolvedExt !== '.mjs' &&
+      resolvedExt !== '.cjs'
+    ) {
+      return resolved
+    }
     let resolvedId = id
     if (isDeepImport) {
-      // check ext before externalizing - only externalize
-      // extension-less imports and explicit .js imports
-      if (resolvedExt && !resolved.id.match(/(.js|.mjs|.cjs)$/)) {
-        return resolved
-      }
       if (!pkg?.data.exports && path.extname(id) !== resolvedExt) {
         resolvedId += resolvedExt
       }

diff --git a/playground/ssr-deps/__tests__/ssr-deps.spec.ts b/playground/ssr-deps/__tests__/ssr-deps.spec.ts
@@ -1,5 +1,5 @@
 import { port } from './serve'
-import { page } from '~utils'
+import { getColor, page } from '~utils'
 
 const url = `http://localhost:${port}`
 
@@ -108,3 +108,8 @@ test('msg from linked no external', async () => {
   await page.goto(url)
   expect(await page.textContent('.dep-virtual')).toMatch('[success]')
 })
+
+test('import css library', async () => {
+  await page.goto(url)
+  expect(await getColor('.css-lib')).toBe('blue')
+})
diff --git a/playground/ssr-deps/css-lib/index.css b/playground/ssr-deps/css-lib/index.css
@@ -0,0 +1,3 @@
+.css-lib {
+  color: blue;
+}
diff --git a/playground/ssr-deps/css-lib/package.json b/playground/ssr-deps/css-lib/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@vitejs/css-lib",
+  "private": true,
+  "version": "0.0.0",
+  "main": "./index.css"
+}
diff --git a/playground/ssr-deps/index.html b/playground/ssr-deps/index.html
@@ -8,5 +8,9 @@
   <body>
     <h1>SSR Dependencies</h1>
     <div><!--app-html--></div>
+    <script type="module">
+      // hydration scripts
+      import '@vitejs/css-lib'
+    </script>
   </body>
 </html>
diff --git a/playground/ssr-deps/package.json b/playground/ssr-deps/package.json
@@ -9,6 +9,7 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
+    "@vitejs/css-lib": "file:./css-lib",
     "bcrypt": "^5.0.1",
     "define-properties-exports": "file:./define-properties-exports",
     "define-property-exports": "file:./define-property-exports",

diff --git a/playground/ssr-deps/src/app.js b/playground/ssr-deps/src/app.js
@@ -13,6 +13,7 @@ import noExternalCjs from 'no-external-cjs'
 import importBuiltinCjs from 'import-builtin-cjs'
 import { hello as linkedNoExternal } from 'linked-no-external'
 import virtualMessage from 'pkg-exports/virtual'
+import '@vitejs/css-lib'
 
 // This import will set a 'Hello World!" message in the nested-external non-entry dependency
 import 'non-optimized-with-nested-external'
@@ -82,5 +83,7 @@ export async function render(url, rootDir) {
 
   html += `\n<p class="dep-virtual">message from dep-virtual: ${virtualMessage}</p>`
 
+  html += `\n<p class="css-lib">I should be blue</p>`
+
   return html + '\n'
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml