Version Packages

[seek-oss-ci]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

Releases

@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]

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]

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/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]

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

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

Patch Changes

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