Fix hash context information not being applied (#30)

Author: mattcompiles

.changeset/chilled-cars-smell.md

@@ -0,0 +1,8 @@
+---
+'@vanilla-extract/babel-plugin': patch
+'@vanilla-extract/esbuild-plugin': patch
+---
+
+Fix hash context information not being applied
+
+This change makes it so all files with a valid CSS file extension (e.g. `.css.ts`) get hash context information (internally referred to as `filescope`) applied. This fixes some situations where the "New styles cannot be registered dynamically after initial boot" error would occur incorrectly.

.changeset/warm-trains-admire.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/babel-plugin': patch
+---
+
+Ignore compiling files that have already been compiled

packages/babel-plugin/src/index.test.ts

@@ -32,7 +32,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
       const one = style({
@@ -52,7 +52,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { mapToStyles } from '@vanilla-extract/css';
       const colors = mapToStyles({
@@ -74,7 +74,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { mapToStyles } from '@vanilla-extract/css';
       const colors = mapToStyles({
@@ -96,7 +96,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
       export default style({
@@ -120,7 +120,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
       const test = {
@@ -146,7 +146,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
 
@@ -170,7 +170,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
 
@@ -194,7 +194,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
 
@@ -216,7 +216,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { globalStyle } from '@vanilla-extract/css';
       globalStyle('html, body', {
@@ -234,7 +234,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { createVar } from '@vanilla-extract/css';
       const myVar = createVar(\\"myVar\\");
@@ -252,7 +252,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { fontFace } from '@vanilla-extract/css';
       const myFont = fontFace({
@@ -272,7 +272,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { globalFontFace } from '@vanilla-extract/css';
       globalFontFace('myFont', {
@@ -293,7 +293,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { keyframes } from '@vanilla-extract/css';
       const myAnimation = keyframes({
@@ -319,7 +319,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { globalKeyframes } from '@vanilla-extract/css';
       globalKeyframes('myKeyframes', {
@@ -342,7 +342,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { createTheme } from '@vanilla-extract/css';
       const darkTheme = createTheme({}, {}, \\"darkTheme\\");
@@ -358,7 +358,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { createTheme } from '@vanilla-extract/css';
       const [theme, vars] = createTheme({}, {}, \\"theme\\");
@@ -374,7 +374,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { createGlobalTheme } from '@vanilla-extract/css';
       const themeVars = createGlobalTheme(':root', {
@@ -394,7 +394,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { createThemeVars } from '@vanilla-extract/css';
       const themeVars = createThemeVars({
@@ -420,7 +420,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style, mapToStyles } from '@vanilla-extract/css';
       const three = style({
@@ -437,7 +437,7 @@ describe('babel plugin', () => {
     `);
   });
 
-  it('should only apply to functions imported from the relevant package', () => {
+  it('should only apply debug ids to functions imported from the relevant package', () => {
     const source = `
       import { style } from 'some-other-package';
 
@@ -447,13 +447,57 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { style } from 'some-other-package';
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
+      import { style } from 'some-other-package';
+      const three = style({
+        zIndex: 2
+      });
+      endFileScope()"
+    `);
+  });
+
+  it('should only apply to .css.ts files', () => {
+    const source = `
+      import { style } from '@vanilla-extract/css';
+
+      const three = style({
+        zIndex: 2,  
+      });
+    `;
+
+    expect(transform(source, {}, './dir/mockFilename.ts'))
+      .toMatchInlineSnapshot(`
+      "import { style } from '@vanilla-extract/css';
       const three = style({
         zIndex: 2
       });"
     `);
   });
 
+  it('should ignore files that already have filescope information', () => {
+    const source = `
+      import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
+      setFileScope('src/dir/someFileName.css.ts', 'some-package');
+      import { style } from '@vanilla-extract/css';
+
+      const three = style({
+        zIndex: 2,  
+      });
+      endFileScope();
+    `;
+
+    expect(transform(source)).toMatchInlineSnapshot(`
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
+      setFileScope('src/dir/someFileName.css.ts', 'some-package');
+      import { style } from '@vanilla-extract/css';
+      const three = style({
+        zIndex: 2
+      });
+      endFileScope();"
+    `);
+  });
+
   it('should handle renaming imports', () => {
     const source = `
       import { style as specialStyle } from '@vanilla-extract/css';
@@ -464,7 +508,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style as specialStyle } from '@vanilla-extract/css';
       const four = specialStyle({
@@ -486,7 +530,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
       export const height = [style({
@@ -508,7 +552,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
       export const height = {
@@ -530,7 +574,7 @@ describe('babel plugin', () => {
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
+      "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import * as css from '@vanilla-extract/css';
       const one = css.style({

packages/babel-plugin/src/index.ts

@@ -4,9 +4,10 @@ import template from '@babel/template';
 import findUp from 'find-up';
 
 const packageIdentifier = '@vanilla-extract/css';
+const filescopePackageIdentifier = '@vanilla-extract/css/fileScope';
 
 const buildSetFileScope = template(`
-  import { setFileScope, endFileScope } from %%packageIdentifier%%
+  import { setFileScope, endFileScope } from '${filescopePackageIdentifier}'
   setFileScope(%%filePath%%, %%packageName%%)
 `);
 
@@ -122,6 +123,8 @@ type Context = PluginPass & {
   packageIdentifier: string;
   filePath: string;
   packageName: string;
+  isCssFile: boolean;
+  alreadyCompiled: boolean;
 };
 
 export default function (): PluginObj<Context> {
@@ -150,14 +153,17 @@ export default function (): PluginObj<Context> {
 
   return {
     pre({ opts }) {
-      this.importIdentifiers = new Map();
-      this.namespaceImport = '';
-
       if (!opts.filename) {
         // TODO Make error better
         throw new Error('Filename must be available');
       }
 
+      this.isCssFile = /\.css\.(js|ts|jsx|tsx)$/.test(opts.filename);
+      this.alreadyCompiled = false;
+
+      this.importIdentifiers = new Map();
+      this.namespaceImport = '';
+
       const packageInfo = getPackageInfo(opts.cwd);
 
       if (!packageInfo) {
@@ -177,14 +183,11 @@ export default function (): PluginObj<Context> {
     visitor: {
       Program: {
         exit(path) {
-          if (this.importIdentifiers.size > 0 || this.namespaceImport) {
+          if (this.isCssFile && !this.alreadyCompiled) {
             // Wrap module with file scope calls
             path.unshiftContainer(
               'body',
               buildSetFileScope({
-                packageIdentifier: t.stringLiteral(
-                  `${packageIdentifier}/fileScope`,
-                ),
                 filePath: t.stringLiteral(this.filePath),
                 packageName: t.stringLiteral(this.packageName),
               }),
@@ -198,7 +201,16 @@ export default function (): PluginObj<Context> {
         },
       },
       ImportDeclaration(path) {
-        if (path.node.source.value === packageIdentifier) {
+        if (!this.isCssFile || this.alreadyCompiled) {
+          // Bail early if file isn't a .css.ts file or the file has already been compiled
+          return path.stop();
+        }
+
+        if (path.node.source.value === filescopePackageIdentifier) {
+          // If file scope import is found it means the file has already been compiled
+          this.alreadyCompiled = true;
+          return path.stop();
+        } else if (path.node.source.value === packageIdentifier) {
           path.node.specifiers.forEach((specifier) => {
             if (t.isImportNamespaceSpecifier(specifier)) {
               this.namespaceImport = specifier.local.name;
@@ -217,6 +229,11 @@ export default function (): PluginObj<Context> {
         }
       },
       CallExpression(path) {
+        if (!this.isCssFile || this.alreadyCompiled) {
+          // Bail early if file isn't a .css.ts file or the file has already been compiled
+          return path.stop();
+        }
+
         const { node } = path;
 
         const usedExport = getRelevantCall(