@vanilla-extract/[email protected]

Minor Changes

• #827 9cfb9a1 Thanks @mattcompiles! - Add automatic debug IDs

  Automatic debug IDs allow your styles and other identifiers (e.g. CSS Vars, keyframes, etc) to have names that more closely reflect your source code when in development. This makes it easier to understand how the CSS output links to your source code.

  // styles.css.ts
  
  // redBox ~= 'styles_redBox_asdfgj'
  const redBox = style({
    background: 'red',
  });

Patch Changes

• Updated dependencies [9cfb9a1, 9cfb9a1, 9cfb9a1]:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Minor Changes

• #827 9cfb9a1 Thanks @mattcompiles! - Remove requirement for @vanilla-extract/babel-plugin

  Previously, to get automatic debug IDs you needed to use Babel with the @vanilla-extract/babel-plugin in your config. As this is no longer the case, the @vanilla-extract/babel-plugin should be removed completely from your project.

Patch Changes

• Updated dependencies [9cfb9a1]:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Patch Changes

• Updated dependencies [9cfb9a1, 9cfb9a1, 9cfb9a1]:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Major Changes

• #827 9cfb9a1 Thanks @mattcompiles! - vanillaExtractFilescopePlugin has been renamed to vanillaExtractTransformPlugin

• #827 9cfb9a1 Thanks @mattcompiles! - compile now expects a valid identOption parameter

Minor Changes

• #827 9cfb9a1 Thanks @mattcompiles! - Add transform and transformSync functions

  The transform APIs can be used to append filescopes and automatic debug IDs to .css.ts files.

@vanilla-extract/[email protected]

Minor Changes

• #827 9cfb9a1 Thanks @mattcompiles! - Add automatic debug IDs

  Automatic debug IDs allow your styles and other identifiers (e.g. CSS Vars, keyframes, etc) to have names that more closely reflect your source code when in development. This makes it easier to understand how the CSS output links to your source code.

  // styles.css.ts
  
  // redBox ~= 'styles_redBox_asdfgj'
  const redBox = style({
    background: 'red',
  });

Patch Changes

• Updated dependencies [9cfb9a1, 9cfb9a1, 9cfb9a1]:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Patch Changes

• #837 9191d5a Thanks @mattcompiles! - Improve performance of selector transforms

  This issue occured on M1 Macs due to performance issues with large regex patterns.

• #833 b53558a Thanks @mattcompiles! - Fix entrypoint resolving in Vitest

@vanilla-extract/[email protected]

Minor Changes

• #825 ef905c3 Thanks @markdalgleish! - Add experimental support for SolidStart

@vanilla-extract/[email protected]

Minor Changes

• #796 ee83020 Thanks @mechairoi! - Add experimental support for Astro

@vanilla-extract/[email protected]

Minor Changes

• #812 009e122 Thanks @markdalgleish! - Add support for container query conditions

  Example usage

  import { createContainer, style } from '@vanilla-extract/css';
  import { defineProperties } from '@vanilla-extract/sprinkles';
  
  const containerName = createContainer();
  
  export const container = style({
    containerName,
    containerType: 'size',
  });
  
  const containerProperties = defineProperties({
    conditions: {
      small: {},
      medium: {
        '@container': `${containerName} (min-width: 768px)`,
      },
      large: {
        '@container': `${containerName} (min-width: 1024px)`,
      },
    },
    defaultCondition: 'small',
    // etc.
  });

@vanilla-extract/[email protected]

Minor Changes

• #810 c38b152 Thanks @markdalgleish! - Support excluding file names from generateIdentifier output. This is available by passing a newly-added options object rather than a string.

  Example usage

  import { generateIdentifier } from '@vanilla-extract/css';
  
  const identifier = generateIdentifier({
    debugId,
    debugFileName: false,
  });

Patch Changes

• #810 c38b152 Thanks @markdalgleish! - Fix spaces in debug IDs for variable names.

• #810 c38b152 Thanks @markdalgleish! - Fix file name prefix in debug names when file extension is .cjs or .mjs.