From a50de7505849a317d76713d225514050a38e23e2 Mon Sep 17 00:00:00 2001 From: mattcompiles Date: Fri, 14 May 2021 12:19:41 +1000 Subject: [PATCH] Improved Windows support (#133) --- .changeset/funny-candles-sin.md | 8 ++++++++ packages/babel-plugin/src/index.ts | 7 +++++-- packages/integration/src/compile.ts | 7 +++++-- packages/integration/src/processVanillaFile.ts | 14 +++++--------- 4 files changed, 23 insertions(+), 13 deletions(-) create mode 100644 .changeset/funny-candles-sin.md diff --git a/.changeset/funny-candles-sin.md b/.changeset/funny-candles-sin.md new file mode 100644 index 000000000..1cabcdb54 --- /dev/null +++ b/.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. diff --git a/packages/babel-plugin/src/index.ts b/packages/babel-plugin/src/index.ts index 2dc0bce88..908e32e9c 100644 --- a/packages/babel-plugin/src/index.ts +++ b/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 { ); } 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: { diff --git a/packages/integration/src/compile.ts b/packages/integration/src/compile.ts index 22d49846c..0a67df345 100644 --- a/packages/integration/src/compile.ts +++ b/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"; diff --git a/packages/integration/src/processVanillaFile.ts b/packages/integration/src/processVanillaFile.ts index 3812db8eb..c62b567ca 100644 --- a/packages/integration/src/processVanillaFile.ts +++ b/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 })