From b035c15b4d1b197f9207dd35c7b56145a90300e2 Mon Sep 17 00:00:00 2001 From: Matt Jones Date: Thu, 8 Apr 2021 16:11:44 +1000 Subject: [PATCH 1/7] Add package name information to filescopes --- .changeset/honest-walls-type.md | 10 + .changeset/soft-goats-admire.md | 6 + README.md | 3 +- packages/babel-plugin/package.json | 3 +- packages/babel-plugin/src/index.test.ts | 53 +- packages/babel-plugin/src/index.ts | 67 ++- packages/css/src/fileScope.ts | 12 +- packages/css/src/identifier.ts | 12 +- packages/css/src/index.ts | 2 +- packages/css/src/runtimeAdapter.ts | 11 +- packages/css/src/types.ts | 9 +- packages/css/src/vars.ts | 8 +- packages/esbuild-plugin/package.json | 1 + packages/esbuild-plugin/src/index.ts | 65 ++- .../webpack-plugin/extracted/package.json | 4 + packages/webpack-plugin/package.json | 6 +- packages/webpack-plugin/src/extracted.js | 2 + packages/webpack-plugin/src/loader.ts | 37 +- test-helpers/src/startFixture/esbuild.ts | 6 +- tests/E2E/__snapshots__/styles.test.ts.snap | 490 +++++++++--------- .../__snapshots__/stylesheets.test.ts.snap | 194 +++---- yarn.lock | 2 + 22 files changed, 563 insertions(+), 440 deletions(-) create mode 100644 .changeset/honest-walls-type.md create mode 100644 .changeset/soft-goats-admire.md create mode 100644 packages/webpack-plugin/extracted/package.json create mode 100644 packages/webpack-plugin/src/extracted.js diff --git a/.changeset/honest-walls-type.md b/.changeset/honest-walls-type.md new file mode 100644 index 000000000..2641a44f1 --- /dev/null +++ b/.changeset/honest-walls-type.md @@ -0,0 +1,10 @@ +--- +'@vanilla-extract/babel-plugin': minor +'@vanilla-extract/css': minor +'@vanilla-extract/esbuild-plugin': minor +'@vanilla-extract/webpack-plugin': minor +--- + +Add `packageName` to filescopes + +This change adds support for pre-compilation of packages. Prior to this change, packages consumed from `node_modules` would need to be compiled (through babel) to add filescope information. This was to ensure class names would never clash. Adding package name information to the filescope allows vanilla-extract to safely pre-compile packages before publishing to npm without risk of class name clashes. diff --git a/.changeset/soft-goats-admire.md b/.changeset/soft-goats-admire.md new file mode 100644 index 000000000..e328e7af6 --- /dev/null +++ b/.changeset/soft-goats-admire.md @@ -0,0 +1,6 @@ +--- +'@vanilla-extract/babel-plugin': minor +'@vanilla-extract/esbuild-plugin': minor +--- + +Remove `projectRoot` option in favour of `cwd` diff --git a/README.md b/README.md index 2ae4db81e..559595b74 100644 --- a/README.md +++ b/README.md @@ -165,7 +165,6 @@ module.exports = { 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. @@ -181,7 +180,7 @@ 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)) ``` diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json index 78bb97378..37bea28a4 100644 --- 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 index 84a3dda82..a5a10ddd8 100644 --- a/packages/babel-plugin/src/index.test.ts +++ b/packages/babel-plugin/src/index.test.ts @@ -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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); import { style as specialStyle } from '@vanilla-extract/css'; const four = specialStyle({ zIndex: 2 @@ -484,13 +484,10 @@ describe('babel plugin', () => { `; expect(transform(source, { alias: 'my-alias' })).toMatchInlineSnapshot(` - "import { setFileScope, endFileScope } from \\"my-alias/fileScope\\"; - setFileScope(\\"dir/mockFilename.css.ts\\"); - import { style } from 'my-alias'; + "import { style } from 'my-alias'; const four = style({ zIndex: 2 - }, \\"four\\"); - endFileScope()" + });" `); }); @@ -507,7 +504,7 @@ describe('babel plugin', () => { expect(transform(source)).toMatchInlineSnapshot(` "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\"; - setFileScope(\\"dir/mockFilename.css.ts\\"); + setFileScope(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); import { style } from '@vanilla-extract/css'; export const height = [style({ zIndex: 2 @@ -529,7 +526,7 @@ describe('babel plugin', () => { expect(transform(source)).toMatchInlineSnapshot(` "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\"; - setFileScope(\\"dir/mockFilename.css.ts\\"); + setFileScope(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); import { style } from '@vanilla-extract/css'; export const height = { full: [style({ @@ -551,7 +548,7 @@ describe('babel plugin', () => { expect(transform(source)).toMatchInlineSnapshot(` "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\"; - setFileScope(\\"dir/mockFilename.css.ts\\"); + setFileScope(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); import * as css from '@vanilla-extract/css'; const one = css.style({ zIndex: 2 diff --git a/packages/babel-plugin/src/index.ts b/packages/babel-plugin/src/index.ts index 1b398a777..3378f82d2 100644 --- a/packages/babel-plugin/src/index.ts +++ b/packages/babel-plugin/src/index.ts @@ -1,10 +1,13 @@ -import { relative } from 'path'; +import { relative, dirname } from 'path'; import { types as t, PluginObj, PluginPass, NodePath } from '@babel/core'; import template from '@babel/template'; +import findUp from 'find-up'; + +const packageIdentifier = '@vanilla-extract/css'; const buildSetFileScope = template(` import { setFileScope, endFileScope } from %%packageIdentifier%% - setFileScope(%%fileScope%%) + setFileScope(%%filePath%%, %%packageName%%) `); const debuggableFunctionConfig = { @@ -113,36 +116,63 @@ const getRelevantCall = ( } }; -interface PluginOptions { - alias?: string; - projectRoot?: string; -} type Context = PluginPass & { - opts?: PluginOptions; namespaceImport: string; importIdentifiers: Map; packageIdentifier: string; - fileScope: string; + filePath: string; + packageName: string; }; export default function (): PluginObj { + let packageInfo: { name: string; dirname: string; path: string } | undefined; + let hasResolvedPackageJson = false; + function getPackageInfo(cwd?: string | null) { + if (hasResolvedPackageJson) { + return packageInfo; + } + + hasResolvedPackageJson = true; + const packageJsonPath = findUp.sync('package.json', { + cwd: cwd || undefined, + }); + + if (packageJsonPath) { + const { name } = require(packageJsonPath); + packageInfo = { + name, + path: packageJsonPath, + dirname: dirname(packageJsonPath), + }; + } + return packageInfo; + } + return { pre({ opts }) { this.importIdentifiers = new Map(); this.namespaceImport = ''; - this.packageIdentifier = this.opts?.alias || '@vanilla-extract/css'; - const projectRoot = this.opts?.projectRoot || opts.root; - if (!projectRoot) { - // TODO Make error better - throw new Error('Project root must be specified'); - } if (!opts.filename) { // TODO Make error better throw new Error('Filename must be available'); } - this.fileScope = relative(projectRoot, opts.filename); + const packageInfo = getPackageInfo(opts.cwd); + + if (!packageInfo) { + throw new Error( + `Couldn't find parent package.json for ${opts.filename}`, + ); + } + + if (!packageInfo.name) { + throw new Error( + `Closest package.json (${packageInfo.path}) must specify name`, + ); + } + this.packageName = packageInfo.name; + this.filePath = relative(packageInfo.dirname, opts.filename); }, visitor: { Program: { @@ -153,9 +183,10 @@ export default function (): PluginObj { 'body', buildSetFileScope({ packageIdentifier: t.stringLiteral( - `${this.packageIdentifier}/fileScope`, + `${packageIdentifier}/fileScope`, ), - fileScope: t.stringLiteral(this.fileScope), + filePath: t.stringLiteral(this.filePath), + packageName: t.stringLiteral(this.packageName), }), ); @@ -167,7 +198,7 @@ export default function (): PluginObj { }, }, ImportDeclaration(path) { - if (path.node.source.value === this.packageIdentifier) { + if (path.node.source.value === packageIdentifier) { path.node.specifiers.forEach((specifier) => { if (t.isImportNamespaceSpecifier(specifier)) { this.namespaceImport = specifier.local.name; diff --git a/packages/css/src/fileScope.ts b/packages/css/src/fileScope.ts index a18d202ab..d0134c2ab 100644 --- a/packages/css/src/fileScope.ts +++ b/packages/css/src/fileScope.ts @@ -1,12 +1,16 @@ import { onEndFileScope } from './adapter'; +import type { FileScope } from './types'; let refCounter = 0; -const fileScopes: Array = []; +const fileScopes: Array = []; -export function setFileScope(newFileScope: string) { +export function setFileScope(filePath: string, packageName?: string) { refCounter = 0; - fileScopes.unshift(newFileScope); + fileScopes.unshift({ + filePath, + packageName, + }); } export function endFileScope() { @@ -15,7 +19,7 @@ export function endFileScope() { fileScopes.splice(0, 1); } -export function getFileScope() { +export function getFileScope(): FileScope { if (fileScopes.length === 0) { throw new Error( 'New styles cannot be registered dynamically after initial boot. This is to ensure that styles are statically extractible.', diff --git a/packages/css/src/identifier.ts b/packages/css/src/identifier.ts index 0b589f4bc..1e6ad375e 100644 --- a/packages/css/src/identifier.ts +++ b/packages/css/src/identifier.ts @@ -3,9 +3,9 @@ import hash from '@emotion/hash'; import { getAndIncrementRefCounter, getFileScope } from './fileScope'; function getShortFileName() { - const fileScope = getFileScope(); + const { filePath } = getFileScope(); - const matches = fileScope.match(/.*\/(.*)\..*\..*$/); + const matches = filePath.match(/.*\/(.*)\..*\..*$/); if (matches && matches[1]) { return matches[1]; @@ -16,11 +16,15 @@ function getShortFileName() { export function generateIdentifier(debugId: string | undefined) { const refCount = getAndIncrementRefCounter(); + const { filePath, packageName } = getFileScope(); + const fileScopeHash = hash( + packageName ? `${packageName}${filePath}` : filePath, + ); const identifier = process.env.NODE_ENV !== 'production' && debugId - ? `${getShortFileName()}_${debugId}__${hash(getFileScope())}${refCount}` - : `${hash(getFileScope())}${refCount}`; + ? `${getShortFileName()}_${debugId}__${fileScopeHash}${refCount}` + : `${fileScopeHash}${refCount}`; return identifier.match(/^[0-9]/) ? `_${identifier}` : identifier; } diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts index 8a6c503fc..20ab3eeb4 100644 --- a/packages/css/src/index.ts +++ b/packages/css/src/index.ts @@ -1,6 +1,6 @@ import './runtimeAdapter'; -export type { StyleRule, GlobalStyleRule, Adapter } from './types'; +export type { StyleRule, GlobalStyleRule, Adapter, FileScope } from './types'; export * from './identifier'; export * from './theme'; export * from './style'; diff --git a/packages/css/src/runtimeAdapter.ts b/packages/css/src/runtimeAdapter.ts index 911f026a1..4028416c2 100644 --- a/packages/css/src/runtimeAdapter.ts +++ b/packages/css/src/runtimeAdapter.ts @@ -1,4 +1,4 @@ -import type { Adapter, CSS } from './types'; +import type { Adapter, CSS, FileScope } from './types'; import { transformCss } from './transformCss'; import { setAdapter } from './adapter'; @@ -7,9 +7,10 @@ const stylesheets: Record = {}; const localClassNames = new Set(); let bufferedCSSObjs: Array = []; -function getStylesheet(fileScope: string) { - if (stylesheets[fileScope]) { - return stylesheets[fileScope]; +function getStylesheet({ packageName, filePath }: FileScope) { + const fileScopeId = packageName ? `${packageName}${filePath}` : filePath; + if (stylesheets[fileScopeId]) { + return stylesheets[fileScopeId]; } const styleEl = document.createElement('style'); document.head.appendChild(styleEl); @@ -17,7 +18,7 @@ function getStylesheet(fileScope: string) { if (!styleEl.sheet) { throw new Error(`Couldn't create stylesheet`); } - stylesheets[fileScope] = styleEl.sheet; + stylesheets[fileScopeId] = styleEl.sheet; return styleEl.sheet; } diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts index 264891d22..419c50402 100644 --- a/packages/css/src/types.ts +++ b/packages/css/src/types.ts @@ -81,10 +81,15 @@ export type CSS = | CSSKeyframesBlock | CSSSelectorBlock; +export type FileScope = { + packageName?: string; + filePath: string; +}; + export interface Adapter { - appendCss: (css: CSS, fileScope: string) => void; + appendCss: (css: CSS, fileScope: FileScope) => void; registerClassName: (className: string) => void; - onEndFileScope: (fileScope: string) => void; + onEndFileScope: (fileScope: FileScope) => void; } export type Contract = { diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts index ab963d1d5..aab4c4bb8 100644 --- a/packages/css/src/vars.ts +++ b/packages/css/src/vars.ts @@ -12,10 +12,14 @@ type ThemeVars = MapLeafNodes< export function createVar(debugId?: string) { const refCount = getAndIncrementRefCounter(); + const { filePath, packageName } = getFileScope(); + const fileScopeHash = hash( + packageName ? `${packageName}${filePath}` : filePath, + ); const varName = process.env.NODE_ENV !== 'production' && debugId - ? `${debugId}__${hash(getFileScope())}${refCount}` - : `${hash(getFileScope())}${refCount}`; + ? `${debugId}__${fileScopeHash}${refCount}` + : `${fileScopeHash}${refCount}`; // Dashify CSS var names to replicate postcss-js behaviour // See https://github.com/postcss/postcss-js/blob/d5127d4278c133f333f1c66f990f3552a907128e/parser.js#L30 diff --git a/packages/esbuild-plugin/package.json b/packages/esbuild-plugin/package.json index c204f9e32..69e1d4d2c 100644 --- a/packages/esbuild-plugin/package.json +++ b/packages/esbuild-plugin/package.json @@ -22,6 +22,7 @@ "chalk": "^4.1.0", "dedent": "^0.7.0", "eval": "^0.1.6", + "find-up": "^5.0.0", "javascript-stringify": "^2.0.1", "lodash": "^4.17.21" }, diff --git a/packages/esbuild-plugin/src/index.ts b/packages/esbuild-plugin/src/index.ts index 2893d8f26..bf6167a8a 100644 --- a/packages/esbuild-plugin/src/index.ts +++ b/packages/esbuild-plugin/src/index.ts @@ -1,10 +1,11 @@ import { dirname, relative } from 'path'; import { promises as fs } from 'fs'; -import type { Adapter } from '@vanilla-extract/css'; +import type { Adapter, FileScope } from '@vanilla-extract/css'; import { setAdapter } from '@vanilla-extract/css/adapter'; import { transformCss } from '@vanilla-extract/css/transformCss'; import dedent from 'dedent'; +import findUp from 'find-up'; import { build as esbuild, Plugin } from 'esbuild'; // @ts-expect-error import evalCode from 'eval'; @@ -18,10 +19,13 @@ const vanillaExtractPath = dirname( const vanillaCssNamespace = 'vanilla-extract-css-ns'; interface FilescopePluginOptions { - projectRoot?: string; + packageInfo: { + name: string; + dirname: string; + }; } const vanillaExtractFilescopePlugin = ({ - projectRoot, + packageInfo, }: FilescopePluginOptions): Plugin => ({ name: 'vanilla-extract-filescope', setup(build) { @@ -32,11 +36,11 @@ const vanillaExtractFilescopePlugin = ({ path.indexOf(vanillaExtractPath) === -1 && originalSource.indexOf('@vanilla-extract/css/fileScope') === -1 ) { - const fileScope = projectRoot ? relative(projectRoot, path) : path; + const filePath = relative(packageInfo.dirname, path); const contents = ` import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope"; - setFileScope("${fileScope}"); + setFileScope("${filePath}", "${packageInfo.name}"); ${originalSource} endFileScope() `; @@ -53,18 +57,31 @@ const vanillaExtractFilescopePlugin = ({ interface VanillaExtractPluginOptions { outputCss?: boolean; externals?: Array; - projectRoot?: string; + cwd?: string; runtime?: boolean; } export function vanillaExtractPlugin({ outputCss = true, externals = [], - projectRoot, + cwd, runtime = false, }: VanillaExtractPluginOptions = {}): Plugin { + const packageJsonPath = findUp.sync('package.json', { cwd }); + + if (!packageJsonPath) { + throw new Error(`Can't find package.json`); + } + + const { name } = require(packageJsonPath); + const packageInfo = { + name, + path: packageJsonPath, + dirname: dirname(packageJsonPath), + }; + if (runtime) { // If using runtime CSS then just apply fileScopes to code - return vanillaExtractFilescopePlugin({ projectRoot }); + return vanillaExtractFilescopePlugin({ packageInfo }); } return { @@ -101,7 +118,7 @@ export function vanillaExtractPlugin({ external: ['@vanilla-extract', ...externals], platform: 'node', write: false, - plugins: [vanillaExtractFilescopePlugin({ projectRoot })], + plugins: [vanillaExtractFilescopePlugin({ packageInfo })], }); const { outputFiles, metafile } = result; @@ -110,6 +127,22 @@ export function vanillaExtractPlugin({ throw new Error('Invalid child compilation'); } + function stringifyFileScope({ + packageName, + filePath, + }: FileScope): string { + return packageName ? `${filePath}$$$${packageName}` : filePath; + } + + function parseFileScope(serialisedFileScope: string): FileScope { + const [filePath, packageName] = serialisedFileScope.split('$$$'); + + return { + filePath, + packageName, + }; + } + type Css = Parameters[0]; const cssByFileScope = new Map>(); const localClassNames = new Set(); @@ -117,11 +150,13 @@ export function vanillaExtractPlugin({ const cssAdapter: Adapter = { appendCss: (css, fileScope) => { if (outputCss) { - const fileScopeCss = cssByFileScope.get(fileScope) ?? []; + const serialisedFileScope = stringifyFileScope(fileScope); + const fileScopeCss = + cssByFileScope.get(serialisedFileScope) ?? []; fileScopeCss.push(css); - cssByFileScope.set(fileScope, fileScopeCss); + cssByFileScope.set(serialisedFileScope, fileScopeCss); } }, registerClassName: (className) => { @@ -143,14 +178,18 @@ export function vanillaExtractPlugin({ const cssRequests = []; - for (const [fileScope, fileScopeCss] of cssByFileScope) { + for (const [serialisedFileScope, fileScopeCss] of cssByFileScope) { + const { packageName, filePath } = parseFileScope(serialisedFileScope); const css = transformCss({ localClassNames: Array.from(localClassNames), cssObjs: fileScopeCss, }).join('\n'); const base64Css = Buffer.from(css, 'utf-8').toString('base64'); + const fileName = packageName + ? `${packageName}/${filePath}` + : filePath; - cssRequests.push(`${fileScope}.vanilla.css?source=${base64Css}`); + cssRequests.push(`${fileName}.vanilla.css?source=${base64Css}`); } const contents = serializeVanillaModule(cssRequests, evalResult); diff --git a/packages/webpack-plugin/extracted/package.json b/packages/webpack-plugin/extracted/package.json new file mode 100644 index 000000000..98f4d0c0b --- /dev/null +++ b/packages/webpack-plugin/extracted/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/vanilla-extract-webpack-plugin-extracted.cjs.js", + "module": "dist/vanilla-extract-webpack-plugin-extracted.esm.js" +} diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json index 8771e8fda..956452fd8 100644 --- a/packages/webpack-plugin/package.json +++ b/packages/webpack-plugin/package.json @@ -8,13 +8,15 @@ "entrypoints": [ "index.ts", "loader.ts", - "validate-loader.ts" + "validate-loader.ts", + "extracted.js" ] }, "files": [ "/dist", "/loader", - "/validate-loader" + "/validate-loader", + "/extracted" ], "repository": { "type": "git", diff --git a/packages/webpack-plugin/src/extracted.js b/packages/webpack-plugin/src/extracted.js new file mode 100644 index 000000000..aba9ba6c8 --- /dev/null +++ b/packages/webpack-plugin/src/extracted.js @@ -0,0 +1,2 @@ +// This is a noop file for extracted CSS source to point to +// Webpack requires a file to exist on disk for virtual source files diff --git a/packages/webpack-plugin/src/loader.ts b/packages/webpack-plugin/src/loader.ts index bfb992829..3770f7797 100644 --- a/packages/webpack-plugin/src/loader.ts +++ b/packages/webpack-plugin/src/loader.ts @@ -1,5 +1,3 @@ -import path from 'path'; - // @ts-expect-error import evalCode from 'eval'; // @ts-expect-error @@ -7,7 +5,7 @@ import loaderUtils from 'loader-utils'; import isPlainObject from 'lodash/isPlainObject'; import { stringify } from 'javascript-stringify'; import dedent from 'dedent'; -import type { Adapter } from '@vanilla-extract/css'; +import type { Adapter, FileScope } from '@vanilla-extract/css'; import { setAdapter } from '@vanilla-extract/css/adapter'; import { transformCss } from '@vanilla-extract/css/transformCss'; @@ -97,23 +95,37 @@ async function processSource( log('Loading resource'); - const makeCssModule = (fileScope: string, css: string) => { + const makeCssModule = ({ packageName, filePath }: FileScope, css: string) => { const base64 = Buffer.from(css, 'utf-8').toString('base64'); const virtualResourceLoader = stringifyLoaderRequest({ loader: require.resolve('virtual-resource-loader'), options: { source: base64 }, }); - const cssFileName = `${fileScope}.vanilla.css`; - const absoluteFileScope = path.join(loader.rootContext, fileScope); + const cssFileName = packageName + ? `${packageName}/${filePath}.vanilla.css` + : `${filePath}.vanilla.css`; - const cssRequest = `${cssFileName}!=!${virtualResourceLoader}!${absoluteFileScope}`; + const cssRequest = `${cssFileName}!=!${virtualResourceLoader}!@vanilla-extract/webpack-plugin/extracted`; log('Add CSS request %s', cssRequest); return cssRequest; }; + function stringifyFileScope({ packageName, filePath }: FileScope): string { + return packageName ? `${filePath}$$$${packageName}` : filePath; + } + + function parseFileScope(serialisedFileScope: string): FileScope { + const [filePath, packageName] = serialisedFileScope.split('$$$'); + + return { + filePath, + packageName, + }; + } + type Css = Parameters[0]; const cssByFileScope = new Map>(); const localClassNames = new Set(); @@ -121,11 +133,12 @@ async function processSource( const cssAdapter: Adapter = { appendCss: (css, fileScope) => { if (outputCss) { - const fileScopeCss = cssByFileScope.get(fileScope) ?? []; + const serialisedFileScope = stringifyFileScope(fileScope); + const fileScopeCss = cssByFileScope.get(serialisedFileScope) ?? []; fileScopeCss.push(css); - cssByFileScope.set(fileScope, fileScopeCss); + cssByFileScope.set(serialisedFileScope, fileScopeCss); } }, registerClassName: (className) => { @@ -156,10 +169,8 @@ async function processSource( const cssRequests = []; - // TODO ???? Why can't I iterate the Map without Array.from ???? - for (const [fileScope, fileScopeCss] of Array.from( - cssByFileScope.entries(), - )) { + for (const [serialisedFileScope, fileScopeCss] of cssByFileScope.entries()) { + const fileScope = parseFileScope(serialisedFileScope); const css = transformCss({ localClassNames: Array.from(localClassNames), cssObjs: fileScopeCss, diff --git a/test-helpers/src/startFixture/esbuild.ts b/test-helpers/src/startFixture/esbuild.ts index 6bd22044d..c48f4f415 100644 --- a/test-helpers/src/startFixture/esbuild.ts +++ b/test-helpers/src/startFixture/esbuild.ts @@ -16,10 +16,10 @@ export const startEsbuildFixture = async ( { type, mode = 'development', port = 3000 }: EsbuildFixtureOptions, ): Promise => { const entry = require.resolve(`@fixtures/${fixtureName}`); - const projectRoot = path.dirname( + const cwd = path.dirname( require.resolve(`@fixtures/${fixtureName}/package.json`), ); - const outdir = path.join(projectRoot, 'dist'); + const outdir = path.join(cwd, 'dist'); if (existsSync(outdir)) { await fs.rm(outdir, { recursive: true }); @@ -37,7 +37,7 @@ export const startEsbuildFixture = async ( minify: mode === 'production', plugins: [ vanillaExtractPlugin({ - projectRoot, + cwd, runtime: type === 'esbuild-runtime', }), ], diff --git a/tests/E2E/__snapshots__/styles.test.ts.snap b/tests/E2E/__snapshots__/styles.test.ts.snap index 9c2939d85..08afcb8f8 100644 --- a/tests/E2E/__snapshots__/styles.test.ts.snap +++ b/tests/E2E/__snapshots__/styles.test.ts.snap @@ -4,8 +4,8 @@ exports[`Styling and specificity Themed browser on desktop all builds should mat Object { "altButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__bh8jtc1", - "font-family" => "styles_impact__bh8jtc0", + "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__blj6yb1", + "font-family" => "styles_impact__blj6yb0", "background-color" => "rgb(0, 128, 0)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -15,7 +15,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -26,8 +26,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -36,11 +36,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, "inlineThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__bh8jtc1", + "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__blj6yb1", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 165, 0)", "color" => "rgb(0, 0, 0)", @@ -51,7 +51,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "opacity" => "0.5", "border-radius" => "9999px", "border-top-left-radius" => "9999px", @@ -67,8 +67,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -77,11 +77,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, "nestedRootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__bh8jtc1", + "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__blj6yb1", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", @@ -92,7 +92,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -107,8 +107,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -117,11 +117,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, "responsiveThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__bh8jtc1", + "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__blj6yb1", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(128, 0, 128)", "color" => "rgb(255, 192, 203)", @@ -132,7 +132,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -147,8 +147,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -157,15 +157,15 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, "root": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", }, "rootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__bh8jtc1", - "font-family" => "styles_impact__bh8jtc0", + "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__blj6yb1", + "font-family" => "styles_impact__blj6yb0", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -175,7 +175,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -186,8 +186,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -196,7 +196,7 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, } `; @@ -205,8 +205,8 @@ exports[`Styling and specificity Themed browser on mobile all builds should matc Object { "altButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__bh8jtc1", - "font-family" => "styles_impact__bh8jtc0", + "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__blj6yb1", + "font-family" => "styles_impact__blj6yb0", "background-color" => "rgb(0, 128, 0)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -216,14 +216,14 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", }, "altContainer": Map { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -235,7 +235,7 @@ Object { }, "inlineThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__bh8jtc1", + "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__blj6yb1", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 165, 0)", "color" => "rgb(0, 0, 0)", @@ -246,7 +246,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "opacity" => "0.5", "outline" => "red solid 5px", "outline-color" => "rgb(255, 0, 0)", @@ -257,8 +257,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -270,7 +270,7 @@ Object { }, "nestedRootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__bh8jtc1", + "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__blj6yb1", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", @@ -281,7 +281,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "outline" => "red solid 5px", "outline-color" => "rgb(255, 0, 0)", "outline-style" => "solid", @@ -291,8 +291,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -304,7 +304,7 @@ Object { }, "responsiveThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__bh8jtc1", + "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__blj6yb1", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 192, 203)", "color" => "rgb(128, 0, 128)", @@ -315,7 +315,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "outline" => "red solid 5px", "outline-color" => "rgb(255, 0, 0)", "outline-style" => "solid", @@ -325,8 +325,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -341,8 +341,8 @@ Object { }, "rootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__bh8jtc1", - "font-family" => "styles_impact__bh8jtc0", + "animation" => "3s ease-in-out 0s infinite alternate none running styles_slide__blj6yb1", + "font-family" => "styles_impact__blj6yb0", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -352,14 +352,14 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", }, "rootContainer": Map { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -376,8 +376,8 @@ exports[`Styling and specificity Themed esbuild on desktop all builds should mat Object { "altButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate g7vce91 ease-in-out", - "font-family" => "g7vce90", + "animation" => "3s infinite alternate jteyb11 ease-in-out", + "font-family" => "jteyb10", "background-color" => "rgb(0, 128, 0)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -387,7 +387,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -398,8 +398,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -408,11 +408,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__6cbmls1)", + "border" => "1px solid var(--colors-background-color__cvta171)", }, "inlineThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate g7vce91 ease-in-out", + "animation" => "3s infinite alternate jteyb11 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 165, 0)", "color" => "rgb(0, 0, 0)", @@ -423,7 +423,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "opacity" => "0.5", "border-radius" => "9999px", "border-top-left-radius" => "9999px", @@ -439,8 +439,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -449,11 +449,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__6cbmls1)", + "border" => "1px solid var(--colors-background-color__cvta171)", }, "nestedRootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate g7vce91 ease-in-out", + "animation" => "3s infinite alternate jteyb11 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", @@ -464,7 +464,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -479,8 +479,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -489,11 +489,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__6cbmls1)", + "border" => "1px solid var(--colors-background-color__cvta171)", }, "responsiveThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate g7vce91 ease-in-out", + "animation" => "3s infinite alternate jteyb11 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(128, 0, 128)", "color" => "rgb(255, 192, 203)", @@ -504,7 +504,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -519,8 +519,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -529,15 +529,15 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__6cbmls1)", + "border" => "1px solid var(--colors-background-color__cvta171)", }, "root": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", }, "rootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate g7vce91 ease-in-out", - "font-family" => "g7vce90", + "animation" => "3s infinite alternate jteyb11 ease-in-out", + "font-family" => "jteyb10", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -547,7 +547,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -558,8 +558,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -568,7 +568,7 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__6cbmls1)", + "border" => "1px solid var(--colors-background-color__cvta171)", }, } `; @@ -577,8 +577,8 @@ exports[`Styling and specificity Themed esbuild on mobile all builds should matc Object { "altButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate g7vce91 ease-in-out", - "font-family" => "g7vce90", + "animation" => "3s infinite alternate jteyb11 ease-in-out", + "font-family" => "jteyb10", "background-color" => "rgb(0, 128, 0)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -588,14 +588,14 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", }, "altContainer": Map { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -607,7 +607,7 @@ Object { }, "inlineThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate g7vce91 ease-in-out", + "animation" => "3s infinite alternate jteyb11 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 165, 0)", "color" => "rgb(0, 0, 0)", @@ -618,7 +618,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "opacity" => "0.5", "outline" => "5px solid red", "outline-color" => "rgb(255, 0, 0)", @@ -629,8 +629,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -642,7 +642,7 @@ Object { }, "nestedRootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate g7vce91 ease-in-out", + "animation" => "3s infinite alternate jteyb11 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", @@ -653,7 +653,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "outline" => "5px solid red", "outline-color" => "rgb(255, 0, 0)", "outline-style" => "solid", @@ -663,8 +663,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -676,7 +676,7 @@ Object { }, "responsiveThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate g7vce91 ease-in-out", + "animation" => "3s infinite alternate jteyb11 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 192, 203)", "color" => "rgb(128, 0, 128)", @@ -687,7 +687,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "outline" => "5px solid red", "outline-color" => "rgb(255, 0, 0)", "outline-style" => "solid", @@ -697,8 +697,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -713,8 +713,8 @@ Object { }, "rootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate g7vce91 ease-in-out", - "font-family" => "g7vce90", + "animation" => "3s infinite alternate jteyb11 ease-in-out", + "font-family" => "jteyb10", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -724,14 +724,14 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", }, "rootContainer": Map { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -748,8 +748,8 @@ exports[`Styling and specificity Themed esbuild-runtime on desktop all builds sh Object { "altButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91", - "font-family" => "g7vce90", + "animation" => "3s ease-in-out 0s infinite alternate none running jteyb11", + "font-family" => "jteyb10", "background-color" => "rgb(0, 128, 0)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -759,7 +759,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -770,8 +770,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -780,11 +780,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__6cbmls1)", + "border" => "1px solid var(--colors-background-color__cvta171)", }, "inlineThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91", + "animation" => "3s ease-in-out 0s infinite alternate none running jteyb11", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 165, 0)", "color" => "rgb(0, 0, 0)", @@ -795,7 +795,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "opacity" => "0.5", "border-radius" => "9999px", "border-top-left-radius" => "9999px", @@ -811,8 +811,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -821,11 +821,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__6cbmls1)", + "border" => "1px solid var(--colors-background-color__cvta171)", }, "nestedRootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91", + "animation" => "3s ease-in-out 0s infinite alternate none running jteyb11", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", @@ -836,7 +836,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -851,8 +851,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -861,11 +861,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__6cbmls1)", + "border" => "1px solid var(--colors-background-color__cvta171)", }, "responsiveThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91", + "animation" => "3s ease-in-out 0s infinite alternate none running jteyb11", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(128, 0, 128)", "color" => "rgb(255, 192, 203)", @@ -876,7 +876,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -891,8 +891,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -901,15 +901,15 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__6cbmls1)", + "border" => "1px solid var(--colors-background-color__cvta171)", }, "root": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", }, "rootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91", - "font-family" => "g7vce90", + "animation" => "3s ease-in-out 0s infinite alternate none running jteyb11", + "font-family" => "jteyb10", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -919,7 +919,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -930,8 +930,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -940,7 +940,7 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__6cbmls1)", + "border" => "1px solid var(--colors-background-color__cvta171)", }, } `; @@ -949,8 +949,8 @@ exports[`Styling and specificity Themed esbuild-runtime on mobile all builds sho Object { "altButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91", - "font-family" => "g7vce90", + "animation" => "3s ease-in-out 0s infinite alternate none running jteyb11", + "font-family" => "jteyb10", "background-color" => "rgb(0, 128, 0)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -960,14 +960,14 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", }, "altContainer": Map { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -979,7 +979,7 @@ Object { }, "inlineThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91", + "animation" => "3s ease-in-out 0s infinite alternate none running jteyb11", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 165, 0)", "color" => "rgb(0, 0, 0)", @@ -990,7 +990,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "opacity" => "0.5", "outline" => "red solid 5px", "outline-color" => "rgb(255, 0, 0)", @@ -1001,8 +1001,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1014,7 +1014,7 @@ Object { }, "nestedRootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91", + "animation" => "3s ease-in-out 0s infinite alternate none running jteyb11", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", @@ -1025,7 +1025,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "outline" => "red solid 5px", "outline-color" => "rgb(255, 0, 0)", "outline-style" => "solid", @@ -1035,8 +1035,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1048,7 +1048,7 @@ Object { }, "responsiveThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91", + "animation" => "3s ease-in-out 0s infinite alternate none running jteyb11", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 192, 203)", "color" => "rgb(128, 0, 128)", @@ -1059,7 +1059,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", "outline" => "red solid 5px", "outline-color" => "rgb(255, 0, 0)", "outline-style" => "solid", @@ -1069,8 +1069,8 @@ Object { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1085,8 +1085,8 @@ Object { }, "rootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91", - "font-family" => "g7vce90", + "animation" => "3s ease-in-out 0s infinite alternate none running jteyb11", + "font-family" => "jteyb10", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -1096,14 +1096,14 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "g7vce91", + "animation-name" => "jteyb11", }, "rootContainer": Map { "animation" => "3s ease-in-out 0s infinite alternate none running globalSlide", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__6cbmls4)", - "padding" => "var(--space-3__6cbmls5)", + "gap" => "var(--space-2__cvta174)", + "padding" => "var(--space-3__cvta175)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1120,8 +1120,8 @@ exports[`Styling and specificity Themed mini-css-extract on desktop all builds s Object { "altButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", - "font-family" => "styles_impact__bh8jtc0", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", + "font-family" => "styles_impact__blj6yb0", "background-color" => "rgb(0, 128, 0)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -1131,7 +1131,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -1142,8 +1142,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1152,11 +1152,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, "inlineThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 165, 0)", "color" => "rgb(0, 0, 0)", @@ -1167,7 +1167,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "opacity" => "0.5", "border-radius" => "9999px", "border-top-left-radius" => "9999px", @@ -1183,8 +1183,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1193,11 +1193,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, "nestedRootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", @@ -1208,7 +1208,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -1223,8 +1223,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1233,11 +1233,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, "responsiveThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(128, 0, 128)", "color" => "rgb(255, 192, 203)", @@ -1248,7 +1248,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -1263,8 +1263,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1273,15 +1273,15 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, "root": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", }, "rootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", - "font-family" => "styles_impact__bh8jtc0", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", + "font-family" => "styles_impact__blj6yb0", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -1291,7 +1291,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -1302,8 +1302,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1312,7 +1312,7 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, } `; @@ -1321,8 +1321,8 @@ exports[`Styling and specificity Themed mini-css-extract on mobile all builds sh Object { "altButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", - "font-family" => "styles_impact__bh8jtc0", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", + "font-family" => "styles_impact__blj6yb0", "background-color" => "rgb(0, 128, 0)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -1332,14 +1332,14 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", }, "altContainer": Map { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1351,7 +1351,7 @@ Object { }, "inlineThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 165, 0)", "color" => "rgb(0, 0, 0)", @@ -1362,7 +1362,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "opacity" => "0.5", "outline" => "5px solid red", "outline-color" => "rgb(255, 0, 0)", @@ -1373,8 +1373,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1386,7 +1386,7 @@ Object { }, "nestedRootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", @@ -1397,7 +1397,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "outline" => "5px solid red", "outline-color" => "rgb(255, 0, 0)", "outline-style" => "solid", @@ -1407,8 +1407,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1420,7 +1420,7 @@ Object { }, "responsiveThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 192, 203)", "color" => "rgb(128, 0, 128)", @@ -1431,7 +1431,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "outline" => "5px solid red", "outline-color" => "rgb(255, 0, 0)", "outline-style" => "solid", @@ -1441,8 +1441,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1457,8 +1457,8 @@ Object { }, "rootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", - "font-family" => "styles_impact__bh8jtc0", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", + "font-family" => "styles_impact__blj6yb0", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -1468,14 +1468,14 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", }, "rootContainer": Map { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1492,8 +1492,8 @@ exports[`Styling and specificity Themed style-loader on desktop all builds shoul Object { "altButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", - "font-family" => "styles_impact__bh8jtc0", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", + "font-family" => "styles_impact__blj6yb0", "background-color" => "rgb(0, 128, 0)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -1503,7 +1503,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -1514,8 +1514,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1524,11 +1524,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, "inlineThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 165, 0)", "color" => "rgb(0, 0, 0)", @@ -1539,7 +1539,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "opacity" => "0.5", "border-radius" => "9999px", "border-top-left-radius" => "9999px", @@ -1555,8 +1555,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1565,11 +1565,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, "nestedRootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", @@ -1580,7 +1580,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -1595,8 +1595,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1605,11 +1605,11 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, "responsiveThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(128, 0, 128)", "color" => "rgb(255, 192, 203)", @@ -1620,7 +1620,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -1635,8 +1635,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1645,15 +1645,15 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, "root": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", }, "rootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", - "font-family" => "styles_impact__bh8jtc0", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", + "font-family" => "styles_impact__blj6yb0", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -1663,7 +1663,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "border-radius" => "9999px", "border-top-left-radius" => "9999px", "border-top-right-radius" => "9999px", @@ -1674,8 +1674,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1684,7 +1684,7 @@ Object { "animation-fill-mode" => "none", "animation-play-state" => "running", "animation-name" => "globalSlide", - "border" => "1px solid var(--colors-background-color__40jr0n1)", + "border" => "1px solid var(--colors-background-color__cdwe0v1)", }, } `; @@ -1693,8 +1693,8 @@ exports[`Styling and specificity Themed style-loader on mobile all builds should Object { "altButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", - "font-family" => "styles_impact__bh8jtc0", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", + "font-family" => "styles_impact__blj6yb0", "background-color" => "rgb(0, 128, 0)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -1704,14 +1704,14 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", }, "altContainer": Map { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1723,7 +1723,7 @@ Object { }, "inlineThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 165, 0)", "color" => "rgb(0, 0, 0)", @@ -1734,7 +1734,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "opacity" => "0.5", "outline" => "5px solid red", "outline-color" => "rgb(255, 0, 0)", @@ -1745,8 +1745,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1758,7 +1758,7 @@ Object { }, "nestedRootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", @@ -1769,7 +1769,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "outline" => "5px solid red", "outline-color" => "rgb(255, 0, 0)", "outline-style" => "solid", @@ -1779,8 +1779,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1792,7 +1792,7 @@ Object { }, "responsiveThemeButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", "font-family" => "MyGlobalComicSans", "background-color" => "rgb(255, 192, 203)", "color" => "rgb(128, 0, 128)", @@ -1803,7 +1803,7 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", "outline" => "5px solid red", "outline-color" => "rgb(255, 0, 0)", "outline-style" => "solid", @@ -1813,8 +1813,8 @@ Object { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", @@ -1829,8 +1829,8 @@ Object { }, "rootButton": Map { "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px", - "animation" => "3s infinite alternate styles_slide__bh8jtc1 ease-in-out", - "font-family" => "styles_impact__bh8jtc0", + "animation" => "3s infinite alternate styles_slide__blj6yb1 ease-in-out", + "font-family" => "styles_impact__blj6yb0", "background-color" => "rgb(0, 0, 255)", "color" => "rgb(255, 255, 255)", "animation-duration" => "3s", @@ -1840,14 +1840,14 @@ Object { "animation-direction" => "alternate", "animation-fill-mode" => "none", "animation-play-state" => "running", - "animation-name" => "styles_slide__bh8jtc1", + "animation-name" => "styles_slide__blj6yb1", }, "rootContainer": Map { "animation" => "3s infinite alternate globalSlide ease-in-out", "display" => "flex", "flex-direction" => "column", - "gap" => "var(--space-2__40jr0n4)", - "padding" => "var(--space-3__40jr0n5)", + "gap" => "var(--space-2__cdwe0v4)", + "padding" => "var(--space-3__cdwe0v5)", "animation-duration" => "3s", "animation-timing-function" => "ease-in-out", "animation-delay" => "0s", diff --git a/tests/E2E/__snapshots__/stylesheets.test.ts.snap b/tests/E2E/__snapshots__/stylesheets.test.ts.snap index ee91ea803..a751bbb27 100644 --- a/tests/E2E/__snapshots__/stylesheets.test.ts.snap +++ b/tests/E2E/__snapshots__/stylesheets.test.ts.snap @@ -1,24 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Stylesheet themed - esbuild should create valid stylesheet 1`] = ` -"/* vanilla-extract-css-ns:src/shared.css.ts.vanilla.css?source=Ll85azJ3YXIwIHsKICBib3gtc2hhZG93OiAwIDAgNXB4IHJlZDsKfQpib2R5IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBza3libHVlOwp9 */ -._9k2war0 { +"/* vanilla-extract-css-ns:@fixtures/themed/src/shared.css.ts.vanilla.css?source=Ll80ZHRmZW4wIHsKICBib3gtc2hhZG93OiAwIDAgNXB4IHJlZDsKfQpib2R5IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBza3libHVlOwp9 */ +._4dtfen0 { box-shadow: 0 0 5px red; } body { background-color: skyblue; } -/* vanilla-extract-css-ns:src/styles.css.ts.vanilla.css?source=QGZvbnQtZmFjZSB7CiAgc3JjOiBsb2NhbCgiSW1wYWN0Iik7CiAgZm9udC1mYW1pbHk6ICJnN3ZjZTkwIjsKfQpAZm9udC1mYWNlIHsKICBzcmM6IGxvY2FsKCJDb21pYyBTYW5zIE1TIik7CiAgZm9udC1mYW1pbHk6IE15R2xvYmFsQ29taWNTYW5zOwp9CkBrZXlmcmFtZXMgZzd2Y2U5MSB7CiAgMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC00cHgpOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSg0cHgpOwogIH0KfQpAa2V5ZnJhbWVzIGdsb2JhbFNsaWRlIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTRweCk7CiAgfQogIDEwMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDRweCk7CiAgfQp9Ci5nN3ZjZTkyIHsKICBhbmltYXRpb246IDNzIGluZmluaXRlIGFsdGVybmF0ZSBnbG9iYWxTbGlkZSBlYXNlLWluLW91dDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgZ2FwOiB2YXIoLS1zcGFjZS0yX182Y2JtbHM0KTsKICBwYWRkaW5nOiB2YXIoLS1zcGFjZS0zX182Y2JtbHM1KTsKfQouZzd2Y2U5MyB7CiAgYW5pbWF0aW9uOiAzcyBpbmZpbml0ZSBhbHRlcm5hdGUgZzd2Y2U5MSBlYXNlLWluLW91dDsKICBmb250LWZhbWlseTogImc3dmNlOTAiOwogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1iYWNrZ3JvdW5kLWNvbG9yX182Y2JtbHMxLCAiVEhJUyBGQUxMQkFDSyBWQUxVRSBTSE9VTEQgTkVWRVIgQkUgVVNFRCIpOwogIGNvbG9yOiB2YXIoLS1jb2xvcnMtdGV4dF9fNmNibWxzMik7Cn0KLl82Y2JtbHM2IC5fNmNibWxzMCAuZzd2Y2U5MiAuZzd2Y2U5MyB7CiAgZm9udC1mYW1pbHk6IE15R2xvYmFsQ29taWNTYW5zOwogIG91dGxpbmU6IDVweCBzb2xpZCByZWQ7Cn0KLnN0eWxlc18xXC8yX19nN3ZjZTk2IHsKICBvcGFjaXR5OiB2YXIoLS1nN3ZjZTk0LCAwLjUpOwp9Ci5zdHlsZXNfMVwvNF9fZzd2Y2U5NyB7CiAgb3BhY2l0eTogdmFyKC0tZzd2Y2U5NCwgdmFyKC0tZzd2Y2U5NSwgMC4yNSkpOwp9CkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNTAwcHgpIHsKICAuZzd2Y2U5MiB7CiAgICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1jb2xvcnMtYmFja2dyb3VuZC1jb2xvcl9fNmNibWxzMSk7CiAgfQogIC5nN3ZjZTkzIHsKICAgIGJvcmRlci1yYWRpdXM6IDk5OTlweDsKICB9Cn0= */ +/* vanilla-extract-css-ns:@fixtures/themed/src/styles.css.ts.vanilla.css?source=QGZvbnQtZmFjZSB7CiAgc3JjOiBsb2NhbCgiSW1wYWN0Iik7CiAgZm9udC1mYW1pbHk6ICJqdGV5YjEwIjsKfQpAZm9udC1mYWNlIHsKICBzcmM6IGxvY2FsKCJDb21pYyBTYW5zIE1TIik7CiAgZm9udC1mYW1pbHk6IE15R2xvYmFsQ29taWNTYW5zOwp9CkBrZXlmcmFtZXMganRleWIxMSB7CiAgMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC00cHgpOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSg0cHgpOwogIH0KfQpAa2V5ZnJhbWVzIGdsb2JhbFNsaWRlIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTRweCk7CiAgfQogIDEwMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDRweCk7CiAgfQp9Ci5qdGV5YjEyIHsKICBhbmltYXRpb246IDNzIGluZmluaXRlIGFsdGVybmF0ZSBnbG9iYWxTbGlkZSBlYXNlLWluLW91dDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgZ2FwOiB2YXIoLS1zcGFjZS0yX19jdnRhMTc0KTsKICBwYWRkaW5nOiB2YXIoLS1zcGFjZS0zX19jdnRhMTc1KTsKfQouanRleWIxMyB7CiAgYW5pbWF0aW9uOiAzcyBpbmZpbml0ZSBhbHRlcm5hdGUganRleWIxMSBlYXNlLWluLW91dDsKICBmb250LWZhbWlseTogImp0ZXliMTAiOwogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1iYWNrZ3JvdW5kLWNvbG9yX19jdnRhMTcxLCAiVEhJUyBGQUxMQkFDSyBWQUxVRSBTSE9VTEQgTkVWRVIgQkUgVVNFRCIpOwogIGNvbG9yOiB2YXIoLS1jb2xvcnMtdGV4dF9fY3Z0YTE3Mik7Cn0KLmN2dGExNzYgLmN2dGExNzAgLmp0ZXliMTIgLmp0ZXliMTMgewogIGZvbnQtZmFtaWx5OiBNeUdsb2JhbENvbWljU2FuczsKICBvdXRsaW5lOiA1cHggc29saWQgcmVkOwp9Ci5zdHlsZXNfMVwvMl9fanRleWIxNiB7CiAgb3BhY2l0eTogdmFyKC0tanRleWIxNCwgMC41KTsKfQouc3R5bGVzXzFcLzRfX2p0ZXliMTcgewogIG9wYWNpdHk6IHZhcigtLWp0ZXliMTQsIHZhcigtLWp0ZXliMTUsIDAuMjUpKTsKfQpAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDUwMHB4KSB7CiAgLmp0ZXliMTIgewogICAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tY29sb3JzLWJhY2tncm91bmQtY29sb3JfX2N2dGExNzEpOwogIH0KICAuanRleWIxMyB7CiAgICBib3JkZXItcmFkaXVzOiA5OTk5cHg7CiAgfQp9 */ @font-face { src: local(\\"Impact\\"); - font-family: \\"g7vce90\\"; + font-family: \\"jteyb10\\"; } @font-face { src: local(\\"Comic Sans MS\\"); font-family: MyGlobalComicSans; } -@keyframes g7vce91 { +@keyframes jteyb11 { 0% { transform: translateY(-4px); } @@ -34,99 +34,99 @@ body { transform: translateY(4px); } } -.g7vce92 { +.jteyb12 { animation: 3s infinite alternate globalSlide ease-in-out; display: flex; flex-direction: column; - gap: var(--space-2__6cbmls4); - padding: var(--space-3__6cbmls5); + gap: var(--space-2__cvta174); + padding: var(--space-3__cvta175); } -.g7vce93 { - animation: 3s infinite alternate g7vce91 ease-in-out; - font-family: \\"g7vce90\\"; - background-color: var(--colors-background-color__6cbmls1, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\"); - color: var(--colors-text__6cbmls2); +.jteyb13 { + animation: 3s infinite alternate jteyb11 ease-in-out; + font-family: \\"jteyb10\\"; + background-color: var(--colors-background-color__cvta171, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\"); + color: var(--colors-text__cvta172); } -._6cbmls6 ._6cbmls0 .g7vce92 .g7vce93 { +.cvta176 .cvta170 .jteyb12 .jteyb13 { font-family: MyGlobalComicSans; outline: 5px solid red; } -.styles_1\\\\/2__g7vce96 { - opacity: var(--g7vce94, 0.5); +.styles_1\\\\/2__jteyb16 { + opacity: var(--jteyb14, 0.5); } -.styles_1\\\\/4__g7vce97 { - opacity: var(--g7vce94, var(--g7vce95, 0.25)); +.styles_1\\\\/4__jteyb17 { + opacity: var(--jteyb14, var(--jteyb15, 0.25)); } @media only screen and (min-width: 500px) { - .g7vce92 { - border: 1px solid var(--colors-background-color__6cbmls1); + .jteyb12 { + border: 1px solid var(--colors-background-color__cvta171); } - .g7vce93 { + .jteyb13 { border-radius: 9999px; } } -/* vanilla-extract-css-ns:src/themes.css.ts.vanilla.css?source=OnJvb3QsIC5fNmNibWxzMCB7CiAgLS1jb2xvcnMtYmFja2dyb3VuZC1jb2xvcl9fNmNibWxzMTogYmx1ZTsKICAtLWNvbG9ycy10ZXh0X182Y2JtbHMyOiB3aGl0ZTsKICAtLXNwYWNlLTFfXzZjYm1sczM6IDRweDsKICAtLXNwYWNlLTJfXzZjYm1sczQ6IDhweDsKICAtLXNwYWNlLTNfXzZjYm1sczU6IDEycHg7Cn0KLl82Y2JtbHM2IHsKICAtLWNvbG9ycy1iYWNrZ3JvdW5kLWNvbG9yX182Y2JtbHMxOiBncmVlbjsKICAtLWNvbG9ycy10ZXh0X182Y2JtbHMyOiB3aGl0ZTsKICAtLXNwYWNlLTFfXzZjYm1sczM6IDhweDsKICAtLXNwYWNlLTJfXzZjYm1sczQ6IDEycHg7CiAgLS1zcGFjZS0zX182Y2JtbHM1OiAxNnB4Owp9Ci5fNmNibWxzNyB7CiAgLS1jb2xvcnMtYmFja2dyb3VuZC1jb2xvcl9fNmNibWxzMTogcGluazsKICAtLWNvbG9ycy10ZXh0X182Y2JtbHMyOiBwdXJwbGU7CiAgLS1zcGFjZS0xX182Y2JtbHMzOiA2cHg7CiAgLS1zcGFjZS0yX182Y2JtbHM0OiAxMnB4OwogIC0tc3BhY2UtM19fNmNibWxzNTogMThweDsKfQpAbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA3NjhweCkgewogIC5fNmNibWxzNyB7CiAgICAtLWNvbG9ycy1iYWNrZ3JvdW5kLWNvbG9yX182Y2JtbHMxOiBwdXJwbGU7CiAgICAtLWNvbG9ycy10ZXh0X182Y2JtbHMyOiBwaW5rOwogIH0KfQ== */ +/* vanilla-extract-css-ns:@fixtures/themed/src/themes.css.ts.vanilla.css?source=OnJvb3QsIC5jdnRhMTcwIHsKICAtLWNvbG9ycy1iYWNrZ3JvdW5kLWNvbG9yX19jdnRhMTcxOiBibHVlOwogIC0tY29sb3JzLXRleHRfX2N2dGExNzI6IHdoaXRlOwogIC0tc3BhY2UtMV9fY3Z0YTE3MzogNHB4OwogIC0tc3BhY2UtMl9fY3Z0YTE3NDogOHB4OwogIC0tc3BhY2UtM19fY3Z0YTE3NTogMTJweDsKfQouY3Z0YTE3NiB7CiAgLS1jb2xvcnMtYmFja2dyb3VuZC1jb2xvcl9fY3Z0YTE3MTogZ3JlZW47CiAgLS1jb2xvcnMtdGV4dF9fY3Z0YTE3Mjogd2hpdGU7CiAgLS1zcGFjZS0xX19jdnRhMTczOiA4cHg7CiAgLS1zcGFjZS0yX19jdnRhMTc0OiAxMnB4OwogIC0tc3BhY2UtM19fY3Z0YTE3NTogMTZweDsKfQouY3Z0YTE3NyB7CiAgLS1jb2xvcnMtYmFja2dyb3VuZC1jb2xvcl9fY3Z0YTE3MTogcGluazsKICAtLWNvbG9ycy10ZXh0X19jdnRhMTcyOiBwdXJwbGU7CiAgLS1zcGFjZS0xX19jdnRhMTczOiA2cHg7CiAgLS1zcGFjZS0yX19jdnRhMTc0OiAxMnB4OwogIC0tc3BhY2UtM19fY3Z0YTE3NTogMThweDsKfQpAbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA3NjhweCkgewogIC5jdnRhMTc3IHsKICAgIC0tY29sb3JzLWJhY2tncm91bmQtY29sb3JfX2N2dGExNzE6IHB1cnBsZTsKICAgIC0tY29sb3JzLXRleHRfX2N2dGExNzI6IHBpbms7CiAgfQp9 */ :root, -._6cbmls0 { - --colors-background-color__6cbmls1: blue; - --colors-text__6cbmls2: white; - --space-1__6cbmls3: 4px; - --space-2__6cbmls4: 8px; - --space-3__6cbmls5: 12px; -} -._6cbmls6 { - --colors-background-color__6cbmls1: green; - --colors-text__6cbmls2: white; - --space-1__6cbmls3: 8px; - --space-2__6cbmls4: 12px; - --space-3__6cbmls5: 16px; -} -._6cbmls7 { - --colors-background-color__6cbmls1: pink; - --colors-text__6cbmls2: purple; - --space-1__6cbmls3: 6px; - --space-2__6cbmls4: 12px; - --space-3__6cbmls5: 18px; +.cvta170 { + --colors-background-color__cvta171: blue; + --colors-text__cvta172: white; + --space-1__cvta173: 4px; + --space-2__cvta174: 8px; + --space-3__cvta175: 12px; +} +.cvta176 { + --colors-background-color__cvta171: green; + --colors-text__cvta172: white; + --space-1__cvta173: 8px; + --space-2__cvta174: 12px; + --space-3__cvta175: 16px; +} +.cvta177 { + --colors-background-color__cvta171: pink; + --colors-text__cvta172: purple; + --space-1__cvta173: 6px; + --space-2__cvta174: 12px; + --space-3__cvta175: 18px; } @media screen and (min-width: 768px) { - ._6cbmls7 { - --colors-background-color__6cbmls1: purple; - --colors-text__6cbmls2: pink; + .cvta177 { + --colors-background-color__cvta171: purple; + --colors-text__cvta172: pink; } } " `; exports[`Stylesheet themed - webpack should create valid stylesheet 1`] = ` -":root, .themes_theme__40jr0n0 { - --colors-background-color__40jr0n1: blue; - --colors-text__40jr0n2: white; - --space-1__40jr0n3: 4px; - --space-2__40jr0n4: 8px; - --space-3__40jr0n5: 12px; -} -.themes_altTheme__40jr0n6 { - --colors-background-color__40jr0n1: green; - --colors-text__40jr0n2: white; - --space-1__40jr0n3: 8px; - --space-2__40jr0n4: 12px; - --space-3__40jr0n5: 16px; -} -.themes_responsiveTheme__40jr0n7 { - --colors-background-color__40jr0n1: pink; - --colors-text__40jr0n2: purple; - --space-1__40jr0n3: 6px; - --space-2__40jr0n4: 12px; - --space-3__40jr0n5: 18px; +":root, .themes_theme__cdwe0v0 { + --colors-background-color__cdwe0v1: blue; + --colors-text__cdwe0v2: white; + --space-1__cdwe0v3: 4px; + --space-2__cdwe0v4: 8px; + --space-3__cdwe0v5: 12px; +} +.themes_altTheme__cdwe0v6 { + --colors-background-color__cdwe0v1: green; + --colors-text__cdwe0v2: white; + --space-1__cdwe0v3: 8px; + --space-2__cdwe0v4: 12px; + --space-3__cdwe0v5: 16px; +} +.themes_responsiveTheme__cdwe0v7 { + --colors-background-color__cdwe0v1: pink; + --colors-text__cdwe0v2: purple; + --space-1__cdwe0v3: 6px; + --space-2__cdwe0v4: 12px; + --space-3__cdwe0v5: 18px; } @media screen and (min-width: 768px) { - .themes_responsiveTheme__40jr0n7 { - --colors-background-color__40jr0n1: purple; - --colors-text__40jr0n2: pink; + .themes_responsiveTheme__cdwe0v7 { + --colors-background-color__cdwe0v1: purple; + --colors-text__cdwe0v2: pink; } } -.shared_shadow__fb6bqk0 { +.shared_shadow__5iqv0q0 { box-shadow: 0 0 5px red; } body { @@ -134,13 +134,13 @@ body { } @font-face { src: local(\\"Impact\\"); - font-family: \\"styles_impact__bh8jtc0\\"; + font-family: \\"styles_impact__blj6yb0\\"; } @font-face { src: local(\\"Comic Sans MS\\"); font-family: MyGlobalComicSans; } -@keyframes styles_slide__bh8jtc1 { +@keyframes styles_slide__blj6yb1 { 0% { transform: translateY(-4px); } @@ -156,34 +156,34 @@ body { transform: translateY(4px); } } -.styles_container__bh8jtc2 { +.styles_container__blj6yb2 { animation: 3s infinite alternate globalSlide ease-in-out; display: flex; flex-direction: column; - gap: var(--space-2__40jr0n4); - padding: var(--space-3__40jr0n5); + gap: var(--space-2__cdwe0v4); + padding: var(--space-3__cdwe0v5); } -.styles_button__bh8jtc3 { - animation: 3s infinite alternate styles_slide__bh8jtc1 ease-in-out; - font-family: \\"styles_impact__bh8jtc0\\"; - background-color: var(--colors-background-color__40jr0n1, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\"); - color: var(--colors-text__40jr0n2); +.styles_button__blj6yb3 { + animation: 3s infinite alternate styles_slide__blj6yb1 ease-in-out; + font-family: \\"styles_impact__blj6yb0\\"; + background-color: var(--colors-background-color__cdwe0v1, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\"); + color: var(--colors-text__cdwe0v2); } -.themes_altTheme__40jr0n6 .themes_theme__40jr0n0 .styles_container__bh8jtc2 .styles_button__bh8jtc3 { +.themes_altTheme__cdwe0v6 .themes_theme__cdwe0v0 .styles_container__blj6yb2 .styles_button__blj6yb3 { font-family: MyGlobalComicSans; outline: 5px solid red; } -.styles_opacity_1\\\\/2__bh8jtc6 { - opacity: var(--undefined-var1__bh8jtc4, 0.5); +.styles_opacity_1\\\\/2__blj6yb6 { + opacity: var(--undefined-var1__blj6yb4, 0.5); } -.styles_opacity_1\\\\/4__bh8jtc7 { - opacity: var(--undefined-var1__bh8jtc4, var(--undefined-var2__bh8jtc5, 0.25)); +.styles_opacity_1\\\\/4__blj6yb7 { + opacity: var(--undefined-var1__blj6yb4, var(--undefined-var2__blj6yb5, 0.25)); } @media only screen and (min-width: 500px) { - .styles_container__bh8jtc2 { - border: 1px solid var(--colors-background-color__40jr0n1); + .styles_container__blj6yb2 { + border: 1px solid var(--colors-background-color__cdwe0v1); } - .styles_button__bh8jtc3 { + .styles_button__blj6yb3 { border-radius: 9999px; } } @@ -192,26 +192,26 @@ body { `; exports[`Stylesheet unused-modules - esbuild should create valid stylesheet 1`] = ` -"/* vanilla-extract-css-ns:src/global.css.ts.vanilla.css?source=Ym9keSB7CiAgYmFja2dyb3VuZC1jb2xvcjogbGF2ZW5kZXI7Cn0= */ +"/* vanilla-extract-css-ns:@fixtures/unused-modules/src/global.css.ts.vanilla.css?source=Ym9keSB7CiAgYmFja2dyb3VuZC1jb2xvcjogbGF2ZW5kZXI7Cn0= */ body { background-color: lavender; } -/* vanilla-extract-css-ns:src/reset/reset.css.ts.vanilla.css?source=Ll8xM2RneDV4MCB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQ== */ -._13dgx5x0 { +/* vanilla-extract-css-ns:@fixtures/unused-modules/src/reset/reset.css.ts.vanilla.css?source=Ll8xajc4enRxMCB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQ== */ +._1j78ztq0 { box-sizing: border-box; } -/* vanilla-extract-css-ns:src/shared/shared.css.ts.vanilla.css?source=Ym9keSB7CiAgYm9yZGVyOiA1cHggc29saWQgYmxhY2s7Cn0KLmRobW5lbDAgewogIGRpc3BsYXk6IGZsZXg7Cn0= */ +/* vanilla-extract-css-ns:@fixtures/unused-modules/src/shared/shared.css.ts.vanilla.css?source=Ym9keSB7CiAgYm9yZGVyOiA1cHggc29saWQgYmxhY2s7Cn0KLmZiaWhjNjAgewogIGRpc3BsYXk6IGZsZXg7Cn0= */ body { border: 5px solid black; } -.dhmnel0 { +.fbihc60 { display: flex; } -/* vanilla-extract-css-ns:src/used/used.css.ts.vanilla.css?source=Ll8xZnVvc2x3MCB7CiAgaGVpZ2h0OiAxMDBweDsKICB3aWR0aDogMTAwcHg7CiAgYmFja2dyb3VuZDogZ3JlZW47Cn0= */ -._1fuoslw0 { +/* vanilla-extract-css-ns:@fixtures/unused-modules/src/used/used.css.ts.vanilla.css?source=Ll8zNm8zemIwIHsKICBoZWlnaHQ6IDEwMHB4OwogIHdpZHRoOiAxMDBweDsKICBiYWNrZ3JvdW5kOiBncmVlbjsKfQ== */ +._36o3zb0 { height: 100px; width: 100px; background: green; @@ -223,16 +223,16 @@ exports[`Stylesheet unused-modules - webpack should create valid stylesheet 1`] "body { background-color: lavender; } -.reset_default__uwiqg30 { +.reset_default__13dn9qt0 { box-sizing: border-box; } body { border: 5px solid black; } -.shared_default__1qsu10z0 { +.shared_default__1mtonhh0 { display: flex; } -.used_className__1q2bj4l0 { +.used_className__plqi3i0 { height: 100px; width: 100px; background: green; diff --git a/yarn.lock b/yarn.lock index 548ba70db..6eb230511 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2674,6 +2674,7 @@ __metadata: dependencies: "@babel/core": ^7.13.10 "@babel/template": ^7.12.13 + find-up: ^5.0.0 languageName: unknown linkType: soft @@ -2707,6 +2708,7 @@ __metadata: dedent: ^0.7.0 esbuild: ^0.11.1 eval: ^0.1.6 + find-up: ^5.0.0 javascript-stringify: ^2.0.1 lodash: ^4.17.21 peerDependencies: From 41d7fc2a1d36626c97b26050054f5ae654aa6ad9 Mon Sep 17 00:00:00 2001 From: Matt Jones Date: Thu, 8 Apr 2021 16:14:05 +1000 Subject: [PATCH 2/7] Remove alias test --- packages/babel-plugin/src/index.test.ts | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/packages/babel-plugin/src/index.test.ts b/packages/babel-plugin/src/index.test.ts index a5a10ddd8..b72749129 100644 --- a/packages/babel-plugin/src/index.test.ts +++ b/packages/babel-plugin/src/index.test.ts @@ -474,23 +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 { style } from 'my-alias'; - const four = style({ - zIndex: 2 - });" - `); - }); - it('should handle anonymous style in arrays', () => { const source = ` import { style } from '@vanilla-extract/css'; From 8d7a6d40d6cf84c33386c06616f091ef925b6beb Mon Sep 17 00:00:00 2001 From: Matt Jones Date: Thu, 8 Apr 2021 16:16:46 +1000 Subject: [PATCH 3/7] Improve changesets --- .changeset/plenty-chefs-check.md | 5 +++++ .changeset/soft-goats-admire.md | 3 +-- 2 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 .changeset/plenty-chefs-check.md diff --git a/.changeset/plenty-chefs-check.md b/.changeset/plenty-chefs-check.md new file mode 100644 index 000000000..2c4d566d5 --- /dev/null +++ b/.changeset/plenty-chefs-check.md @@ -0,0 +1,5 @@ +--- +'@vanilla-extract/esbuild-plugin': minor +--- + +Remove `projectRoot` option in favor of `cwd` option. `cwd` is defaulted to `process.cwd()` diff --git a/.changeset/soft-goats-admire.md b/.changeset/soft-goats-admire.md index e328e7af6..a024a86ae 100644 --- a/.changeset/soft-goats-admire.md +++ b/.changeset/soft-goats-admire.md @@ -1,6 +1,5 @@ --- '@vanilla-extract/babel-plugin': minor -'@vanilla-extract/esbuild-plugin': minor --- -Remove `projectRoot` option in favour of `cwd` +Remove `projectRoot` and `alias` option From 177e701f2b17efea387d01c1b5da60cd9fd9449a Mon Sep 17 00:00:00 2001 From: Matt Jones Date: Mon, 12 Apr 2021 11:05:28 +1000 Subject: [PATCH 4/7] Improve changeset --- .changeset/honest-walls-type.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/honest-walls-type.md b/.changeset/honest-walls-type.md index 2641a44f1..5d0b53339 100644 --- a/.changeset/honest-walls-type.md +++ b/.changeset/honest-walls-type.md @@ -5,6 +5,6 @@ '@vanilla-extract/webpack-plugin': minor --- -Add `packageName` to filescopes +Ensure generated hashes are scoped by package This change adds support for pre-compilation of packages. Prior to this change, packages consumed from `node_modules` would need to be compiled (through babel) to add filescope information. This was to ensure class names would never clash. Adding package name information to the filescope allows vanilla-extract to safely pre-compile packages before publishing to npm without risk of class name clashes. From 10300c194e548b603b1a8d0f07fcaa91c5e91695 Mon Sep 17 00:00:00 2001 From: Matt Jones Date: Mon, 12 Apr 2021 11:11:46 +1000 Subject: [PATCH 5/7] Update README --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6dde1f575..e68983df3 100644 --- a/README.md +++ b/README.md @@ -162,10 +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');` - 1. Install the dependencies. ```bash @@ -185,6 +181,8 @@ require('esbuild').build({ }).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. From cba7d981ca949fa9f8a8dd4085178c096bbbce36 Mon Sep 17 00:00:00 2001 From: Matt Jones Date: Mon, 12 Apr 2021 11:42:50 +1000 Subject: [PATCH 6/7] Remove cwd option for esbuild plugin --- .changeset/honest-walls-type.md | 4 ++- .changeset/plenty-chefs-check.md | 2 +- packages/esbuild-plugin/src/index.ts | 45 ++++++++++-------------- test-helpers/src/startFixture/esbuild.ts | 6 ++-- 4 files changed, 26 insertions(+), 31 deletions(-) diff --git a/.changeset/honest-walls-type.md b/.changeset/honest-walls-type.md index 5d0b53339..2552dbc35 100644 --- a/.changeset/honest-walls-type.md +++ b/.changeset/honest-walls-type.md @@ -7,4 +7,6 @@ Ensure generated hashes are scoped by package -This change adds support for pre-compilation of packages. Prior to this change, packages consumed from `node_modules` would need to be compiled (through babel) to add filescope information. This was to ensure class names would never clash. Adding package name information to the filescope allows vanilla-extract to safely pre-compile packages before publishing to npm without risk of class name clashes. +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 index 2c4d566d5..13a5be322 100644 --- a/.changeset/plenty-chefs-check.md +++ b/.changeset/plenty-chefs-check.md @@ -2,4 +2,4 @@ '@vanilla-extract/esbuild-plugin': minor --- -Remove `projectRoot` option in favor of `cwd` option. `cwd` is defaulted to `process.cwd()` +Remove `projectRoot` option in favor of `package.json` resolution diff --git a/packages/esbuild-plugin/src/index.ts b/packages/esbuild-plugin/src/index.ts index bf6167a8a..c96486ff4 100644 --- a/packages/esbuild-plugin/src/index.ts +++ b/packages/esbuild-plugin/src/index.ts @@ -18,17 +18,24 @@ const vanillaExtractPath = dirname( const vanillaCssNamespace = 'vanilla-extract-css-ns'; -interface FilescopePluginOptions { - packageInfo: { - name: string; - dirname: string; - }; -} -const vanillaExtractFilescopePlugin = ({ - packageInfo, -}: FilescopePluginOptions): Plugin => ({ +const vanillaExtractFilescopePlugin = (): Plugin => ({ name: 'vanilla-extract-filescope', setup(build) { + const packageJsonPath = findUp.sync('package.json', { + cwd: build.initialOptions.absWorkingDir, + }); + + if (!packageJsonPath) { + throw new Error(`Can't find package.json`); + } + + const { name } = require(packageJsonPath); + const packageInfo = { + name, + path: packageJsonPath, + dirname: dirname(packageJsonPath), + }; + build.onLoad({ filter: /\.(js|jsx|ts|tsx)$/ }, async ({ path }) => { const originalSource = await fs.readFile(path, 'utf-8'); @@ -57,31 +64,16 @@ const vanillaExtractFilescopePlugin = ({ interface VanillaExtractPluginOptions { outputCss?: boolean; externals?: Array; - cwd?: string; runtime?: boolean; } export function vanillaExtractPlugin({ outputCss = true, externals = [], - cwd, runtime = false, }: VanillaExtractPluginOptions = {}): Plugin { - const packageJsonPath = findUp.sync('package.json', { cwd }); - - if (!packageJsonPath) { - throw new Error(`Can't find package.json`); - } - - const { name } = require(packageJsonPath); - const packageInfo = { - name, - path: packageJsonPath, - dirname: dirname(packageJsonPath), - }; - if (runtime) { // If using runtime CSS then just apply fileScopes to code - return vanillaExtractFilescopePlugin({ packageInfo }); + return vanillaExtractFilescopePlugin(); } return { @@ -118,7 +110,8 @@ export function vanillaExtractPlugin({ external: ['@vanilla-extract', ...externals], platform: 'node', write: false, - plugins: [vanillaExtractFilescopePlugin({ packageInfo })], + plugins: [vanillaExtractFilescopePlugin()], + absWorkingDir: build.initialOptions.absWorkingDir, }); const { outputFiles, metafile } = result; diff --git a/test-helpers/src/startFixture/esbuild.ts b/test-helpers/src/startFixture/esbuild.ts index c48f4f415..45249df9d 100644 --- a/test-helpers/src/startFixture/esbuild.ts +++ b/test-helpers/src/startFixture/esbuild.ts @@ -16,10 +16,10 @@ export const startEsbuildFixture = async ( { type, mode = 'development', port = 3000 }: EsbuildFixtureOptions, ): Promise => { const entry = require.resolve(`@fixtures/${fixtureName}`); - const cwd = path.dirname( + const absWorkingDir = path.dirname( require.resolve(`@fixtures/${fixtureName}/package.json`), ); - const outdir = path.join(cwd, 'dist'); + const outdir = path.join(absWorkingDir, 'dist'); if (existsSync(outdir)) { await fs.rm(outdir, { recursive: true }); @@ -37,10 +37,10 @@ export const startEsbuildFixture = async ( minify: mode === 'production', plugins: [ vanillaExtractPlugin({ - cwd, runtime: type === 'esbuild-runtime', }), ], + absWorkingDir, outdir, define: { 'process.env.NODE_ENV': JSON.stringify(mode), From 52e74a219e4a84eabcffd8be9cf41f219fd79016 Mon Sep 17 00:00:00 2001 From: Matt Jones Date: Mon, 12 Apr 2021 12:03:55 +1000 Subject: [PATCH 7/7] Update babel test cases --- packages/babel-plugin/src/index.test.ts | 50 ++++++++++++------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/babel-plugin/src/index.test.ts b/packages/babel-plugin/src/index.test.ts index b72749129..564a65c4f 100644 --- 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + 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(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\"); import { style as specialStyle } from '@vanilla-extract/css'; const four = specialStyle({ zIndex: 2 @@ -487,7 +487,7 @@ describe('babel plugin', () => { expect(transform(source)).toMatchInlineSnapshot(` "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\"; - setFileScope(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\"); import { style } from '@vanilla-extract/css'; export const height = [style({ zIndex: 2 @@ -509,7 +509,7 @@ describe('babel plugin', () => { expect(transform(source)).toMatchInlineSnapshot(` "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\"; - setFileScope(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\"); import { style } from '@vanilla-extract/css'; export const height = { full: [style({ @@ -531,7 +531,7 @@ describe('babel plugin', () => { expect(transform(source)).toMatchInlineSnapshot(` "import { setFileScope, endFileScope } from \\"@vanilla-extract/css/fileScope\\"; - setFileScope(\\"my-app/dir/mockFilename.css.ts\\", \\"vanilla-extract\\"); + setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\"); import * as css from '@vanilla-extract/css'; const one = css.style({ zIndex: 2