@vanilla-extract/[email protected]

Patch Changes

• #326 2d9b4c3 Thanks @mattcompiles! - Avoid calling composeStyles when using the atoms function at runtime

@vanilla-extract/[email protected]

Minor Changes

• #326 2d9b4c3 Thanks @mattcompiles! - Support passing arrays of styles to style and styleVariants

  Multiple styles can now be composed into a single rule by providing an array of styles.

  import { style } from '@vanilla-extract/css';
  
  const base = style({ padding: 12 });
  
  export const primary = style([base, { background: 'blue' }]);
  
  export const secondary = style([base, { background: 'aqua' }]);

  When composed styles are used in selectors, they are assigned an additional class if required so they can be uniquely identified. When selectors are processed internally, the composed classes are removed, only leaving behind the unique identifier classes. This allows you to treat them as if they were a single class within vanilla-extract selectors.

  import { style, globalStyle } from '@vanilla-extract/css';
  
  const background = style({ background: 'mintcream' });
  const padding = style({ padding: 12 });
  
  export const container = style([background, padding]);
  
  globalStyle(`${container} *`, {
    boxSizing: 'border-box',
  });

  This feature is a replacement for the standalone composeStyles function which is now marked as deprecated. You can use style with an array as a drop-in replacement.

  -export const container = composeStyles(background, padding);
  +export const container = style([background, padding]);

@vanilla-extract/[email protected]

Major Changes

• #323 1e7d647 Thanks @mattcompiles! - Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the identifiers option which accepts either short or debug.

  • short identifiers are a 7+ character hash. e.g. hnw5tz3
  • debug identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. somefile_mystyle_hnw5tz3

  import { vanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
  
  vanillaExtractPlugin({ identifiers: 'short' });

  BREAKING CHANGE

  Previously identifiers were formatted as short when process.env.NODE_ENV was set to "production". By default, they will now be formatted according to webpack's mode config.

Patch Changes

• Updated dependencies [1e7d647]:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Major Changes

• #323 1e7d647 Thanks @mattcompiles! - Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the identifiers option which accepts either short or debug.

  • short identifiers are a 7+ character hash. e.g. hnw5tz3
  • debug identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. somefile_mystyle_hnw5tz3

  import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
  
  vanillaExtractPlugin({ identifiers: 'short' });

  BREAKING CHANGE

  Previously identifiers were formatted as short when process.env.NODE_ENV was set to "production". By default, they will now be formatted according to Vite's mode config.

Patch Changes

• Updated dependencies [1e7d647]:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Major Changes

• #323 1e7d647 Thanks @mattcompiles! - Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the identifiers option which accepts either short or debug.

  • short identifiers are a 7+ character hash. e.g. hnw5tz3
  • debug identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. somefile_mystyle_hnw5tz3

  import { vanillaExtractPlugin } from '@vanilla-extract/snowpack-plugin';
  
  const snowpackConfig = {
    plugins: [['@vanilla-extract/snowpack-plugin', { identifiers: 'short' }]],
  };

  BREAKING CHANGE

  Previously identifiers were formatted as short when process.env.NODE_ENV was set to "production". By default, they will now be formatted according to Snowpacks's mode config.

Patch Changes

• Updated dependencies [1e7d647]:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Minor Changes

• #323 1e7d647 Thanks @mattcompiles! - Support configurable identifier types

Patch Changes

• Updated dependencies [26832f1, 1e7d647]:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Major Changes

• #323 1e7d647 Thanks @mattcompiles! - Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the identifiers option which accepts either short or debug.

  • short identifiers are a 7+ character hash. e.g. hnw5tz3
  • debug identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. somefile_mystyle_hnw5tz3

  import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
  
  vanillaExtractPlugin({ identifiers: 'short' });

  BREAKING CHANGE

  Previously identifiers were formatted as short when process.env.NODE_ENV was set to "production". By default, they will now be formatted according to esbuild's minify config.

Patch Changes

• Updated dependencies [1e7d647]:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Minor Changes

• #319 26832f1 Thanks @nicksrandall! - Add createGlobalThemeContract function

  Creates a contract of globally scoped variable names for themes to implement.

  💡 This is useful if you want to make your theme contract available to non-JavaScript environments.

  // themes.css.ts
  import {
    createGlobalThemeContract,
    createGlobalTheme,
  } from '@vanilla-extract/css';
  
  export const vars = createGlobalThemeContract({
    color: {
      brand: 'color-brand',
    },
    font: {
      body: 'font-body',
    },
  });
  
  createGlobalTheme(':root', vars, {
    color: {
      brand: 'blue',
    },
    font: {
      body: 'arial',
    },
  });

  You can also provide a map function as the second argument which has access to the value and the object path.

  For example, you can automatically prefix all variable names.

  // themes.css.ts
  import {
    createGlobalThemeContract,
    createGlobalTheme,
  } from '@vanilla-extract/css';
  
  export const vars = createGlobalThemeContract(
    {
      color: {
        brand: 'color-brand',
      },
      font: {
        body: 'font-body',
      },
    },
    value => `prefix-${value}`,
  );

  You can also use the map function to automatically generate names from the object path, joining keys with a hyphen.

  // themes.css.ts
  import {
    createGlobalThemeContract,
    createGlobalTheme,
  } from '@vanilla-extract/css';
  
  export const vars = createGlobalThemeContract(
    {
      color: {
        brand: null,
      },
      font: {
        body: null,
      },
    },
    (_value, path) => `prefix-${path.join('-')}`,
  );

• #323 1e7d647 Thanks @mattcompiles! - Support configurable identifier types

@vanilla-extract/[email protected]

Minor Changes

• #311 416eb9a Thanks @mattcompiles! - In SSR mode, move to runtime evaluation of vanilla-extract files

  This unlocks the potential for CSS extraction on the server.

@vanilla-extract/[email protected]

Patch Changes

• #307 a8f181d Thanks @rtkaaho! - Allow style objects to be passed when no conditions are present