@vanilla-extract/css - npm Package Compare versions

Comparing version 0.0.0-filescope-urls-202283015831 to 0.0.0-fix-vite-plugin-frameworks-20240428030551

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

@@ -1,1 +0,231 @@
-export * from "../../dist/declarations/src/adapter";
+import { AtRule, Properties } from 'csstype';
+
+type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number})`;
+
+declare const simplePseudoMap: {
+    readonly ':-moz-any-link': true;
+    readonly ':-moz-full-screen': true;
+    readonly ':-moz-placeholder': true;
+    readonly ':-moz-read-only': true;
+    readonly ':-moz-read-write': true;
+    readonly ':-ms-fullscreen': true;
+    readonly ':-ms-input-placeholder': true;
+    readonly ':-webkit-any-link': true;
+    readonly ':-webkit-full-screen': true;
+    readonly '::-moz-color-swatch': true;
+    readonly '::-moz-list-bullet': true;
+    readonly '::-moz-list-number': true;
+    readonly '::-moz-page-sequence': true;
+    readonly '::-moz-page': true;
+    readonly '::-moz-placeholder': true;
+    readonly '::-moz-progress-bar': true;
+    readonly '::-moz-range-progress': true;
+    readonly '::-moz-range-thumb': true;
+    readonly '::-moz-range-track': true;
+    readonly '::-moz-scrolled-page-sequence': true;
+    readonly '::-moz-selection': true;
+    readonly '::-ms-backdrop': true;
+    readonly '::-ms-browse': true;
+    readonly '::-ms-check': true;
+    readonly '::-ms-clear': true;
+    readonly '::-ms-fill-lower': true;
+    readonly '::-ms-fill-upper': true;
+    readonly '::-ms-fill': true;
+    readonly '::-ms-reveal': true;
+    readonly '::-ms-thumb': true;
+    readonly '::-ms-ticks-after': true;
+    readonly '::-ms-ticks-before': true;
+    readonly '::-ms-tooltip': true;
+    readonly '::-ms-track': true;
+    readonly '::-ms-value': true;
+    readonly '::-webkit-backdrop': true;
+    readonly '::-webkit-inner-spin-button': true;
+    readonly '::-webkit-input-placeholder': true;
+    readonly '::-webkit-meter-bar': true;
+    readonly '::-webkit-meter-even-less-good-value': true;
+    readonly '::-webkit-meter-inner-element': true;
+    readonly '::-webkit-meter-optimum-value': true;
+    readonly '::-webkit-meter-suboptimum-value': true;
+    readonly '::-webkit-outer-spin-button': true;
+    readonly '::-webkit-progress-bar': true;
+    readonly '::-webkit-progress-inner-element': true;
+    readonly '::-webkit-progress-inner-value': true;
+    readonly '::-webkit-progress-value': true;
+    readonly '::-webkit-resizer': true;
+    readonly '::-webkit-scrollbar-button': true;
+    readonly '::-webkit-scrollbar-corner': true;
+    readonly '::-webkit-scrollbar-thumb': true;
+    readonly '::-webkit-scrollbar-track-piece': true;
+    readonly '::-webkit-scrollbar-track': true;
+    readonly '::-webkit-scrollbar': true;
+    readonly '::-webkit-search-cancel-button': true;
+    readonly '::-webkit-search-results-button': true;
+    readonly '::-webkit-slider-runnable-track': true;
+    readonly '::-webkit-slider-thumb': true;
+    readonly '::after': true;
+    readonly '::backdrop': true;
+    readonly '::before': true;
+    readonly '::cue': true;
+    readonly '::file-selector-button': true;
+    readonly '::first-letter': true;
+    readonly '::first-line': true;
+    readonly '::grammar-error': true;
+    readonly '::marker': true;
+    readonly '::placeholder': true;
+    readonly '::selection': true;
+    readonly '::spelling-error': true;
+    readonly '::target-text': true;
+    readonly '::view-transition-group': true;
+    readonly '::view-transition-image-pair': true;
+    readonly '::view-transition-new': true;
+    readonly '::view-transition-old': true;
+    readonly '::view-transition': true;
+    readonly ':active': true;
+    readonly ':after': true;
+    readonly ':any-link': true;
+    readonly ':before': true;
+    readonly ':blank': true;
+    readonly ':checked': true;
+    readonly ':default': true;
+    readonly ':defined': true;
+    readonly ':disabled': true;
+    readonly ':empty': true;
+    readonly ':enabled': true;
+    readonly ':first-child': true;
+    readonly ':first-letter': true;
+    readonly ':first-line': true;
+    readonly ':first-of-type': true;
+    readonly ':first': true;
+    readonly ':focus-visible': true;
+    readonly ':focus-within': true;
+    readonly ':focus': true;
+    readonly ':fullscreen': true;
+    readonly ':hover': true;
+    readonly ':in-range': true;
+    readonly ':indeterminate': true;
+    readonly ':invalid': true;
+    readonly ':last-child': true;
+    readonly ':last-of-type': true;
+    readonly ':left': true;
+    readonly ':link': true;
+    readonly ':only-child': true;
+    readonly ':only-of-type': true;
+    readonly ':optional': true;
+    readonly ':out-of-range': true;
+    readonly ':placeholder-shown': true;
+    readonly ':read-only': true;
+    readonly ':read-write': true;
+    readonly ':required': true;
+    readonly ':right': true;
+    readonly ':root': true;
+    readonly ':scope': true;
+    readonly ':target': true;
+    readonly ':valid': true;
+    readonly ':visited': true;
+};
+type SimplePseudos = keyof typeof simplePseudoMap;
+
+interface ContainerProperties {
+    container?: string;
+    containerType?: 'size' | 'inline-size' | (string & {});
+    containerName?: string;
+}
+type CSSTypeProperties = Properties<number | (string & {})> & ContainerProperties;
+type CSSProperties = {
+    [Property in keyof CSSTypeProperties]: CSSTypeProperties[Property] | CSSVarFunction | Array<CSSVarFunction | CSSTypeProperties[Property]>;
+};
+interface CSSKeyframes {
+    [time: string]: CSSProperties;
+}
+type CSSPropertiesWithVars = CSSProperties & {
+    vars?: {
+        [key: string]: string;
+    };
+};
+type PseudoProperties = {
+    [key in SimplePseudos]?: CSSPropertiesWithVars;
+};
+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>> {
+}
+type WithQueries<StyleType> = StyleType & AllQueries<StyleType>;
+interface SelectorMap {
+    [selector: string]: CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
+}
+interface StyleWithSelectors extends CSSPropertiesAndPseudos {
+    selectors?: SelectorMap;
+}
+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';
+    selector: string;
+    rule: StyleRule;
+};
+type CSSFontFaceBlock = {
+    type: 'fontFace';
+    rule: GlobalFontFaceRule;
+};
+type CSSKeyframesBlock = {
+    type: 'keyframes';
+    name: string;
+    rule: CSSKeyframes;
+};
+type CSSSelectorBlock = {
+    type: 'selector' | 'global';
+    selector: string;
+    rule: GlobalStyleRule;
+};
+type CSSLayerDeclaration = {
+    type: 'layer';
+    name: string;
+};
+type CSS = CSSStyleBlock | CSSFontFaceBlock | CSSKeyframesBlock | CSSSelectorBlock | CSSLayerDeclaration;
+type FileScope = {
+    packageName?: string;
+    filePath: string;
+};
+interface Composition {
+    identifier: string;
+    classList: string;
+}
+type CustomIdentFunction = (params: {
+    hash: string;
+    filePath: string;
+    debugId?: string;
+    packageName?: string;
+}) => string;
+type IdentOption = 'short' | 'debug' | CustomIdentFunction;
+interface Adapter {
+    appendCss: (css: CSS, fileScope: FileScope) => 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 const mockAdapter: Adapter;
+declare const setAdapterIfNotSet: (newAdapter: Adapter) => void;
+declare const setAdapter: (newAdapter: Adapter) => void;
+declare const removeAdapter: () => void;
+declare const appendCss: Adapter['appendCss'];
+declare const registerClassName: Adapter['registerClassName'];
+declare const registerComposition: Adapter['registerComposition'];
+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, 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 };

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

@@ -1,1 +0,1 @@
-export * from "../../dist/declarations/src/disableRuntimeStyles";
+

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-1b35689a.browser.cjs.js');
 var adapter_dist_vanillaExtractCssAdapter = require('../adapter/dist/vanilla-extract-css-adapter.browser.cjs.js');
@@ -15,6 +15,6 @@ 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');
 var deepmerge = require('deepmerge');
-require('ahocorasick');
+require('modern-ahocorasick');
 require('css-what');
@@ -59,3 +59,2 @@ require('media-query-parser');
 };
-
 {
@@ -77,3 +76,2 @@ adapter_dist_vanillaExtractCssAdapter.setAdapterIfNotSet(browserRuntimeAdapter);
   }
-
   subClass.prototype = Object.create(superClass && superClass.prototype, {
@@ -93,52 +91,46 @@ constructor: {
 function _wrapRegExp() {
-  _wrapRegExp = function (re, groups) {
-    return new BabelRegExp(re, void 0, groups);
+  _wrapRegExp = function (e, r) {
+    return new BabelRegExp(e, void 0, r);
   };
-
-  var _super = RegExp.prototype,
-      _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);
+  var e = RegExp.prototype,
+    r = new WeakMap();
+  function BabelRegExp(e, t, p) {
+    var o = new RegExp(e, t);
+    return r.set(o, p || r.get(e)), _setPrototypeOf(o, BabelRegExp.prototype);
   }
-
-  function buildGroups(result, re) {
-    var g = _groups.get(re);
-
-    return Object.keys(g).reduce(function (groups, name) {
-      var i = g[name];
-      if ("number" == typeof i) groups[name] = result[i];else {
-        for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++;
-
-        groups[name] = result[i[k]];
+  function buildGroups(e, t) {
+    var p = r.get(t);
+    return Object.keys(p).reduce(function (r, t) {
+      var o = p[t];
+      if ("number" == typeof o) r[t] = e[o];else {
+        for (var i = 0; void 0 === e[o[i]] && i + 1 < o.length;) i++;
+        r[t] = e[o[i]];
       }
-      return groups;
+      return r;
     }, Object.create(null));
   }
-
-  return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {
-    var result = _super.exec.call(this, str);
-
-    return result && (result.groups = buildGroups(result, this)), 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];
+  return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (r) {
+    var t = e.exec.call(this, r);
+    if (t) {
+      t.groups = buildGroups(t, this);
+      var p = t.indices;
+      p && (p.groups = buildGroups(p, this));
+    }
+    return t;
+  }, BabelRegExp.prototype[Symbol.replace] = function (t, p) {
+    if ("string" == typeof p) {
+      var o = r.get(this);
+      return e[Symbol.replace].call(this, t, p.replace(/\$<([^>]+)>/g, function (e, r) {
+        var t = o[r];
+        return "$" + (Array.isArray(t) ? t.join("$") : t);
       }));
     }
-
-    if ("function" == typeof substitution) {
-      var _this = this;
-
-      return _super[Symbol.replace].call(this, str, function () {
-        var args = arguments;
-        return "object" != typeof args[args.length - 1] && (args = [].slice.call(args)).push(buildGroups(args, _this)), substitution.apply(this, args);
+    if ("function" == typeof p) {
+      var i = this;
+      return e[Symbol.replace].call(this, t, function () {
+        var e = arguments;
+        return "object" != typeof e[e.length - 1] && (e = [].slice.call(e)).push(buildGroups(e, i)), p.apply(this, e);
       });
     }
-
-    return _super[Symbol.replace].call(this, str, substitution);
+    return e[Symbol.replace].call(this, t, p);
   }, _wrapRegExp.apply(this, arguments);
@@ -153,3 +145,2 @@ }
   var parts = debugId ? [debugId.replace(/\s/g, '_')] : [];
-
   if (debugFileName) {
@@ -159,7 +150,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) {
@@ -173,7 +163,9 @@ var {
   }
-
   return parts.join('_');
 }
-
+function normalizeIdentifier(identifier) {
+  return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
+}
 function generateIdentifier(arg) {
+  var identOption = adapter_dist_vanillaExtractCssAdapter.getIdentOption();
   var {
@@ -184,5 +176,5 @@ debugId,
     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);
@@ -195,4 +187,3 @@ var {
   var identifier = "".concat(fileScopeHash).concat(refCount);
-
-  if (adapter_dist_vanillaExtractCssAdapter.getIdentOption() === 'debug') {
+  if (identOption === 'debug') {
     var devPrefix = getDevPrefix({
@@ -202,13 +193,23 @@ debugId,
     });
-
     if (devPrefix) {
       identifier = "".concat(devPrefix, "__").concat(identifier);
     }
+    return normalizeIdentifier(identifier);
   }
-
-  return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
+  if (typeof identOption === 'function') {
+    identifier = identOption({
+      hash: identifier,
+      debugId,
+      filePath,
+      packageName
+    });
+    if (!identifier.match(/^[A-Z_][0-9A-Z_-]+$/i)) {
+      throw new Error("Identifier function returned invalid indentifier: \"".concat(identifier, "\""));
+    }
+    return identifier;
+  }
+  return normalizeIdentifier(identifier);
 }
 
 var normaliseObject = obj => _private.walkObject(obj, () => '');
-
 function validateContract(contract, tokens) {
@@ -222,7 +223,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') {
@@ -232,3 +231,2 @@ if (type === '-') {
     }
-
     if (type === '+') {
@@ -238,20 +236,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)) {
@@ -267,7 +259,5 @@ lines.push(diffLine("".concat(key, ": ...,"), innerNesting, '+'));
   }
-
   if (nesting === 0) {
     lines.push(diffLine('}', 0));
   }
-
   return lines.join('\n');
@@ -287,7 +277,5 @@ }
   var finalValue = '';
-
   for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
     values[_key] = arguments[_key];
   }
-
   values.reverse().forEach(value => {
@@ -300,3 +288,2 @@ if (finalValue === '') {
       }
-
       finalValue = value.replace(/\)$/, ", ".concat(finalValue, ")"));
@@ -313,7 +300,5 @@ }
   } = validateContract(varContract, tokens);
-
   if (!valid) {
     throw new Error("Tokens don't match contract.\n".concat(diffString));
   }
-
   _private.walkObject(tokens, (value, path) => {
@@ -325,4 +310,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) => {
@@ -336,3 +319,2 @@ return createVar(path.join('-'));
     var varName = typeof rawVarName === 'string' ? rawVarName.replace(/^\-\-/, '') : null;
-
     if (typeof varName !== 'string' || varName !== cssesc__default["default"](varName, {
@@ -343,3 +325,2 @@ isIdentifier: true
     }
-
     return "var(--".concat(varName, ")");
@@ -360,3 +341,2 @@ });
   }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
-
   if (shouldCreateVars) {
@@ -368,3 +348,3 @@ return themeVars;
   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);
@@ -375,9 +355,7 @@ return vars ? [themeClassName, vars] : themeClassName;
 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) {
@@ -390,5 +368,3 @@ if (typeof rule === 'string') {
   }
-
   var result = className;
-
   if (classList.length > 0) {
@@ -399,4 +375,3 @@ result = "".concat(className, " ").concat(transformCss_dist_vanillaExtractCssTransformCss.dudupeAndJoinClassList(classList));
       classList: result
-    });
-
+    }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
     if (styleRules.length > 0) {
@@ -408,3 +383,2 @@ // If there are styles attached to this composition then it is
   }
-
   if (styleRules.length > 0) {
@@ -415,3 +389,2 @@ var _rule = deepmerge__default["default"].all(styleRules, {
     });
-
     adapter_dist_vanillaExtractCssAdapter.appendCss({
@@ -423,6 +396,4 @@ type: 'local',
   }
-
   return result;
 }
-
 function style(rule, debugId) {
@@ -432,5 +403,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({
@@ -443,13 +413,11 @@ type: 'local',
 }
+
 /**
  * @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);
@@ -468,22 +436,26 @@ }
   }), "\"");
-
-  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        "]))));
+  var rules = Array.isArray(rule) ? rule : [rule];
+  for (var singleRule of rules) {
+    if ('fontFamily' in singleRule) {
+      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({
+      type: 'fontFace',
+      rule: transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, singleRule), {}, {
+        fontFamily
+      })
+    }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   }
-
-  adapter_dist_vanillaExtractCssAdapter.appendCss({
-    type: 'fontFace',
-    rule: transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, rule), {}, {
-      fontFamily
-    })
-  }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   return fontFamily;
 }
 function globalFontFace(fontFamily, rule) {
-  adapter_dist_vanillaExtractCssAdapter.appendCss({
-    type: 'fontFace',
-    rule: transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, rule), {}, {
-      fontFamily
-    })
-  }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
+  var rules = Array.isArray(rule) ? rule : [rule];
+  for (var singleRule of rules) {
+    adapter_dist_vanillaExtractCssAdapter.appendCss({
+      type: 'fontFace',
+      rule: transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, singleRule), {}, {
+        fontFamily
+      })
+    }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
+  }
 }
@@ -511,31 +483,58 @@ function keyframes(rule, debugId) {
     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;
 }
 
+// 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 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;
+}
+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;
+}
+
 exports.assignVars = assignVars;
@@ -554,5 +553,7 @@ exports.composeStyles = composeStyles;
 exports.globalKeyframes = globalKeyframes;
+exports.globalLayer = globalLayer;
 exports.globalStyle = globalStyle;
 exports.keyframes = keyframes;
+exports.layer = layer;
 exports.style = style;
 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-1f897e28.browser.esm.js';
 import { setAdapterIfNotSet, getIdentOption, appendCss, registerClassName, registerComposition, markCompositionUsed } from '../adapter/dist/vanilla-extract-css-adapter.browser.esm.js';
@@ -10,6 +10,6 @@ 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';
 import deepmerge from 'deepmerge';
-import 'ahocorasick';
+import 'modern-ahocorasick';
 import 'css-what';
@@ -46,3 +46,2 @@ import 'media-query-parser';
 };
-
 {
@@ -64,3 +63,2 @@ setAdapterIfNotSet(browserRuntimeAdapter);
   }
-
   subClass.prototype = Object.create(superClass && superClass.prototype, {
@@ -80,52 +78,46 @@ constructor: {
 function _wrapRegExp() {
-  _wrapRegExp = function (re, groups) {
-    return new BabelRegExp(re, void 0, groups);
+  _wrapRegExp = function (e, r) {
+    return new BabelRegExp(e, void 0, r);
   };
-
-  var _super = RegExp.prototype,
-      _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);
+  var e = RegExp.prototype,
+    r = new WeakMap();
+  function BabelRegExp(e, t, p) {
+    var o = new RegExp(e, t);
+    return r.set(o, p || r.get(e)), _setPrototypeOf(o, BabelRegExp.prototype);
   }
-
-  function buildGroups(result, re) {
-    var g = _groups.get(re);
-
-    return Object.keys(g).reduce(function (groups, name) {
-      var i = g[name];
-      if ("number" == typeof i) groups[name] = result[i];else {
-        for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++;
-
-        groups[name] = result[i[k]];
+  function buildGroups(e, t) {
+    var p = r.get(t);
+    return Object.keys(p).reduce(function (r, t) {
+      var o = p[t];
+      if ("number" == typeof o) r[t] = e[o];else {
+        for (var i = 0; void 0 === e[o[i]] && i + 1 < o.length;) i++;
+        r[t] = e[o[i]];
       }
-      return groups;
+      return r;
     }, Object.create(null));
   }
-
-  return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {
-    var result = _super.exec.call(this, str);
-
-    return result && (result.groups = buildGroups(result, this)), 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];
+  return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (r) {
+    var t = e.exec.call(this, r);
+    if (t) {
+      t.groups = buildGroups(t, this);
+      var p = t.indices;
+      p && (p.groups = buildGroups(p, this));
+    }
+    return t;
+  }, BabelRegExp.prototype[Symbol.replace] = function (t, p) {
+    if ("string" == typeof p) {
+      var o = r.get(this);
+      return e[Symbol.replace].call(this, t, p.replace(/\$<([^>]+)>/g, function (e, r) {
+        var t = o[r];
+        return "$" + (Array.isArray(t) ? t.join("$") : t);
       }));
     }
-
-    if ("function" == typeof substitution) {
-      var _this = this;
-
-      return _super[Symbol.replace].call(this, str, function () {
-        var args = arguments;
-        return "object" != typeof args[args.length - 1] && (args = [].slice.call(args)).push(buildGroups(args, _this)), substitution.apply(this, args);
+    if ("function" == typeof p) {
+      var i = this;
+      return e[Symbol.replace].call(this, t, function () {
+        var e = arguments;
+        return "object" != typeof e[e.length - 1] && (e = [].slice.call(e)).push(buildGroups(e, i)), p.apply(this, e);
       });
     }
-
-    return _super[Symbol.replace].call(this, str, substitution);
+    return e[Symbol.replace].call(this, t, p);
   }, _wrapRegExp.apply(this, arguments);
@@ -140,3 +132,2 @@ }
   var parts = debugId ? [debugId.replace(/\s/g, '_')] : [];
-
   if (debugFileName) {
@@ -146,7 +137,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) {
@@ -160,7 +150,9 @@ var {
   }
-
   return parts.join('_');
 }
-
+function normalizeIdentifier(identifier) {
+  return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
+}
 function generateIdentifier(arg) {
+  var identOption = getIdentOption();
   var {
@@ -171,5 +163,5 @@ debugId,
     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);
@@ -182,4 +174,3 @@ var {
   var identifier = "".concat(fileScopeHash).concat(refCount);
-
-  if (getIdentOption() === 'debug') {
+  if (identOption === 'debug') {
     var devPrefix = getDevPrefix({
@@ -189,13 +180,23 @@ debugId,
     });
-
     if (devPrefix) {
       identifier = "".concat(devPrefix, "__").concat(identifier);
     }
+    return normalizeIdentifier(identifier);
   }
-
-  return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
+  if (typeof identOption === 'function') {
+    identifier = identOption({
+      hash: identifier,
+      debugId,
+      filePath,
+      packageName
+    });
+    if (!identifier.match(/^[A-Z_][0-9A-Z_-]+$/i)) {
+      throw new Error("Identifier function returned invalid indentifier: \"".concat(identifier, "\""));
+    }
+    return identifier;
+  }
+  return normalizeIdentifier(identifier);
 }
 
 var normaliseObject = obj => walkObject(obj, () => '');
-
 function validateContract(contract, tokens) {
@@ -209,7 +210,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') {
@@ -219,3 +218,2 @@ if (type === '-') {
     }
-
     if (type === '+') {
@@ -225,20 +223,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)) {
@@ -254,7 +246,5 @@ lines.push(diffLine("".concat(key, ": ...,"), innerNesting, '+'));
   }
-
   if (nesting === 0) {
     lines.push(diffLine('}', 0));
   }
-
   return lines.join('\n');
@@ -274,7 +264,5 @@ }
   var finalValue = '';
-
   for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
     values[_key] = arguments[_key];
   }
-
   values.reverse().forEach(value => {
@@ -287,3 +275,2 @@ if (finalValue === '') {
       }
-
       finalValue = value.replace(/\)$/, ", ".concat(finalValue, ")"));
@@ -300,7 +287,5 @@ }
   } = validateContract(varContract, tokens);
-
   if (!valid) {
     throw new Error("Tokens don't match contract.\n".concat(diffString));
   }
-
   walkObject(tokens, (value, path) => {
@@ -312,4 +297,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) => {
@@ -323,3 +306,2 @@ return createVar(path.join('-'));
     var varName = typeof rawVarName === 'string' ? rawVarName.replace(/^\-\-/, '') : null;
-
     if (typeof varName !== 'string' || varName !== cssesc(varName, {
@@ -330,3 +312,2 @@ isIdentifier: true
     }
-
     return "var(--".concat(varName, ")");
@@ -347,3 +328,2 @@ });
   }, getFileScope());
-
   if (shouldCreateVars) {
@@ -355,3 +335,3 @@ return themeVars;
   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);
@@ -362,9 +342,7 @@ return vars ? [themeClassName, vars] : themeClassName;
 var _templateObject;
-
 function composedStyle(rules, debugId) {
   var className = generateIdentifier(debugId);
-  registerClassName(className);
+  registerClassName(className, getFileScope());
   var classList = [];
   var styleRules = [];
-
   for (var rule of rules) {
@@ -377,5 +355,3 @@ if (typeof rule === 'string') {
   }
-
   var result = className;
-
   if (classList.length > 0) {
@@ -386,4 +362,3 @@ result = "".concat(className, " ").concat(dudupeAndJoinClassList(classList));
       classList: result
-    });
-
+    }, getFileScope());
     if (styleRules.length > 0) {
@@ -395,3 +370,2 @@ // If there are styles attached to this composition then it is
   }
-
   if (styleRules.length > 0) {
@@ -402,3 +376,2 @@ var _rule = deepmerge.all(styleRules, {
     });
-
     appendCss({
@@ -410,6 +383,4 @@ type: 'local',
   }
-
   return result;
 }
-
 function style(rule, debugId) {
@@ -419,5 +390,4 @@ if (Array.isArray(rule)) {
   }
-
   var className = generateIdentifier(debugId);
-  registerClassName(className);
+  registerClassName(className, getFileScope());
   appendCss({
@@ -430,13 +400,11 @@ type: 'local',
 }
+
 /**
  * @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);
@@ -455,22 +423,26 @@ }
   }), "\"");
-
-  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        "]))));
+  var rules = Array.isArray(rule) ? rule : [rule];
+  for (var singleRule of rules) {
+    if ('fontFamily' in singleRule) {
+      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({
+      type: 'fontFace',
+      rule: _objectSpread2(_objectSpread2({}, singleRule), {}, {
+        fontFamily
+      })
+    }, getFileScope());
   }
-
-  appendCss({
-    type: 'fontFace',
-    rule: _objectSpread2(_objectSpread2({}, rule), {}, {
-      fontFamily
-    })
-  }, getFileScope());
   return fontFamily;
 }
 function globalFontFace(fontFamily, rule) {
-  appendCss({
-    type: 'fontFace',
-    rule: _objectSpread2(_objectSpread2({}, rule), {}, {
-      fontFamily
-    })
-  }, getFileScope());
+  var rules = Array.isArray(rule) ? rule : [rule];
+  for (var singleRule of rules) {
+    appendCss({
+      type: 'fontFace',
+      rule: _objectSpread2(_objectSpread2({}, singleRule), {}, {
+        fontFamily
+      })
+    }, getFileScope());
+  }
 }
@@ -498,31 +470,58 @@ function keyframes(rule, debugId) {
     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;
 }
 
+// createContainer is used for local scoping of CSS containers
 // For now it is mostly just an alias of generateIdentifier
-
 var createContainer = debugId => generateIdentifier(debugId);
 
-export { assignVars, composeStyles, createContainer, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, style, 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;
+}
+function globalLayer() {
+  var [options, name] = getLayerArgs(...arguments);
+  if (options.parent) {
+    name = "".concat(options.parent, ".").concat(name);
+  }
+  appendCss({
+    type: 'layer',
+    name
+  }, getFileScope());
+  return name;
+}
+
+export { assignVars, composeStyles, createContainer, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalLayer, globalStyle, keyframes, layer, style, styleVariants };

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

@@ -1,1 +0,278 @@
-export * from "./declarations/src/index";
+import { Properties, AtRule } from 'csstype';
+
+type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number})`;
+type Contract = {
+    [key: string]: CSSVarFunction | null | Contract;
+};
+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;
+};
+
+declare const simplePseudoMap: {
+    readonly ':-moz-any-link': true;
+    readonly ':-moz-full-screen': true;
+    readonly ':-moz-placeholder': true;
+    readonly ':-moz-read-only': true;
+    readonly ':-moz-read-write': true;
+    readonly ':-ms-fullscreen': true;
+    readonly ':-ms-input-placeholder': true;
+    readonly ':-webkit-any-link': true;
+    readonly ':-webkit-full-screen': true;
+    readonly '::-moz-color-swatch': true;
+    readonly '::-moz-list-bullet': true;
+    readonly '::-moz-list-number': true;
+    readonly '::-moz-page-sequence': true;
+    readonly '::-moz-page': true;
+    readonly '::-moz-placeholder': true;
+    readonly '::-moz-progress-bar': true;
+    readonly '::-moz-range-progress': true;
+    readonly '::-moz-range-thumb': true;
+    readonly '::-moz-range-track': true;
+    readonly '::-moz-scrolled-page-sequence': true;
+    readonly '::-moz-selection': true;
+    readonly '::-ms-backdrop': true;
+    readonly '::-ms-browse': true;
+    readonly '::-ms-check': true;
+    readonly '::-ms-clear': true;
+    readonly '::-ms-fill-lower': true;
+    readonly '::-ms-fill-upper': true;
+    readonly '::-ms-fill': true;
+    readonly '::-ms-reveal': true;
+    readonly '::-ms-thumb': true;
+    readonly '::-ms-ticks-after': true;
+    readonly '::-ms-ticks-before': true;
+    readonly '::-ms-tooltip': true;
+    readonly '::-ms-track': true;
+    readonly '::-ms-value': true;
+    readonly '::-webkit-backdrop': true;
+    readonly '::-webkit-inner-spin-button': true;
+    readonly '::-webkit-input-placeholder': true;
+    readonly '::-webkit-meter-bar': true;
+    readonly '::-webkit-meter-even-less-good-value': true;
+    readonly '::-webkit-meter-inner-element': true;
+    readonly '::-webkit-meter-optimum-value': true;
+    readonly '::-webkit-meter-suboptimum-value': true;
+    readonly '::-webkit-outer-spin-button': true;
+    readonly '::-webkit-progress-bar': true;
+    readonly '::-webkit-progress-inner-element': true;
+    readonly '::-webkit-progress-inner-value': true;
+    readonly '::-webkit-progress-value': true;
+    readonly '::-webkit-resizer': true;
+    readonly '::-webkit-scrollbar-button': true;
+    readonly '::-webkit-scrollbar-corner': true;
+    readonly '::-webkit-scrollbar-thumb': true;
+    readonly '::-webkit-scrollbar-track-piece': true;
+    readonly '::-webkit-scrollbar-track': true;
+    readonly '::-webkit-scrollbar': true;
+    readonly '::-webkit-search-cancel-button': true;
+    readonly '::-webkit-search-results-button': true;
+    readonly '::-webkit-slider-runnable-track': true;
+    readonly '::-webkit-slider-thumb': true;
+    readonly '::after': true;
+    readonly '::backdrop': true;
+    readonly '::before': true;
+    readonly '::cue': true;
+    readonly '::file-selector-button': true;
+    readonly '::first-letter': true;
+    readonly '::first-line': true;
+    readonly '::grammar-error': true;
+    readonly '::marker': true;
+    readonly '::placeholder': true;
+    readonly '::selection': true;
+    readonly '::spelling-error': true;
+    readonly '::target-text': true;
+    readonly '::view-transition-group': true;
+    readonly '::view-transition-image-pair': true;
+    readonly '::view-transition-new': true;
+    readonly '::view-transition-old': true;
+    readonly '::view-transition': true;
+    readonly ':active': true;
+    readonly ':after': true;
+    readonly ':any-link': true;
+    readonly ':before': true;
+    readonly ':blank': true;
+    readonly ':checked': true;
+    readonly ':default': true;
+    readonly ':defined': true;
+    readonly ':disabled': true;
+    readonly ':empty': true;
+    readonly ':enabled': true;
+    readonly ':first-child': true;
+    readonly ':first-letter': true;
+    readonly ':first-line': true;
+    readonly ':first-of-type': true;
+    readonly ':first': true;
+    readonly ':focus-visible': true;
+    readonly ':focus-within': true;
+    readonly ':focus': true;
+    readonly ':fullscreen': true;
+    readonly ':hover': true;
+    readonly ':in-range': true;
+    readonly ':indeterminate': true;
+    readonly ':invalid': true;
+    readonly ':last-child': true;
+    readonly ':last-of-type': true;
+    readonly ':left': true;
+    readonly ':link': true;
+    readonly ':only-child': true;
+    readonly ':only-of-type': true;
+    readonly ':optional': true;
+    readonly ':out-of-range': true;
+    readonly ':placeholder-shown': true;
+    readonly ':read-only': true;
+    readonly ':read-write': true;
+    readonly ':required': true;
+    readonly ':right': true;
+    readonly ':root': true;
+    readonly ':scope': true;
+    readonly ':target': true;
+    readonly ':valid': true;
+    readonly ':visited': true;
+};
+type SimplePseudos = keyof typeof simplePseudoMap;
+
+interface ContainerProperties {
+    container?: string;
+    containerType?: 'size' | 'inline-size' | (string & {});
+    containerName?: string;
+}
+type CSSTypeProperties = Properties<number | (string & {})> & ContainerProperties;
+type CSSProperties = {
+    [Property in keyof CSSTypeProperties]: CSSTypeProperties[Property] | CSSVarFunction | Array<CSSVarFunction | CSSTypeProperties[Property]>;
+};
+interface CSSKeyframes {
+    [time: string]: CSSProperties;
+}
+type CSSPropertiesWithVars = CSSProperties & {
+    vars?: {
+        [key: string]: string;
+    };
+};
+type PseudoProperties = {
+    [key in SimplePseudos]?: CSSPropertiesWithVars;
+};
+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>> {
+}
+type WithQueries<StyleType> = StyleType & AllQueries<StyleType>;
+interface SelectorMap {
+    [selector: string]: CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
+}
+interface StyleWithSelectors extends CSSPropertiesAndPseudos {
+    selectors?: SelectorMap;
+}
+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';
+    selector: string;
+    rule: StyleRule;
+};
+type CSSFontFaceBlock = {
+    type: 'fontFace';
+    rule: GlobalFontFaceRule;
+};
+type CSSKeyframesBlock = {
+    type: 'keyframes';
+    name: string;
+    rule: CSSKeyframes;
+};
+type CSSSelectorBlock = {
+    type: 'selector' | 'global';
+    selector: string;
+    rule: GlobalStyleRule;
+};
+type CSSLayerDeclaration = {
+    type: 'layer';
+    name: string;
+};
+type CSS = CSSStyleBlock | CSSFontFaceBlock | CSSKeyframesBlock | CSSSelectorBlock | CSSLayerDeclaration;
+type FileScope = {
+    packageName?: string;
+    filePath: string;
+};
+interface Composition {
+    identifier: string;
+    classList: string;
+}
+type CustomIdentFunction = (params: {
+    hash: string;
+    filePath: string;
+    debugId?: string;
+    packageName?: string;
+}) => string;
+type IdentOption = 'short' | 'debug' | CustomIdentFunction;
+interface Adapter {
+    appendCss: (css: CSS, fileScope: FileScope) => 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;
+}
+type NullableTokens = {
+    [key: string]: string | NullableTokens | null;
+};
+type Tokens = {
+    [key: string]: string | Tokens;
+};
+type ThemeVars<ThemeContract extends NullableTokens> = MapLeafNodes<ThemeContract, CSSVarFunction>;
+type ClassNames = string | Array<ClassNames>;
+type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
+
+interface GenerateIdentifierOptions {
+    debugId?: string;
+    debugFileName?: boolean;
+}
+declare function generateIdentifier(debugId?: string): string;
+declare function generateIdentifier(options?: GenerateIdentifierOptions): string;
+
+declare function createGlobalTheme<ThemeTokens extends Tokens>(selector: string, tokens: ThemeTokens): ThemeVars<ThemeTokens>;
+declare function createGlobalTheme<ThemeContract extends Contract>(selector: string, themeContract: ThemeContract, tokens: MapLeafNodes<ThemeContract, string>): void;
+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 function style(rule: ComplexStyleRule, debugId?: string): string;
+/**
+ * @deprecated The same functionality is now provided by the 'style' function when you pass it an array
+ */
+declare function composeStyles(...classNames: Array<ClassNames>): string;
+declare function globalStyle(selector: string, rule: GlobalStyleRule): void;
+declare function fontFace(rule: FontFaceRule | FontFaceRule[], debugId?: string): string;
+declare function globalFontFace(fontFamily: string, rule: FontFaceRule | FontFaceRule[]): void;
+declare function keyframes(rule: CSSKeyframes, debugId?: string): string;
+declare function globalKeyframes(name: string, rule: CSSKeyframes): void;
+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 function createVar(debugId?: string): CSSVarFunction;
+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 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 createContainer: (debugId?: string) => string;
+
+type LayerOptions = {
+    parent?: string;
+};
+declare function layer(options: LayerOptions, debugId?: string): string;
+declare function layer(debugId?: string): string;
+declare function globalLayer(options: LayerOptions, name: string): string;
+declare function globalLayer(name: string): string;
+
+export { Adapter, CSSProperties, ComplexStyleRule, FileScope, GlobalStyleRule, StyleRule, assignVars, composeStyles, createContainer, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalLayer, globalStyle, keyframes, layer, style, 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-0eba15b2.cjs.dev.js');
 var adapter_dist_vanillaExtractCssAdapter = require('../adapter/dist/vanilla-extract-css-adapter.cjs.dev.js');
@@ -15,6 +15,6 @@ 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');
 var deepmerge = require('deepmerge');
-require('ahocorasick');
+require('modern-ahocorasick');
 require('css-what');
@@ -59,3 +59,2 @@ require('media-query-parser');
 };
