@vanilla-extract/css@1.21.0

Minor Changes

• #1749 caacf56 Thanks @bschlenk! - Allow createGlobalVar to accept a name with a leading --

  Similar to createGlobalThemeContract, createGlobalVar now trims a leading -- from the variable name. This can be useful if you want to keep the full variable name searchable in your codebase.

  EXAMPLE USAGE:

  import { createGlobalVar } from '@vanilla-extract/css';
  
  // Both produce `var(--my-global-var)`
  const a = createGlobalVar('my-global-var');
  const b = createGlobalVar('--my-global-var');

• #1720 7bbe189 Thanks @cahnory! - style, globalStyle: Add support for @scope rules

  EXAMPLE USAGE:

  import { style, globalStyle } from '@vanilla-extact/css';
  
  export const styleWithScopeRule = style({
    '@scope': {
      '(body)': {
        ':after': { content: '"Scoped to body"' }
      }
    }
  });
  
  globalStyle('div', {
    '@scope': {
      '(body)': {
        ':after': { content: '"Scoped to body"' }
      }
    }
  });

Patch Changes

• #1731 aec0ab7 Thanks @sashank-gogula-glean! - Fix incorrect class name substitution when composed class lists contain regex metacharacters

  Class names containing characters such as (, ), +, or . were being interpreted as regex syntax when building the substitution pattern for composed class lists, causing malformed matches. The class list is now escaped before constructing the RegExp.

• #1740 a4b120f Thanks @askoufis! - Fix a bug causing fallbackVar to discard an empty string passed as the fallback value

  An empty string fallback was silently dropped, producing var(--myVar) instead of the CSS empty-fallback form var(--myVar, ). fallbackVar now treats '' like any other fallback value.