Use realistic file paths in file scopes

.changeset/friendly-geckos-jam.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/esbuild-plugin': patch
+---
+
+Allow CSS url imports to be resolved

.changeset/gold-chairs-shop.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/webpack-plugin': patch
+'@vanilla-extract/vite-plugin': patch
+---
+
+Use more realistic file paths for virtual CSS files

.changeset/nine-wasps-return.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/integration': major
+---
+
+Update `addFileScope` to always update and only use file names

packages/esbuild-plugin/src/index.ts

@@ -1,3 +1,5 @@
+import { dirname, join } from 'path';
+
 import {
   cssFileFilter,
   virtualCssFileFilter,
@@ -43,15 +45,20 @@ export function vanillaExtractPlugin({
       build.onLoad(
         { filter: /.*/, namespace: vanillaCssNamespace },
         async ({ path }) => {
-          let { source } = await getSourceFromVirtualCssFile(path);
+          let { source, fileName } = await getSourceFromVirtualCssFile(path);
 
           if (typeof processCss === 'function') {
             source = await processCss(source);
           }
 
+          const rootDir = build.initialOptions.absWorkingDir ?? process.cwd();
+
+          const resolveDir = dirname(join(rootDir, fileName));
+
           return {
             contents: source,
             loader: 'css',
+            resolveDir,
           };
         },
       );

packages/integration/src/addFileScope.test.ts

@@ -0,0 +1,108 @@
+import { outdent } from 'outdent';
+import { addFileScope } from './addFileScope';
+
+test('should add missing fileScope', () => {
+  const source = outdent`
+  import {style} from '@vanilla-extract/css';
+
+  export const myStyle = style({});
+  `;
+
+  expect(
+    addFileScope({
+      source,
+      rootPath: '/the-root',
+      filePath: '/the-root/app/app.css.ts',
+    }),
+  ).toMatchInlineSnapshot(`
+    "
+        import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+        setFileScope(\\"app/app.css.ts\\");
+        import {style} from '@vanilla-extract/css';
+
+    export const myStyle = style({});
+        endFileScope();
+      "
+  `);
+});
+
+test('should update existing fileScope', () => {
+  const source = outdent`
+    import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+    setFileScope("some-weird-file", "some-weird-package");
+    import {style} from '@vanilla-extract/css';
+
+    export const myStyle = style({});
+    endFileScope();
+    `;
+
+  expect(
+    addFileScope({
+      source,
+      rootPath: '/the-root',
+      filePath: '/the-root/app/app.css.ts',
+    }),
+  ).toMatchInlineSnapshot(`
+    "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+    setFileScope(\\"app/app.css.ts\\");
+    import {style} from '@vanilla-extract/css';
+
+    export const myStyle = style({});
+    endFileScope();"
+  `);
+});
+
+test('should update existing fileScope with newlines', () => {
+  const source = outdent`
+      import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+      setFileScope(
+        "some-weird-file", 
+        "some-weird-package"
+      );
+      import {style} from '@vanilla-extract/css';
+
+      export const myStyle = style({});
+      endFileScope();
+      `;
+
+  expect(
+    addFileScope({
+      source,
+      rootPath: '/the-root',
+      filePath: '/the-root/app/app.css.ts',
+    }),
+  ).toMatchInlineSnapshot(`
+    "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+    setFileScope(\\"app/app.css.ts\\");
+    import {style} from '@vanilla-extract/css';
+
+    export const myStyle = style({});
+    endFileScope();"
+  `);
+});
+
+test('should handle namespaced filescope calls', () => {
+  const source = outdent`
+    import * as vanillaFileScope from "@vanilla-extract/css/fileScope";
+    vanillaFileScope.setFileScope("some-weird-file");
+    import {style} from '@vanilla-extract/css';
+
+    export const myStyle = style({});
+    vanillaFileScope.endFileScope();
+  `;
+
+  expect(
+    addFileScope({
+      source,
+      rootPath: '/the-root',
+      filePath: '/the-root/app/app.css.ts',
+    }),
+  ).toMatchInlineSnapshot(`
+    "import * as vanillaFileScope from \\"@vanilla-extract/css/fileScope\\";
+    vanillaFileScope.setFileScope(\\"app/app.css.ts\\");
+    import {style} from '@vanilla-extract/css';
+
+    export const myStyle = style({});
+    vanillaFileScope.endFileScope();"
+  `);
+});

packages/integration/src/addFileScope.ts

@@ -1,33 +1,29 @@
 import { posix, relative, sep } from 'path';
-import type { PackageInfo } from './packageInfo';
 
 interface AddFileScopeParams {
   source: string;
   filePath: string;
-  packageInfo: PackageInfo;
+  rootPath: string;
 }
 export function addFileScope({
   source,
   filePath,
-  packageInfo,
+  rootPath,
 }: AddFileScopeParams) {
-  if (source.indexOf('@vanilla-extract/css/fileScope') > -1) {
-    return { source, updated: false };
-  }
-
   // Encode windows file paths as posix
-  const normalizedPath = posix.join(
-    ...relative(packageInfo.dirname, filePath).split(sep),
-  );
+  const normalizedPath = posix.join(...relative(rootPath, filePath).split(sep));
 
-  const packageName = packageInfo.name ? `"${packageInfo.name}"` : 'undefined';
+  if (source.indexOf('@vanilla-extract/css/fileScope') > -1) {
+    return source.replace(
+      /setFileScope\(((\n|.)*?)\)/,
+      `setFileScope("${normalizedPath}")`,
+    );
+  }
 
-  const contents = `
+  return `
     import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-    setFileScope("${normalizedPath}", ${packageName});
+    setFileScope("${normalizedPath}");
     ${source}
     endFileScope();
   `;
-
-  return { source: contents, updated: true };
 }

packages/integration/src/compile.ts

@@ -4,30 +4,25 @@ import { promises as fs } from 'fs';
 import { build as esbuild, Plugin } from 'esbuild';
 
 import { cssFileFilter } from './filters';
-import { getPackageInfo } from './packageInfo';
 import { addFileScope } from './addFileScope';
 
 export const vanillaExtractFilescopePlugin = (): Plugin => ({
   name: 'vanilla-extract-filescope',
   setup(build) {
-    const packageInfo = getPackageInfo(build.initialOptions.absWorkingDir);
-
     build.onLoad({ filter: cssFileFilter }, async ({ path }) => {
       const originalSource = await fs.readFile(path, 'utf-8');
 
-      const { source, updated } = addFileScope({
+      const source = addFileScope({
         source: originalSource,
         filePath: path,
-        packageInfo,
+        rootPath: build.initialOptions.absWorkingDir!,
       });
 
-      if (updated) {
-        return {
-          contents: source,
-          loader: path.match(/\.(ts|tsx)$/i) ? 'ts' : undefined,
-          resolveDir: dirname(path),
-        };
-      }
+      return {
+        contents: source,
+        loader: path.match(/\.(ts|tsx)$/i) ? 'ts' : undefined,
+        resolveDir: dirname(path),
+      };
     });
   },
 });