-
 if (typeof window !== 'undefined') {
@@ -77,3 +76,2 @@ adapter_dist_vanillaExtractCssAdapter.setAdapterIfNotSet(browserRuntimeAdapter);
   }
-
   subClass.prototype = Object.create(superClass && superClass.prototype, {
@@ -93,52 +91,46 @@ constructor: {
 function _wrapRegExp() {
-  _wrapRegExp = function (re, groups) {
-    return new BabelRegExp(re, void 0, groups);
+  _wrapRegExp = function (e, r) {
+    return new BabelRegExp(e, void 0, r);
   };
-
-  var _super = RegExp.prototype,
-      _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);
+  var e = RegExp.prototype,
+    r = new WeakMap();
+  function BabelRegExp(e, t, p) {
+    var o = new RegExp(e, t);
+    return r.set(o, p || r.get(e)), _setPrototypeOf(o, BabelRegExp.prototype);
   }
-
-  function buildGroups(result, re) {
-    var g = _groups.get(re);
-
-    return Object.keys(g).reduce(function (groups, name) {
-      var i = g[name];
-      if ("number" == typeof i) groups[name] = result[i];else {
-        for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++;
-
-        groups[name] = result[i[k]];
+  function buildGroups(e, t) {
+    var p = r.get(t);
+    return Object.keys(p).reduce(function (r, t) {
+      var o = p[t];
+      if ("number" == typeof o) r[t] = e[o];else {
+        for (var i = 0; void 0 === e[o[i]] && i + 1 < o.length;) i++;
+        r[t] = e[o[i]];
       }
-      return groups;
+      return r;
     }, Object.create(null));
   }
-
-  return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {
-    var result = _super.exec.call(this, str);
-
-    return result && (result.groups = buildGroups(result, this)), 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];
+  return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (r) {
+    var t = e.exec.call(this, r);
+    if (t) {
+      t.groups = buildGroups(t, this);
+      var p = t.indices;
+      p && (p.groups = buildGroups(p, this));
+    }
+    return t;
+  }, BabelRegExp.prototype[Symbol.replace] = function (t, p) {
+    if ("string" == typeof p) {
+      var o = r.get(this);
+      return e[Symbol.replace].call(this, t, p.replace(/\$<([^>]+)>/g, function (e, r) {
+        var t = o[r];
+        return "$" + (Array.isArray(t) ? t.join("$") : t);
       }));
     }
-
-    if ("function" == typeof substitution) {
-      var _this = this;
-
-      return _super[Symbol.replace].call(this, str, function () {
-        var args = arguments;
-        return "object" != typeof args[args.length - 1] && (args = [].slice.call(args)).push(buildGroups(args, _this)), substitution.apply(this, args);
+    if ("function" == typeof p) {
+      var i = this;
+      return e[Symbol.replace].call(this, t, function () {
+        var e = arguments;
+        return "object" != typeof e[e.length - 1] && (e = [].slice.call(e)).push(buildGroups(e, i)), p.apply(this, e);
       });
     }
-
-    return _super[Symbol.replace].call(this, str, substitution);
+    return e[Symbol.replace].call(this, t, p);
   }, _wrapRegExp.apply(this, arguments);
@@ -153,3 +145,2 @@ }
   var parts = debugId ? [debugId.replace(/\s/g, '_')] : [];
-
   if (debugFileName) {
@@ -159,7 +150,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) {
@@ -173,7 +163,9 @@ var {
   }
-
   return parts.join('_');
 }
-
+function normalizeIdentifier(identifier) {
+  return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
+}
 function generateIdentifier(arg) {
+  var identOption = adapter_dist_vanillaExtractCssAdapter.getIdentOption();
   var {
@@ -184,5 +176,5 @@ debugId,
     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);
@@ -195,4 +187,3 @@ var {
   var identifier = "".concat(fileScopeHash).concat(refCount);
-
-  if (adapter_dist_vanillaExtractCssAdapter.getIdentOption() === 'debug') {
+  if (identOption === 'debug') {
     var devPrefix = getDevPrefix({
@@ -202,13 +193,23 @@ debugId,
     });
-
     if (devPrefix) {
       identifier = "".concat(devPrefix, "__").concat(identifier);
     }
+    return normalizeIdentifier(identifier);
   }
-
-  return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
+  if (typeof identOption === 'function') {
+    identifier = identOption({
+      hash: identifier,
+      debugId,
+      filePath,
+      packageName
+    });
+    if (!identifier.match(/^[A-Z_][0-9A-Z_-]+$/i)) {
+      throw new Error("Identifier function returned invalid indentifier: \"".concat(identifier, "\""));
+    }
+    return identifier;
+  }
+  return normalizeIdentifier(identifier);
 }
 
 var normaliseObject = obj => _private.walkObject(obj, () => '');
-
 function validateContract(contract, tokens) {
@@ -222,7 +223,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') {
@@ -232,3 +231,2 @@ if (type === '-') {
     }
-
     if (type === '+') {
@@ -238,20 +236,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)) {
@@ -267,7 +259,5 @@ lines.push(diffLine("".concat(key, ": ...,"), innerNesting, '+'));
   }
-
   if (nesting === 0) {
     lines.push(diffLine('}', 0));
   }
-
   return lines.join('\n');
@@ -287,7 +277,5 @@ }
   var finalValue = '';
-
   for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
     values[_key] = arguments[_key];
   }
-
   values.reverse().forEach(value => {
@@ -300,3 +288,2 @@ if (finalValue === '') {
       }
-
       finalValue = value.replace(/\)$/, ", ".concat(finalValue, ")"));
@@ -313,7 +300,5 @@ }
   } = validateContract(varContract, tokens);
-
   if (!valid) {
     throw new Error("Tokens don't match contract.\n".concat(diffString));
   }
-
   _private.walkObject(tokens, (value, path) => {
@@ -325,4 +310,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) => {
@@ -336,3 +319,2 @@ return createVar(path.join('-'));
     var varName = typeof rawVarName === 'string' ? rawVarName.replace(/^\-\-/, '') : null;
-
     if (typeof varName !== 'string' || varName !== cssesc__default["default"](varName, {
@@ -343,3 +325,2 @@ isIdentifier: true
     }
-
     return "var(--".concat(varName, ")");
@@ -360,3 +341,2 @@ });
   }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
-
   if (shouldCreateVars) {
@@ -368,3 +348,3 @@ return themeVars;
   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);
@@ -375,9 +355,7 @@ return vars ? [themeClassName, vars] : themeClassName;
 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) {
@@ -390,5 +368,3 @@ if (typeof rule === 'string') {
   }
-
   var result = className;
-
   if (classList.length > 0) {
@@ -399,4 +375,3 @@ result = "".concat(className, " ").concat(transformCss_dist_vanillaExtractCssTransformCss.dudupeAndJoinClassList(classList));
       classList: result
-    });
-
+    }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
     if (styleRules.length > 0) {
@@ -408,3 +383,2 @@ // If there are styles attached to this composition then it is
   }
-
   if (styleRules.length > 0) {
@@ -415,3 +389,2 @@ var _rule = deepmerge__default["default"].all(styleRules, {
     });
-
     adapter_dist_vanillaExtractCssAdapter.appendCss({
@@ -423,6 +396,4 @@ type: 'local',
   }
-
   return result;
 }
-
 function style(rule, debugId) {
@@ -432,5 +403,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({
@@ -443,13 +413,11 @@ type: 'local',
 }
+
 /**
  * @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);
@@ -468,22 +436,26 @@ }
   }), "\"");
-
-  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        "]))));
+  var rules = Array.isArray(rule) ? rule : [rule];
+  for (var singleRule of rules) {
+    if ('fontFamily' in singleRule) {
+      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({
+      type: 'fontFace',
+      rule: transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, singleRule), {}, {
+        fontFamily
+      })
+    }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   }
-
-  adapter_dist_vanillaExtractCssAdapter.appendCss({
-    type: 'fontFace',
-    rule: transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, rule), {}, {
-      fontFamily
-    })
-  }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   return fontFamily;
 }
 function globalFontFace(fontFamily, rule) {
-  adapter_dist_vanillaExtractCssAdapter.appendCss({
-    type: 'fontFace',
-    rule: transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, rule), {}, {
-      fontFamily
-    })
-  }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
+  var rules = Array.isArray(rule) ? rule : [rule];
+  for (var singleRule of rules) {
+    adapter_dist_vanillaExtractCssAdapter.appendCss({
+      type: 'fontFace',
+      rule: transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, singleRule), {}, {
+        fontFamily
+      })
+    }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
+  }
 }
@@ -511,31 +483,58 @@ function keyframes(rule, debugId) {
     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;
 }
 
+// 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 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;
+}
+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;
+}
+
 exports.assignVars = assignVars;
@@ -554,5 +553,7 @@ exports.composeStyles = composeStyles;
 exports.globalKeyframes = globalKeyframes;
+exports.globalLayer = globalLayer;
 exports.globalStyle = globalStyle;
 exports.keyframes = keyframes;
+exports.layer = layer;
 exports.style = style;
 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-6c6556ad.cjs.prod.js');
 var adapter_dist_vanillaExtractCssAdapter = require('../adapter/dist/vanilla-extract-css-adapter.cjs.prod.js');
@@ -15,6 +15,6 @@ 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');
 var deepmerge = require('deepmerge');
-require('ahocorasick');
+require('modern-ahocorasick');
 require('css-what');
@@ -59,3 +59,2 @@ require('media-query-parser');
 };
-
 if (typeof window !== 'undefined') {
@@ -77,3 +76,2 @@ adapter_dist_vanillaExtractCssAdapter.setAdapterIfNotSet(browserRuntimeAdapter);
   }
-
   subClass.prototype = Object.create(superClass && superClass.prototype, {
@@ -93,52 +91,46 @@ constructor: {
 function _wrapRegExp() {
-  _wrapRegExp = function (re, groups) {
-    return new BabelRegExp(re, void 0, groups);
+  _wrapRegExp = function (e, r) {
+    return new BabelRegExp(e, void 0, r);
   };
-
-  var _super = RegExp.prototype,
-      _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);
+  var e = RegExp.prototype,
+    r = new WeakMap();
+  function BabelRegExp(e, t, p) {
+    var o = new RegExp(e, t);
+    return r.set(o, p || r.get(e)), _setPrototypeOf(o, BabelRegExp.prototype);
   }
-
-  function buildGroups(result, re) {
-    var g = _groups.get(re);
-
-    return Object.keys(g).reduce(function (groups, name) {
-      var i = g[name];
-      if ("number" == typeof i) groups[name] = result[i];else {
-        for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++;
-
-        groups[name] = result[i[k]];
+  function buildGroups(e, t) {
+    var p = r.get(t);
+    return Object.keys(p).reduce(function (r, t) {
+      var o = p[t];
+      if ("number" == typeof o) r[t] = e[o];else {
+        for (var i = 0; void 0 === e[o[i]] && i + 1 < o.length;) i++;
+        r[t] = e[o[i]];
       }
-      return groups;
+      return r;
     }, Object.create(null));
   }
-
-  return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {
-    var result = _super.exec.call(this, str);
-
-    return result && (result.groups = buildGroups(result, this)), 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];
+  return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (r) {
+    var t = e.exec.call(this, r);
+    if (t) {
+      t.groups = buildGroups(t, this);
+      var p = t.indices;
+      p && (p.groups = buildGroups(p, this));
+    }
+    return t;
+  }, BabelRegExp.prototype[Symbol.replace] = function (t, p) {
+    if ("string" == typeof p) {
+      var o = r.get(this);
+      return e[Symbol.replace].call(this, t, p.replace(/\$<([^>]+)>/g, function (e, r) {
+        var t = o[r];
+        return "$" + (Array.isArray(t) ? t.join("$") : t);
       }));
     }
-
-    if ("function" == typeof substitution) {
-      var _this = this;
-
-      return _super[Symbol.replace].call(this, str, function () {
-        var args = arguments;
-        return "object" != typeof args[args.length - 1] && (args = [].slice.call(args)).push(buildGroups(args, _this)), substitution.apply(this, args);
+    if ("function" == typeof p) {
+      var i = this;
+      return e[Symbol.replace].call(this, t, function () {
+        var e = arguments;
+        return "object" != typeof e[e.length - 1] && (e = [].slice.call(e)).push(buildGroups(e, i)), p.apply(this, e);
       });
     }
-
-    return _super[Symbol.replace].call(this, str, substitution);
+    return e[Symbol.replace].call(this, t, p);
   }, _wrapRegExp.apply(this, arguments);
@@ -153,3 +145,2 @@ }
   var parts = debugId ? [debugId.replace(/\s/g, '_')] : [];
-
   if (debugFileName) {
@@ -159,7 +150,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) {
@@ -173,7 +163,9 @@ var {
   }
-
   return parts.join('_');
 }
-
+function normalizeIdentifier(identifier) {
+  return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
+}
 function generateIdentifier(arg) {
+  var identOption = adapter_dist_vanillaExtractCssAdapter.getIdentOption();
   var {
@@ -184,5 +176,5 @@ debugId,
     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);
@@ -195,4 +187,3 @@ var {
   var identifier = "".concat(fileScopeHash).concat(refCount);
-
-  if (adapter_dist_vanillaExtractCssAdapter.getIdentOption() === 'debug') {
+  if (identOption === 'debug') {
     var devPrefix = getDevPrefix({
@@ -202,13 +193,23 @@ debugId,
     });
-
     if (devPrefix) {
       identifier = "".concat(devPrefix, "__").concat(identifier);
     }
+    return normalizeIdentifier(identifier);
   }
-
-  return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
+  if (typeof identOption === 'function') {
+    identifier = identOption({
+      hash: identifier,
+      debugId,
+      filePath,
+      packageName
+    });
+    if (!identifier.match(/^[A-Z_][0-9A-Z_-]+$/i)) {
+      throw new Error("Identifier function returned invalid indentifier: \"".concat(identifier, "\""));
+    }
+    return identifier;
+  }
+  return normalizeIdentifier(identifier);
 }
 
 var normaliseObject = obj => _private.walkObject(obj, () => '');
-
 function validateContract(contract, tokens) {
@@ -222,7 +223,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);
-
   {
@@ -232,3 +231,2 @@ if (type === '-') {
     }
-
     if (type === '+') {
@@ -238,20 +236,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)) {
@@ -267,7 +259,5 @@ lines.push(diffLine("".concat(key, ": ...,"), innerNesting, '+'));
   }
-
   if (nesting === 0) {
     lines.push(diffLine('}', 0));
   }
-
   return lines.join('\n');
@@ -287,7 +277,5 @@ }
   var finalValue = '';
-
   for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
     values[_key] = arguments[_key];
   }
-
   values.reverse().forEach(value => {
@@ -300,3 +288,2 @@ if (finalValue === '') {
       }
-
       finalValue = value.replace(/\)$/, ", ".concat(finalValue, ")"));
@@ -313,7 +300,5 @@ }
   } = validateContract(varContract, tokens);
-
   if (!valid) {
     throw new Error("Tokens don't match contract.\n".concat(diffString));
   }
-
   _private.walkObject(tokens, (value, path) => {
@@ -325,4 +310,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) => {
@@ -336,3 +319,2 @@ return createVar(path.join('-'));
     var varName = typeof rawVarName === 'string' ? rawVarName.replace(/^\-\-/, '') : null;
-
     if (typeof varName !== 'string' || varName !== cssesc__default["default"](varName, {
@@ -343,3 +325,2 @@ isIdentifier: true
     }
-
     return "var(--".concat(varName, ")");
@@ -360,3 +341,2 @@ });
   }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
-
   if (shouldCreateVars) {
@@ -368,3 +348,3 @@ return themeVars;
   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);
@@ -375,9 +355,7 @@ return vars ? [themeClassName, vars] : themeClassName;
 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) {
@@ -390,5 +368,3 @@ if (typeof rule === 'string') {
   }
-
   var result = className;
-
   if (classList.length > 0) {
@@ -399,4 +375,3 @@ result = "".concat(className, " ").concat(transformCss_dist_vanillaExtractCssTransformCss.dudupeAndJoinClassList(classList));
       classList: result
-    });
-
+    }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
     if (styleRules.length > 0) {
@@ -408,3 +383,2 @@ // If there are styles attached to this composition then it is
   }
-
   if (styleRules.length > 0) {
@@ -415,3 +389,2 @@ var _rule = deepmerge__default["default"].all(styleRules, {
     });
-
     adapter_dist_vanillaExtractCssAdapter.appendCss({
@@ -423,6 +396,4 @@ type: 'local',
   }
-
   return result;
 }
-
 function style(rule, debugId) {
@@ -432,5 +403,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({
@@ -443,13 +413,11 @@ type: 'local',
 }
+
 /**
  * @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);
@@ -468,22 +436,26 @@ }
   }), "\"");
-
-  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        "]))));
+  var rules = Array.isArray(rule) ? rule : [rule];
+  for (var singleRule of rules) {
+    if ('fontFamily' in singleRule) {
+      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({
+      type: 'fontFace',
+      rule: transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, singleRule), {}, {
+        fontFamily
+      })
+    }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   }
-
-  adapter_dist_vanillaExtractCssAdapter.appendCss({
-    type: 'fontFace',
-    rule: transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, rule), {}, {
-      fontFamily
-    })
-  }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
   return fontFamily;
 }
 function globalFontFace(fontFamily, rule) {
-  adapter_dist_vanillaExtractCssAdapter.appendCss({
-    type: 'fontFace',
-    rule: transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, rule), {}, {
-      fontFamily
-    })
-  }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
+  var rules = Array.isArray(rule) ? rule : [rule];
+  for (var singleRule of rules) {
+    adapter_dist_vanillaExtractCssAdapter.appendCss({
+      type: 'fontFace',
+      rule: transformCss_dist_vanillaExtractCssTransformCss._objectSpread2(transformCss_dist_vanillaExtractCssTransformCss._objectSpread2({}, singleRule), {}, {
+        fontFamily
+      })
+    }, fileScope_dist_vanillaExtractCssFileScope.getFileScope());
+  }
 }
@@ -511,31 +483,58 @@ function keyframes(rule, debugId) {
     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;
 }
 
+// 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 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;
+}
+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;
+}
+
 exports.assignVars = assignVars;
@@ -554,5 +553,7 @@ exports.composeStyles = composeStyles;
 exports.globalKeyframes = globalKeyframes;
+exports.globalLayer = globalLayer;
 exports.globalStyle = globalStyle;
 exports.keyframes = keyframes;
+exports.layer = layer;
 exports.style = style;
 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-f4b0f46b.esm.js';
 import { setAdapterIfNotSet, getIdentOption, appendCss, registerClassName, registerComposition, markCompositionUsed } from '../adapter/dist/vanilla-extract-css-adapter.esm.js';
@@ -10,6 +10,6 @@ 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';
 import deepmerge from 'deepmerge';
-import 'ahocorasick';
+import 'modern-ahocorasick';
 import 'css-what';
@@ -46,3 +46,2 @@ import 'media-query-parser';
 };
-
 if (typeof window !== 'undefined') {
@@ -64,3 +63,2 @@ setAdapterIfNotSet(browserRuntimeAdapter);
   }
-
   subClass.prototype = Object.create(superClass && superClass.prototype, {
@@ -80,52 +78,46 @@ constructor: {
 function _wrapRegExp() {
-  _wrapRegExp = function (re, groups) {
-    return new BabelRegExp(re, void 0, groups);
+  _wrapRegExp = function (e, r) {
+    return new BabelRegExp(e, void 0, r);
   };
-
-  var _super = RegExp.prototype,
-      _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);
+  var e = RegExp.prototype,
+    r = new WeakMap();
+  function BabelRegExp(e, t, p) {
+    var o = new RegExp(e, t);
+    return r.set(o, p || r.get(e)), _setPrototypeOf(o, BabelRegExp.prototype);
   }
-
-  function buildGroups(result, re) {
-    var g = _groups.get(re);
-
-    return Object.keys(g).reduce(function (groups, name) {
-      var i = g[name];
-      if ("number" == typeof i) groups[name] = result[i];else {
-        for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++;
-
-        groups[name] = result[i[k]];
+  function buildGroups(e, t) {
+    var p = r.get(t);
+    return Object.keys(p).reduce(function (r, t) {
+      var o = p[t];
+      if ("number" == typeof o) r[t] = e[o];else {
+        for (var i = 0; void 0 === e[o[i]] && i + 1 < o.length;) i++;
+        r[t] = e[o[i]];
       }
-      return groups;
+      return r;
     }, Object.create(null));
   }
-
-  return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {
-    var result = _super.exec.call(this, str);
-
-    return result && (result.groups = buildGroups(result, this)), 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];
+  return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (r) {
+    var t = e.exec.call(this, r);
+    if (t) {
+      t.groups = buildGroups(t, this);
+      var p = t.indices;
+      p && (p.groups = buildGroups(p, this));
+    }
+    return t;
+  }, BabelRegExp.prototype[Symbol.replace] = function (t, p) {
+    if ("string" == typeof p) {
+      var o = r.get(this);
+      return e[Symbol.replace].call(this, t, p.replace(/\$<([^>]+)>/g, function (e, r) {
+        var t = o[r];
+        return "$" + (Array.isArray(t) ? t.join("$") : t);
       }));
     }
-
-    if ("function" == typeof substitution) {
-      var _this = this;
-
-      return _super[Symbol.replace].call(this, str, function () {
-        var args = arguments;
-        return "object" != typeof args[args.length - 1] && (args = [].slice.call(args)).push(buildGroups(args, _this)), substitution.apply(this, args);
+    if ("function" == typeof p) {
+      var i = this;
+      return e[Symbol.replace].call(this, t, function () {
+        var e = arguments;
+        return "object" != typeof e[e.length - 1] && (e = [].slice.call(e)).push(buildGroups(e, i)), p.apply(this, e);
       });
     }
-
-    return _super[Symbol.replace].call(this, str, substitution);
+    return e[Symbol.replace].call(this, t, p);
   }, _wrapRegExp.apply(this, arguments);
@@ -140,3 +132,2 @@ }
   var parts = debugId ? [debugId.replace(/\s/g, '_')] : [];
-
   if (debugFileName) {
@@ -146,7 +137,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) {
@@ -160,7 +150,9 @@ var {
   }
-
   return parts.join('_');
 }
-
+function normalizeIdentifier(identifier) {
+  return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
+}
 function generateIdentifier(arg) {
+  var identOption = getIdentOption();
   var {
@@ -171,5 +163,5 @@ debugId,
     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);
@@ -182,4 +174,3 @@ var {
   var identifier = "".concat(fileScopeHash).concat(refCount);
-
-  if (getIdentOption() === 'debug') {
+  if (identOption === 'debug') {
     var devPrefix = getDevPrefix({
@@ -189,13 +180,23 @@ debugId,
     });
-
     if (devPrefix) {
       identifier = "".concat(devPrefix, "__").concat(identifier);
     }
+    return normalizeIdentifier(identifier);
   }
-
-  return identifier.match(/^[0-9]/) ? "_".concat(identifier) : identifier;
+  if (typeof identOption === 'function') {
+    identifier = identOption({
+      hash: identifier,
+      debugId,
+      filePath,
+      packageName
+    });
+    if (!identifier.match(/^[A-Z_][0-9A-Z_-]+$/i)) {
+      throw new Error("Identifier function returned invalid indentifier: \"".concat(identifier, "\""));
+    }
+    return identifier;
+  }
+  return normalizeIdentifier(identifier);
 }
 
 var normaliseObject = obj => walkObject(obj, () => '');
-
 function validateContract(contract, tokens) {
@@ -209,7 +210,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') {
@@ -219,3 +218,2 @@ if (type === '-') {
     }
-
     if (type === '+') {
@@ -225,20 +223,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)) {
@@ -254,7 +246,5 @@ lines.push(diffLine("".concat(key, ": ...,"), innerNesting, '+'));
   }
-
   if (nesting === 0) {
     lines.push(diffLine('}', 0));
   }
-
   return lines.join('\n');
@@ -274,7 +264,5 @@ }
   var finalValue = '';
-
   for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
     values[_key] = arguments[_key];
   }
-
   values.reverse().forEach(value => {
@@ -287,3 +275,2 @@ if (finalValue === '') {
       }
-
       finalValue = value.replace(/\)$/, ", ".concat(finalValue, ")"));
@@ -300,7 +287,5 @@ }
   } = validateContract(varContract, tokens);
-
   if (!valid) {
     throw new Error("Tokens don't match contract.\n".concat(diffString));
   }
-
   walkObject(tokens, (value, path) => {
@@ -312,4 +297,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) => {
@@ -323,3 +306,2 @@ return createVar(path.join('-'));
     var varName = typeof rawVarName === 'string' ? rawVarName.replace(/^\-\-/, '') : null;
-
     if (typeof varName !== 'string' || varName !== cssesc(varName, {
@@ -330,3 +312,2 @@ isIdentifier: true
     }
-
     return "var(--".concat(varName, ")");
@@ -347,3 +328,2 @@ });
   }, getFileScope());
-
   if (shouldCreateVars) {
@@ -355,3 +335,3 @@ return themeVars;
   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);
@@ -362,9 +342,7 @@ return vars ? [themeClassName, vars] : themeClassName;
 var _templateObject;
-
 function composedStyle(rules, debugId) {
   var className = generateIdentifier(debugId);
-  registerClassName(className);
+  registerClassName(className, getFileScope());
   var classList = [];
   var styleRules = [];
-
   for (var rule of rules) {
@@ -377,5 +355,3 @@ if (typeof rule === 'string') {
   }
-
   var result = className;
-
   if (classList.length > 0) {
@@ -386,4 +362,3 @@ result = "".concat(className, " ").concat(dudupeAndJoinClassList(classList));
       classList: result
-    });
-
+    }, getFileScope());
     if (styleRules.length > 0) {
@@ -395,3 +370,2 @@ // If there are styles attached to this composition then it is
   }
-
   if (styleRules.length > 0) {
@@ -402,3 +376,2 @@ var _rule = deepmerge.all(styleRules, {
     });
-
     appendCss({
@@ -410,6 +383,4 @@ type: 'local',
   }
-
   return result;
 }
-
 function style(rule, debugId) {
@@ -419,5 +390,4 @@ if (Array.isArray(rule)) {
   }
-
   var className = generateIdentifier(debugId);
-  registerClassName(className);
+  registerClassName(className, getFileScope());
   appendCss({
@@ -430,13 +400,11 @@ type: 'local',
 }
+
 /**
  * @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);
@@ -455,22 +423,26 @@ }
   }), "\"");
-
-  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        "]))));
+  var rules = Array.isArray(rule) ? rule : [rule];
+  for (var singleRule of rules) {
+    if ('fontFamily' in singleRule) {
+      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({
+      type: 'fontFace',
+      rule: _objectSpread2(_objectSpread2({}, singleRule), {}, {
+        fontFamily
+      })
+    }, getFileScope());
   }
-
-  appendCss({
-    type: 'fontFace',
-    rule: _objectSpread2(_objectSpread2({}, rule), {}, {
-      fontFamily
-    })
-  }, getFileScope());
   return fontFamily;
 }
 function globalFontFace(fontFamily, rule) {
-  appendCss({
-    type: 'fontFace',
-    rule: _objectSpread2(_objectSpread2({}, rule), {}, {
-      fontFamily
-    })
-  }, getFileScope());
+  var rules = Array.isArray(rule) ? rule : [rule];
+  for (var singleRule of rules) {
+    appendCss({
+      type: 'fontFace',
+      rule: _objectSpread2(_objectSpread2({}, singleRule), {}, {
+        fontFamily
+      })
+    }, getFileScope());
+  }
 }
@@ -498,31 +470,58 @@ function keyframes(rule, debugId) {
     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;
 }
 
+// createContainer is used for local scoping of CSS containers
 // For now it is mostly just an alias of generateIdentifier
-
 var createContainer = debugId => generateIdentifier(debugId);
 
-export { assignVars, composeStyles, createContainer, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, style, 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;
+}
+function globalLayer() {
+  var [options, name] = getLayerArgs(...arguments);
+  if (options.parent) {
+    name = "".concat(options.parent, ".").concat(name);
+  }
+  appendCss({
+    type: 'layer',
+    name
+  }, getFileScope());
+  return name;
+}
+
+export { assignVars, composeStyles, createContainer, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalLayer, globalStyle, keyframes, layer, style, 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');
@@ -17,9 +17,10 @@ var adapter_dist_vanillaExtractCssAdapter = require('../../adapter/dist/vanilla-extract-css-adapter.browser.cjs.js');
 var fileScopes = [];
-function setFileScope(filePath, packageName, url) {
+function setFileScope(filePath, packageName) {
   refCounter = 0;
-  fileScopes.unshift({
+  var fileScope = {
     filePath,
-    packageName,
-    url
-  });
+    packageName
+  };
+  fileScopes.unshift(fileScope);
+  adapter_dist_vanillaExtractCssAdapter.onBeginFileScope(fileScope);
 }
@@ -38,3 +39,2 @@ function endFileScope() {
   }
-
   return fileScopes[0];
@@ -41,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';
 
@@ -8,9 +8,10 @@ var _templateObject;
 var fileScopes = [];
-function setFileScope(filePath, packageName, url) {
+function setFileScope(filePath, packageName) {
   refCounter = 0;
-  fileScopes.unshift({
+  var fileScope = {
     filePath,
-    packageName,
-    url
-  });
+    packageName
+  };
+  fileScopes.unshift(fileScope);
+  onBeginFileScope(fileScope);
 }
@@ -29,3 +30,2 @@ function endFileScope() {
   }
-
   return fileScopes[0];
@@ -32,0 +32,0 @@ }

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

@@ -1,1 +0,12 @@
-export * from "../../dist/declarations/src/fileScope";
+type FileScope = {
+    packageName?: string;
+    filePath: string;
+};
+
+declare function setFileScope(filePath: string, packageName?: string): void;
+declare function endFileScope(): void;
+declare function hasFileScope(): boolean;
+declare function getFileScope(): FileScope;
+declare function getAndIncrementRefCounter(): number;
+
+export { endFileScope, getAndIncrementRefCounter, getFileScope, hasFileScope, setFileScope };

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');
@@ -17,9 +17,10 @@ var adapter_dist_vanillaExtractCssAdapter = require('../../adapter/dist/vanilla-extract-css-adapter.cjs.dev.js');
 var fileScopes = [];
-function setFileScope(filePath, packageName, url) {
+function setFileScope(filePath, packageName) {
   refCounter = 0;
-  fileScopes.unshift({
+  var fileScope = {
     filePath,
-    packageName,
-    url
-  });
+    packageName
+  };
+  fileScopes.unshift(fileScope);
+  adapter_dist_vanillaExtractCssAdapter.onBeginFileScope(fileScope);
 }
@@ -38,3 +39,2 @@ function endFileScope() {
   }
-
   return fileScopes[0];
@@ -41,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');
@@ -17,9 +17,10 @@ var adapter_dist_vanillaExtractCssAdapter = require('../../adapter/dist/vanilla-extract-css-adapter.cjs.prod.js');
 var fileScopes = [];
-function setFileScope(filePath, packageName, url) {
+function setFileScope(filePath, packageName) {
   refCounter = 0;
-  fileScopes.unshift({
+  var fileScope = {
     filePath,
-    packageName,
-    url
-  });
+    packageName
+  };
+  fileScopes.unshift(fileScope);
+  adapter_dist_vanillaExtractCssAdapter.onBeginFileScope(fileScope);
 }
@@ -38,3 +39,2 @@ function endFileScope() {
   }
-
   return fileScopes[0];
@@ -41,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';
 
@@ -8,9 +8,10 @@ var _templateObject;
 var fileScopes = [];
-function setFileScope(filePath, packageName, url) {
+function setFileScope(filePath, packageName) {
   refCounter = 0;
-  fileScopes.unshift({
+  var fileScope = {
     filePath,
-    packageName,
-    url
-  });
+    packageName
+  };
+  fileScopes.unshift(fileScope);
+  onBeginFileScope(fileScope);
 }
@@ -29,3 +30,2 @@ function endFileScope() {
   }
-
   return fileScopes[0];
@@ -32,0 +32,0 @@ }

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

@@ -1,1 +0,12 @@
-export * from "../../dist/declarations/src/functionSerializer";
+type Primitive = string | number | boolean | null | undefined;
+type Serializable = {
+    [Key in string | number]: Primitive | Serializable;
+} | ReadonlyArray<Primitive | Serializable>;
+interface SerializerConfig {
+    importPath: string;
+    importName: string;
+    args: ReadonlyArray<Serializable>;
+}
+declare function addFunctionSerializer<Target extends object>(target: Target, recipe: SerializerConfig): Target;
+
+export { addFunctionSerializer };

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,1 +0,12 @@
-export * from "../../dist/declarations/src/injectStyles";
+type FileScope = {
+    packageName?: string;
+    filePath: string;
+};
+
+interface InjectStylesOptions {
+    fileScope: FileScope;
+    css: string;
+}
+declare const injectStyles: ({ fileScope, css }: InjectStylesOptions) => void;
+
+export { injectStyles };

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-filescope-urls-202283015831",
+  "version": "0.0.0-fix-vite-plugin-frameworks-20240428030551",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
@@ -110,13 +110,12 @@ "sideEffects": true,
   "dependencies": {
-    "@emotion/hash": "^0.8.0",
-    "@vanilla-extract/private": "^1.0.3",
-    "ahocorasick": "1.0.2",
+    "@emotion/hash": "^0.9.0",
+    "@vanilla-extract/private": "^1.0.4",
     "chalk": "^4.1.1",
-    "css-what": "^5.0.1",
+    "css-what": "^6.1.0",
     "cssesc": "^3.0.0",
     "csstype": "^3.0.7",
-    "deep-object-diff": "^1.1.0",
+    "deep-object-diff": "^1.1.9",
     "deepmerge": "^4.2.2",
-    "file-uri-to-path": "^2.0.0",
     "media-query-parser": "^2.0.2",
+    "modern-ahocorasick": "^1.0.0",
     "outdent": "^0.8.0"
@@ -123,0 +122,0 @@ },

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,1 +0,17 @@
-export * from "../../dist/declarations/src/recipe";
+type Primitive = string | number | boolean | null | undefined;
+type Serializable = {
+    [Key in string | number]: Primitive | Serializable;
+} | ReadonlyArray<Primitive | Serializable>;
+interface SerializerConfig {
+    importPath: string;
+    importName: string;
+    args: ReadonlyArray<Serializable>;
+}
+declare function addFunctionSerializer<Target extends object>(target: Target, recipe: SerializerConfig): Target;
+
+/**
+ * @deprecated Use 'addFunctionSerializer' from '@vanilla-extract/css/functionSerializer'
+ */
+declare const addRecipe: typeof addFunctionSerializer;
+
+export { addRecipe };

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,8 +5,8 @@ 'use strict';
 
-var transformCss_dist_vanillaExtractCssTransformCss = require('../../dist/transformCss-931f0e0d.browser.cjs.js');
+var transformCss_dist_vanillaExtractCssTransformCss = require('../../dist/transformCss-1b35689a.browser.cjs.js');
 require('@vanilla-extract/private');
 require('cssesc');
-require('ahocorasick');
+require('modern-ahocorasick');
 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');
@@ -13,0 +13,0 @@ require('outdent');

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

@@ -1,9 +0,9 @@
-export { t as transformCss } from '../../dist/transformCss-a8d6e581.browser.esm.js';
+export { t as transformCss } from '../../dist/transformCss-1f897e28.browser.esm.js';
 import '@vanilla-extract/private';
 import 'cssesc';
-import 'ahocorasick';
+import 'modern-ahocorasick';
 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

@@ -1,1 +0,206 @@
-export * from "../../dist/declarations/src/transformCss";
+import { AtRule, Properties } from 'csstype';
+
+type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number})`;
+
+declare const simplePseudoMap: {
+    readonly ':-moz-any-link': true;
+    readonly ':-moz-full-screen': true;
+    readonly ':-moz-placeholder': true;
+    readonly ':-moz-read-only': true;
+    readonly ':-moz-read-write': true;
+    readonly ':-ms-fullscreen': true;
+    readonly ':-ms-input-placeholder': true;
+    readonly ':-webkit-any-link': true;
+    readonly ':-webkit-full-screen': true;
+    readonly '::-moz-color-swatch': true;
+    readonly '::-moz-list-bullet': true;
+    readonly '::-moz-list-number': true;
+    readonly '::-moz-page-sequence': true;
+    readonly '::-moz-page': true;
+    readonly '::-moz-placeholder': true;
+    readonly '::-moz-progress-bar': true;
+    readonly '::-moz-range-progress': true;
+    readonly '::-moz-range-thumb': true;
+    readonly '::-moz-range-track': true;
+    readonly '::-moz-scrolled-page-sequence': true;
+    readonly '::-moz-selection': true;
+    readonly '::-ms-backdrop': true;
+    readonly '::-ms-browse': true;
+    readonly '::-ms-check': true;
+    readonly '::-ms-clear': true;
+    readonly '::-ms-fill-lower': true;
+    readonly '::-ms-fill-upper': true;
+    readonly '::-ms-fill': true;
+    readonly '::-ms-reveal': true;
+    readonly '::-ms-thumb': true;
+    readonly '::-ms-ticks-after': true;
+    readonly '::-ms-ticks-before': true;
+    readonly '::-ms-tooltip': true;
+    readonly '::-ms-track': true;
+    readonly '::-ms-value': true;
+    readonly '::-webkit-backdrop': true;
+    readonly '::-webkit-inner-spin-button': true;
+    readonly '::-webkit-input-placeholder': true;
+    readonly '::-webkit-meter-bar': true;
+    readonly '::-webkit-meter-even-less-good-value': true;
+    readonly '::-webkit-meter-inner-element': true;
+    readonly '::-webkit-meter-optimum-value': true;
+    readonly '::-webkit-meter-suboptimum-value': true;
+    readonly '::-webkit-outer-spin-button': true;
+    readonly '::-webkit-progress-bar': true;
+    readonly '::-webkit-progress-inner-element': true;
+    readonly '::-webkit-progress-inner-value': true;
+    readonly '::-webkit-progress-value': true;
+    readonly '::-webkit-resizer': true;
+    readonly '::-webkit-scrollbar-button': true;
+    readonly '::-webkit-scrollbar-corner': true;
+    readonly '::-webkit-scrollbar-thumb': true;
+    readonly '::-webkit-scrollbar-track-piece': true;
+    readonly '::-webkit-scrollbar-track': true;
+    readonly '::-webkit-scrollbar': true;
+    readonly '::-webkit-search-cancel-button': true;
+    readonly '::-webkit-search-results-button': true;
+    readonly '::-webkit-slider-runnable-track': true;
+    readonly '::-webkit-slider-thumb': true;
+    readonly '::after': true;
+    readonly '::backdrop': true;
+    readonly '::before': true;
+    readonly '::cue': true;
+    readonly '::file-selector-button': true;
+    readonly '::first-letter': true;
+    readonly '::first-line': true;
+    readonly '::grammar-error': true;
+    readonly '::marker': true;
+    readonly '::placeholder': true;
+    readonly '::selection': true;
+    readonly '::spelling-error': true;
+    readonly '::target-text': true;
+    readonly '::view-transition-group': true;
+    readonly '::view-transition-image-pair': true;
+    readonly '::view-transition-new': true;
+    readonly '::view-transition-old': true;
+    readonly '::view-transition': true;
+    readonly ':active': true;
+    readonly ':after': true;
+    readonly ':any-link': true;
+    readonly ':before': true;
+    readonly ':blank': true;
+    readonly ':checked': true;
+    readonly ':default': true;
+    readonly ':defined': true;
+    readonly ':disabled': true;
+    readonly ':empty': true;
+    readonly ':enabled': true;
+    readonly ':first-child': true;
+    readonly ':first-letter': true;
+    readonly ':first-line': true;
+    readonly ':first-of-type': true;
+    readonly ':first': true;
+    readonly ':focus-visible': true;
+    readonly ':focus-within': true;
+    readonly ':focus': true;
+    readonly ':fullscreen': true;
+    readonly ':hover': true;
+    readonly ':in-range': true;
+    readonly ':indeterminate': true;
+    readonly ':invalid': true;
+    readonly ':last-child': true;
+    readonly ':last-of-type': true;
+    readonly ':left': true;
+    readonly ':link': true;
+    readonly ':only-child': true;
+    readonly ':only-of-type': true;
+    readonly ':optional': true;
+    readonly ':out-of-range': true;
+    readonly ':placeholder-shown': true;
+    readonly ':read-only': true;
+    readonly ':read-write': true;
+    readonly ':required': true;
+    readonly ':right': true;
+    readonly ':root': true;
+    readonly ':scope': true;
+    readonly ':target': true;
+    readonly ':valid': true;
+    readonly ':visited': true;
+};
+type SimplePseudos = keyof typeof simplePseudoMap;
+
+interface ContainerProperties {
+    container?: string;
+    containerType?: 'size' | 'inline-size' | (string & {});
+    containerName?: string;
+}
+type CSSTypeProperties = Properties<number | (string & {})> & ContainerProperties;
+type CSSProperties = {
+    [Property in keyof CSSTypeProperties]: CSSTypeProperties[Property] | CSSVarFunction | Array<CSSVarFunction | CSSTypeProperties[Property]>;
+};
+interface CSSKeyframes {
+    [time: string]: CSSProperties;
+}
+type CSSPropertiesWithVars = CSSProperties & {
+    vars?: {
+        [key: string]: string;
+    };
+};
+type PseudoProperties = {
+    [key in SimplePseudos]?: CSSPropertiesWithVars;
+};
+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>> {
+}
+type WithQueries<StyleType> = StyleType & AllQueries<StyleType>;
+interface SelectorMap {
+    [selector: string]: CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
+}
+interface StyleWithSelectors extends CSSPropertiesAndPseudos {
+    selectors?: SelectorMap;
+}
+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';
+    selector: string;
+    rule: StyleRule;
+};
+type CSSFontFaceBlock = {
+    type: 'fontFace';
+    rule: GlobalFontFaceRule;
+};
+type CSSKeyframesBlock = {
+    type: 'keyframes';
+    name: string;
+    rule: CSSKeyframes;
+};
+type CSSSelectorBlock = {
+    type: 'selector' | 'global';
+    selector: string;
+    rule: GlobalStyleRule;
+};
+type CSSLayerDeclaration = {
+    type: 'layer';
+    name: string;
+};
+type CSS = CSSStyleBlock | CSSFontFaceBlock | CSSKeyframesBlock | CSSSelectorBlock | CSSLayerDeclaration;
+interface Composition {
+    identifier: string;
+    classList: string;
+}
+
+interface TransformCSSParams {
+    localClassNames: Array<string>;
+    composedClassLists: Array<Composition>;
+    cssObjs: Array<CSS>;
+}
+declare function transformCss({ localClassNames, cssObjs, composedClassLists, }: TransformCSSParams): string[];
+
+export { transformCss };

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

@@ -5,8 +5,8 @@ 'use strict';
 
-var transformCss_dist_vanillaExtractCssTransformCss = require('../../dist/transformCss-1c113184.cjs.dev.js');
+var transformCss_dist_vanillaExtractCssTransformCss = require('../../dist/transformCss-0eba15b2.cjs.dev.js');
 require('@vanilla-extract/private');
 require('cssesc');
-require('ahocorasick');
+require('modern-ahocorasick');
 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');
@@ -13,0 +13,0 @@ require('outdent');

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

@@ -5,8 +5,8 @@ 'use strict';
 
-var transformCss_dist_vanillaExtractCssTransformCss = require('../../dist/transformCss-3f666075.cjs.prod.js');
+var transformCss_dist_vanillaExtractCssTransformCss = require('../../dist/transformCss-6c6556ad.cjs.prod.js');
 require('@vanilla-extract/private');
 require('cssesc');
-require('ahocorasick');
+require('modern-ahocorasick');
 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');
@@ -13,0 +13,0 @@ require('outdent');

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

@@ -1,9 +0,9 @@
-export { t as transformCss } from '../../dist/transformCss-06fcad3d.esm.js';
+export { t as transformCss } from '../../dist/transformCss-f4b0f46b.esm.js';
 import '@vanilla-extract/private';
 import 'cssesc';
-import 'ahocorasick';
+import 'modern-ahocorasick';
 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

330217

increased by15.9%

Dependency count

11

decreased by-8.33%

Lines of code

8697

increased by17.81%

Worsened metrics

Number of package files

84

decreased by-14.29%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmodern-ahocorasick@^1.0.0

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

• + Addedcss-what@6.1.0(transitive)

• + Addedmodern-ahocorasick@1.0.1(transitive)

• - Removedahocorasick@1.0.2

• - Removedfile-uri-to-path@^2.0.0

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

• - Removedahocorasick@1.0.2(transitive)

• - Removedcss-what@5.1.0(transitive)

• - Removedfile-uri-to-path@2.0.0(transitive)

• Updated@emotion/hash@^0.9.0

• Updated@vanilla-extract/private@^1.0.4

• Updatedcss-what@^6.1.0

• Updateddeep-object-diff@^1.1.9