fix(vite): css url() resolve error (#1263)

* fix(vite): css `url()` resolve error * docs(changeset): add changeset * fix(vite): build resolve filename
callstack · Jul 5, 2023 · a6a29da · a6a29da
1 parent 890b4ac
commit a6a29da
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/.changeset/vite-url-resolve.md b/.changeset/vite-url-resolve.md
@@ -0,0 +1,5 @@
+---
+'@linaria/vite': patch
+---
+
+Fix vite css `url()` resolve error
diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts
@@ -37,6 +37,7 @@ export default function linaria({
 }: VitePluginOptions = {}): Plugin {
   const filter = createFilter(include, exclude);
   const cssLookup: { [key: string]: string } = {};
+  const cssFileLookup: { [key: string]: string } = {};
   let config: ResolvedConfig;
   let devServer: ViteDevServer;
 
@@ -54,16 +55,14 @@ export default function linaria({
       devServer = _server;
     },
     load(url: string) {
-      const [id] = url.split('?');
+      const [id] = url.split('?', 1);
       return cssLookup[id];
     },
     /* eslint-disable-next-line consistent-return */
     resolveId(importeeUrl: string) {
-      const [id, qsRaw] = importeeUrl.split('?');
-      if (id in cssLookup) {
-        if (qsRaw?.length) return importeeUrl;
-        return id;
-      }
+      const [id] = importeeUrl.split('?', 1);
+      if (cssLookup[id]) return id;
+      return cssFileLookup[id];
     },
     handleHotUpdate(ctx) {
       // it's module, so just transform it
@@ -92,7 +91,7 @@ export default function linaria({
       return modules;
     },
     async transform(code: string, url: string) {
-      const [id] = url.split('?');
+      const [id] = url.split('?', 1);
 
       // Do not transform ignored and generated files
       if (url.includes('node_modules') || !filter(url) || id in cssLookup)
@@ -119,7 +118,7 @@ export default function linaria({
 
           log('resolve', "✅ '%s'@'%s -> %O\n%s", what, importer, resolved);
           // Vite adds param like `?v=667939b3` to cached modules
-          const resolvedId = resolved.id.split('?')[0];
+          const resolvedId = resolved.id.split('?', 1)[0];
 
           if (resolvedId.startsWith('\0')) {
             // \0 is a special character in Rollup that tells Rollup to not include this in the bundle
@@ -172,7 +171,7 @@ export default function linaria({
       }
 
       cssLookup[cssFilename] = cssText;
-      cssLookup[cssId] = cssText;
+      cssFileLookup[cssId] = cssFilename;
 
       result.code += `\nimport ${JSON.stringify(cssFilename)};\n`;
       if (devServer?.moduleGraph) {