Add package name information to filescopes (#20)

vanilla-extract-css · Apr 12, 2021 · 3311914 · 3311914
1 parent 1129186
commit 3311914
Show file tree

Hide file tree

Showing 23 changed files with 568 additions and 465 deletions.
diff --git a/.changeset/honest-walls-type.md b/.changeset/honest-walls-type.md
@@ -0,0 +1,12 @@
+---
+'@vanilla-extract/babel-plugin': minor
+'@vanilla-extract/css': minor
+'@vanilla-extract/esbuild-plugin': minor
+'@vanilla-extract/webpack-plugin': minor
+---
+
+Ensure generated hashes are scoped by package
+
+vanilla-extract uses file path to ensure unique identifier (e.g. class names, CSS Variables, keyframes, etc) hashes across your application. This information is added to your `*.css.ts` files at build time. The issue with this approach is it meant `*.css.ts` files couldn't be pre-compiled when being published to npm.
+
+This change adds support for pre-compilation of packages by adding package name information to identifier hashes.
diff --git a/.changeset/plenty-chefs-check.md b/.changeset/plenty-chefs-check.md
@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/esbuild-plugin': minor
+---
+
+Remove `projectRoot` option in favor of `package.json` resolution
diff --git a/.changeset/soft-goats-admire.md b/.changeset/soft-goats-admire.md
@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/babel-plugin': minor
+---
+
+Remove `projectRoot` and `alias` option
diff --git a/README.md b/README.md
@@ -162,11 +162,6 @@ module.exports = {
 
 ### esbuild
 
-Current limitations:
-
-- No automatic readable class names during development. However, you can still manually provide a debug ID as the last argument to functions that generate scoped styles, e.g. `export const className = style({ ... }, 'className');`
-- The `projectRoot` plugin option must be set to get deterministic class name hashes between build systems
-
 1. Install the dependencies.
 
 ```bash
@@ -181,11 +176,13 @@ const { vanillaExtractPlugin } = require('@vanilla-extract/esbuild-plugin');
 require('esbuild').build({
   entryPoints: ['app.ts'],
   bundle: true,
-  plugins: [vanillaExtractPlugin({ projectRoot: '...' })],
+  plugins: [vanillaExtractPlugin()],
   outfile: 'out.js',
 }).catch(() => process.exit(1))
 ```
 
+> Please note: There are currently no automatic readable class names during development. However, you can still manually provide a debug ID as the last argument to functions that generate scoped styles, e.g. `export const className = style({ ... }, 'className');`
+
 ### Gatsby
 
 To add to your [Gatsby](https://www.gatsbyjs.com) site, use the [gatsby-plugin-vanilla-extract](https://github.com/KyleAMathews/gatsby-plugin-vanilla-extract) plugin.

diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json
@@ -21,6 +21,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.13.10",
-    "@babel/template": "^7.12.13"
+    "@babel/template": "^7.12.13",
+    "find-up": "^5.0.0"
   }
 }
diff --git a/packages/babel-plugin/src/index.test.ts b/packages/babel-plugin/src/index.test.ts
@@ -5,11 +5,11 @@ import plugin from './';
 const transform = (
   source: string,
   options: Options = {},
-  filename = './my-app/dir/mockFilename.css.ts',
+  filename = './dir/mockFilename.css.ts',
 ) => {
   const result = transformSync(source, {
     filename,
-    root: './my-app',
+    cwd: __dirname,
     plugins: [[plugin, options]],
     configFile: false,
   });
@@ -33,7 +33,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
       const one = style({
         zIndex: 2
@@ -53,7 +53,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { mapToStyles } from '@vanilla-extract/css';
       const colors = mapToStyles({
         red: {
@@ -75,7 +75,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { mapToStyles } from '@vanilla-extract/css';
       const colors = mapToStyles({
         red: 'red'
@@ -97,7 +97,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
       export default style({
         zIndex: 2
@@ -121,7 +121,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
       const test = {
         one: {
@@ -147,7 +147,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
 
       const test = () => {
@@ -171,7 +171,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
 
       const test = () => style({
@@ -195,7 +195,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
 
       function test() {
@@ -217,7 +217,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { globalStyle } from '@vanilla-extract/css';
       globalStyle('html, body', {
         margin: 0
@@ -235,7 +235,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { createVar } from '@vanilla-extract/css';
       const myVar = createVar(\\"myVar\\");
       endFileScope()"
@@ -253,7 +253,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { fontFace } from '@vanilla-extract/css';
       const myFont = fontFace({
         src: 'local(\\"Comic Sans MS\\")'
@@ -273,7 +273,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { globalFontFace } from '@vanilla-extract/css';
       globalFontFace('myFont', {
         src: 'local(\\"Comic Sans MS\\")'
@@ -294,7 +294,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { keyframes } from '@vanilla-extract/css';
       const myAnimation = keyframes({
         from: {
@@ -320,7 +320,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { globalKeyframes } from '@vanilla-extract/css';
       globalKeyframes('myKeyframes', {
         from: {
@@ -343,7 +343,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { createTheme } from '@vanilla-extract/css';
       const darkTheme = createTheme({}, {}, \\"darkTheme\\");
       endFileScope()"
@@ -359,7 +359,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { createTheme } from '@vanilla-extract/css';
       const [theme, vars] = createTheme({}, {}, \\"theme\\");
       endFileScope()"
@@ -375,7 +375,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { createGlobalTheme } from '@vanilla-extract/css';
       const themeVars = createGlobalTheme(':root', {
         foo: 'bar'
@@ -395,7 +395,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { createThemeVars } from '@vanilla-extract/css';
       const themeVars = createThemeVars({
         foo: 'bar'
@@ -421,7 +421,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style, mapToStyles } from '@vanilla-extract/css';
       const three = style({
         testStyle: {
@@ -465,7 +465,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style as specialStyle } from '@vanilla-extract/css';
       const four = specialStyle({
         zIndex: 2
@@ -474,26 +474,6 @@ describe('babel plugin', () => {
     `);
   });
 
-  it('should handle package aliases', () => {
-    const source = `
-      import { style } from 'my-alias';
-
-      const four = style({
-        zIndex: 2,  
-      });
-    `;
-
-    expect(transform(source, { alias: 'my-alias' })).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from \\"my-alias/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
-      import { style } from 'my-alias';
-      const four = style({
-        zIndex: 2
-      }, \\"four\\");
-      endFileScope()"
-    `);
-  });
-
   it('should handle anonymous style in arrays', () => {
     const source = `
        import { style } from '@vanilla-extract/css';
@@ -507,7 +487,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
       export const height = [style({
         zIndex: 2
@@ -529,7 +509,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import { style } from '@vanilla-extract/css';
       export const height = {
         full: [style({
@@ -551,7 +531,7 @@ describe('babel plugin', () => {
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\";
-      setFileScope(\\"dir/mockFilename.css.ts\\");
+      setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
       import * as css from '@vanilla-extract/css';
       const one = css.style({
         zIndex: 2