@vanilla-extract/[email protected]

Patch Changes

• #393 2f379f1 Thanks @mattcompiles! - Fix compilation errors in Vite 2.6

@vanilla-extract/[email protected]

Patch Changes

• #391 c0fa901 Thanks @markdalgleish! - Handle array destructuring from createTheme when it's already been compiled

@vanilla-extract/[email protected]

Patch Changes

• #389 23d2757 Thanks @aulneau! - This update adds mjs to the file *.css.* regex, enabling better support for ESM packages/files.

@vanilla-extract/[email protected]

Patch Changes

• #381 b1e5936 Thanks @mattcompiles! - Fix identfiers not respecting NODE_ENV for SSR builds

@vanilla-extract/[email protected]

Minor Changes

• #376 f8082b9 Thanks @TheMightyPenguin! - Add RecipeVariants type

  A utility to make use of the recipe’s type interface. This can be useful when typing functions or component props that need to accept recipe values as part of their interface.

  // button.css.ts
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
  
  export const button = recipe({
    variants: {
      color: {
        neutral: { background: 'whitesmoke' },
        brand: { background: 'blueviolet' },
        accent: { background: 'slateblue' },
      },
      size: {
        small: { padding: 12 },
        medium: { padding: 16 },
        large: { padding: 24 },
      },
    },
  });
  
  // Get the type
  export type ButtonVariants = RecipeVariants<typeof button>;
  
  // the above will result in a type equivalent to:
  export type ButtonVariants = {
    color?: 'neutral' | 'brand' | 'accent';
    size?: 'small' | 'medium' | 'large';
  };

@vanilla-extract/[email protected]

Patch Changes

• #380 3ae2422 Thanks @mattcompiles! - Add variant group names to debug IDs

• #380 3ae2422 Thanks @mattcompiles! - Return default variants when selection is undefined

@vanilla-extract/[email protected]

Minor Changes

• #373 a55d2cf Thanks @mattcompiles! - Add devStyleRuntime option to allow switching between dev style runtimes

  The built-in Vite dev style runtime (what adds styles to the page when running vite serve) doesn't seem to clean up old styles as expected. Passing devStyleRuntime: 'vanilla-extract' will instead use vanilla-extract's browser runtime. This pushes all style creation in development to the browser, but may give a better HMR experience.

@vanilla-extract/[email protected]

Minor Changes

• #360 4ceb76e Thanks @michaeltaranto! - Clean up public API, deprecating old API names. Also adding sprinkles to the docs site and using sprinkles in favour of atoms for the canoncial examples.

  API changes include:

  • Rename createAtomicStyles to defineProperties, createAtomicStyles is now deprecated
  • Rename createAtomsFn to createSprinkles, createAtomsFn is now deprecated
  • Rename AtomicStyles type to SprinklesProperties, AtomicStyles is now deprecated

  Migration Guide

  -import { createAtomicStyles, createAtomsFn } from '@vanilla-extract/sprinkles';
  +import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
  
  -const responsiveProperties = createAtomicStyles({
  +const responsiveProperties = defineProperties({
    conditions: {
      mobile: {},
      tablet: { '@media': 'screen and (min-width: 768px)' },
      desktop: { '@media': 'screen and (min-width: 1024px)' }
    },
    defaultCondition: 'mobile',
    properties: {
      display: ['none', 'block', 'flex'],
      flexDirection: ['row', 'column'],
      padding: space
      // etc.
    }
  });
  
  -export const sprinkles = createAtomsFn(responsiveProperties);
  +export const sprinkles = createSprinkles(responsiveProperties);

@vanilla-extract/[email protected]

Minor Changes

• #361 531044b Thanks @markdalgleish! - Automatically add quotes to content values when necessary

  For example { content: '' } will now return CSS of { content: "" }

@vanilla-extract/[email protected]

Patch Changes

• #354 cdad52d Thanks @mattcompiles! - Fix function serialization with older versions of the @vanilla-extract/integration package