Fix vite file path bug (#398)

* Strip the used thing off the file path if it exists

* Add changeset

Author: Ben Jervis

.changeset/ninety-pears-march.md

@@ -0,0 +1,8 @@
+---
+'@vanilla-extract/vite-plugin': patch
+---
+
+Fixes a bug with vite where "?used" is appended to the file path of css files.
+
+This could cause different class name hashes to be generated between SSR and client builds.
+This was introduced in vite 2.6.0.

packages/vite-plugin/src/index.ts

@@ -71,16 +71,19 @@ export function vanillaExtractPlugin({
         return null;
       }
 
+      const usedIndex = id.indexOf('?used');
+      const fixedId = usedIndex > 0 ? id.substring(0, usedIndex) : id;
+
       if (ssr || useRuntime) {
         return addFileScope({
           source: code,
-          filePath: normalizePath(path.relative(packageInfo.dirname, id)),
+          filePath: normalizePath(path.relative(packageInfo.dirname, fixedId)),
           packageInfo,
         }).source;
       }
 
       const { source, watchFiles } = await compile({
-        filePath: id,
+        filePath: fixedId,
         cwd: config.root,
       });
 
@@ -90,7 +93,7 @@ export function vanillaExtractPlugin({
 
       return processVanillaFile({
         source,
-        filePath: id,
+        filePath: fixedId,
         outputCss: !ssr,
         identOption:
           identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),