@vanilla-extract/css - npm Package Compare versions

Comparing version 0.0.0-dts-bundle-202283041239 to 0.0.0-experimental-macros-20236175227

adapter/dist/vanilla-extract-css-adapter.browser.cjs.js

@@ -14,3 +14,2 @@ 'use strict';
 var adapterStack = [mockAdapter];
-
 var currentAdapter = () => {
@@ -20,6 +19,4 @@ if (adapterStack.length < 1) {
   }
-
   return adapterStack[adapterStack.length - 1];
 };
-
 var hasConfiguredAdapter = false;
@@ -32,2 +29,5 @@ var setAdapterIfNotSet = newAdapter => {
 var setAdapter = newAdapter => {
+  if (!newAdapter) {
+    throw new Error('No adapter provided when calling "setAdapter"');
+  }
   hasConfiguredAdapter = true;
@@ -51,2 +51,9 @@ adapterStack.push(newAdapter);
 };
+var onBeginFileScope = function onBeginFileScope() {
+  var _currentAdapter$onBeg, _currentAdapter;
+  for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
+    props[_key] = arguments[_key];
+  }
+  return (_currentAdapter$onBeg = (_currentAdapter = currentAdapter()).onBeginFileScope) === null || _currentAdapter$onBeg === void 0 ? void 0 : _currentAdapter$onBeg.call(_currentAdapter, ...props);
+};
 var onEndFileScope = function onEndFileScope() {
@@ -56,8 +63,8 @@ return currentAdapter().onEndFileScope(...arguments);
 var getIdentOption = function getIdentOption() {
-  var adapter = currentAdapter(); // Backwards compatibility with old versions of the integration package
+  var adapter = currentAdapter();
 
+  // Backwards compatibility with old versions of the integration package
   if (!('getIdentOption' in adapter)) {
     return process.env.NODE_ENV === 'production' ? 'short' : 'debug';
   }
-
   return adapter.getIdentOption(...arguments);
@@ -70,2 +77,3 @@ };
 exports.mockAdapter = mockAdapter;
+exports.onBeginFileScope = onBeginFileScope;
 exports.onEndFileScope = onEndFileScope;
@@ -72,0 +80,0 @@ exports.registerClassName = registerClassName;

adapter/dist/vanilla-extract-css-adapter.browser.esm.js

@@ -10,3 +10,2 @@ var mockAdapter = {
 var adapterStack = [mockAdapter];
-
 var currentAdapter = () => {
@@ -16,6 +15,4 @@ if (adapterStack.length < 1) {
   }
-
   return adapterStack[adapterStack.length - 1];
 };
-
 var hasConfiguredAdapter = false;
@@ -28,2 +25,5 @@ var setAdapterIfNotSet = newAdapter => {
 var setAdapter = newAdapter => {
+  if (!newAdapter) {
+    throw new Error('No adapter provided when calling "setAdapter"');
+  }
   hasConfiguredAdapter = true;
@@ -47,2 +47,9 @@ adapterStack.push(newAdapter);
 };
+var onBeginFileScope = function onBeginFileScope() {
+  var _currentAdapter$onBeg, _currentAdapter;
+  for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
+    props[_key] = arguments[_key];
+  }
+  return (_currentAdapter$onBeg = (_currentAdapter = currentAdapter()).onBeginFileScope) === null || _currentAdapter$onBeg === void 0 ? void 0 : _currentAdapter$onBeg.call(_currentAdapter, ...props);
+};
 var onEndFileScope = function onEndFileScope() {
@@ -52,11 +59,11 @@ return currentAdapter().onEndFileScope(...arguments);
 var getIdentOption = function getIdentOption() {
-  var adapter = currentAdapter(); // Backwards compatibility with old versions of the integration package
+  var adapter = currentAdapter();
 
+  // Backwards compatibility with old versions of the integration package
   if (!('getIdentOption' in adapter)) {
     return process.env.NODE_ENV === 'production' ? 'short' : 'debug';
   }
-
   return adapter.getIdentOption(...arguments);
 };
 
-export { appendCss, getIdentOption, markCompositionUsed, mockAdapter, onEndFileScope, registerClassName, registerComposition, removeAdapter, setAdapter, setAdapterIfNotSet };
+export { appendCss, getIdentOption, markCompositionUsed, mockAdapter, onBeginFileScope, onEndFileScope, registerClassName, registerComposition, removeAdapter, setAdapter, setAdapterIfNotSet };

adapter/dist/vanilla-extract-css-adapter.cjs.d.ts

 import { AtRule, Properties } from 'csstype';
 
-declare type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number})`;
+type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number})`;
 
@@ -102,3 +102,3 @@ declare const simplePseudoMap: {
 };
-declare type SimplePseudos = keyof typeof simplePseudoMap;
+type SimplePseudos = keyof typeof simplePseudoMap;
 
@@ -110,4 +110,4 @@ interface ContainerProperties {
 }
-declare type CSSTypeProperties = Properties<number | (string & {})> & ContainerProperties;
-declare type CSSProperties = {
+type CSSTypeProperties = Properties<number | (string & {})> & ContainerProperties;
+type CSSProperties = {
     [Property in keyof CSSTypeProperties]: CSSTypeProperties[Property] | CSSVarFunction | Array<CSSVarFunction | CSSTypeProperties[Property]>;
@@ -118,3 +118,3 @@ };
 }
-declare type CSSPropertiesWithVars = CSSProperties & {
+type CSSPropertiesWithVars = CSSProperties & {
     vars?: {
@@ -124,22 +124,18 @@ [key: string]: string;
 };
-declare type PseudoProperties = {
+type PseudoProperties = {
     [key in SimplePseudos]?: CSSPropertiesWithVars;
 };
-declare type CSSPropertiesAndPseudos = CSSPropertiesWithVars & PseudoProperties;
-interface MediaQueries<StyleType> {
-    '@media'?: {
-        [query: string]: StyleType;
+type CSSPropertiesAndPseudos = CSSPropertiesWithVars & PseudoProperties;
+type Query<Key extends string, StyleType> = {
+    [key in Key]?: {
+        [query: string]: Omit<StyleType, Key>;
     };
+};
+type MediaQueries<StyleType> = Query<'@media', StyleType>;
+type FeatureQueries<StyleType> = Query<'@supports', StyleType>;
+type ContainerQueries<StyleType> = Query<'@container', StyleType>;
+type Layers<StyleType> = Query<'@layer', StyleType>;
+interface AllQueries<StyleType> extends MediaQueries<StyleType & AllQueries<StyleType>>, FeatureQueries<StyleType & AllQueries<StyleType>>, ContainerQueries<StyleType & AllQueries<StyleType>>, Layers<StyleType & AllQueries<StyleType>> {
 }
-interface FeatureQueries<StyleType> {
-    '@supports'?: {
-        [query: string]: StyleType;
-    };
-}
-interface ContainerQueries<StyleType> {
-    '@container'?: {
-        [query: string]: StyleType;
-    };
-}
-declare type WithQueries<StyleType> = MediaQueries<StyleType & FeatureQueries<StyleType & ContainerQueries<StyleType>> & ContainerQueries<StyleType & FeatureQueries<StyleType>>> & FeatureQueries<StyleType & MediaQueries<StyleType & ContainerQueries<StyleType>> & ContainerQueries<StyleType & MediaQueries<StyleType>>> & ContainerQueries<StyleType & MediaQueries<StyleType & FeatureQueries<StyleType>> & FeatureQueries<StyleType & MediaQueries<StyleType>>>;
+type WithQueries<StyleType> = StyleType & AllQueries<StyleType>;
 interface SelectorMap {
@@ -151,6 +147,6 @@ [selector: string]: CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
 }
-declare type StyleRule = StyleWithSelectors & WithQueries<StyleWithSelectors>;
-declare type GlobalStyleRule = CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
-declare type GlobalFontFaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>;
-declare type CSSStyleBlock = {
+type StyleRule = StyleWithSelectors & WithQueries<StyleWithSelectors>;
+type GlobalStyleRule = CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
+type GlobalFontFaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>;
+type CSSStyleBlock = {
     type: 'local';
@@ -160,7 +156,7 @@ selector: string;
 };
-declare type CSSFontFaceBlock = {
+type CSSFontFaceBlock = {
     type: 'fontFace';
     rule: GlobalFontFaceRule;
 };
-declare type CSSKeyframesBlock = {
+type CSSKeyframesBlock = {
     type: 'keyframes';
@@ -170,3 +166,3 @@ name: string;
 };
-declare type CSSSelectorBlock = {
+type CSSSelectorBlock = {
     type: 'selector' | 'global';
@@ -176,4 +172,8 @@ selector: string;
 };
-declare type CSS = CSSStyleBlock | CSSFontFaceBlock | CSSKeyframesBlock | CSSSelectorBlock;
-declare type FileScope = {
+type CSSLayerDeclaration = {
+    type: 'layer';
+    name: string;
+};
+type CSS = CSSStyleBlock | CSSFontFaceBlock | CSSKeyframesBlock | CSSSelectorBlock | CSSLayerDeclaration;
+type FileScope = {
     packageName?: string;
@@ -186,8 +186,9 @@ filePath: string;
 }
-declare type IdentOption = 'short' | 'debug';
+type IdentOption = 'short' | 'debug';
 interface Adapter {
     appendCss: (css: CSS, fileScope: FileScope) => void;
-    registerClassName: (className: string) => void;
-    registerComposition: (composition: Composition) => void;
+    registerClassName: (className: string, fileScope: FileScope) => void;
+    registerComposition: (composition: Composition, fileScope: FileScope) => void;
     markCompositionUsed: (identifier: string) => void;
+    onBeginFileScope?: (fileScope: FileScope) => void;
     onEndFileScope: (fileScope: FileScope) => void;
@@ -205,5 +206,6 @@ getIdentOption: () => IdentOption;
 declare const markCompositionUsed: Adapter['markCompositionUsed'];
+declare const onBeginFileScope: NonNullable<Adapter['onBeginFileScope']>;
 declare const onEndFileScope: Adapter['onEndFileScope'];
 declare const getIdentOption: Adapter['getIdentOption'];
 
-export { appendCss, getIdentOption, markCompositionUsed, mockAdapter, onEndFileScope, registerClassName, registerComposition, removeAdapter, setAdapter, setAdapterIfNotSet };
+export { appendCss, getIdentOption, markCompositionUsed, mockAdapter, onBeginFileScope, onEndFileScope, registerClassName, registerComposition, removeAdapter, setAdapter, setAdapterIfNotSet };

adapter/dist/vanilla-extract-css-adapter.cjs.dev.js

@@ -14,3 +14,2 @@ 'use strict';
 var adapterStack = [mockAdapter];
-
 var currentAdapter = () => {
@@ -20,6 +19,4 @@ if (adapterStack.length < 1) {
   }
-
   return adapterStack[adapterStack.length - 1];
 };
-
 var hasConfiguredAdapter = false;
@@ -32,2 +29,5 @@ var setAdapterIfNotSet = newAdapter => {
 var setAdapter = newAdapter => {
+  if (!newAdapter) {
+    throw new Error('No adapter provided when calling "setAdapter"');
+  }
   hasConfiguredAdapter = true;
@@ -51,2 +51,9 @@ adapterStack.push(newAdapter);
 };
+var onBeginFileScope = function onBeginFileScope() {
+  var _currentAdapter$onBeg, _currentAdapter;
+  for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
+    props[_key] = arguments[_key];
+  }
+  return (_currentAdapter$onBeg = (_currentAdapter = currentAdapter()).onBeginFileScope) === null || _currentAdapter$onBeg === void 0 ? void 0 : _currentAdapter$onBeg.call(_currentAdapter, ...props);
+};
 var onEndFileScope = function onEndFileScope() {
@@ -56,8 +63,8 @@ return currentAdapter().onEndFileScope(...arguments);
 var getIdentOption = function getIdentOption() {
-  var adapter = currentAdapter(); // Backwards compatibility with old versions of the integration package
+  var adapter = currentAdapter();
 
+  // Backwards compatibility with old versions of the integration package
   if (!('getIdentOption' in adapter)) {
     return process.env.NODE_ENV === 'production' ? 'short' : 'debug';
   }
-
   return adapter.getIdentOption(...arguments);
@@ -70,2 +77,3 @@ };
 exports.mockAdapter = mockAdapter;
+exports.onBeginFileScope = onBeginFileScope;
 exports.onEndFileScope = onEndFileScope;
@@ -72,0 +80,0 @@ exports.registerClassName = registerClassName;

adapter/dist/vanilla-extract-css-adapter.cjs.prod.js

@@ -14,3 +14,2 @@ 'use strict';
 var adapterStack = [mockAdapter];
-
 var currentAdapter = () => {
@@ -20,6 +19,4 @@ if (adapterStack.length < 1) {
   }
-
   return adapterStack[adapterStack.length - 1];
 };
-
 var hasConfiguredAdapter = false;
@@ -32,2 +29,5 @@ var setAdapterIfNotSet = newAdapter => {
 var setAdapter = newAdapter => {
+  if (!newAdapter) {
+    throw new Error('No adapter provided when calling "setAdapter"');
+  }
   hasConfiguredAdapter = true;
@@ -51,2 +51,9 @@ adapterStack.push(newAdapter);
 };
+var onBeginFileScope = function onBeginFileScope() {
+  var _currentAdapter$onBeg, _currentAdapter;
+  for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
+    props[_key] = arguments[_key];
+  }
+  return (_currentAdapter$onBeg = (_currentAdapter = currentAdapter()).onBeginFileScope) === null || _currentAdapter$onBeg === void 0 ? void 0 : _currentAdapter$onBeg.call(_currentAdapter, ...props);
+};
 var onEndFileScope = function onEndFileScope() {
@@ -56,8 +63,8 @@ return currentAdapter().onEndFileScope(...arguments);
 var getIdentOption = function getIdentOption() {
-  var adapter = currentAdapter(); // Backwards compatibility with old versions of the integration package
+  var adapter = currentAdapter();
 
+  // Backwards compatibility with old versions of the integration package
   if (!('getIdentOption' in adapter)) {
     return 'short' ;
   }
-
   return adapter.getIdentOption(...arguments);
@@ -70,2 +77,3 @@ };
 exports.mockAdapter = mockAdapter;
+exports.onBeginFileScope = onBeginFileScope;
 exports.onEndFileScope = onEndFileScope;
@@ -72,0 +80,0 @@ exports.registerClassName = registerClassName;

adapter/dist/vanilla-extract-css-adapter.esm.js

@@ -10,3 +10,2 @@ var mockAdapter = {
 var adapterStack = [mockAdapter];
-
 var currentAdapter = () => {
@@ -16,6 +15,4 @@ if (adapterStack.length < 1) {
   }
-
   return adapterStack[adapterStack.length - 1];
 };
-
 var hasConfiguredAdapter = false;
@@ -28,2 +25,5 @@ var setAdapterIfNotSet = newAdapter => {
 var setAdapter = newAdapter => {
+  if (!newAdapter) {
+    throw new Error('No adapter provided when calling "setAdapter"');
+  }
   hasConfiguredAdapter = true;
@@ -47,2 +47,9 @@ adapterStack.push(newAdapter);
 };
+var onBeginFileScope = function onBeginFileScope() {
+  var _currentAdapter$onBeg, _currentAdapter;
+  for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
+    props[_key] = arguments[_key];
+  }
+  return (_currentAdapter$onBeg = (_currentAdapter = currentAdapter()).onBeginFileScope) === null || _currentAdapter$onBeg === void 0 ? void 0 : _currentAdapter$onBeg.call(_currentAdapter, ...props);
+};
 var onEndFileScope = function onEndFileScope() {
@@ -52,11 +59,11 @@ return currentAdapter().onEndFileScope(...arguments);
 var getIdentOption = function getIdentOption() {
-  var adapter = currentAdapter(); // Backwards compatibility with old versions of the integration package
+  var adapter = currentAdapter();
 
+  // Backwards compatibility with old versions of the integration package
   if (!('getIdentOption' in adapter)) {
     return process.env.NODE_ENV === 'production' ? 'short' : 'debug';
   }
-
   return adapter.getIdentOption(...arguments);
 };
 
-export { appendCss, getIdentOption, markCompositionUsed, mockAdapter, onEndFileScope, registerClassName, registerComposition, removeAdapter, setAdapter, setAdapterIfNotSet };
+export { appendCss, getIdentOption, markCompositionUsed, mockAdapter, onBeginFileScope, onEndFileScope, registerClassName, registerComposition, removeAdapter, setAdapter, setAdapterIfNotSet };

dist/vanilla-extract-css.browser.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 var injectStyles_dist_vanillaExtractCssInjectStyles = require('../injectStyles/dist/vanilla-extract-css-injectStyles.browser.cjs.js');
-var transformCss_dist_vanillaExtractCssTransformCss = require('./transformCss-931f0e0d.browser.cjs.js');
+var transformCss_dist_vanillaExtractCssTransformCss = require('./transformCss-cf6340cf.browser.cjs.js');
 var adapter_dist_vanillaExtractCssAdapter = require('../adapter/dist/vanilla-extract-css-adapter.browser.cjs.js');
@@ -15,3 +15,3 @@ var hash = require('@emotion/hash');
 var chalk = require('chalk');
-var taggedTemplateLiteral = require('./taggedTemplateLiteral-c635af00.browser.cjs.js');
+var taggedTemplateLiteral = require('./taggedTemplateLiteral-00b821ff.browser.cjs.js');
 var outdent = require('outdent');
@@ -59,3 +59,2 @@ var deepmerge = require('deepmerge');
 };
-
 {
@@ -77,3 +76,2 @@ adapter_dist_vanillaExtractCssAdapter.setAdapterIfNotSet(browserRuntimeAdapter);
   }
-
   subClass.prototype = Object.create(superClass && superClass.prototype, {
@@ -96,15 +94,10 @@ constructor: {
   };
-
   var _super = RegExp.prototype,
-      _groups = new WeakMap();
-
+    _groups = new WeakMap();
   function BabelRegExp(re, flags, groups) {
     var _this = new RegExp(re, flags);
-
     return _groups.set(_this, groups || _groups.get(re)), _setPrototypeOf(_this, BabelRegExp.prototype);
   }
-
   function buildGroups(result, re) {
     var g = _groups.get(re);
-
     return Object.keys(g).reduce(function (groups, name) {
@@ -114,3 +107,2 @@ var i = g[name];
         for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++;
-
         groups[name] = result[i[k]];
@@ -121,19 +113,20 @@ }
   }
-
   return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {
     var result = _super.exec.call(this, str);
-
-    return result && (result.groups = buildGroups(result, this)), result;
+    if (result) {
+      result.groups = buildGroups(result, this);
+      var indices = result.indices;
+      indices && (indices.groups = buildGroups(indices, this));
+    }
+    return result;
   }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) {
     if ("string" == typeof substitution) {
       var groups = _groups.get(this);
-
       return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) {
-        return "$" + groups[name];
+        var group = groups[name];
+        return "$" + (Array.isArray(group) ? group.join("$") : group);
       }));
     }
-
     if ("function" == typeof substitution) {
       var _this = this;
-
       return _super[Symbol.replace].call(this, str, function () {
@@ -144,3 +137,2 @@ var args = arguments;
     }
-
     return _super[Symbol.replace].call(this, str, substitution);
@@ -156,3 +148,2 @@ }, _wrapRegExp.apply(this, arguments);
   var parts = debugId ? [debugId.replace(/\s/g, '_')] : [];
-
   if (debugFileName) {
@@ -162,7 +153,6 @@ var {
     } = fileScope_dist_vanillaExtractCssFileScope.getFileScope();
-    var matches = filePath.match( /*#__PURE__*/_wrapRegExp(/((?:(?![\/\\])[\s\S])*)?[\/\\]?((?:(?![\/\\])[\s\S])*)\.css\.(ts|js|tsx|jsx|cjs|mjs)$/, {
+    var matches = filePath.match( /*#__PURE__*/_wrapRegExp(/([^\/\\]*)?[\/\\]?([^\/\\]*)\.css\.(ts|js|tsx|jsx|cjs|mjs)$/, {
       dir: 1,
       file: 2
     }));
-
     if (matches && matches.groups) {
@@ -176,6 +166,4 @@ var {
   }
-
   return parts.join('_');
 }
-
 function generateIdentifier(arg) {
@@ -187,5 +175,5 @@ var {
     debugId: arg
-  } : null), typeof arg === 'object' ? arg : null); // Convert ref count to base 36 for optimal hash lengths
+  } : null), typeof arg === 'object' ? arg : null);
 
-
+  // Convert ref count to base 36 for optimal hash lengths
   var refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter().toString(36);
@@ -198,3 +186,2 @@ var {
   var identifier = "".concat(fileScopeHash).concat(refCount);
-
   if (adapter_dist_vanillaExtractCssAdapter.getIdentOption() === 'debug') {
@@ -205,3 +192,2 @@ var devPrefix = getDevPrefix({
     });
-
     if (devPrefix) {
@@ -211,3 +197,2 @@ identifier = "".concat(devPrefix, "__").concat(identifier);
   }
-
   return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
@@ -217,3 +202,2 @@ }
 var normaliseObject = obj => _private.walkObject(obj, () => '');
-
 function validateContract(contract, tokens) {
@@ -227,7 +211,5 @@ var theDiff = deepObjectDiff.diff(normaliseObject(contract), normaliseObject(tokens));
 }
-
 function diffLine(value, nesting, type) {
   var whitespace = [...Array(nesting).keys()].map(() => '  ').join('');
   var line = "".concat(type ? type : ' ').concat(whitespace).concat(value);
-
   if (process.env.NODE_ENV !== 'test') {
@@ -237,3 +219,2 @@ if (type === '-') {
     }
-
     if (type === '+') {
@@ -243,20 +224,14 @@ return chalk__default["default"].green(line);
   }
-
   return line;
 }
-
 function renderDiff(orig, diff) {
   var nesting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var lines = [];
-
   if (nesting === 0) {
     lines.push(diffLine('{', 0));
   }
-
   var innerNesting = nesting + 1;
   var keys = Object.keys(diff).sort();
-
   for (var key of keys) {
     var value = diff[key];
-
     if (!(key in orig)) {
@@ -272,7 +247,5 @@ lines.push(diffLine("".concat(key, ": ...,"), innerNesting, '+'));
   }
-
   if (nesting === 0) {
     lines.push(diffLine('}', 0));
   }
-
   return lines.join('\n');
@@ -290,9 +263,8 @@ }
 }
+var createVar$ = createVar;
 function fallbackVar() {
   var finalValue = '';
-
   for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
     values[_key] = arguments[_key];
   }
-
   values.reverse().forEach(value => {
@@ -305,3 +277,2 @@ if (finalValue === '') {
       }
-
       finalValue = value.replace(/\)$/, ", ".concat(finalValue, ")"));
@@ -318,7 +289,5 @@ }
   } = validateContract(varContract, tokens);
-
   if (!valid) {
     throw new Error("Tokens don't match contract.\n".concat(diffString));
   }
-
   _private.walkObject(tokens, (value, path) => {
@@ -330,4 +299,2 @@ varSetters[_private.get(varContract, path)] = String(value);
 function createThemeContract(tokens) {
-  // TS is giving type impossibly deep error here. Ignoring for now as this shouldn't affect consumers.
-  // @ts-expect-error
   return _private.walkObject(tokens, (_value, path) => {
@@ -337,2 +304,3 @@ return createVar(path.join('-'));
 }
+var createThemeContract$ = createThemeContract;
 function createGlobalThemeContract(tokens, mapFn) {
@@ -342,3 +310,2 @@ return _private.walkObject(tokens, (value, path) => {
     var varName = typeof rawVarName === 'string' ? rawVarName.replace(/^\-\-/, '') : null;
-
     if (typeof varName !== 'string' || varName !== cssesc__default["default"](varName, {
@@ -349,6 +316,6 @@ isIdentifier: true
     }
-
     return "var(--".concat(varName, ")");
   });
 }
+var createGlobalThemeContract$ = createGlobalThemeContract;
 
@@ -366,3 +333,2 @@ function createGlobalTheme(selector, arg2, arg3) {
   }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
-
   if (shouldCreateVars) {
@@ -372,17 +338,17 @@ return themeVars;
 }
+var createGlobalTheme$ = createGlobalTheme;
 function createTheme(arg1, arg2, arg3) {
   var themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
-  adapter_dist_vanillaExtractCssAdapter.registerClassName(themeClassName);
+  adapter_dist_vanillaExtractCssAdapter.registerClassName(themeClassName, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   var vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
   return vars ? [themeClassName, vars] : themeClassName;
 }
+var createTheme$ = createTheme;
 
 var _templateObject;
-
 function composedStyle(rules, debugId) {
   var className = generateIdentifier(debugId);
-  adapter_dist_vanillaExtractCssAdapter.registerClassName(className);
+  adapter_dist_vanillaExtractCssAdapter.registerClassName(className, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   var classList = [];
   var styleRules = [];
-
   for (var rule of rules) {
@@ -395,5 +361,3 @@ if (typeof rule === 'string') {
   }
-
   var result = className;
-
   if (classList.length > 0) {
@@ -404,4 +368,3 @@ result = "".concat(className, " ").concat(transformCss_dist_vanillaExtractCssTransformCss.dudupeAndJoinClassList(classList));
       classList: result
-    });
-
+    }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
     if (styleRules.length > 0) {
@@ -413,3 +376,2 @@ // If there are styles attached to this composition then it is
   }
-
   if (styleRules.length > 0) {
@@ -420,3 +382,2 @@ var _rule = deepmerge__default["default"].all(styleRules, {
     });
-
     adapter_dist_vanillaExtractCssAdapter.appendCss({
@@ -428,6 +389,4 @@ type: 'local',
   }
-
   return result;
 }
-
 function style(rule, debugId) {
@@ -437,5 +396,4 @@ if (Array.isArray(rule)) {
   }
-
   var className = generateIdentifier(debugId);
-  adapter_dist_vanillaExtractCssAdapter.registerClassName(className);
+  adapter_dist_vanillaExtractCssAdapter.registerClassName(className, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   adapter_dist_vanillaExtractCssAdapter.appendCss({
@@ -448,13 +406,12 @@ type: 'local',
 }
+var style$ = style;
+
 /**
  * @deprecated The same functionality is now provided by the 'style' function when you pass it an array
  */
-
 function composeStyles() {
   var compose = fileScope_dist_vanillaExtractCssFileScope.hasFileScope() ? composedStyle : transformCss_dist_vanillaExtractCssTransformCss.dudupeAndJoinClassList;
-
   for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
     classNames[_key] = arguments[_key];
   }
-
   return compose(classNames);
@@ -469,2 +426,3 @@ }
 }
+var globalStyle$ = globalStyle;
 function fontFace(rule, debugId) {
@@ -474,7 +432,5 @@ var fontFamily = "\"".concat(cssesc__default["default"](generateIdentifier(debugId), {
   }), "\"");
-
   if ('fontFamily' in rule) {
     throw new Error(outdent__default["default"](_templateObject || (_templateObject = taggedTemplateLiteral._taggedTemplateLiteral(["\n          This function creates and returns a hashed font-family name, so the \"fontFamily\" property should not be provided.\n  \n          If you'd like to define a globally scoped custom font, you can use the \"globalFontFace\" function instead.\n        "]))));
   }
-
   adapter_dist_vanillaExtractCssAdapter.appendCss({
@@ -488,2 +444,3 @@ type: 'fontFace',
 }
+var fontFace$ = fontFace;
 function globalFontFace(fontFamily, rule) {
@@ -497,2 +454,3 @@ adapter_dist_vanillaExtractCssAdapter.appendCss({
 }
+var globalFontFace$ = globalFontFace;
 function keyframes(rule, debugId) {
@@ -509,2 +467,3 @@ var name = cssesc__default["default"](generateIdentifier(debugId), {
 }
+var keyframes$ = keyframes;
 function globalKeyframes(name, rule) {
@@ -517,50 +476,108 @@ adapter_dist_vanillaExtractCssAdapter.appendCss({
 }
+var globalKeyframes$ = globalKeyframes;
 function styleVariants() {
   if (typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'function') {
     var _data = arguments.length <= 0 ? undefined : arguments[0];
-
     var _mapData = arguments.length <= 1 ? undefined : arguments[1];
-
     var _debugId = arguments.length <= 2 ? undefined : arguments[2];
-
     var _classMap = {};
-
     for (var _key2 in _data) {
       _classMap[_key2] = style(_mapData(_data[_key2], _key2), _debugId ? "".concat(_debugId, "_").concat(_key2) : _key2);
     }
-
     return _classMap;
   }
-
   var styleMap = arguments.length <= 0 ? undefined : arguments[0];
   var debugId = arguments.length <= 1 ? undefined : arguments[1];
   var classMap = {};
-
   for (var _key3 in styleMap) {
     classMap[_key3] = style(styleMap[_key3], debugId ? "".concat(debugId, "_").concat(_key3) : _key3);
   }
-
   return classMap;
 }
+var styleVariants$ = styleVariants;
 
+var defaultLayerOptions = {};
+var merge = (obj1, obj2) => transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, obj1), obj2);
+var getLayerArgs = function getLayerArgs() {
+  var options = defaultLayerOptions;
+  var debugId = arguments.length <= 0 ? undefined : arguments[0];
+  if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'object') {
+    options = merge(defaultLayerOptions, arguments.length <= 0 ? undefined : arguments[0]);
+    debugId = arguments.length <= 1 ? undefined : arguments[1];
+  }
+  return [options, debugId];
+};
+function layer() {
+  var [options, debugId] = getLayerArgs(...arguments);
+  var name = generateIdentifier(debugId);
+  if (options.parent) {
+    name = "".concat(options.parent, ".").concat(name);
+  }
+  adapter_dist_vanillaExtractCssAdapter.appendCss({
+    type: 'layer',
+    name
+  }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
+  return name;
+}
+var layer$ = layer;
+function globalLayer() {
+  var [options, name] = getLayerArgs(...arguments);
+  if (options.parent) {
+    name = "".concat(options.parent, ".").concat(name);
+  }
+  adapter_dist_vanillaExtractCssAdapter.appendCss({
+    type: 'layer',
+    name
+  }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
+  return name;
+}
+var globalLayer$ = globalLayer;
+
+// createContainer is used for local scoping of CSS containers
 // For now it is mostly just an alias of generateIdentifier
-
 var createContainer = debugId => generateIdentifier(debugId);
+var createContainer$ = createContainer;
 
+var extract$ = t => {
+  if (typeof t === 'function') {
+    // @ts-expect-error
+    return t();
+  }
+  return t;
+};
+
 exports.assignVars = assignVars;
 exports.composeStyles = composeStyles;
 exports.createContainer = createContainer;
+exports.createContainer$ = createContainer$;
 exports.createGlobalTheme = createGlobalTheme;
+exports.createGlobalTheme$ = createGlobalTheme$;
 exports.createGlobalThemeContract = createGlobalThemeContract;
+exports.createGlobalThemeContract$ = createGlobalThemeContract$;
 exports.createTheme = createTheme;
+exports.createTheme$ = createTheme$;
 exports.createThemeContract = createThemeContract;
+exports.createThemeContract$ = createThemeContract$;
 exports.createVar = createVar;
+exports.createVar$ = createVar$;
+exports.extract$ = extract$;
 exports.fallbackVar = fallbackVar;
 exports.fontFace = fontFace;
+exports.fontFace$ = fontFace$;
 exports.generateIdentifier = generateIdentifier;
 exports.globalFontFace = globalFontFace;
+exports.globalFontFace$ = globalFontFace$;
 exports.globalKeyframes = globalKeyframes;
+exports.globalKeyframes$ = globalKeyframes$;
+exports.globalLayer = globalLayer;
+exports.globalLayer$ = globalLayer$;
 exports.globalStyle = globalStyle;
+exports.globalStyle$ = globalStyle$;
 exports.keyframes = keyframes;
+exports.keyframes$ = keyframes$;
+exports.layer = layer;
+exports.layer$ = layer$;
 exports.style = style;
+exports.style$ = style$;
 exports.styleVariants = styleVariants;
+exports.styleVariants$ = styleVariants$;

dist/vanilla-extract-css.browser.esm.js

 import { injectStyles } from '../injectStyles/dist/vanilla-extract-css-injectStyles.browser.esm.js';
-import { t as transformCss, _ as _objectSpread2, d as dudupeAndJoinClassList } from './transformCss-a8d6e581.browser.esm.js';
+import { t as transformCss, _ as _objectSpread2, d as dudupeAndJoinClassList } from './transformCss-3a046e4b.browser.esm.js';
 import { setAdapterIfNotSet, getIdentOption, appendCss, registerClassName, registerComposition, markCompositionUsed } from '../adapter/dist/vanilla-extract-css-adapter.browser.esm.js';
@@ -10,3 +10,3 @@ import hash from '@emotion/hash';
 import chalk from 'chalk';
-import { _ as _taggedTemplateLiteral } from './taggedTemplateLiteral-2d2668f5.browser.esm.js';
+import { _ as _taggedTemplateLiteral } from './taggedTemplateLiteral-8e47dbd7.browser.esm.js';
 import outdent from 'outdent';
@@ -46,3 +46,2 @@ import deepmerge from 'deepmerge';
 };
-
 {
@@ -64,3 +63,2 @@ setAdapterIfNotSet(browserRuntimeAdapter);
   }
-
   subClass.prototype = Object.create(superClass && superClass.prototype, {
@@ -83,15 +81,10 @@ constructor: {
   };
-
   var _super = RegExp.prototype,
-      _groups = new WeakMap();
-
+    _groups = new WeakMap();
   function BabelRegExp(re, flags, groups) {
     var _this = new RegExp(re, flags);
-
     return _groups.set(_this, groups || _groups.get(re)), _setPrototypeOf(_this, BabelRegExp.prototype);
   }
-
   function buildGroups(result, re) {
     var g = _groups.get(re);
-
     return Object.keys(g).reduce(function (groups, name) {
@@ -101,3 +94,2 @@ var i = g[name];
         for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++;
-
         groups[name] = result[i[k]];
@@ -108,19 +100,20 @@ }
   }
-
   return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {
     var result = _super.exec.call(this, str);
-
-    return result && (result.groups = buildGroups(result, this)), result;
+    if (result) {
+      result.groups = buildGroups(result, this);
+      var indices = result.indices;
+      indices && (indices.groups = buildGroups(indices, this));
+    }
+    return result;
   }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) {
     if ("string" == typeof substitution) {
       var groups = _groups.get(this);
-
       return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) {
-        return "$" + groups[name];
+        var group = groups[name];
+        return "$" + (Array.isArray(group) ? group.join("$") : group);
       }));
     }
-
     if ("function" == typeof substitution) {
       var _this = this;
-
       return _super[Symbol.replace].call(this, str, function () {
@@ -131,3 +124,2 @@ var args = arguments;
     }
-
     return _super[Symbol.replace].call(this, str, substitution);
@@ -143,3 +135,2 @@ }, _wrapRegExp.apply(this, arguments);
   var parts = debugId ? [debugId.replace(/\s/g, '_')] : [];
-
   if (debugFileName) {
@@ -149,7 +140,6 @@ var {
     } = getFileScope();
-    var matches = filePath.match( /*#__PURE__*/_wrapRegExp(/((?:(?![\/\\])[\s\S])*)?[\/\\]?((?:(?![\/\\])[\s\S])*)\.css\.(ts|js|tsx|jsx|cjs|mjs)$/, {
+    var matches = filePath.match( /*#__PURE__*/_wrapRegExp(/([^\/\\]*)?[\/\\]?([^\/\\]*)\.css\.(ts|js|tsx|jsx|cjs|mjs)$/, {
       dir: 1,
       file: 2
     }));
-
     if (matches && matches.groups) {
@@ -163,6 +153,4 @@ var {
   }
-
   return parts.join('_');
 }
-
 function generateIdentifier(arg) {
@@ -174,5 +162,5 @@ var {
     debugId: arg
-  } : null), typeof arg === 'object' ? arg : null); // Convert ref count to base 36 for optimal hash lengths
+  } : null), typeof arg === 'object' ? arg : null);
 
-
+  // Convert ref count to base 36 for optimal hash lengths
   var refCount = getAndIncrementRefCounter().toString(36);
@@ -185,3 +173,2 @@ var {
   var identifier = "".concat(fileScopeHash).concat(refCount);
-
   if (getIdentOption() === 'debug') {
@@ -192,3 +179,2 @@ var devPrefix = getDevPrefix({
     });
-
     if (devPrefix) {
@@ -198,3 +184,2 @@ identifier = "".concat(devPrefix, "__").concat(identifier);
   }
-
   return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
@@ -204,3 +189,2 @@ }
 var normaliseObject = obj => walkObject(obj, () => '');
-
 function validateContract(contract, tokens) {
@@ -214,7 +198,5 @@ var theDiff = diff(normaliseObject(contract), normaliseObject(tokens));
 }
-
 function diffLine(value, nesting, type) {
   var whitespace = [...Array(nesting).keys()].map(() => '  ').join('');
   var line = "".concat(type ? type : ' ').concat(whitespace).concat(value);
-
   if (process.env.NODE_ENV !== 'test') {
@@ -224,3 +206,2 @@ if (type === '-') {
     }
-
     if (type === '+') {
@@ -230,20 +211,14 @@ return chalk.green(line);
   }
-
   return line;
 }
-
 function renderDiff(orig, diff) {
   var nesting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var lines = [];
-
   if (nesting === 0) {
     lines.push(diffLine('{', 0));
   }
-
   var innerNesting = nesting + 1;
   var keys = Object.keys(diff).sort();
-
   for (var key of keys) {
     var value = diff[key];
-
     if (!(key in orig)) {
@@ -259,7 +234,5 @@ lines.push(diffLine("".concat(key, ": ...,"), innerNesting, '+'));
   }
-
   if (nesting === 0) {
     lines.push(diffLine('}', 0));
   }
-
   return lines.join('\n');
@@ -277,9 +250,8 @@ }
 }
+var createVar$ = createVar;
 function fallbackVar() {
   var finalValue = '';
-
   for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
     values[_key] = arguments[_key];
   }
-
   values.reverse().forEach(value => {
@@ -292,3 +264,2 @@ if (finalValue === '') {
       }
-
       finalValue = value.replace(/\)$/, ", ".concat(finalValue, ")"));
@@ -305,7 +276,5 @@ }
   } = validateContract(varContract, tokens);
-
   if (!valid) {
     throw new Error("Tokens don't match contract.\n".concat(diffString));
   }
-
   walkObject(tokens, (value, path) => {
@@ -317,4 +286,2 @@ varSetters[get(varContract, path)] = String(value);
 function createThemeContract(tokens) {
-  // TS is giving type impossibly deep error here. Ignoring for now as this shouldn't affect consumers.
-  // @ts-expect-error
   return walkObject(tokens, (_value, path) => {
@@ -324,2 +291,3 @@ return createVar(path.join('-'));
 }
+var createThemeContract$ = createThemeContract;
 function createGlobalThemeContract(tokens, mapFn) {
@@ -329,3 +297,2 @@ return walkObject(tokens, (value, path) => {
     var varName = typeof rawVarName === 'string' ? rawVarName.replace(/^\-\-/, '') : null;
-
     if (typeof varName !== 'string' || varName !== cssesc(varName, {
@@ -336,6 +303,6 @@ isIdentifier: true
     }
-
     return "var(--".concat(varName, ")");
   });
 }
+var createGlobalThemeContract$ = createGlobalThemeContract;
 
@@ -353,3 +320,2 @@ function createGlobalTheme(selector, arg2, arg3) {
   }, getFileScope());
-
   if (shouldCreateVars) {
@@ -359,17 +325,17 @@ return themeVars;
 }
+var createGlobalTheme$ = createGlobalTheme;
 function createTheme(arg1, arg2, arg3) {
   var themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
-  registerClassName(themeClassName);
+  registerClassName(themeClassName, getFileScope());
   var vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
   return vars ? [themeClassName, vars] : themeClassName;
 }
+var createTheme$ = createTheme;
 
 var _templateObject;
-
 function composedStyle(rules, debugId) {
   var className = generateIdentifier(debugId);
-  registerClassName(className);
+  registerClassName(className, getFileScope());
   var classList = [];
   var styleRules = [];
-
   for (var rule of rules) {
@@ -382,5 +348,3 @@ if (typeof rule === 'string') {
   }
-
   var result = className;
-
   if (classList.length > 0) {
@@ -391,4 +355,3 @@ result = "".concat(className, " ").concat(dudupeAndJoinClassList(classList));
       classList: result
-    });
-
+    }, getFileScope());
     if (styleRules.length > 0) {
@@ -400,3 +363,2 @@ // If there are styles attached to this composition then it is
   }
-
   if (styleRules.length > 0) {
@@ -407,3 +369,2 @@ var _rule = deepmerge.all(styleRules, {
     });
-
     appendCss({
@@ -415,6 +376,4 @@ type: 'local',
   }
-
   return result;
 }
-
 function style(rule, debugId) {
@@ -424,5 +383,4 @@ if (Array.isArray(rule)) {
   }
-
   var className = generateIdentifier(debugId);
-  registerClassName(className);
+  registerClassName(className, getFileScope());
   appendCss({
@@ -435,13 +393,12 @@ type: 'local',
 }
+var style$ = style;
+
 /**
  * @deprecated The same functionality is now provided by the 'style' function when you pass it an array
  */
-
 function composeStyles() {
   var compose = hasFileScope() ? composedStyle : dudupeAndJoinClassList;
-
   for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
     classNames[_key] = arguments[_key];
   }
-
   return compose(classNames);
@@ -456,2 +413,3 @@ }
 }
+var globalStyle$ = globalStyle;
 function fontFace(rule, debugId) {
@@ -461,7 +419,5 @@ var fontFamily = "\"".concat(cssesc(generateIdentifier(debugId), {
   }), "\"");
-
   if ('fontFamily' in rule) {
     throw new Error(outdent(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          This function creates and returns a hashed font-family name, so the \"fontFamily\" property should not be provided.\n  \n          If you'd like to define a globally scoped custom font, you can use the \"globalFontFace\" function instead.\n        "]))));
   }
-
   appendCss({
@@ -475,2 +431,3 @@ type: 'fontFace',
 }
+var fontFace$ = fontFace;
 function globalFontFace(fontFamily, rule) {
@@ -484,2 +441,3 @@ appendCss({
 }
+var globalFontFace$ = globalFontFace;
 function keyframes(rule, debugId) {
@@ -496,2 +454,3 @@ var name = cssesc(generateIdentifier(debugId), {
 }
+var keyframes$ = keyframes;
 function globalKeyframes(name, rule) {
@@ -504,34 +463,74 @@ appendCss({
 }
+var globalKeyframes$ = globalKeyframes;
 function styleVariants() {
   if (typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'function') {
     var _data = arguments.length <= 0 ? undefined : arguments[0];
-
     var _mapData = arguments.length <= 1 ? undefined : arguments[1];
-
     var _debugId = arguments.length <= 2 ? undefined : arguments[2];
-
     var _classMap = {};
-
     for (var _key2 in _data) {
       _classMap[_key2] = style(_mapData(_data[_key2], _key2), _debugId ? "".concat(_debugId, "_").concat(_key2) : _key2);
     }
-
     return _classMap;
   }
-
   var styleMap = arguments.length <= 0 ? undefined : arguments[0];
   var debugId = arguments.length <= 1 ? undefined : arguments[1];
   var classMap = {};
-
   for (var _key3 in styleMap) {
     classMap[_key3] = style(styleMap[_key3], debugId ? "".concat(debugId, "_").concat(_key3) : _key3);
   }
-
   return classMap;
 }
+var styleVariants$ = styleVariants;
 
+var defaultLayerOptions = {};
+var merge = (obj1, obj2) => _objectSpread2(_objectSpread2({}, obj1), obj2);
+var getLayerArgs = function getLayerArgs() {
+  var options = defaultLayerOptions;
+  var debugId = arguments.length <= 0 ? undefined : arguments[0];
+  if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'object') {
+    options = merge(defaultLayerOptions, arguments.length <= 0 ? undefined : arguments[0]);
+    debugId = arguments.length <= 1 ? undefined : arguments[1];
+  }
+  return [options, debugId];
+};
+function layer() {
+  var [options, debugId] = getLayerArgs(...arguments);
+  var name = generateIdentifier(debugId);
+  if (options.parent) {
+    name = "".concat(options.parent, ".").concat(name);
+  }
+  appendCss({
+    type: 'layer',
+    name
+  }, getFileScope());
+  return name;
+}
+var layer$ = layer;
+function globalLayer() {
+  var [options, name] = getLayerArgs(...arguments);
+  if (options.parent) {
+    name = "".concat(options.parent, ".").concat(name);
+  }
+  appendCss({
+    type: 'layer',
+    name
+  }, getFileScope());
+  return name;
+}
+var globalLayer$ = globalLayer;
+
+// createContainer is used for local scoping of CSS containers
 // For now it is mostly just an alias of generateIdentifier
-
 var createContainer = debugId => generateIdentifier(debugId);
+var createContainer$ = createContainer;
 
-export { assignVars, composeStyles, createContainer, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, style, styleVariants };
+var extract$ = t => {
+  if (typeof t === 'function') {
+    // @ts-expect-error
+    return t();
+  }
+  return t;
+};
+
+export { assignVars, composeStyles, createContainer, createContainer$, createGlobalTheme, createGlobalTheme$, createGlobalThemeContract, createGlobalThemeContract$, createTheme, createTheme$, createThemeContract, createThemeContract$, createVar, createVar$, extract$, fallbackVar, fontFace, fontFace$, generateIdentifier, globalFontFace, globalFontFace$, globalKeyframes, globalKeyframes$, globalLayer, globalLayer$, globalStyle, globalStyle$, keyframes, keyframes$, layer, layer$, style, style$, styleVariants, styleVariants$ };

dist/vanilla-extract-css.cjs.d.ts

 import { Properties, AtRule } from 'csstype';
 
-declare type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number})`;
-declare type Contract = {
+type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number})`;
+type Contract = {
     [key: string]: CSSVarFunction | null | Contract;
 };
-declare type Primitive = string | boolean | number | null | undefined;
-declare type MapLeafNodes<Obj, LeafType> = {
+type Primitive = string | boolean | number | null | undefined;
+type MapLeafNodes<Obj, LeafType> = {
     [Prop in keyof Obj]: Obj[Prop] extends Primitive ? LeafType : Obj[Prop] extends Record<string | number, any> ? MapLeafNodes<Obj[Prop], LeafType> : never;
@@ -109,3 +109,3 @@ };
 };
-declare type SimplePseudos = keyof typeof simplePseudoMap;
+type SimplePseudos = keyof typeof simplePseudoMap;
 
@@ -117,4 +117,4 @@ interface ContainerProperties {
 }
-declare type CSSTypeProperties = Properties<number | (string & {})> & ContainerProperties;
-declare type CSSProperties = {
+type CSSTypeProperties = Properties<number | (string & {})> & ContainerProperties;
+type CSSProperties = {
     [Property in keyof CSSTypeProperties]: CSSTypeProperties[Property] | CSSVarFunction | Array<CSSVarFunction | CSSTypeProperties[Property]>;
@@ -125,3 +125,3 @@ };
 }
-declare type CSSPropertiesWithVars = CSSProperties & {
+type CSSPropertiesWithVars = CSSProperties & {
     vars?: {
@@ -131,22 +131,18 @@ [key: string]: string;
 };
-declare type PseudoProperties = {
+type PseudoProperties = {
     [key in SimplePseudos]?: CSSPropertiesWithVars;
 };
-declare type CSSPropertiesAndPseudos = CSSPropertiesWithVars & PseudoProperties;
-interface MediaQueries<StyleType> {
-    '@media'?: {
-        [query: string]: StyleType;
+type CSSPropertiesAndPseudos = CSSPropertiesWithVars & PseudoProperties;
+type Query<Key extends string, StyleType> = {
+    [key in Key]?: {
+        [query: string]: Omit<StyleType, Key>;
     };
+};
+type MediaQueries<StyleType> = Query<'@media', StyleType>;
+type FeatureQueries<StyleType> = Query<'@supports', StyleType>;
+type ContainerQueries<StyleType> = Query<'@container', StyleType>;
+type Layers<StyleType> = Query<'@layer', StyleType>;
+interface AllQueries<StyleType> extends MediaQueries<StyleType & AllQueries<StyleType>>, FeatureQueries<StyleType & AllQueries<StyleType>>, ContainerQueries<StyleType & AllQueries<StyleType>>, Layers<StyleType & AllQueries<StyleType>> {
 }
-interface FeatureQueries<StyleType> {
-    '@supports'?: {
-        [query: string]: StyleType;
-    };
-}
-interface ContainerQueries<StyleType> {
-    '@container'?: {
-        [query: string]: StyleType;
-    };
-}
-declare type WithQueries<StyleType> = MediaQueries<StyleType & FeatureQueries<StyleType & ContainerQueries<StyleType>> & ContainerQueries<StyleType & FeatureQueries<StyleType>>> & FeatureQueries<StyleType & MediaQueries<StyleType & ContainerQueries<StyleType>> & ContainerQueries<StyleType & MediaQueries<StyleType>>> & ContainerQueries<StyleType & MediaQueries<StyleType & FeatureQueries<StyleType>> & FeatureQueries<StyleType & MediaQueries<StyleType>>>;
+type WithQueries<StyleType> = StyleType & AllQueries<StyleType>;
 interface SelectorMap {
@@ -158,7 +154,7 @@ [selector: string]: CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
 }
-declare type StyleRule = StyleWithSelectors & WithQueries<StyleWithSelectors>;
-declare type GlobalStyleRule = CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
-declare type GlobalFontFaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>;
-declare type FontFaceRule = Omit<GlobalFontFaceRule, 'fontFamily'>;
-declare type CSSStyleBlock = {
+type StyleRule = StyleWithSelectors & WithQueries<StyleWithSelectors>;
+type GlobalStyleRule = CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
+type GlobalFontFaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>;
+type FontFaceRule = Omit<GlobalFontFaceRule, 'fontFamily'>;
+type CSSStyleBlock = {
     type: 'local';
@@ -168,7 +164,7 @@ selector: string;
 };
-declare type CSSFontFaceBlock = {
+type CSSFontFaceBlock = {
     type: 'fontFace';
     rule: GlobalFontFaceRule;
 };
-declare type CSSKeyframesBlock = {
+type CSSKeyframesBlock = {
     type: 'keyframes';
@@ -178,3 +174,3 @@ name: string;
 };
-declare type CSSSelectorBlock = {
+type CSSSelectorBlock = {
     type: 'selector' | 'global';
@@ -184,4 +180,8 @@ selector: string;
 };
-declare type CSS = CSSStyleBlock | CSSFontFaceBlock | CSSKeyframesBlock | CSSSelectorBlock;
-declare type FileScope = {
+type CSSLayerDeclaration = {
+    type: 'layer';
+    name: string;
+};
+type CSS = CSSStyleBlock | CSSFontFaceBlock | CSSKeyframesBlock | CSSSelectorBlock | CSSLayerDeclaration;
+type FileScope = {
     packageName?: string;
@@ -194,20 +194,21 @@ filePath: string;
 }
-declare type IdentOption = 'short' | 'debug';
+type IdentOption = 'short' | 'debug';
 interface Adapter {
     appendCss: (css: CSS, fileScope: FileScope) => void;
-    registerClassName: (className: string) => void;
-    registerComposition: (composition: Composition) => void;
+    registerClassName: (className: string, fileScope: FileScope) => void;
+    registerComposition: (composition: Composition, fileScope: FileScope) => void;
     markCompositionUsed: (identifier: string) => void;
+    onBeginFileScope?: (fileScope: FileScope) => void;
     onEndFileScope: (fileScope: FileScope) => void;
     getIdentOption: () => IdentOption;
 }
-declare type NullableTokens = {
+type NullableTokens = {
     [key: string]: string | NullableTokens | null;
 };
-declare type Tokens = {
+type Tokens = {
     [key: string]: string | Tokens;
 };
-declare type ThemeVars<ThemeContract extends NullableTokens> = MapLeafNodes<ThemeContract, CSSVarFunction>;
-declare type ClassNames = string | Array<ClassNames>;
-declare type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
+type ThemeVars<ThemeContract extends NullableTokens> = MapLeafNodes<ThemeContract, CSSVarFunction>;
+type ClassNames = string | Array<ClassNames>;
+type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
 
@@ -223,6 +224,9 @@ interface GenerateIdentifierOptions {
 declare function createGlobalTheme<ThemeContract extends Contract>(selector: string, themeContract: ThemeContract, tokens: MapLeafNodes<ThemeContract, string>): void;
+declare const createGlobalTheme$: typeof createGlobalTheme;
 declare function createTheme<ThemeTokens extends Tokens>(tokens: ThemeTokens, debugId?: string): [className: string, vars: ThemeVars<ThemeTokens>];
 declare function createTheme<ThemeContract extends Contract>(themeContract: ThemeContract, tokens: MapLeafNodes<ThemeContract, string>, debugId?: string): string;
+declare const createTheme$: typeof createTheme;
 
 declare function style(rule: ComplexStyleRule, debugId?: string): string;
+declare const style$: typeof style;
 /**
@@ -233,18 +237,40 @@ * @deprecated The same functionality is now provided by the 'style' function when you pass it an array
 declare function globalStyle(selector: string, rule: GlobalStyleRule): void;
+declare const globalStyle$: typeof globalStyle;
 declare function fontFace(rule: FontFaceRule, debugId?: string): string;
+declare const fontFace$: typeof fontFace;
 declare function globalFontFace(fontFamily: string, rule: FontFaceRule): void;
+declare const globalFontFace$: typeof globalFontFace;
 declare function keyframes(rule: CSSKeyframes, debugId?: string): string;
+declare const keyframes$: typeof keyframes;
 declare function globalKeyframes(name: string, rule: CSSKeyframes): void;
+declare const globalKeyframes$: typeof globalKeyframes;
 declare function styleVariants<StyleMap extends Record<string | number, ComplexStyleRule>>(styleMap: StyleMap, debugId?: string): Record<keyof StyleMap, string>;
 declare function styleVariants<Data extends Record<string | number, unknown>, Key extends keyof Data>(data: Data, mapData: (value: Data[Key], key: Key) => ComplexStyleRule, debugId?: string): Record<keyof Data, string>;
+declare const styleVariants$: typeof styleVariants;
 
 declare function createVar(debugId?: string): CSSVarFunction;
+declare const createVar$: typeof createVar;
 declare function fallbackVar(...values: [string, ...Array<string>]): CSSVarFunction;
 declare function assignVars<VarContract extends Contract>(varContract: VarContract, tokens: MapLeafNodes<VarContract, string>): Record<CSSVarFunction, string>;
 declare function createThemeContract<ThemeTokens extends NullableTokens>(tokens: ThemeTokens): ThemeVars<ThemeTokens>;
+declare const createThemeContract$: typeof createThemeContract;
 declare function createGlobalThemeContract<ThemeTokens extends Tokens>(tokens: ThemeTokens): ThemeVars<ThemeTokens>;
 declare function createGlobalThemeContract<ThemeTokens extends NullableTokens>(tokens: ThemeTokens, mapFn: (value: string | null, path: Array<string>) => string): ThemeVars<ThemeTokens>;
+declare const createGlobalThemeContract$: typeof createGlobalThemeContract;
 
-declare const createContainer: (debugId?: string | undefined) => string;
+type LayerOptions = {
+    parent?: string;
+};
+declare function layer(options: LayerOptions, debugId?: string): string;
+declare function layer(debugId?: string): string;
+declare const layer$: typeof layer;
+declare function globalLayer(options: LayerOptions, name: string): string;
+declare function globalLayer(name: string): string;
+declare const globalLayer$: typeof globalLayer;
 
-export { Adapter, CSSProperties, ComplexStyleRule, FileScope, GlobalStyleRule, StyleRule, assignVars, composeStyles, createContainer, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, style, styleVariants };
+declare const createContainer: (debugId?: string) => string;
+declare const createContainer$: (debugId?: string) => string;
+
+declare const extract$: <T>(t: T | (() => T)) => T;
+
+export { Adapter, CSSProperties, ComplexStyleRule, FileScope, GlobalStyleRule, StyleRule, assignVars, composeStyles, createContainer, createContainer$, createGlobalTheme, createGlobalTheme$, createGlobalThemeContract, createGlobalThemeContract$, createTheme, createTheme$, createThemeContract, createThemeContract$, createVar, createVar$, extract$, fallbackVar, fontFace, fontFace$, generateIdentifier, globalFontFace, globalFontFace$, globalKeyframes, globalKeyframes$, globalLayer, globalLayer$, globalStyle, globalStyle$, keyframes, keyframes$, layer, layer$, style, style$, styleVariants, styleVariants$ };

dist/vanilla-extract-css.cjs.dev.js

@@ -6,3 +6,3 @@ 'use strict';
 var injectStyles_dist_vanillaExtractCssInjectStyles = require('../injectStyles/dist/vanilla-extract-css-injectStyles.cjs.dev.js');
-var transformCss_dist_vanillaExtractCssTransformCss = require('./transformCss-1c113184.cjs.dev.js');
+var transformCss_dist_vanillaExtractCssTransformCss = require('./transformCss-072727cc.cjs.dev.js');
 var adapter_dist_vanillaExtractCssAdapter = require('../adapter/dist/vanilla-extract-css-adapter.cjs.dev.js');
@@ -15,3 +15,3 @@ var hash = require('@emotion/hash');
 var chalk = require('chalk');
-var taggedTemplateLiteral = require('./taggedTemplateLiteral-975613a0.cjs.dev.js');
+var taggedTemplateLiteral = require('./taggedTemplateLiteral-4fcaa261.cjs.dev.js');
 var outdent = require('outdent');
@@ -59,3 +59,2 @@ var deepmerge = require('deepmerge');
 };
-
 if (typeof window !== 'undefined') {
@@ -77,3 +76,2 @@ adapter_dist_vanillaExtractCssAdapter.setAdapterIfNotSet(browserRuntimeAdapter);
   }
-
   subClass.prototype = Object.create(superClass && superClass.prototype, {
@@ -96,15 +94,10 @@ constructor: {
   };
-
   var _super = RegExp.prototype,
-      _groups = new WeakMap();
-
+    _groups = new WeakMap();
   function BabelRegExp(re, flags, groups) {
     var _this = new RegExp(re, flags);
-
     return _groups.set(_this, groups || _groups.get(re)), _setPrototypeOf(_this, BabelRegExp.prototype);
   }
-
   function buildGroups(result, re) {
     var g = _groups.get(re);
-
     return Object.keys(g).reduce(function (groups, name) {
@@ -114,3 +107,2 @@ var i = g[name];
         for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++;
-
         groups[name] = result[i[k]];
@@ -121,19 +113,20 @@ }
   }
-
   return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {
     var result = _super.exec.call(this, str);
-
-    return result && (result.groups = buildGroups(result, this)), result;
+    if (result) {
+      result.groups = buildGroups(result, this);
+      var indices = result.indices;
+      indices && (indices.groups = buildGroups(indices, this));
+    }
+    return result;
   }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) {
     if ("string" == typeof substitution) {
       var groups = _groups.get(this);
-
       return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) {
-        return "$" + groups[name];
+        var group = groups[name];
+        return "$" + (Array.isArray(group) ? group.join("$") : group);
       }));
     }
-
     if ("function" == typeof substitution) {
       var _this = this;
-
       return _super[Symbol.replace].call(this, str, function () {
@@ -144,3 +137,2 @@ var args = arguments;
     }
-
     return _super[Symbol.replace].call(this, str, substitution);
@@ -156,3 +148,2 @@ }, _wrapRegExp.apply(this, arguments);
   var parts = debugId ? [debugId.replace(/\s/g, '_')] : [];
-
   if (debugFileName) {
@@ -162,7 +153,6 @@ var {
     } = fileScope_dist_vanillaExtractCssFileScope.getFileScope();
-    var matches = filePath.match( /*#__PURE__*/_wrapRegExp(/((?:(?![\/\\])[\s\S])*)?[\/\\]?((?:(?![\/\\])[\s\S])*)\.css\.(ts|js|tsx|jsx|cjs|mjs)$/, {
+    var matches = filePath.match( /*#__PURE__*/_wrapRegExp(/([^\/\\]*)?[\/\\]?([^\/\\]*)\.css\.(ts|js|tsx|jsx|cjs|mjs)$/, {
       dir: 1,
       file: 2
     }));
-
     if (matches && matches.groups) {
@@ -176,6 +166,4 @@ var {
   }
-
   return parts.join('_');
 }
-
 function generateIdentifier(arg) {
@@ -187,5 +175,5 @@ var {
     debugId: arg
-  } : null), typeof arg === 'object' ? arg : null); // Convert ref count to base 36 for optimal hash lengths
+  } : null), typeof arg === 'object' ? arg : null);
 
-
+  // Convert ref count to base 36 for optimal hash lengths
   var refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter().toString(36);
@@ -198,3 +186,2 @@ var {
   var identifier = "".concat(fileScopeHash).concat(refCount);
-
   if (adapter_dist_vanillaExtractCssAdapter.getIdentOption() === 'debug') {
@@ -205,3 +192,2 @@ var devPrefix = getDevPrefix({
     });
-
     if (devPrefix) {
@@ -211,3 +197,2 @@ identifier = "".concat(devPrefix, "__").concat(identifier);
   }
-
   return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
@@ -217,3 +202,2 @@ }
 var normaliseObject = obj => _private.walkObject(obj, () => '');
-
 function validateContract(contract, tokens) {
@@ -227,7 +211,5 @@ var theDiff = deepObjectDiff.diff(normaliseObject(contract), normaliseObject(tokens));
 }
-
 function diffLine(value, nesting, type) {
   var whitespace = [...Array(nesting).keys()].map(() => '  ').join('');
   var line = "".concat(type ? type : ' ').concat(whitespace).concat(value);
-
   if (process.env.NODE_ENV !== 'test') {
@@ -237,3 +219,2 @@ if (type === '-') {
     }
-
     if (type === '+') {
@@ -243,20 +224,14 @@ return chalk__default["default"].green(line);
   }
-
   return line;
 }
-
 function renderDiff(orig, diff) {
   var nesting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var lines = [];
-
   if (nesting === 0) {
     lines.push(diffLine('{', 0));
   }
-
   var innerNesting = nesting + 1;
   var keys = Object.keys(diff).sort();
-
   for (var key of keys) {
     var value = diff[key];
-
     if (!(key in orig)) {
@@ -272,7 +247,5 @@ lines.push(diffLine("".concat(key, ": ...,"), innerNesting, '+'));
   }
-
   if (nesting === 0) {
     lines.push(diffLine('}', 0));
   }
-
   return lines.join('\n');
@@ -290,9 +263,8 @@ }
 }
+var createVar$ = createVar;
 function fallbackVar() {
   var finalValue = '';
-
   for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
     values[_key] = arguments[_key];
   }
-
   values.reverse().forEach(value => {
@@ -305,3 +277,2 @@ if (finalValue === '') {
       }
-
       finalValue = value.replace(/\)$/, ", ".concat(finalValue, ")"));
@@ -318,7 +289,5 @@ }
   } = validateContract(varContract, tokens);
-
   if (!valid) {
     throw new Error("Tokens don't match contract.\n".concat(diffString));
   }
-
   _private.walkObject(tokens, (value, path) => {
@@ -330,4 +299,2 @@ varSetters[_private.get(varContract, path)] = String(value);
 function createThemeContract(tokens) {
-  // TS is giving type impossibly deep error here. Ignoring for now as this shouldn't affect consumers.
-  // @ts-expect-error
   return _private.walkObject(tokens, (_value, path) => {
@@ -337,2 +304,3 @@ return createVar(path.join('-'));
 }
+var createThemeContract$ = createThemeContract;
 function createGlobalThemeContract(tokens, mapFn) {
@@ -342,3 +310,2 @@ return _private.walkObject(tokens, (value, path) => {
     var varName = typeof rawVarName === 'string' ? rawVarName.replace(/^\-\-/, '') : null;
-
     if (typeof varName !== 'string' || varName !== cssesc__default["default"](varName, {
@@ -349,6 +316,6 @@ isIdentifier: true
     }
-
     return "var(--".concat(varName, ")");
   });
 }
+var createGlobalThemeContract$ = createGlobalThemeContract;
 
@@ -366,3 +333,2 @@ function createGlobalTheme(selector, arg2, arg3) {
   }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
-
   if (shouldCreateVars) {
@@ -372,17 +338,17 @@ return themeVars;
 }
+var createGlobalTheme$ = createGlobalTheme;
 function createTheme(arg1, arg2, arg3) {
   var themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
-  adapter_dist_vanillaExtractCssAdapter.registerClassName(themeClassName);
+  adapter_dist_vanillaExtractCssAdapter.registerClassName(themeClassName, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   var vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
   return vars ? [themeClassName, vars] : themeClassName;
 }
+var createTheme$ = createTheme;
 
 var _templateObject;
-
 function composedStyle(rules, debugId) {
   var className = generateIdentifier(debugId);
-  adapter_dist_vanillaExtractCssAdapter.registerClassName(className);
+  adapter_dist_vanillaExtractCssAdapter.registerClassName(className, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   var classList = [];
   var styleRules = [];
-
   for (var rule of rules) {
@@ -395,5 +361,3 @@ if (typeof rule === 'string') {
   }
-
   var result = className;
-
   if (classList.length > 0) {
@@ -404,4 +368,3 @@ result = "".concat(className, " ").concat(transformCss_dist_vanillaExtractCssTransformCss.dudupeAndJoinClassList(classList));
       classList: result
-    });
-
+    }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
     if (styleRules.length > 0) {
@@ -413,3 +376,2 @@ // If there are styles attached to this composition then it is
   }
-
   if (styleRules.length > 0) {
@@ -420,3 +382,2 @@ var _rule = deepmerge__default["default"].all(styleRules, {
     });
-
     adapter_dist_vanillaExtractCssAdapter.appendCss({
@@ -428,6 +389,4 @@ type: 'local',
   }
-
   return result;
 }
-
 function style(rule, debugId) {
@@ -437,5 +396,4 @@ if (Array.isArray(rule)) {
   }
-
   var className = generateIdentifier(debugId);
-  adapter_dist_vanillaExtractCssAdapter.registerClassName(className);
+  adapter_dist_vanillaExtractCssAdapter.registerClassName(className, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   adapter_dist_vanillaExtractCssAdapter.appendCss({
@@ -448,13 +406,12 @@ type: 'local',
 }
+var style$ = style;
+
 /**
  * @deprecated The same functionality is now provided by the 'style' function when you pass it an array
  */
-
 function composeStyles() {
   var compose = fileScope_dist_vanillaExtractCssFileScope.hasFileScope() ? composedStyle : transformCss_dist_vanillaExtractCssTransformCss.dudupeAndJoinClassList;
-
   for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
     classNames[_key] = arguments[_key];
   }
-
   return compose(classNames);
@@ -469,2 +426,3 @@ }
 }
+var globalStyle$ = globalStyle;
 function fontFace(rule, debugId) {
@@ -474,7 +432,5 @@ var fontFamily = "\"".concat(cssesc__default["default"](generateIdentifier(debugId), {
   }), "\"");
-
   if ('fontFamily' in rule) {
     throw new Error(outdent__default["default"](_templateObject || (_templateObject = taggedTemplateLiteral._taggedTemplateLiteral(["\n          This function creates and returns a hashed font-family name, so the \"fontFamily\" property should not be provided.\n  \n          If you'd like to define a globally scoped custom font, you can use the \"globalFontFace\" function instead.\n        "]))));
   }
-
   adapter_dist_vanillaExtractCssAdapter.appendCss({
@@ -488,2 +444,3 @@ type: 'fontFace',
 }
+var fontFace$ = fontFace;
 function globalFontFace(fontFamily, rule) {
@@ -497,2 +454,3 @@ adapter_dist_vanillaExtractCssAdapter.appendCss({
 }
+var globalFontFace$ = globalFontFace;
 function keyframes(rule, debugId) {
@@ -509,2 +467,3 @@ var name = cssesc__default["default"](generateIdentifier(debugId), {
 }
+var keyframes$ = keyframes;
 function globalKeyframes(name, rule) {
@@ -517,50 +476,108 @@ adapter_dist_vanillaExtractCssAdapter.appendCss({
 }
+var globalKeyframes$ = globalKeyframes;
 function styleVariants() {
   if (typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'function') {
     var _data = arguments.length <= 0 ? undefined : arguments[0];
-
     var _mapData = arguments.length <= 1 ? undefined : arguments[1];
-
     var _debugId = arguments.length <= 2 ? undefined : arguments[2];
-
     var _classMap = {};
-
     for (var _key2 in _data) {
       _classMap[_key2] = style(_mapData(_data[_key2], _key2), _debugId ? "".concat(_debugId, "_").concat(_key2) : _key2);
     }
-
     return _classMap;
   }
-
   var styleMap = arguments.length <= 0 ? undefined : arguments[0];
   var debugId = arguments.length <= 1 ? undefined : arguments[1];
   var classMap = {};
-
   for (var _key3 in styleMap) {
     classMap[_key3] = style(styleMap[_key3], debugId ? "".concat(debugId, "_").concat(_key3) : _key3);
   }
-
   return classMap;
 }
+var styleVariants$ = styleVariants;
 
+var defaultLayerOptions = {};
+var merge = (obj1, obj2) => transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, obj1), obj2);
+var getLayerArgs = function getLayerArgs() {
+  var options = defaultLayerOptions;
+  var debugId = arguments.length <= 0 ? undefined : arguments[0];
+  if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'object') {
+    options = merge(defaultLayerOptions, arguments.length <= 0 ? undefined : arguments[0]);
+    debugId = arguments.length <= 1 ? undefined : arguments[1];
+  }
+  return [options, debugId];
+};
+function layer() {
+  var [options, debugId] = getLayerArgs(...arguments);
+  var name = generateIdentifier(debugId);
+  if (options.parent) {
+    name = "".concat(options.parent, ".").concat(name);
+  }
+  adapter_dist_vanillaExtractCssAdapter.appendCss({
+    type: 'layer',
+    name
+  }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
+  return name;
+}
+var layer$ = layer;
+function globalLayer() {
+  var [options, name] = getLayerArgs(...arguments);
+  if (options.parent) {
+    name = "".concat(options.parent, ".").concat(name);
+  }
+  adapter_dist_vanillaExtractCssAdapter.appendCss({
+    type: 'layer',
+    name
+  }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
+  return name;
+}
+var globalLayer$ = globalLayer;
+
+// createContainer is used for local scoping of CSS containers
 // For now it is mostly just an alias of generateIdentifier
-
 var createContainer = debugId => generateIdentifier(debugId);
+var createContainer$ = createContainer;
 
+var extract$ = t => {
+  if (typeof t === 'function') {
+    // @ts-expect-error
+    return t();
+  }
+  return t;
+};
+
 exports.assignVars = assignVars;
 exports.composeStyles = composeStyles;
 exports.createContainer = createContainer;
+exports.createContainer$ = createContainer$;
 exports.createGlobalTheme = createGlobalTheme;
+exports.createGlobalTheme$ = createGlobalTheme$;
 exports.createGlobalThemeContract = createGlobalThemeContract;
+exports.createGlobalThemeContract$ = createGlobalThemeContract$;
 exports.createTheme = createTheme;
+exports.createTheme$ = createTheme$;
 exports.createThemeContract = createThemeContract;
+exports.createThemeContract$ = createThemeContract$;
 exports.createVar = createVar;
+exports.createVar$ = createVar$;
+exports.extract$ = extract$;
 exports.fallbackVar = fallbackVar;
 exports.fontFace = fontFace;
+exports.fontFace$ = fontFace$;
 exports.generateIdentifier = generateIdentifier;
 exports.globalFontFace = globalFontFace;
+exports.globalFontFace$ = globalFontFace$;
 exports.globalKeyframes = globalKeyframes;
+exports.globalKeyframes$ = globalKeyframes$;
+exports.globalLayer = globalLayer;
+exports.globalLayer$ = globalLayer$;
 exports.globalStyle = globalStyle;
+exports.globalStyle$ = globalStyle$;
 exports.keyframes = keyframes;
+exports.keyframes$ = keyframes$;
+exports.layer = layer;
+exports.layer$ = layer$;
 exports.style = style;
+exports.style$ = style$;
 exports.styleVariants = styleVariants;
+exports.styleVariants$ = styleVariants$;

dist/vanilla-extract-css.cjs.prod.js

@@ -6,3 +6,3 @@ 'use strict';
 var injectStyles_dist_vanillaExtractCssInjectStyles = require('../injectStyles/dist/vanilla-extract-css-injectStyles.cjs.prod.js');
-var transformCss_dist_vanillaExtractCssTransformCss = require('./transformCss-3f666075.cjs.prod.js');
+var transformCss_dist_vanillaExtractCssTransformCss = require('./transformCss-27759e6d.cjs.prod.js');
 var adapter_dist_vanillaExtractCssAdapter = require('../adapter/dist/vanilla-extract-css-adapter.cjs.prod.js');
@@ -15,3 +15,3 @@ var hash = require('@emotion/hash');
 var chalk = require('chalk');
-var taggedTemplateLiteral = require('./taggedTemplateLiteral-bd61be83.cjs.prod.js');
+var taggedTemplateLiteral = require('./taggedTemplateLiteral-0bfb2e96.cjs.prod.js');
 var outdent = require('outdent');
@@ -59,3 +59,2 @@ var deepmerge = require('deepmerge');
 };
-
 if (typeof window !== 'undefined') {
@@ -77,3 +76,2 @@ adapter_dist_vanillaExtractCssAdapter.setAdapterIfNotSet(browserRuntimeAdapter);
   }
-
   subClass.prototype = Object.create(superClass && superClass.prototype, {
@@ -96,15 +94,10 @@ constructor: {
   };
-
   var _super = RegExp.prototype,
-      _groups = new WeakMap();
-
+    _groups = new WeakMap();
   function BabelRegExp(re, flags, groups) {
     var _this = new RegExp(re, flags);
-
     return _groups.set(_this, groups || _groups.get(re)), _setPrototypeOf(_this, BabelRegExp.prototype);
   }
-
   function buildGroups(result, re) {
     var g = _groups.get(re);
-
     return Object.keys(g).reduce(function (groups, name) {
@@ -114,3 +107,2 @@ var i = g[name];
         for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++;
-
         groups[name] = result[i[k]];
@@ -121,19 +113,20 @@ }
   }
-
   return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {
     var result = _super.exec.call(this, str);
-
-    return result && (result.groups = buildGroups(result, this)), result;
+    if (result) {
+      result.groups = buildGroups(result, this);
+      var indices = result.indices;
+      indices && (indices.groups = buildGroups(indices, this));
+    }
+    return result;
   }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) {
     if ("string" == typeof substitution) {
       var groups = _groups.get(this);
-
       return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) {
-        return "$" + groups[name];
+        var group = groups[name];
+        return "$" + (Array.isArray(group) ? group.join("$") : group);
       }));
     }
-
     if ("function" == typeof substitution) {
       var _this = this;
-
       return _super[Symbol.replace].call(this, str, function () {
@@ -144,3 +137,2 @@ var args = arguments;
     }
-
     return _super[Symbol.replace].call(this, str, substitution);
@@ -156,3 +148,2 @@ }, _wrapRegExp.apply(this, arguments);
   var parts = debugId ? [debugId.replace(/\s/g, '_')] : [];
-
   if (debugFileName) {
@@ -162,7 +153,6 @@ var {
     } = fileScope_dist_vanillaExtractCssFileScope.getFileScope();
-    var matches = filePath.match( /*#__PURE__*/_wrapRegExp(/((?:(?![\/\\])[\s\S])*)?[\/\\]?((?:(?![\/\\])[\s\S])*)\.css\.(ts|js|tsx|jsx|cjs|mjs)$/, {
+    var matches = filePath.match( /*#__PURE__*/_wrapRegExp(/([^\/\\]*)?[\/\\]?([^\/\\]*)\.css\.(ts|js|tsx|jsx|cjs|mjs)$/, {
       dir: 1,
       file: 2
     }));
-
     if (matches && matches.groups) {
@@ -176,6 +166,4 @@ var {
   }
-
   return parts.join('_');
 }
-
 function generateIdentifier(arg) {
@@ -187,5 +175,5 @@ var {
     debugId: arg
-  } : null), typeof arg === 'object' ? arg : null); // Convert ref count to base 36 for optimal hash lengths
+  } : null), typeof arg === 'object' ? arg : null);
 
-
+  // Convert ref count to base 36 for optimal hash lengths
   var refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter().toString(36);
@@ -198,3 +186,2 @@ var {
   var identifier = "".concat(fileScopeHash).concat(refCount);
-
   if (adapter_dist_vanillaExtractCssAdapter.getIdentOption() === 'debug') {
@@ -205,3 +192,2 @@ var devPrefix = getDevPrefix({
     });
-
     if (devPrefix) {
@@ -211,3 +197,2 @@ identifier = "".concat(devPrefix, "__").concat(identifier);
   }
-
   return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
@@ -217,3 +202,2 @@ }
 var normaliseObject = obj => _private.walkObject(obj, () => '');
-
 function validateContract(contract, tokens) {
@@ -227,7 +211,5 @@ var theDiff = deepObjectDiff.diff(normaliseObject(contract), normaliseObject(tokens));
 }
-
 function diffLine(value, nesting, type) {
   var whitespace = [...Array(nesting).keys()].map(() => '  ').join('');
   var line = "".concat(type ? type : ' ').concat(whitespace).concat(value);
-
   {
@@ -237,3 +219,2 @@ if (type === '-') {
     }
-
     if (type === '+') {
@@ -243,20 +224,14 @@ return chalk__default["default"].green(line);
   }
-
   return line;
 }
-
 function renderDiff(orig, diff) {
   var nesting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var lines = [];
-
   if (nesting === 0) {
     lines.push(diffLine('{', 0));
   }
-
   var innerNesting = nesting + 1;
   var keys = Object.keys(diff).sort();
-
   for (var key of keys) {
     var value = diff[key];
-
     if (!(key in orig)) {
@@ -272,7 +247,5 @@ lines.push(diffLine("".concat(key, ": ...,"), innerNesting, '+'));
   }
-
   if (nesting === 0) {
     lines.push(diffLine('}', 0));
   }
-
   return lines.join('\n');
@@ -290,9 +263,8 @@ }
 }
+var createVar$ = createVar;
 function fallbackVar() {
   var finalValue = '';
-
   for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
     values[_key] = arguments[_key];
   }
-
   values.reverse().forEach(value => {
@@ -305,3 +277,2 @@ if (finalValue === '') {
       }
-
       finalValue = value.replace(/\)$/, ", ".concat(finalValue, ")"));
@@ -318,7 +289,5 @@ }
   } = validateContract(varContract, tokens);
-
   if (!valid) {
     throw new Error("Tokens don't match contract.\n".concat(diffString));
   }
-
   _private.walkObject(tokens, (value, path) => {
@@ -330,4 +299,2 @@ varSetters[_private.get(varContract, path)] = String(value);
 function createThemeContract(tokens) {
-  // TS is giving type impossibly deep error here. Ignoring for now as this shouldn't affect consumers.
-  // @ts-expect-error
   return _private.walkObject(tokens, (_value, path) => {
@@ -337,2 +304,3 @@ return createVar(path.join('-'));
 }
+var createThemeContract$ = createThemeContract;
 function createGlobalThemeContract(tokens, mapFn) {
@@ -342,3 +310,2 @@ return _private.walkObject(tokens, (value, path) => {
     var varName = typeof rawVarName === 'string' ? rawVarName.replace(/^\-\-/, '') : null;
-
     if (typeof varName !== 'string' || varName !== cssesc__default["default"](varName, {
@@ -349,6 +316,6 @@ isIdentifier: true
     }
-
     return "var(--".concat(varName, ")");
   });
 }
+var createGlobalThemeContract$ = createGlobalThemeContract;
 
@@ -366,3 +333,2 @@ function createGlobalTheme(selector, arg2, arg3) {
   }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
-
   if (shouldCreateVars) {
@@ -372,17 +338,17 @@ return themeVars;
 }
+var createGlobalTheme$ = createGlobalTheme;
 function createTheme(arg1, arg2, arg3) {
   var themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
-  adapter_dist_vanillaExtractCssAdapter.registerClassName(themeClassName);
+  adapter_dist_vanillaExtractCssAdapter.registerClassName(themeClassName, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   var vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
   return vars ? [themeClassName, vars] : themeClassName;
 }
+var createTheme$ = createTheme;
 
 var _templateObject;
-
 function composedStyle(rules, debugId) {
   var className = generateIdentifier(debugId);
-  adapter_dist_vanillaExtractCssAdapter.registerClassName(className);
+  adapter_dist_vanillaExtractCssAdapter.registerClassName(className, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   var classList = [];
   var styleRules = [];
-
   for (var rule of rules) {
@@ -395,5 +361,3 @@ if (typeof rule === 'string') {
   }
-
   var result = className;
-
   if (classList.length > 0) {
@@ -404,4 +368,3 @@ result = "".concat(className, " ").concat(transformCss_dist_vanillaExtractCssTransformCss.dudupeAndJoinClassList(classList));
       classList: result
-    });
-
+    }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
     if (styleRules.length > 0) {
@@ -413,3 +376,2 @@ // If there are styles attached to this composition then it is
   }
-
   if (styleRules.length > 0) {
@@ -420,3 +382,2 @@ var _rule = deepmerge__default["default"].all(styleRules, {
     });
-
     adapter_dist_vanillaExtractCssAdapter.appendCss({
@@ -428,6 +389,4 @@ type: 'local',
   }
-
   return result;
 }
-
 function style(rule, debugId) {
@@ -437,5 +396,4 @@ if (Array.isArray(rule)) {
   }
-
   var className = generateIdentifier(debugId);
-  adapter_dist_vanillaExtractCssAdapter.registerClassName(className);
+  adapter_dist_vanillaExtractCssAdapter.registerClassName(className, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   adapter_dist_vanillaExtractCssAdapter.appendCss({
@@ -448,13 +406,12 @@ type: 'local',
 }
+var style$ = style;
+
 /**
  * @deprecated The same functionality is now provided by the 'style' function when you pass it an array
  */
-
 function composeStyles() {
   var compose = fileScope_dist_vanillaExtractCssFileScope.hasFileScope() ? composedStyle : transformCss_dist_vanillaExtractCssTransformCss.dudupeAndJoinClassList;
-
   for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
     classNames[_key] = arguments[_key];
   }
-
   return compose(classNames);
@@ -469,2 +426,3 @@ }
 }
+var globalStyle$ = globalStyle;
 function fontFace(rule, debugId) {
@@ -474,7 +432,5 @@ var fontFamily = "\"".concat(cssesc__default["default"](generateIdentifier(debugId), {
   }), "\"");
-
   if ('fontFamily' in rule) {
     throw new Error(outdent__default["default"](_templateObject || (_templateObject = taggedTemplateLiteral._taggedTemplateLiteral(["\n          This function creates and returns a hashed font-family name, so the \"fontFamily\" property should not be provided.\n  \n          If you'd like to define a globally scoped custom font, you can use the \"globalFontFace\" function instead.\n        "]))));
   }
-
   adapter_dist_vanillaExtractCssAdapter.appendCss({
@@ -488,2 +444,3 @@ type: 'fontFace',
 }
+var fontFace$ = fontFace;
 function globalFontFace(fontFamily, rule) {
@@ -497,2 +454,3 @@ adapter_dist_vanillaExtractCssAdapter.appendCss({
 }
+var globalFontFace$ = globalFontFace;
 function keyframes(rule, debugId) {
@@ -509,2 +467,3 @@ var name = cssesc__default["default"](generateIdentifier(debugId), {
 }
+var keyframes$ = keyframes;
 function globalKeyframes(name, rule) {
@@ -517,50 +476,108 @@ adapter_dist_vanillaExtractCssAdapter.appendCss({
 }
+var globalKeyframes$ = globalKeyframes;
 function styleVariants() {
   if (typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'function') {
     var _data = arguments.length <= 0 ? undefined : arguments[0];
-
     var _mapData = arguments.length <= 1 ? undefined : arguments[1];
-
     var _debugId = arguments.length <= 2 ? undefined : arguments[2];
-
     var _classMap = {};
-
     for (var _key2 in _data) {
       _classMap[_key2] = style(_mapData(_data[_key2], _key2), _debugId ? "".concat(_debugId, "_").concat(_key2) : _key2);
     }
-
     return _classMap;
   }
-
   var styleMap = arguments.length <= 0 ? undefined : arguments[0];
   var debugId = arguments.length <= 1 ? undefined : arguments[1];
   var classMap = {};
-
   for (var _key3 in styleMap) {
     classMap[_key3] = style(styleMap[_key3], debugId ? "".concat(debugId, "_").concat(_key3) : _key3);
   }
-
   return classMap;
 }
+var styleVariants$ = styleVariants;
 
+var defaultLayerOptions = {};
+var merge = (obj1, obj2) => transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, obj1), obj2);
+var getLayerArgs = function getLayerArgs() {
+  var options = defaultLayerOptions;
+  var debugId = arguments.length <= 0 ? undefined : arguments[0];
+  if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'object') {
+    options = merge(defaultLayerOptions, arguments.length <= 0 ? undefined : arguments[0]);
+    debugId = arguments.length <= 1 ? undefined : arguments[1];
+  }
+  return [options, debugId];
+};
+function layer() {
+  var [options, debugId] = getLayerArgs(...arguments);
+  var name = generateIdentifier(debugId);
+  if (options.parent) {
+    name = "".concat(options.parent, ".").concat(name);
+  }
+  adapter_dist_vanillaExtractCssAdapter.appendCss({
+    type: 'layer',
+    name
+  }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
+  return name;
+}
+var layer$ = layer;
+function globalLayer() {
+  var [options, name] = getLayerArgs(...arguments);
+  if (options.parent) {
+    name = "".concat(options.parent, ".").concat(name);
+  }
+  adapter_dist_vanillaExtractCssAdapter.appendCss({
+    type: 'layer',
+    name
+  }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
+  return name;
+}
+var globalLayer$ = globalLayer;
+
+// createContainer is used for local scoping of CSS containers
 // For now it is mostly just an alias of generateIdentifier
-
 var createContainer = debugId => generateIdentifier(debugId);
+var createContainer$ = createContainer;
 
+var extract$ = t => {
+  if (typeof t === 'function') {
+    // @ts-expect-error
+    return t();
+  }
+  return t;
+};
+
 exports.assignVars = assignVars;
 exports.composeStyles = composeStyles;
 exports.createContainer = createContainer;
+exports.createContainer$ = createContainer$;
 exports.createGlobalTheme = createGlobalTheme;
+exports.createGlobalTheme$ = createGlobalTheme$;
 exports.createGlobalThemeContract = createGlobalThemeContract;
+exports.createGlobalThemeContract$ = createGlobalThemeContract$;
 exports.createTheme = createTheme;
+exports.createTheme$ = createTheme$;
 exports.createThemeContract = createThemeContract;
+exports.createThemeContract$ = createThemeContract$;
 exports.createVar = createVar;
+exports.createVar$ = createVar$;
+exports.extract$ = extract$;
 exports.fallbackVar = fallbackVar;
 exports.fontFace = fontFace;
+exports.fontFace$ = fontFace$;
 exports.generateIdentifier = generateIdentifier;
 exports.globalFontFace = globalFontFace;
+exports.globalFontFace$ = globalFontFace$;
 exports.globalKeyframes = globalKeyframes;
+exports.globalKeyframes$ = globalKeyframes$;
+exports.globalLayer = globalLayer;
+exports.globalLayer$ = globalLayer$;
 exports.globalStyle = globalStyle;
+exports.globalStyle$ = globalStyle$;
 exports.keyframes = keyframes;
+exports.keyframes$ = keyframes$;
+exports.layer = layer;
+exports.layer$ = layer$;
 exports.style = style;
+exports.style$ = style$;
 exports.styleVariants = styleVariants;
+exports.styleVariants$ = styleVariants$;

dist/vanilla-extract-css.esm.js

 import { injectStyles } from '../injectStyles/dist/vanilla-extract-css-injectStyles.esm.js';
-import { t as transformCss, _ as _objectSpread2, d as dudupeAndJoinClassList } from './transformCss-06fcad3d.esm.js';
+import { t as transformCss, _ as _objectSpread2, d as dudupeAndJoinClassList } from './transformCss-3d312857.esm.js';
 import { setAdapterIfNotSet, getIdentOption, appendCss, registerClassName, registerComposition, markCompositionUsed } from '../adapter/dist/vanilla-extract-css-adapter.esm.js';
@@ -10,3 +10,3 @@ import hash from '@emotion/hash';
 import chalk from 'chalk';
-import { _ as _taggedTemplateLiteral } from './taggedTemplateLiteral-b4c22b04.esm.js';
+import { _ as _taggedTemplateLiteral } from './taggedTemplateLiteral-10998315.esm.js';
 import outdent from 'outdent';
@@ -46,3 +46,2 @@ import deepmerge from 'deepmerge';
 };
-
 if (typeof window !== 'undefined') {
@@ -64,3 +63,2 @@ setAdapterIfNotSet(browserRuntimeAdapter);
   }
-
   subClass.prototype = Object.create(superClass && superClass.prototype, {
@@ -83,15 +81,10 @@ constructor: {
   };
-
   var _super = RegExp.prototype,
-      _groups = new WeakMap();
-
+    _groups = new WeakMap();
   function BabelRegExp(re, flags, groups) {
     var _this = new RegExp(re, flags);
-
     return _groups.set(_this, groups || _groups.get(re)), _setPrototypeOf(_this, BabelRegExp.prototype);
   }
-
   function buildGroups(result, re) {
     var g = _groups.get(re);
-
     return Object.keys(g).reduce(function (groups, name) {
@@ -101,3 +94,2 @@ var i = g[name];
         for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++;
-
         groups[name] = result[i[k]];
@@ -108,19 +100,20 @@ }
   }
-
   return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {
     var result = _super.exec.call(this, str);
-
-    return result && (result.groups = buildGroups(result, this)), result;
+    if (result) {
+      result.groups = buildGroups(result, this);
+      var indices = result.indices;
+      indices && (indices.groups = buildGroups(indices, this));
+    }
+    return result;
   }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) {
     if ("string" == typeof substitution) {
       var groups = _groups.get(this);
-
       return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) {
-        return "$" + groups[name];
+        var group = groups[name];
+        return "$" + (Array.isArray(group) ? group.join("$") : group);
       }));
     }
-
     if ("function" == typeof substitution) {
       var _this = this;
-
       return _super[Symbol.replace].call(this, str, function () {
@@ -131,3 +124,2 @@ var args = arguments;
     }
-
     return _super[Symbol.replace].call(this, str, substitution);
@@ -143,3 +135,2 @@ }, _wrapRegExp.apply(this, arguments);
   var parts = debugId ? [debugId.replace(/\s/g, '_')] : [];
-
   if (debugFileName) {
@@ -149,7 +140,6 @@ var {
     } = getFileScope();
-    var matches = filePath.match( /*#__PURE__*/_wrapRegExp(/((?:(?![\/\\])[\s\S])*)?[\/\\]?((?:(?![\/\\])[\s\S])*)\.css\.(ts|js|tsx|jsx|cjs|mjs)$/, {
+    var matches = filePath.match( /*#__PURE__*/_wrapRegExp(/([^\/\\]*)?[\/\\]?([^\/\\]*)\.css\.(ts|js|tsx|jsx|cjs|mjs)$/, {
       dir: 1,
       file: 2
     }));
-
     if (matches && matches.groups) {
@@ -163,6 +153,4 @@ var {
   }
-
   return parts.join('_');
 }
-
 function generateIdentifier(arg) {
@@ -174,5 +162,5 @@ var {
     debugId: arg
-  } : null), typeof arg === 'object' ? arg : null); // Convert ref count to base 36 for optimal hash lengths
+  } : null), typeof arg === 'object' ? arg : null);
 
-
+  // Convert ref count to base 36 for optimal hash lengths
   var refCount = getAndIncrementRefCounter().toString(36);
@@ -185,3 +173,2 @@ var {
   var identifier = "".concat(fileScopeHash).concat(refCount);
-
   if (getIdentOption() === 'debug') {
@@ -192,3 +179,2 @@ var devPrefix = getDevPrefix({
     });
-
     if (devPrefix) {
@@ -198,3 +184,2 @@ identifier = "".concat(devPrefix, "__").concat(identifier);
   }
-
   return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
@@ -204,3 +189,2 @@ }
 var normaliseObject = obj => walkObject(obj, () => '');
-
 function validateContract(contract, tokens) {
@@ -214,7 +198,5 @@ var theDiff = diff(normaliseObject(contract), normaliseObject(tokens));
 }
-
 function diffLine(value, nesting, type) {
   var whitespace = [...Array(nesting).keys()].map(() => '  ').join('');
   var line = "".concat(type ? type : ' ').concat(whitespace).concat(value);
-
   if (process.env.NODE_ENV !== 'test') {
@@ -224,3 +206,2 @@ if (type === '-') {
     }
-
     if (type === '+') {
@@ -230,20 +211,14 @@ return chalk.green(line);
   }
-
   return line;
 }
-
 function renderDiff(orig, diff) {
   var nesting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var lines = [];
-
   if (nesting === 0) {
     lines.push(diffLine('{', 0));
   }
-
   var innerNesting = nesting + 1;
   var keys = Object.keys(diff).sort();
-
   for (var key of keys) {
     var value = diff[key];
-
     if (!(key in orig)) {
@@ -259,7 +234,5 @@ lines.push(diffLine("".concat(key, ": ...,"), innerNesting, '+'));
   }
-
   if (nesting === 0) {
     lines.push(diffLine('}', 0));
   }
-
   return lines.join('\n');
@@ -277,9 +250,8 @@ }
 }
+var createVar$ = createVar;
 function fallbackVar() {
   var finalValue = '';
-
   for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
     values[_key] = arguments[_key];
   }
-
   values.reverse().forEach(value => {
@@ -292,3 +264,2 @@ if (finalValue === '') {
       }
-
       finalValue = value.replace(/\)$/, ", ".concat(finalValue, ")"));
@@ -305,7 +276,5 @@ }
   } = validateContract(varContract, tokens);
-
   if (!valid) {
     throw new Error("Tokens don't match contract.\n".concat(diffString));
   }
-
   walkObject(tokens, (value, path) => {
@@ -317,4 +286,2 @@ varSetters[get(varContract, path)] = String(value);
 function createThemeContract(tokens) {
-  // TS is giving type impossibly deep error here. Ignoring for now as this shouldn't affect consumers.
-  // @ts-expect-error
   return walkObject(tokens, (_value, path) => {
@@ -324,2 +291,3 @@ return createVar(path.join('-'));
 }
+var createThemeContract$ = createThemeContract;
 function createGlobalThemeContract(tokens, mapFn) {
@@ -329,3 +297,2 @@ return walkObject(tokens, (value, path) => {
     var varName = typeof rawVarName === 'string' ? rawVarName.replace(/^\-\-/, '') : null;
-
     if (typeof varName !== 'string' || varName !== cssesc(varName, {
@@ -336,6 +303,6 @@ isIdentifier: true
     }
-
     return "var(--".concat(varName, ")");
   });
 }
+var createGlobalThemeContract$ = createGlobalThemeContract;
 
@@ -353,3 +320,2 @@ function createGlobalTheme(selector, arg2, arg3) {
   }, getFileScope());
-
   if (shouldCreateVars) {
@@ -359,17 +325,17 @@ return themeVars;
 }
+var createGlobalTheme$ = createGlobalTheme;
 function createTheme(arg1, arg2, arg3) {
   var themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
-  registerClassName(themeClassName);
+  registerClassName(themeClassName, getFileScope());
   var vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
   return vars ? [themeClassName, vars] : themeClassName;
 }
+var createTheme$ = createTheme;
 
 var _templateObject;
-
 function composedStyle(rules, debugId) {
   var className = generateIdentifier(debugId);
-  registerClassName(className);
+  registerClassName(className, getFileScope());
   var classList = [];
   var styleRules = [];
-
   for (var rule of rules) {
@@ -382,5 +348,3 @@ if (typeof rule === 'string') {
   }
-
   var result = className;
-
   if (classList.length > 0) {
@@ -391,4 +355,3 @@ result = "".concat(className, " ").concat(dudupeAndJoinClassList(classList));
       classList: result
-    });
-
+    }, getFileScope());
     if (styleRules.length > 0) {
@@ -400,3 +363,2 @@ // If there are styles attached to this composition then it is
   }
-
   if (styleRules.length > 0) {
@@ -407,3 +369,2 @@ var _rule = deepmerge.all(styleRules, {
     });
-
     appendCss({
@@ -415,6 +376,4 @@ type: 'local',
   }
-
   return result;
 }
-
 function style(rule, debugId) {
@@ -424,5 +383,4 @@ if (Array.isArray(rule)) {
   }
-
   var className = generateIdentifier(debugId);
-  registerClassName(className);
+  registerClassName(className, getFileScope());
   appendCss({
@@ -435,13 +393,12 @@ type: 'local',
 }
+var style$ = style;
+
 /**
  * @deprecated The same functionality is now provided by the 'style' function when you pass it an array
  */
-
 function composeStyles() {
   var compose = hasFileScope() ? composedStyle : dudupeAndJoinClassList;
-
   for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
     classNames[_key] = arguments[_key];
   }
-
   return compose(classNames);
@@ -456,2 +413,3 @@ }
 }
+var globalStyle$ = globalStyle;
 function fontFace(rule, debugId) {
@@ -461,7 +419,5 @@ var fontFamily = "\"".concat(cssesc(generateIdentifier(debugId), {
   }), "\"");
-
   if ('fontFamily' in rule) {
     throw new Error(outdent(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          This function creates and returns a hashed font-family name, so the \"fontFamily\" property should not be provided.\n  \n          If you'd like to define a globally scoped custom font, you can use the \"globalFontFace\" function instead.\n        "]))));
   }
-
   appendCss({
@@ -475,2 +431,3 @@ type: 'fontFace',
 }
+var fontFace$ = fontFace;
 function globalFontFace(fontFamily, rule) {
@@ -484,2 +441,3 @@ appendCss({
 }
+var globalFontFace$ = globalFontFace;
 function keyframes(rule, debugId) {
@@ -496,2 +454,3 @@ var name = cssesc(generateIdentifier(debugId), {
 }
+var keyframes$ = keyframes;
 function globalKeyframes(name, rule) {
@@ -504,34 +463,74 @@ appendCss({
 }
+var globalKeyframes$ = globalKeyframes;
 function styleVariants() {
   if (typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'function') {
     var _data = arguments.length <= 0 ? undefined : arguments[0];
-
     var _mapData = arguments.length <= 1 ? undefined : arguments[1];
-
     var _debugId = arguments.length <= 2 ? undefined : arguments[2];
-
     var _classMap = {};
-
     for (var _key2 in _data) {
       _classMap[_key2] = style(_mapData(_data[_key2], _key2), _debugId ? "".concat(_debugId, "_").concat(_key2) : _key2);
     }
-
     return _classMap;
   }
-
   var styleMap = arguments.length <= 0 ? undefined : arguments[0];
   var debugId = arguments.length <= 1 ? undefined : arguments[1];
   var classMap = {};
-
   for (var _key3 in styleMap) {
     classMap[_key3] = style(styleMap[_key3], debugId ? "".concat(debugId, "_").concat(_key3) : _key3);
   }
-
   return classMap;
 }
+var styleVariants$ = styleVariants;
 
+var defaultLayerOptions = {};
+var merge = (obj1, obj2) => _objectSpread2(_objectSpread2({}, obj1), obj2);
+var getLayerArgs = function getLayerArgs() {
+  var options = defaultLayerOptions;
+  var debugId = arguments.length <= 0 ? undefined : arguments[0];
+  if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'object') {
+    options = merge(defaultLayerOptions, arguments.length <= 0 ? undefined : arguments[0]);
+    debugId = arguments.length <= 1 ? undefined : arguments[1];
+  }
+  return [options, debugId];
+};
+function layer() {
+  var [options, debugId] = getLayerArgs(...arguments);
+  var name = generateIdentifier(debugId);
+  if (options.parent) {
+    name = "".concat(options.parent, ".").concat(name);
+  }
+  appendCss({
+    type: 'layer',
+    name
+  }, getFileScope());
+  return name;
+}
+var layer$ = layer;
+function globalLayer() {
+  var [options, name] = getLayerArgs(...arguments);
+  if (options.parent) {
+    name = "".concat(options.parent, ".").concat(name);
+  }
+  appendCss({
+    type: 'layer',
+    name
+  }, getFileScope());
+  return name;
+}
+var globalLayer$ = globalLayer;
+
+// createContainer is used for local scoping of CSS containers
 // For now it is mostly just an alias of generateIdentifier
-
 var createContainer = debugId => generateIdentifier(debugId);
+var createContainer$ = createContainer;
 
-export { assignVars, composeStyles, createContainer, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, style, styleVariants };
+var extract$ = t => {
+  if (typeof t === 'function') {
+    // @ts-expect-error
+    return t();
+  }
+  return t;
+};
+
+export { assignVars, composeStyles, createContainer, createContainer$, createGlobalTheme, createGlobalTheme$, createGlobalThemeContract, createGlobalThemeContract$, createTheme, createTheme$, createThemeContract, createThemeContract$, createVar, createVar$, extract$, fallbackVar, fontFace, fontFace$, generateIdentifier, globalFontFace, globalFontFace$, globalKeyframes, globalKeyframes$, globalLayer, globalLayer$, globalStyle, globalStyle$, keyframes, keyframes$, layer, layer$, style, style$, styleVariants, styleVariants$ };

fileScope/dist/vanilla-extract-css-fileScope.browser.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var taggedTemplateLiteral = require('../../dist/taggedTemplateLiteral-c635af00.browser.cjs.js');
+var taggedTemplateLiteral = require('../../dist/taggedTemplateLiteral-00b821ff.browser.cjs.js');
 var outdent = require('outdent');
@@ -19,6 +19,8 @@ var adapter_dist_vanillaExtractCssAdapter = require('../../adapter/dist/vanilla-extract-css-adapter.browser.cjs.js');
   refCounter = 0;
-  fileScopes.unshift({
+  var fileScope = {
     filePath,
     packageName
-  });
+  };
+  fileScopes.unshift(fileScope);
+  adapter_dist_vanillaExtractCssAdapter.onBeginFileScope(fileScope);
 }
@@ -37,3 +39,2 @@ function endFileScope() {
   }
-
   return fileScopes[0];
@@ -40,0 +41,0 @@ }

fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js

@@ -1,4 +0,4 @@
-import { _ as _taggedTemplateLiteral } from '../../dist/taggedTemplateLiteral-2d2668f5.browser.esm.js';
+import { _ as _taggedTemplateLiteral } from '../../dist/taggedTemplateLiteral-8e47dbd7.browser.esm.js';
 import outdent from 'outdent';
-import { onEndFileScope } from '../../adapter/dist/vanilla-extract-css-adapter.browser.esm.js';
+import { onBeginFileScope, onEndFileScope } from '../../adapter/dist/vanilla-extract-css-adapter.browser.esm.js';
 
@@ -10,6 +10,8 @@ var _templateObject;
   refCounter = 0;
-  fileScopes.unshift({
+  var fileScope = {
     filePath,
     packageName
-  });
+  };
+  fileScopes.unshift(fileScope);
+  onBeginFileScope(fileScope);
 }
@@ -28,3 +30,2 @@ function endFileScope() {
   }
-
   return fileScopes[0];
@@ -31,0 +32,0 @@ }

fileScope/dist/vanilla-extract-css-fileScope.cjs.d.ts

@@ -1,2 +0,2 @@
-declare type FileScope = {
+type FileScope = {
     packageName?: string;
@@ -3,0 +3,0 @@ filePath: string;

fileScope/dist/vanilla-extract-css-fileScope.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var taggedTemplateLiteral = require('../../dist/taggedTemplateLiteral-975613a0.cjs.dev.js');
+var taggedTemplateLiteral = require('../../dist/taggedTemplateLiteral-4fcaa261.cjs.dev.js');
 var outdent = require('outdent');
@@ -19,6 +19,8 @@ var adapter_dist_vanillaExtractCssAdapter = require('../../adapter/dist/vanilla-extract-css-adapter.cjs.dev.js');
   refCounter = 0;
-  fileScopes.unshift({
+  var fileScope = {
     filePath,
     packageName
-  });
+  };
+  fileScopes.unshift(fileScope);
+  adapter_dist_vanillaExtractCssAdapter.onBeginFileScope(fileScope);
 }
@@ -37,3 +39,2 @@ function endFileScope() {
   }
-
   return fileScopes[0];
@@ -40,0 +41,0 @@ }

fileScope/dist/vanilla-extract-css-fileScope.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var taggedTemplateLiteral = require('../../dist/taggedTemplateLiteral-bd61be83.cjs.prod.js');
+var taggedTemplateLiteral = require('../../dist/taggedTemplateLiteral-0bfb2e96.cjs.prod.js');
 var outdent = require('outdent');
@@ -19,6 +19,8 @@ var adapter_dist_vanillaExtractCssAdapter = require('../../adapter/dist/vanilla-extract-css-adapter.cjs.prod.js');
   refCounter = 0;
-  fileScopes.unshift({
+  var fileScope = {
     filePath,
     packageName
-  });
+  };
+  fileScopes.unshift(fileScope);
+  adapter_dist_vanillaExtractCssAdapter.onBeginFileScope(fileScope);
 }
@@ -37,3 +39,2 @@ function endFileScope() {
   }
-
   return fileScopes[0];
@@ -40,0 +41,0 @@ }

fileScope/dist/vanilla-extract-css-fileScope.esm.js

@@ -1,4 +0,4 @@
-import { _ as _taggedTemplateLiteral } from '../../dist/taggedTemplateLiteral-b4c22b04.esm.js';
+import { _ as _taggedTemplateLiteral } from '../../dist/taggedTemplateLiteral-10998315.esm.js';
 import outdent from 'outdent';
-import { onEndFileScope } from '../../adapter/dist/vanilla-extract-css-adapter.esm.js';
+import { onBeginFileScope, onEndFileScope } from '../../adapter/dist/vanilla-extract-css-adapter.esm.js';
 
@@ -10,6 +10,8 @@ var _templateObject;
   refCounter = 0;
-  fileScopes.unshift({
+  var fileScope = {
     filePath,
     packageName
-  });
+  };
+  fileScopes.unshift(fileScope);
+  onBeginFileScope(fileScope);
 }
@@ -28,3 +30,2 @@ function endFileScope() {
   }
-
   return fileScopes[0];
@@ -31,0 +32,0 @@ }

functionSerializer/dist/vanilla-extract-css-functionSerializer.cjs.d.ts

@@ -1,3 +0,3 @@
-declare type Primitive = string | number | boolean | null | undefined;
-declare type Serializable = {
+type Primitive = string | number | boolean | null | undefined;
+type Serializable = {
     [Key in string | number]: Primitive | Serializable;
@@ -4,0 +4,0 @@ } | ReadonlyArray<Primitive | Serializable>;

injectStyles/dist/vanilla-extract-css-injectStyles.browser.cjs.js

@@ -13,10 +13,7 @@ 'use strict';
   var stylesheet = stylesheets[fileScopeId];
-
   if (!stylesheet) {
     var styleEl = document.createElement('style');
-
     if (fileScope.packageName) {
       styleEl.setAttribute('data-package', fileScope.packageName);
     }
-
     styleEl.setAttribute('data-file', fileScope.filePath);
@@ -27,3 +24,2 @@ styleEl.setAttribute('type', 'text/css');
   }
-
   stylesheet.innerHTML = css;
@@ -30,0 +26,0 @@ };

injectStyles/dist/vanilla-extract-css-injectStyles.browser.esm.js

@@ -9,10 +9,7 @@ var stylesheets = {};
   var stylesheet = stylesheets[fileScopeId];
-
   if (!stylesheet) {
     var styleEl = document.createElement('style');
-
     if (fileScope.packageName) {
       styleEl.setAttribute('data-package', fileScope.packageName);
     }
-
     styleEl.setAttribute('data-file', fileScope.filePath);
@@ -23,3 +20,2 @@ styleEl.setAttribute('type', 'text/css');
   }
-
   stylesheet.innerHTML = css;
@@ -26,0 +22,0 @@ };

injectStyles/dist/vanilla-extract-css-injectStyles.cjs.d.ts

@@ -1,2 +0,2 @@
-declare type FileScope = {
+type FileScope = {
     packageName?: string;
@@ -3,0 +3,0 @@ filePath: string;

injectStyles/dist/vanilla-extract-css-injectStyles.cjs.dev.js

@@ -13,10 +13,7 @@ 'use strict';
   var stylesheet = stylesheets[fileScopeId];
-
   if (!stylesheet) {
     var styleEl = document.createElement('style');
-
     if (fileScope.packageName) {
       styleEl.setAttribute('data-package', fileScope.packageName);
     }
-
     styleEl.setAttribute('data-file', fileScope.filePath);
@@ -27,3 +24,2 @@ styleEl.setAttribute('type', 'text/css');
   }
-
   stylesheet.innerHTML = css;
@@ -30,0 +26,0 @@ };

injectStyles/dist/vanilla-extract-css-injectStyles.cjs.prod.js

@@ -13,10 +13,7 @@ 'use strict';
   var stylesheet = stylesheets[fileScopeId];
-
   if (!stylesheet) {
     var styleEl = document.createElement('style');
-
     if (fileScope.packageName) {
       styleEl.setAttribute('data-package', fileScope.packageName);
     }
-
     styleEl.setAttribute('data-file', fileScope.filePath);
@@ -27,3 +24,2 @@ styleEl.setAttribute('type', 'text/css');
   }
-
   stylesheet.innerHTML = css;
@@ -30,0 +26,0 @@ };

injectStyles/dist/vanilla-extract-css-injectStyles.esm.js

@@ -9,10 +9,7 @@ var stylesheets = {};
   var stylesheet = stylesheets[fileScopeId];
-
   if (!stylesheet) {
     var styleEl = document.createElement('style');
-
     if (fileScope.packageName) {
       styleEl.setAttribute('data-package', fileScope.packageName);
     }
-
     styleEl.setAttribute('data-file', fileScope.filePath);
@@ -23,3 +20,2 @@ styleEl.setAttribute('type', 'text/css');
   }
-
   stylesheet.innerHTML = css;
@@ -26,0 +22,0 @@ };

package.json

 {
   "name": "@vanilla-extract/css",
-  "version": "0.0.0-dts-bundle-202283041239",
+  "version": "0.0.0-experimental-macros-20236175227",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
@@ -110,3 +110,3 @@ "sideEffects": true,
   "dependencies": {
-    "@emotion/hash": "^0.8.0",
+    "@emotion/hash": "^0.9.0",
     "@vanilla-extract/private": "^1.0.3",
@@ -118,3 +118,3 @@ "ahocorasick": "1.0.2",
     "csstype": "^3.0.7",
-    "deep-object-diff": "^1.1.0",
+    "deep-object-diff": "^1.1.9",
     "deepmerge": "^4.2.2",
@@ -121,0 +121,0 @@ "media-query-parser": "^2.0.2",

recipe/dist/vanilla-extract-css-recipe.browser.cjs.js

@@ -10,5 +10,4 @@ 'use strict';
  */
-
 var addRecipe = functionSerializer_dist_vanillaExtractCssFunctionSerializer.addFunctionSerializer;
 
 exports.addRecipe = addRecipe;

recipe/dist/vanilla-extract-css-recipe.browser.esm.js

@@ -6,5 +6,4 @@ import { addFunctionSerializer } from '../../functionSerializer/dist/vanilla-extract-css-functionSerializer.browser.esm.js';
  */
-
 var addRecipe = addFunctionSerializer;
 
 export { addRecipe };

recipe/dist/vanilla-extract-css-recipe.cjs.d.ts

@@ -1,3 +0,3 @@
-declare type Primitive = string | number | boolean | null | undefined;
-declare type Serializable = {
+type Primitive = string | number | boolean | null | undefined;
+type Serializable = {
     [Key in string | number]: Primitive | Serializable;
@@ -4,0 +4,0 @@ } | ReadonlyArray<Primitive | Serializable>;

recipe/dist/vanilla-extract-css-recipe.cjs.dev.js

@@ -10,5 +10,4 @@ 'use strict';
  */
-
 var addRecipe = functionSerializer_dist_vanillaExtractCssFunctionSerializer.addFunctionSerializer;
 
 exports.addRecipe = addRecipe;

recipe/dist/vanilla-extract-css-recipe.cjs.prod.js

@@ -10,5 +10,4 @@ 'use strict';
  */
-
 var addRecipe = functionSerializer_dist_vanillaExtractCssFunctionSerializer.addFunctionSerializer;
 
 exports.addRecipe = addRecipe;

recipe/dist/vanilla-extract-css-recipe.esm.js

@@ -6,5 +6,4 @@ import { addFunctionSerializer } from '../../functionSerializer/dist/vanilla-extract-css-functionSerializer.esm.js';
  */
-
 var addRecipe = addFunctionSerializer;
 
 export { addRecipe };

transformCss/dist/vanilla-extract-css-transformCss.browser.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var transformCss_dist_vanillaExtractCssTransformCss = require('../../dist/transformCss-931f0e0d.browser.cjs.js');
+var transformCss_dist_vanillaExtractCssTransformCss = require('../../dist/transformCss-cf6340cf.browser.cjs.js');
 require('@vanilla-extract/private');
@@ -11,3 +11,3 @@ require('cssesc');
 require('../../adapter/dist/vanilla-extract-css-adapter.browser.cjs.js');
-require('../../dist/taggedTemplateLiteral-c635af00.browser.cjs.js');
+require('../../dist/taggedTemplateLiteral-00b821ff.browser.cjs.js');
 require('css-what');
@@ -14,0 +14,0 @@ require('outdent');

transformCss/dist/vanilla-extract-css-transformCss.browser.esm.js

@@ -1,2 +0,2 @@
-export { t as transformCss } from '../../dist/transformCss-a8d6e581.browser.esm.js';
+export { t as transformCss } from '../../dist/transformCss-3a046e4b.browser.esm.js';
 import '@vanilla-extract/private';
@@ -6,5 +6,5 @@ import 'cssesc';
 import '../../adapter/dist/vanilla-extract-css-adapter.browser.esm.js';
-import '../../dist/taggedTemplateLiteral-2d2668f5.browser.esm.js';
+import '../../dist/taggedTemplateLiteral-8e47dbd7.browser.esm.js';
 import 'css-what';
 import 'outdent';
 import 'media-query-parser';

transformCss/dist/vanilla-extract-css-transformCss.cjs.d.ts

 import { AtRule, Properties } from 'csstype';
 
-declare module 'ahocorasick' {
-  export default class Ahocorasick {
-    constructor(searchTerms: Array<string>);
+type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number})`;
 
-    search(input: string): Array<[endIndex: number, matches: Array<string>]>;
-  }
-}
-
-declare type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number})`;
-
 declare const simplePseudoMap: {
@@ -110,3 +102,3 @@ readonly ':-moz-any-link': true;
 };
-declare type SimplePseudos = keyof typeof simplePseudoMap;
+type SimplePseudos = keyof typeof simplePseudoMap;
 
@@ -118,4 +110,4 @@ interface ContainerProperties {
 }
-declare type CSSTypeProperties = Properties<number | (string & {})> & ContainerProperties;
-declare type CSSProperties = {
+type CSSTypeProperties = Properties<number | (string & {})> & ContainerProperties;
+type CSSProperties = {
     [Property in keyof CSSTypeProperties]: CSSTypeProperties[Property] | CSSVarFunction | Array<CSSVarFunction | CSSTypeProperties[Property]>;
@@ -126,3 +118,3 @@ };
 }
-declare type CSSPropertiesWithVars = CSSProperties & {
+type CSSPropertiesWithVars = CSSProperties & {
     vars?: {
@@ -132,22 +124,18 @@ [key: string]: string;
 };
-declare type PseudoProperties = {
+type PseudoProperties = {
     [key in SimplePseudos]?: CSSPropertiesWithVars;
 };
-declare type CSSPropertiesAndPseudos = CSSPropertiesWithVars & PseudoProperties;
-interface MediaQueries<StyleType> {
-    '@media'?: {
-        [query: string]: StyleType;
+type CSSPropertiesAndPseudos = CSSPropertiesWithVars & PseudoProperties;
+type Query<Key extends string, StyleType> = {
+    [key in Key]?: {
+        [query: string]: Omit<StyleType, Key>;
     };
+};
+type MediaQueries<StyleType> = Query<'@media', StyleType>;
+type FeatureQueries<StyleType> = Query<'@supports', StyleType>;
+type ContainerQueries<StyleType> = Query<'@container', StyleType>;
+type Layers<StyleType> = Query<'@layer', StyleType>;
+interface AllQueries<StyleType> extends MediaQueries<StyleType & AllQueries<StyleType>>, FeatureQueries<StyleType & AllQueries<StyleType>>, ContainerQueries<StyleType & AllQueries<StyleType>>, Layers<StyleType & AllQueries<StyleType>> {
 }
-interface FeatureQueries<StyleType> {
-    '@supports'?: {
-        [query: string]: StyleType;
-    };
-}
-interface ContainerQueries<StyleType> {
-    '@container'?: {
-        [query: string]: StyleType;
-    };
-}
-declare type WithQueries<StyleType> = MediaQueries<StyleType & FeatureQueries<StyleType & ContainerQueries<StyleType>> & ContainerQueries<StyleType & FeatureQueries<StyleType>>> & FeatureQueries<StyleType & MediaQueries<StyleType & ContainerQueries<StyleType>> & ContainerQueries<StyleType & MediaQueries<StyleType>>> & ContainerQueries<StyleType & MediaQueries<StyleType & FeatureQueries<StyleType>> & FeatureQueries<StyleType & MediaQueries<StyleType>>>;
+type WithQueries<StyleType> = StyleType & AllQueries<StyleType>;
 interface SelectorMap {
@@ -159,6 +147,6 @@ [selector: string]: CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
 }
-declare type StyleRule = StyleWithSelectors & WithQueries<StyleWithSelectors>;
-declare type GlobalStyleRule = CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
-declare type GlobalFontFaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>;
-declare type CSSStyleBlock = {
+type StyleRule = StyleWithSelectors & WithQueries<StyleWithSelectors>;
+type GlobalStyleRule = CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
+type GlobalFontFaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>;
+type CSSStyleBlock = {
     type: 'local';
@@ -168,7 +156,7 @@ selector: string;
 };
-declare type CSSFontFaceBlock = {
+type CSSFontFaceBlock = {
     type: 'fontFace';
     rule: GlobalFontFaceRule;
 };
-declare type CSSKeyframesBlock = {
+type CSSKeyframesBlock = {
     type: 'keyframes';
@@ -178,3 +166,3 @@ name: string;
 };
-declare type CSSSelectorBlock = {
+type CSSSelectorBlock = {
     type: 'selector' | 'global';
@@ -184,3 +172,7 @@ selector: string;
 };
-declare type CSS = CSSStyleBlock | CSSFontFaceBlock | CSSKeyframesBlock | CSSSelectorBlock;
+type CSSLayerDeclaration = {
+    type: 'layer';
+    name: string;
+};
+type CSS = CSSStyleBlock | CSSFontFaceBlock | CSSKeyframesBlock | CSSSelectorBlock | CSSLayerDeclaration;
 interface Composition {
@@ -187,0 +179,0 @@ identifier: string;

transformCss/dist/vanilla-extract-css-transformCss.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var transformCss_dist_vanillaExtractCssTransformCss = require('../../dist/transformCss-1c113184.cjs.dev.js');
+var transformCss_dist_vanillaExtractCssTransformCss = require('../../dist/transformCss-072727cc.cjs.dev.js');
 require('@vanilla-extract/private');
@@ -11,3 +11,3 @@ require('cssesc');
 require('../../adapter/dist/vanilla-extract-css-adapter.cjs.dev.js');
-require('../../dist/taggedTemplateLiteral-975613a0.cjs.dev.js');
+require('../../dist/taggedTemplateLiteral-4fcaa261.cjs.dev.js');
 require('css-what');
@@ -14,0 +14,0 @@ require('outdent');

transformCss/dist/vanilla-extract-css-transformCss.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var transformCss_dist_vanillaExtractCssTransformCss = require('../../dist/transformCss-3f666075.cjs.prod.js');
+var transformCss_dist_vanillaExtractCssTransformCss = require('../../dist/transformCss-27759e6d.cjs.prod.js');
 require('@vanilla-extract/private');
@@ -11,3 +11,3 @@ require('cssesc');
 require('../../adapter/dist/vanilla-extract-css-adapter.cjs.prod.js');
-require('../../dist/taggedTemplateLiteral-bd61be83.cjs.prod.js');
+require('../../dist/taggedTemplateLiteral-0bfb2e96.cjs.prod.js');
 require('css-what');
@@ -14,0 +14,0 @@ require('outdent');

transformCss/dist/vanilla-extract-css-transformCss.esm.js

@@ -1,2 +0,2 @@
-export { t as transformCss } from '../../dist/transformCss-06fcad3d.esm.js';
+export { t as transformCss } from '../../dist/transformCss-3d312857.esm.js';
 import '@vanilla-extract/private';
@@ -6,5 +6,5 @@ import 'cssesc';
 import '../../adapter/dist/vanilla-extract-css-adapter.esm.js';
-import '../../dist/taggedTemplateLiteral-b4c22b04.esm.js';
+import '../../dist/taggedTemplateLiteral-10998315.esm.js';
 import 'css-what';
 import 'outdent';
 import 'media-query-parser';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

326902

increased by11.4%

Lines of code

8553

increased by11.5%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@emotion/hash@0.9.2(transitive)

• - Removed@emotion/hash@0.8.0(transitive)

• Updated@emotion/hash@^0.9.0

• Updateddeep-object-diff@^1.1.9