diff --git a/README.md b/README.md
index 2fc966e3d..2ae4db81e 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,7 @@ document.write(`
- [Setup](#setup)
- [webpack](#webpack)
+ - [esbuild](#esbuild)
- [Gatsby](#gatsby)
- [API](#api)
- [style](#style)
@@ -101,7 +102,7 @@ document.write(`
## Setup
-There are currently a couple of integrations to choose from.
+There are currently a few integrations to choose from.
### webpack
@@ -159,6 +160,32 @@ module.exports = {
```
+### esbuild
+
+Current limitations:
+
+- No automatic readable class names during development. However, you can still manually provide a debug ID as the last argument to functions that generate scoped styles, e.g. `export const className = style({ ... }, 'className');`
+- The `projectRoot` plugin option must be set to get deterministic class name hashes between build systems
+
+1. Install the dependencies.
+
+```bash
+$ yarn add --dev @vanilla-extract/css @vanilla-extract/esbuild-plugin
+```
+
+2. Add the [esbuild](https://esbuild.github.io/) plugin to your build script.
+
+```js
+const { vanillaExtractPlugin } = require('@vanilla-extract/esbuild-plugin');
+
+require('esbuild').build({
+ entryPoints: ['app.ts'],
+ bundle: true,
+ plugins: [vanillaExtractPlugin({ projectRoot: '...' })],
+ outfile: 'out.js',
+}).catch(() => process.exit(1))
+```
+
### Gatsby
To add to your [Gatsby](https://www.gatsbyjs.com) site, use the [gatsby-plugin-vanilla-extract](https://github.com/KyleAMathews/gatsby-plugin-vanilla-extract) plugin.
diff --git a/packages/esbuild-plugin/package.json b/packages/esbuild-plugin/package.json
new file mode 100644
index 000000000..32b73758a
--- /dev/null
+++ b/packages/esbuild-plugin/package.json
@@ -0,0 +1,32 @@
+{
+ "name": "@vanilla-extract/esbuild-plugin",
+ "version": "0.0.1",
+ "description": "Zero-runtime Stylesheets-in-TypeScript",
+ "main": "dist/vanilla-extract-esbuild-plugin.cjs.js",
+ "module": "dist/vanilla-extract-esbuild-plugin.esm.js",
+ "files": [
+ "/dist"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/seek-oss/vanilla-extract.git",
+ "directory": "packages/esbuild-plugin"
+ },
+ "author": "SEEK",
+ "license": "MIT",
+ "peerDependencies": {
+ "esbuild": ">=0.11.1"
+ },
+ "dependencies": {
+ "@vanilla-extract/css": "^0.1.0",
+ "chalk": "^4.1.0",
+ "dedent": "^0.7.0",
+ "eval": "^0.1.6",
+ "javascript-stringify": "^2.0.1",
+ "lodash": "^4.17.21"
+ },
+ "devDependencies": {
+ "@types/dedent": "^0.7.0",
+ "esbuild": "^0.11.1"
+ }
+}
diff --git a/packages/esbuild-plugin/src/index.ts b/packages/esbuild-plugin/src/index.ts
new file mode 100644
index 000000000..f0e0de75e
--- /dev/null
+++ b/packages/esbuild-plugin/src/index.ts
@@ -0,0 +1,214 @@
+import { dirname, relative } from 'path';
+import { promises as fs } from 'fs';
+
+import type { Adapter } from '@vanilla-extract/css';
+import { setAdapter } from '@vanilla-extract/css/adapter';
+import { transformCss } from '@vanilla-extract/css/transformCss';
+import dedent from 'dedent';
+import { build as esbuild, Plugin } from 'esbuild';
+// @ts-expect-error
+import evalCode from 'eval';
+import { stringify } from 'javascript-stringify';
+import isPlainObject from 'lodash/isPlainObject';
+
+const vanillaExtractPath = dirname(
+ require.resolve('@vanilla-extract/css/package.json'),
+);
+
+const vanillaCssNamespace = 'vanilla-extract-css-ns';
+
+interface FilescopePluginOptions {
+ projectRoot?: string;
+}
+const vanillaExtractFilescopePlugin = ({
+ projectRoot,
+}: FilescopePluginOptions): Plugin => ({
+ name: 'vanilla-extract-filescope',
+ setup(build) {
+ build.onLoad({ filter: /\.(js|jsx|ts|tsx)$/ }, async ({ path }) => {
+ const originalSource = await fs.readFile(path, 'utf-8');
+
+ if (
+ path.indexOf(vanillaExtractPath) === -1 &&
+ originalSource.indexOf('@vanilla-extract/css/fileScope') === -1
+ ) {
+ const fileScope = projectRoot ? relative(projectRoot, path) : path;
+
+ const contents = `
+ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+ setFileScope("${fileScope}");
+ ${originalSource}
+ endFileScope()
+ `;
+
+ return {
+ contents,
+ resolveDir: dirname(path),
+ };
+ }
+ });
+ },
+});
+
+interface VanillaExtractPluginOptions {
+ outputCss?: boolean;
+ externals?: Array;
+ projectRoot?: string;
+ runtime?: boolean;
+}
+export function vanillaExtractPlugin({
+ outputCss = true,
+ externals = [],
+ projectRoot,
+ runtime = false,
+}: VanillaExtractPluginOptions = {}): Plugin {
+ if (runtime) {
+ // If using runtime CSS then just apply fileScopes to code
+ return vanillaExtractFilescopePlugin({ projectRoot });
+ }
+
+ return {
+ name: 'vanilla-extract',
+ setup(build) {
+ build.onResolve({ filter: /vanilla\.css\?source=.*$/ }, (args) => {
+ return {
+ path: args.path,
+ namespace: vanillaCssNamespace,
+ };
+ });
+
+ build.onLoad(
+ { filter: /.*/, namespace: vanillaCssNamespace },
+ ({ path }) => {
+ const [, source] = path.match(/\?source=(.*)$/) ?? [];
+
+ if (!source) {
+ throw new Error('No source in vanilla CSS file');
+ }
+
+ return {
+ contents: Buffer.from(source, 'base64').toString('utf-8'),
+ loader: 'css',
+ };
+ },
+ );
+
+ build.onLoad({ filter: /\.css\.(js|jsx|ts|tsx)$/ }, async ({ path }) => {
+ const result = await esbuild({
+ entryPoints: [path],
+ metafile: true,
+ bundle: true,
+ external: ['@vanilla-extract', ...externals],
+ platform: 'node',
+ write: false,
+ plugins: [vanillaExtractFilescopePlugin({ projectRoot })],
+ });
+
+ const { outputFiles } = result;
+
+ if (!outputFiles || outputFiles.length !== 1) {
+ throw new Error('Invalid child compilation');
+ }
+
+ type Css = Parameters[0];
+ const cssByFileScope = new Map>();
+ const localClassNames = new Set();
+
+ const cssAdapter: Adapter = {
+ appendCss: (css, fileScope) => {
+ if (outputCss) {
+ const fileScopeCss = cssByFileScope.get(fileScope) ?? [];
+
+ fileScopeCss.push(css);
+
+ cssByFileScope.set(fileScope, fileScopeCss);
+ }
+ },
+ registerClassName: (className) => {
+ localClassNames.add(className);
+ },
+ onEndFileScope: () => {},
+ };
+
+ setAdapter(cssAdapter);
+
+ const sourceWithBoundLoaderInstance = `require('@vanilla-extract/css/adapter').setAdapter(__adapter__);${outputFiles[0].text}`;
+
+ const evalResult = evalCode(
+ sourceWithBoundLoaderInstance,
+ path,
+ { console, __adapter__: cssAdapter },
+ true,
+ );
+
+ const cssRequests = [];
+
+ for (const [fileScope, fileScopeCss] of cssByFileScope) {
+ const css = transformCss({
+ localClassNames: Array.from(localClassNames),
+ cssObjs: fileScopeCss,
+ }).join('\n');
+ const base64Css = Buffer.from(css, 'utf-8').toString('base64');
+
+ cssRequests.push(`${fileScope}.vanilla.css?source=${base64Css}`);
+ }
+
+ const contents = serializeVanillaModule(cssRequests, evalResult);
+
+ return {
+ contents,
+ loader: 'js',
+ };
+ });
+ },
+ };
+}
+
+const stringifyExports = (value: any) =>
+ stringify(
+ value,
+ (value, _indent, next) => {
+ const valueType = typeof value;
+ if (
+ valueType === 'string' ||
+ valueType === 'number' ||
+ valueType === 'undefined' ||
+ value === null ||
+ Array.isArray(value) ||
+ isPlainObject(value)
+ ) {
+ return next(value);
+ }
+
+ throw new Error(dedent`
+ Invalid exports.
+
+ You can only export plain objects, arrays, strings, numbers and null/undefined.
+ `);
+ },
+ 0,
+ {
+ references: true, // Allow circular references
+ maxDepth: Infinity,
+ maxValues: Infinity,
+ },
+ );
+
+const serializeVanillaModule = (
+ cssRequests: Array,
+ exports: Record,
+) => {
+ const cssImports = cssRequests.map((request) => {
+ return `import '${request}';`;
+ });
+
+ const moduleExports = Object.keys(exports).map((key) =>
+ key === 'default'
+ ? `export default ${stringifyExports(exports[key])};`
+ : `export var ${key} = ${stringifyExports(exports[key])};`,
+ );
+
+ const outputCode = [...cssImports, ...moduleExports];
+
+ return outputCode.join('\n');
+};
diff --git a/test-helpers/src/getStylesheet.ts b/test-helpers/src/getStylesheet.ts
index 2f2f546a0..39535c3b8 100644
--- a/test-helpers/src/getStylesheet.ts
+++ b/test-helpers/src/getStylesheet.ts
@@ -2,7 +2,7 @@ import got from 'got';
export const stylesheetName = 'main.css';
-export async function getStylesheet(url: string) {
+export async function getStylesheet(url: string, stylesheetName = 'main.css') {
const response = await got(`${url}/${stylesheetName}`);
return response.body;
diff --git a/test-helpers/src/index.ts b/test-helpers/src/index.ts
index 3a22a6dae..728badb65 100644
--- a/test-helpers/src/index.ts
+++ b/test-helpers/src/index.ts
@@ -1,3 +1,6 @@
export * from './startFixture';
export * from './getNodeStyles';
export * from './getStylesheet';
+
+export const getTestNodes = (fixture: string) =>
+ require(`@fixtures/${fixture}/test-nodes.json`);
diff --git a/test-helpers/src/startFixture/esbuild.ts b/test-helpers/src/startFixture/esbuild.ts
new file mode 100644
index 000000000..6bd22044d
--- /dev/null
+++ b/test-helpers/src/startFixture/esbuild.ts
@@ -0,0 +1,77 @@
+import path from 'path';
+import { existsSync, promises as fs } from 'fs';
+
+import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
+import { serve } from 'esbuild';
+
+import { TestServer } from './types';
+
+export interface EsbuildFixtureOptions {
+ type: 'esbuild' | 'esbuild-runtime';
+ mode?: 'development' | 'production';
+ port: number;
+}
+export const startEsbuildFixture = async (
+ fixtureName: string,
+ { type, mode = 'development', port = 3000 }: EsbuildFixtureOptions,
+): Promise => {
+ const entry = require.resolve(`@fixtures/${fixtureName}`);
+ const projectRoot = path.dirname(
+ require.resolve(`@fixtures/${fixtureName}/package.json`),
+ );
+ const outdir = path.join(projectRoot, 'dist');
+
+ if (existsSync(outdir)) {
+ await fs.rm(outdir, { recursive: true });
+ }
+
+ await fs.mkdir(outdir);
+
+ const server = await serve(
+ { servedir: outdir, port },
+ {
+ entryPoints: [entry],
+ metafile: true,
+ platform: 'browser',
+ bundle: true,
+ minify: mode === 'production',
+ plugins: [
+ vanillaExtractPlugin({
+ projectRoot,
+ runtime: type === 'esbuild-runtime',
+ }),
+ ],
+ outdir,
+ define: {
+ 'process.env.NODE_ENV': JSON.stringify(mode),
+ },
+ },
+ );
+
+ await fs.writeFile(
+ path.join(outdir, 'index.html'),
+ `
+
+
+
+
+ esbuild - ${fixtureName}
+
+
+
+
+
+
+ `,
+ );
+
+ return {
+ type: 'esbuild',
+ url: `http://localhost:${port}`,
+ close: () => {
+ server.stop();
+
+ return Promise.resolve();
+ },
+ };
+};
diff --git a/test-helpers/src/startFixture/index.ts b/test-helpers/src/startFixture/index.ts
new file mode 100644
index 000000000..44e1517b4
--- /dev/null
+++ b/test-helpers/src/startFixture/index.ts
@@ -0,0 +1,50 @@
+import portfinder from 'portfinder';
+
+import { startWebpackFixture, WebpackFixtureOptions } from './webpack';
+import { startEsbuildFixture, EsbuildFixtureOptions } from './esbuild';
+
+type BuildType =
+ | 'browser'
+ | 'mini-css-extract'
+ | 'style-loader'
+ | 'esbuild'
+ | 'esbuild-runtime';
+
+export interface TestServer {
+ type: BuildType;
+ url: string;
+ close: () => Promise;
+}
+
+type SharedOptions = {
+ basePort: number;
+};
+
+type FixtureOptions = SharedOptions &
+ Omit;
+export async function startFixture(
+ fixtureName: string,
+ { type, basePort, ...options }: FixtureOptions,
+): Promise {
+ const port = await portfinder.getPortPromise({ port: basePort });
+
+ console.log(
+ [
+ `Starting ${fixtureName} fixture`,
+ ...Object.entries({
+ type,
+ port,
+ ...options,
+ }).map(([key, value]) => `- ${key}: ${value}`),
+ ].join('\n'),
+ );
+
+ if (type === 'esbuild' || type === 'esbuild-runtime') {
+ return startEsbuildFixture(fixtureName, {
+ type,
+ port,
+ });
+ }
+
+ return startWebpackFixture(fixtureName, { type, ...options, port });
+}
diff --git a/test-helpers/src/startFixture/types.ts b/test-helpers/src/startFixture/types.ts
new file mode 100644
index 000000000..8f25eb724
--- /dev/null
+++ b/test-helpers/src/startFixture/types.ts
@@ -0,0 +1,11 @@
+export type BuildType =
+ | 'browser'
+ | 'mini-css-extract'
+ | 'style-loader'
+ | 'esbuild';
+
+export interface TestServer {
+ type: BuildType;
+ url: string;
+ close: () => Promise;
+}
diff --git a/test-helpers/src/startFixture.ts b/test-helpers/src/startFixture/webpack.ts
similarity index 78%
rename from test-helpers/src/startFixture.ts
rename to test-helpers/src/startFixture/webpack.ts
index 2af5a06de..bcb645af4 100644
--- a/test-helpers/src/startFixture.ts
+++ b/test-helpers/src/startFixture/webpack.ts
@@ -1,12 +1,12 @@
import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
import WDS from 'webpack-dev-server';
import webpack, { Configuration } from 'webpack';
-import portfinder from 'portfinder';
import webpackMerge from 'webpack-merge';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { stylesheetName } from './getStylesheet';
+import { stylesheetName } from '../getStylesheet';
+import { TestServer } from './types';
export const getTestNodes = (fixture: string) =>
require(`@fixtures/${fixture}/test-nodes.json`);
@@ -52,43 +52,24 @@ const defaultWebpackConfig: Configuration = {
],
};
-type StyleType = 'browser' | 'mini-css-extract' | 'style-loader';
-
-export interface TestServer {
- type: StyleType;
- url: string;
- close: () => Promise;
-}
-
-export interface FixtureOptions {
- type?: StyleType;
+export interface WebpackFixtureOptions {
+ type: 'browser' | 'mini-css-extract' | 'style-loader';
hot?: boolean;
mode?: 'development' | 'production';
- basePort?: number;
+ port: number;
logLevel?: Configuration['stats'];
}
-export const startFixture = (
+export const startWebpackFixture = (
fixtureName: string,
{
- type = 'mini-css-extract',
+ type,
hot = false,
mode = 'development',
- basePort,
+ port,
logLevel = 'errors-only',
- }: FixtureOptions = {},
+ }: WebpackFixtureOptions,
): Promise =>
new Promise(async (resolve) => {
- console.log(
- [
- `Starting ${fixtureName} fixture`,
- ...Object.entries({
- type,
- hot,
- mode,
- }).map(([key, value]) => `- ${key}: ${value}`),
- ].join('\n'),
- );
-
const fixtureEntry = require.resolve(`@fixtures/${fixtureName}`);
const config = webpackMerge(defaultWebpackConfig, {
entry: fixtureEntry,
@@ -110,8 +91,6 @@ export const startFixture = (
});
const compiler = webpack(config);
- const port = await portfinder.getPortPromise({ port: basePort });
-
const server = new WDS(compiler, {
hot,
stats: logLevel,
diff --git a/test-helpers/src/startFixtureCLI.ts b/test-helpers/src/startFixtureCLI.ts
index aec3334f1..a9468c97e 100644
--- a/test-helpers/src/startFixtureCLI.ts
+++ b/test-helpers/src/startFixtureCLI.ts
@@ -8,7 +8,7 @@ const {
mode,
} = parseArgs(process.argv.slice(2));
-startFixture(fixtureName, { type, hot, mode }).then((server) => {
+startFixture(fixtureName, { type, hot, mode } as any).then((server) => {
// eslint-disable-next-line no-console
console.log('Fixture running on', server.url);
});
diff --git a/tests/E2E/__snapshots__/styles.test.ts.snap b/tests/E2E/__snapshots__/styles.test.ts.snap
index 5c3a571b5..9c2939d85 100644
--- a/tests/E2E/__snapshots__/styles.test.ts.snap
+++ b/tests/E2E/__snapshots__/styles.test.ts.snap
@@ -372,6 +372,750 @@ Object {
}
`;
+exports[`Styling and specificity Themed esbuild on desktop all builds should match 1`] = `
+Object {
+ "altButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s infinite alternate g7vce91 ease-in-out",
+ "font-family" => "g7vce90",
+ "background-color" => "rgb(0, 128, 0)",
+ "color" => "rgb(255, 255, 255)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "border-radius" => "9999px",
+ "border-top-left-radius" => "9999px",
+ "border-top-right-radius" => "9999px",
+ "border-bottom-right-radius" => "9999px",
+ "border-bottom-left-radius" => "9999px",
+ },
+ "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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ "border" => "1px solid var(--colors-background-color__6cbmls1)",
+ },
+ "inlineThemeButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s infinite alternate g7vce91 ease-in-out",
+ "font-family" => "MyGlobalComicSans",
+ "background-color" => "rgb(255, 165, 0)",
+ "color" => "rgb(0, 0, 0)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "opacity" => "0.5",
+ "border-radius" => "9999px",
+ "border-top-left-radius" => "9999px",
+ "border-top-right-radius" => "9999px",
+ "border-bottom-right-radius" => "9999px",
+ "border-bottom-left-radius" => "9999px",
+ "outline" => "5px solid red",
+ "outline-color" => "rgb(255, 0, 0)",
+ "outline-style" => "solid",
+ "outline-width" => "5px",
+ },
+ "inlineThemeContainer": Map {
+ "animation" => "3s infinite alternate globalSlide ease-in-out",
+ "display" => "flex",
+ "flex-direction" => "column",
+ "gap" => "var(--space-2__6cbmls4)",
+ "padding" => "var(--space-3__6cbmls5)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ "border" => "1px solid var(--colors-background-color__6cbmls1)",
+ },
+ "nestedRootButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s infinite alternate g7vce91 ease-in-out",
+ "font-family" => "MyGlobalComicSans",
+ "background-color" => "rgb(0, 0, 255)",
+ "color" => "rgb(255, 255, 255)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "border-radius" => "9999px",
+ "border-top-left-radius" => "9999px",
+ "border-top-right-radius" => "9999px",
+ "border-bottom-right-radius" => "9999px",
+ "border-bottom-left-radius" => "9999px",
+ "outline" => "5px solid red",
+ "outline-color" => "rgb(255, 0, 0)",
+ "outline-style" => "solid",
+ "outline-width" => "5px",
+ },
+ "nestedRootContainer": Map {
+ "animation" => "3s infinite alternate globalSlide ease-in-out",
+ "display" => "flex",
+ "flex-direction" => "column",
+ "gap" => "var(--space-2__6cbmls4)",
+ "padding" => "var(--space-3__6cbmls5)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ "border" => "1px solid var(--colors-background-color__6cbmls1)",
+ },
+ "responsiveThemeButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s infinite alternate g7vce91 ease-in-out",
+ "font-family" => "MyGlobalComicSans",
+ "background-color" => "rgb(128, 0, 128)",
+ "color" => "rgb(255, 192, 203)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "border-radius" => "9999px",
+ "border-top-left-radius" => "9999px",
+ "border-top-right-radius" => "9999px",
+ "border-bottom-right-radius" => "9999px",
+ "border-bottom-left-radius" => "9999px",
+ "outline" => "5px solid red",
+ "outline-color" => "rgb(255, 0, 0)",
+ "outline-style" => "solid",
+ "outline-width" => "5px",
+ },
+ "responsiveThemeContainer": Map {
+ "animation" => "3s infinite alternate globalSlide ease-in-out",
+ "display" => "flex",
+ "flex-direction" => "column",
+ "gap" => "var(--space-2__6cbmls4)",
+ "padding" => "var(--space-3__6cbmls5)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ "border" => "1px solid var(--colors-background-color__6cbmls1)",
+ },
+ "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",
+ "background-color" => "rgb(0, 0, 255)",
+ "color" => "rgb(255, 255, 255)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "border-radius" => "9999px",
+ "border-top-left-radius" => "9999px",
+ "border-top-right-radius" => "9999px",
+ "border-bottom-right-radius" => "9999px",
+ "border-bottom-left-radius" => "9999px",
+ },
+ "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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ "border" => "1px solid var(--colors-background-color__6cbmls1)",
+ },
+}
+`;
+
+exports[`Styling and specificity Themed esbuild on mobile all builds should match 1`] = `
+Object {
+ "altButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s infinite alternate g7vce91 ease-in-out",
+ "font-family" => "g7vce90",
+ "background-color" => "rgb(0, 128, 0)",
+ "color" => "rgb(255, 255, 255)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ },
+ "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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ },
+ "inlineThemeButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s infinite alternate g7vce91 ease-in-out",
+ "font-family" => "MyGlobalComicSans",
+ "background-color" => "rgb(255, 165, 0)",
+ "color" => "rgb(0, 0, 0)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "opacity" => "0.5",
+ "outline" => "5px solid red",
+ "outline-color" => "rgb(255, 0, 0)",
+ "outline-style" => "solid",
+ "outline-width" => "5px",
+ },
+ "inlineThemeContainer": Map {
+ "animation" => "3s infinite alternate globalSlide ease-in-out",
+ "display" => "flex",
+ "flex-direction" => "column",
+ "gap" => "var(--space-2__6cbmls4)",
+ "padding" => "var(--space-3__6cbmls5)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ },
+ "nestedRootButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s infinite alternate g7vce91 ease-in-out",
+ "font-family" => "MyGlobalComicSans",
+ "background-color" => "rgb(0, 0, 255)",
+ "color" => "rgb(255, 255, 255)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "outline" => "5px solid red",
+ "outline-color" => "rgb(255, 0, 0)",
+ "outline-style" => "solid",
+ "outline-width" => "5px",
+ },
+ "nestedRootContainer": Map {
+ "animation" => "3s infinite alternate globalSlide ease-in-out",
+ "display" => "flex",
+ "flex-direction" => "column",
+ "gap" => "var(--space-2__6cbmls4)",
+ "padding" => "var(--space-3__6cbmls5)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ },
+ "responsiveThemeButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s infinite alternate g7vce91 ease-in-out",
+ "font-family" => "MyGlobalComicSans",
+ "background-color" => "rgb(255, 192, 203)",
+ "color" => "rgb(128, 0, 128)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "outline" => "5px solid red",
+ "outline-color" => "rgb(255, 0, 0)",
+ "outline-style" => "solid",
+ "outline-width" => "5px",
+ },
+ "responsiveThemeContainer": Map {
+ "animation" => "3s infinite alternate globalSlide ease-in-out",
+ "display" => "flex",
+ "flex-direction" => "column",
+ "gap" => "var(--space-2__6cbmls4)",
+ "padding" => "var(--space-3__6cbmls5)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ },
+ "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",
+ "background-color" => "rgb(0, 0, 255)",
+ "color" => "rgb(255, 255, 255)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ },
+ "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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ },
+}
+`;
+
+exports[`Styling and specificity Themed esbuild-runtime on desktop all builds should match 1`] = `
+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",
+ "background-color" => "rgb(0, 128, 0)",
+ "color" => "rgb(255, 255, 255)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "border-radius" => "9999px",
+ "border-top-left-radius" => "9999px",
+ "border-top-right-radius" => "9999px",
+ "border-bottom-right-radius" => "9999px",
+ "border-bottom-left-radius" => "9999px",
+ },
+ "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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ "border" => "1px solid var(--colors-background-color__6cbmls1)",
+ },
+ "inlineThemeButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91",
+ "font-family" => "MyGlobalComicSans",
+ "background-color" => "rgb(255, 165, 0)",
+ "color" => "rgb(0, 0, 0)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "opacity" => "0.5",
+ "border-radius" => "9999px",
+ "border-top-left-radius" => "9999px",
+ "border-top-right-radius" => "9999px",
+ "border-bottom-right-radius" => "9999px",
+ "border-bottom-left-radius" => "9999px",
+ "outline" => "red solid 5px",
+ "outline-color" => "rgb(255, 0, 0)",
+ "outline-style" => "solid",
+ "outline-width" => "5px",
+ },
+ "inlineThemeContainer": 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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ "border" => "1px solid var(--colors-background-color__6cbmls1)",
+ },
+ "nestedRootButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91",
+ "font-family" => "MyGlobalComicSans",
+ "background-color" => "rgb(0, 0, 255)",
+ "color" => "rgb(255, 255, 255)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "border-radius" => "9999px",
+ "border-top-left-radius" => "9999px",
+ "border-top-right-radius" => "9999px",
+ "border-bottom-right-radius" => "9999px",
+ "border-bottom-left-radius" => "9999px",
+ "outline" => "red solid 5px",
+ "outline-color" => "rgb(255, 0, 0)",
+ "outline-style" => "solid",
+ "outline-width" => "5px",
+ },
+ "nestedRootContainer": 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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ "border" => "1px solid var(--colors-background-color__6cbmls1)",
+ },
+ "responsiveThemeButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91",
+ "font-family" => "MyGlobalComicSans",
+ "background-color" => "rgb(128, 0, 128)",
+ "color" => "rgb(255, 192, 203)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "border-radius" => "9999px",
+ "border-top-left-radius" => "9999px",
+ "border-top-right-radius" => "9999px",
+ "border-bottom-right-radius" => "9999px",
+ "border-bottom-left-radius" => "9999px",
+ "outline" => "red solid 5px",
+ "outline-color" => "rgb(255, 0, 0)",
+ "outline-style" => "solid",
+ "outline-width" => "5px",
+ },
+ "responsiveThemeContainer": 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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ "border" => "1px solid var(--colors-background-color__6cbmls1)",
+ },
+ "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",
+ "background-color" => "rgb(0, 0, 255)",
+ "color" => "rgb(255, 255, 255)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "border-radius" => "9999px",
+ "border-top-left-radius" => "9999px",
+ "border-top-right-radius" => "9999px",
+ "border-bottom-right-radius" => "9999px",
+ "border-bottom-left-radius" => "9999px",
+ },
+ "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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ "border" => "1px solid var(--colors-background-color__6cbmls1)",
+ },
+}
+`;
+
+exports[`Styling and specificity Themed esbuild-runtime on mobile all builds should match 1`] = `
+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",
+ "background-color" => "rgb(0, 128, 0)",
+ "color" => "rgb(255, 255, 255)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ },
+ "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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ },
+ "inlineThemeButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91",
+ "font-family" => "MyGlobalComicSans",
+ "background-color" => "rgb(255, 165, 0)",
+ "color" => "rgb(0, 0, 0)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "opacity" => "0.5",
+ "outline" => "red solid 5px",
+ "outline-color" => "rgb(255, 0, 0)",
+ "outline-style" => "solid",
+ "outline-width" => "5px",
+ },
+ "inlineThemeContainer": 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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ },
+ "nestedRootButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91",
+ "font-family" => "MyGlobalComicSans",
+ "background-color" => "rgb(0, 0, 255)",
+ "color" => "rgb(255, 255, 255)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "outline" => "red solid 5px",
+ "outline-color" => "rgb(255, 0, 0)",
+ "outline-style" => "solid",
+ "outline-width" => "5px",
+ },
+ "nestedRootContainer": 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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ },
+ "responsiveThemeButton": Map {
+ "box-shadow" => "rgb(255, 0, 0) 0px 0px 5px 0px",
+ "animation" => "3s ease-in-out 0s infinite alternate none running g7vce91",
+ "font-family" => "MyGlobalComicSans",
+ "background-color" => "rgb(255, 192, 203)",
+ "color" => "rgb(128, 0, 128)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ "outline" => "red solid 5px",
+ "outline-color" => "rgb(255, 0, 0)",
+ "outline-style" => "solid",
+ "outline-width" => "5px",
+ },
+ "responsiveThemeContainer": 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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ },
+ "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",
+ "background-color" => "rgb(0, 0, 255)",
+ "color" => "rgb(255, 255, 255)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "g7vce91",
+ },
+ "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)",
+ "animation-duration" => "3s",
+ "animation-timing-function" => "ease-in-out",
+ "animation-delay" => "0s",
+ "animation-iteration-count" => "infinite",
+ "animation-direction" => "alternate",
+ "animation-fill-mode" => "none",
+ "animation-play-state" => "running",
+ "animation-name" => "globalSlide",
+ },
+}
+`;
+
exports[`Styling and specificity Themed mini-css-extract on desktop all builds should match 1`] = `
Object {
"altButton": Map {
diff --git a/tests/E2E/__snapshots__/stylesheets.test.ts.snap b/tests/E2E/__snapshots__/stylesheets.test.ts.snap
index db17191c4..ee91ea803 100644
--- a/tests/E2E/__snapshots__/stylesheets.test.ts.snap
+++ b/tests/E2E/__snapshots__/stylesheets.test.ts.snap
@@ -1,6 +1,104 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Stylesheet themed should create valid stylesheet 1`] = `
+exports[`Stylesheet themed - esbuild should create valid stylesheet 1`] = `
+"/* vanilla-extract-css-ns:src/shared.css.ts.vanilla.css?source=Ll85azJ3YXIwIHsKICBib3gtc2hhZG93OiAwIDAgNXB4IHJlZDsKfQpib2R5IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBza3libHVlOwp9 */
+._9k2war0 {
+ box-shadow: 0 0 5px red;
+}
+body {
+ background-color: skyblue;
+}
+
+/* vanilla-extract-css-ns:src/styles.css.ts.vanilla.css?source=QGZvbnQtZmFjZSB7CiAgc3JjOiBsb2NhbCgiSW1wYWN0Iik7CiAgZm9udC1mYW1pbHk6ICJnN3ZjZTkwIjsKfQpAZm9udC1mYWNlIHsKICBzcmM6IGxvY2FsKCJDb21pYyBTYW5zIE1TIik7CiAgZm9udC1mYW1pbHk6IE15R2xvYmFsQ29taWNTYW5zOwp9CkBrZXlmcmFtZXMgZzd2Y2U5MSB7CiAgMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC00cHgpOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSg0cHgpOwogIH0KfQpAa2V5ZnJhbWVzIGdsb2JhbFNsaWRlIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTRweCk7CiAgfQogIDEwMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDRweCk7CiAgfQp9Ci5nN3ZjZTkyIHsKICBhbmltYXRpb246IDNzIGluZmluaXRlIGFsdGVybmF0ZSBnbG9iYWxTbGlkZSBlYXNlLWluLW91dDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgZ2FwOiB2YXIoLS1zcGFjZS0yX182Y2JtbHM0KTsKICBwYWRkaW5nOiB2YXIoLS1zcGFjZS0zX182Y2JtbHM1KTsKfQouZzd2Y2U5MyB7CiAgYW5pbWF0aW9uOiAzcyBpbmZpbml0ZSBhbHRlcm5hdGUgZzd2Y2U5MSBlYXNlLWluLW91dDsKICBmb250LWZhbWlseTogImc3dmNlOTAiOwogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1iYWNrZ3JvdW5kLWNvbG9yX182Y2JtbHMxLCAiVEhJUyBGQUxMQkFDSyBWQUxVRSBTSE9VTEQgTkVWRVIgQkUgVVNFRCIpOwogIGNvbG9yOiB2YXIoLS1jb2xvcnMtdGV4dF9fNmNibWxzMik7Cn0KLl82Y2JtbHM2IC5fNmNibWxzMCAuZzd2Y2U5MiAuZzd2Y2U5MyB7CiAgZm9udC1mYW1pbHk6IE15R2xvYmFsQ29taWNTYW5zOwogIG91dGxpbmU6IDVweCBzb2xpZCByZWQ7Cn0KLnN0eWxlc18xXC8yX19nN3ZjZTk2IHsKICBvcGFjaXR5OiB2YXIoLS1nN3ZjZTk0LCAwLjUpOwp9Ci5zdHlsZXNfMVwvNF9fZzd2Y2U5NyB7CiAgb3BhY2l0eTogdmFyKC0tZzd2Y2U5NCwgdmFyKC0tZzd2Y2U5NSwgMC4yNSkpOwp9CkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNTAwcHgpIHsKICAuZzd2Y2U5MiB7CiAgICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1jb2xvcnMtYmFja2dyb3VuZC1jb2xvcl9fNmNibWxzMSk7CiAgfQogIC5nN3ZjZTkzIHsKICAgIGJvcmRlci1yYWRpdXM6IDk5OTlweDsKICB9Cn0= */
+@font-face {
+ src: local(\\"Impact\\");
+ font-family: \\"g7vce90\\";
+}
+@font-face {
+ src: local(\\"Comic Sans MS\\");
+ font-family: MyGlobalComicSans;
+}
+@keyframes g7vce91 {
+ 0% {
+ transform: translateY(-4px);
+ }
+ 100% {
+ transform: translateY(4px);
+ }
+}
+@keyframes globalSlide {
+ 0% {
+ transform: translateY(-4px);
+ }
+ 100% {
+ transform: translateY(4px);
+ }
+}
+.g7vce92 {
+ animation: 3s infinite alternate globalSlide ease-in-out;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2__6cbmls4);
+ padding: var(--space-3__6cbmls5);
+}
+.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);
+}
+._6cbmls6 ._6cbmls0 .g7vce92 .g7vce93 {
+ font-family: MyGlobalComicSans;
+ outline: 5px solid red;
+}
+.styles_1\\\\/2__g7vce96 {
+ opacity: var(--g7vce94, 0.5);
+}
+.styles_1\\\\/4__g7vce97 {
+ opacity: var(--g7vce94, var(--g7vce95, 0.25));
+}
+@media only screen and (min-width: 500px) {
+ .g7vce92 {
+ border: 1px solid var(--colors-background-color__6cbmls1);
+ }
+ .g7vce93 {
+ border-radius: 9999px;
+ }
+}
+
+/* vanilla-extract-css-ns:src/themes.css.ts.vanilla.css?source=OnJvb3QsIC5fNmNibWxzMCB7CiAgLS1jb2xvcnMtYmFja2dyb3VuZC1jb2xvcl9fNmNibWxzMTogYmx1ZTsKICAtLWNvbG9ycy10ZXh0X182Y2JtbHMyOiB3aGl0ZTsKICAtLXNwYWNlLTFfXzZjYm1sczM6IDRweDsKICAtLXNwYWNlLTJfXzZjYm1sczQ6IDhweDsKICAtLXNwYWNlLTNfXzZjYm1sczU6IDEycHg7Cn0KLl82Y2JtbHM2IHsKICAtLWNvbG9ycy1iYWNrZ3JvdW5kLWNvbG9yX182Y2JtbHMxOiBncmVlbjsKICAtLWNvbG9ycy10ZXh0X182Y2JtbHMyOiB3aGl0ZTsKICAtLXNwYWNlLTFfXzZjYm1sczM6IDhweDsKICAtLXNwYWNlLTJfXzZjYm1sczQ6IDEycHg7CiAgLS1zcGFjZS0zX182Y2JtbHM1OiAxNnB4Owp9Ci5fNmNibWxzNyB7CiAgLS1jb2xvcnMtYmFja2dyb3VuZC1jb2xvcl9fNmNibWxzMTogcGluazsKICAtLWNvbG9ycy10ZXh0X182Y2JtbHMyOiBwdXJwbGU7CiAgLS1zcGFjZS0xX182Y2JtbHMzOiA2cHg7CiAgLS1zcGFjZS0yX182Y2JtbHM0OiAxMnB4OwogIC0tc3BhY2UtM19fNmNibWxzNTogMThweDsKfQpAbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA3NjhweCkgewogIC5fNmNibWxzNyB7CiAgICAtLWNvbG9ycy1iYWNrZ3JvdW5kLWNvbG9yX182Y2JtbHMxOiBwdXJwbGU7CiAgICAtLWNvbG9ycy10ZXh0X182Y2JtbHMyOiBwaW5rOwogIH0KfQ== */
+: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;
+}
+@media screen and (min-width: 768px) {
+ ._6cbmls7 {
+ --colors-background-color__6cbmls1: purple;
+ --colors-text__6cbmls2: pink;
+ }
+}
+"
+`;
+
+exports[`Stylesheet themed - webpack should create valid stylesheet 1`] = `
":root, .themes_theme__40jr0n0 {
--colors-background-color__40jr0n1: blue;
--colors-text__40jr0n2: white;
@@ -93,7 +191,35 @@ body {
/*# sourceMappingURL=main.css.map*/"
`;
-exports[`Stylesheet unused-modules should create valid stylesheet 1`] = `
+exports[`Stylesheet unused-modules - esbuild should create valid stylesheet 1`] = `
+"/* vanilla-extract-css-ns: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 {
+ box-sizing: border-box;
+}
+
+/* vanilla-extract-css-ns:src/shared/shared.css.ts.vanilla.css?source=Ym9keSB7CiAgYm9yZGVyOiA1cHggc29saWQgYmxhY2s7Cn0KLmRobW5lbDAgewogIGRpc3BsYXk6IGZsZXg7Cn0= */
+body {
+ border: 5px solid black;
+}
+.dhmnel0 {
+ display: flex;
+}
+
+/* vanilla-extract-css-ns:src/used/used.css.ts.vanilla.css?source=Ll8xZnVvc2x3MCB7CiAgaGVpZ2h0OiAxMDBweDsKICB3aWR0aDogMTAwcHg7CiAgYmFja2dyb3VuZDogZ3JlZW47Cn0= */
+._1fuoslw0 {
+ height: 100px;
+ width: 100px;
+ background: green;
+}
+"
+`;
+
+exports[`Stylesheet unused-modules - webpack should create valid stylesheet 1`] = `
"body {
background-color: lavender;
}
diff --git a/tests/E2E/styles.test.ts b/tests/E2E/styles.test.ts
index 231fc3a6c..491883d3b 100644
--- a/tests/E2E/styles.test.ts
+++ b/tests/E2E/styles.test.ts
@@ -6,7 +6,13 @@ import {
} from 'test-helpers';
import { Viewport } from 'puppeteer';
-const compileTypes = ['browser', 'mini-css-extract', 'style-loader'] as const;
+const compileTypes = [
+ 'browser',
+ 'mini-css-extract',
+ 'style-loader',
+ 'esbuild',
+ 'esbuild-runtime',
+] as const;
async function getPageStyles(
url: string,
diff --git a/tests/E2E/stylesheets.test.ts b/tests/E2E/stylesheets.test.ts
index c409fcac3..4ee6232dd 100644
--- a/tests/E2E/stylesheets.test.ts
+++ b/tests/E2E/stylesheets.test.ts
@@ -3,7 +3,7 @@ import { getStylesheet, startFixture, TestServer } from 'test-helpers';
const fixtures = ['unused-modules', 'themed'];
describe('Stylesheet', () => {
- describe.each(fixtures)('%s', (fixture) => {
+ describe.each(fixtures)('%s - webpack', (fixture) => {
let server: TestServer;
beforeAll(async () => {
@@ -22,4 +22,24 @@ describe('Stylesheet', () => {
await server.close();
});
});
+
+ describe.each(fixtures)('%s - esbuild', (fixture) => {
+ let server: TestServer;
+
+ beforeAll(async () => {
+ server = await startFixture(fixture, {
+ type: 'esbuild',
+ mode: 'production',
+ basePort: 13000,
+ });
+ });
+
+ it('should create valid stylesheet', async () => {
+ expect(await getStylesheet(server.url, 'index.css')).toMatchSnapshot();
+ });
+
+ afterAll(async () => {
+ await server.close();
+ });
+ });
});
diff --git a/yarn.lock b/yarn.lock
index 28a8e9e52..548ba70db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2697,6 +2697,23 @@ __metadata:
languageName: unknown
linkType: soft
+"@vanilla-extract/esbuild-plugin@workspace:packages/esbuild-plugin":
+ version: 0.0.0-use.local
+ resolution: "@vanilla-extract/esbuild-plugin@workspace:packages/esbuild-plugin"
+ dependencies:
+ "@types/dedent": ^0.7.0
+ "@vanilla-extract/css": ^0.1.0
+ chalk: ^4.1.0
+ dedent: ^0.7.0
+ esbuild: ^0.11.1
+ eval: ^0.1.6
+ javascript-stringify: ^2.0.1
+ lodash: ^4.17.21
+ peerDependencies:
+ esbuild: ">=0.11.1"
+ languageName: unknown
+ linkType: soft
+
"@vanilla-extract/webpack-plugin@workspace:packages/webpack-plugin":
version: 0.0.0-use.local
resolution: "@vanilla-extract/webpack-plugin@workspace:packages/webpack-plugin"
@@ -5054,6 +5071,15 @@ __metadata:
languageName: node
linkType: hard
+"esbuild@npm:^0.11.1":
+ version: 0.11.1
+ resolution: "esbuild@npm:0.11.1"
+ bin:
+ esbuild: bin/esbuild
+ checksum: 76d8993d3e3c6712ec4106bd5d82222bc22a51e17d0fcc1a1c4ca2253ebf6f3bd26c7f70ff2e4baaa03f41a1ff0423966db3180b401dd8330514ac6d2da1f919
+ languageName: node
+ linkType: hard
+
"escalade@npm:^3.1.1":
version: 3.1.1
resolution: "escalade@npm:3.1.1"