Improved Windows support (#133)

Author: mattcompiles

.changeset/funny-candles-sin.md

@@ -0,0 +1,8 @@
+---
+'@vanilla-extract/babel-plugin': patch
+'@vanilla-extract/integration': patch
+---
+
+Improve Windows support
+
+Normalize all file paths to POSIX format. This fixes incorrect file paths on Windows and ensures consistent hashes across all operating systems.

packages/babel-plugin/src/index.ts

@@ -1,4 +1,4 @@
-import { relative } from 'path';
+import { relative, posix, sep } from 'path';
 import { types as t, PluginObj, PluginPass, NodePath } from '@babel/core';
 import template from '@babel/template';
 import { getPackageInfo } from '@vanilla-extract/integration';
@@ -158,7 +158,10 @@ export default function (): PluginObj<Context> {
         );
       }
       this.packageName = packageInfo.name;
-      this.filePath = relative(packageInfo.dirname, opts.filename);
+      // Encode windows file paths as posix
+      this.filePath = posix.join(
+        ...relative(packageInfo.dirname, opts.filename).split(sep),
+      );
     },
     visitor: {
       Program: {

packages/integration/src/compile.ts

@@ -1,4 +1,4 @@
-import { dirname, relative, join } from 'path';
+import { dirname, relative, join, posix, sep } from 'path';
 import { promises as fs } from 'fs';
 
 import { build as esbuild, Plugin } from 'esbuild';
@@ -15,7 +15,10 @@ export const vanillaExtractFilescopePlugin = (): Plugin => ({
       const originalSource = await fs.readFile(path, 'utf-8');
 
       if (originalSource.indexOf('@vanilla-extract/css/fileScope') === -1) {
-        const filePath = relative(packageInfo.dirname, path);
+        // Encode windows file paths as posix
+        const filePath = posix.join(
+          ...relative(packageInfo.dirname, path).split(sep),
+        );
 
         const contents = `
         import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";

packages/integration/src/processVanillaFile.ts

@@ -1,5 +1,3 @@
-import path from 'path';
-
 import { FileScope, Adapter } from '@vanilla-extract/css';
 import { setAdapter } from '@vanilla-extract/css/adapter';
 import { transformCss } from '@vanilla-extract/css/transformCss';
@@ -91,13 +89,11 @@ export function processVanillaFile({
     }).join('\n');
 
     const base64Source = Buffer.from(css, 'utf-8').toString('base64');
-    const fileName = path.normalize(
-      `${
-        filescope.packageName
-          ? `${filescope.packageName}/${filescope.filePath}`
-          : filescope.filePath
-      }.vanilla.css`,
-    );
+    const fileName = `${
+      filescope.packageName
+        ? `${filescope.packageName}/${filescope.filePath}`
+        : filescope.filePath
+    }.vanilla.css`;
 
     const virtualCssFilePath = serializeVirtualCssPath
       ? serializeVirtualCssPath({ fileName, base64Source })