vanilla-extract

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.
  });
  

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.

Minor Changes

• #807 b0b3662 Thanks @mattcompiles! - Add support for the new createContainer API

Minor Changes

• #807 b0b3662 Thanks @mattcompiles! - Add createContainer API

  createContainer creates a single scoped container name for use with CSS Container Queries. This avoids potential naming collisions with other containers.

  import { style, createContainer } from '@vanilla-extract/css';
  
  export const sidebarContainer = createContainer();
  
  export const sidebar = style({
    containerName: sidebarContainer,
  });
  
  export const navigation = style({
    '@container': {
      [`${sidebarContainer} (min-width: 400px)`]: {
        display: 'flex',
      },
    },
  });
  

• #807 b0b3662 Thanks @mattcompiles! - Add support for container queries via the new @container key.

  import { style } from '@vanilla-extract/css';
  
  export const myStyle = style({
    '@container': {
      '(min-width: 400px)': {
        display: 'flex',
      },
    },
  });
  

Patch Changes

• #804 412962f Thanks @m7yue! - Fix styleVariants type when using the map data function

Patch Changes

• #801 bb48520 Thanks @mrm007! - Omit Symbol.toStringTag when serializing module exports.

Patch Changes

• #781 4fb9a2c Thanks @benjervis! - Adds a check for the existence of import.meta.hot before attempting to add an event listener to inject styles

Patch Changes

• #788 2e9d21c Thanks @Dremora! - Add scale to the list of unitless properties.

Patch Changes

• #783 21afc23 Thanks @benjervis! - Remove the extracted entrypoint from the webpack plugin.

Minor Changes

• #751 8c4f71b Thanks @frandiox! - Add experimental support for React Server Components

Patch Changes

• #751 8c4f71b Thanks @frandiox! - Fix HMR

Patch Changes

• #729 02ea735 Thanks @danielroe! - Generate CSS and not HMR code if vite server is present in production mode

Minor Changes

• #668 e373b51 Thanks @AndrewLeedham! - Add esbuild configurations to vite/esbuild/rollup plugins

Patch Changes

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

Patch Changes

• #723 8467fc2 Thanks @mattcompiles! - Validate duplicate '@media' in media queries

Major Changes

• #668 e373b51 Thanks @AndrewLeedham! - Add esbuild configurations to vite/esbuild/rollup plugins

Patch Changes

• Updated dependencies [8467fc2]:
  • @vanilla-extract/[email protected]

Patch Changes

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

Minor Changes

• #668 e373b51 Thanks @AndrewLeedham! - Add esbuild configurations to vite/esbuild/rollup plugins

Patch Changes

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

Patch Changes

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

Minor Changes

• #668 e373b51 Thanks @AndrewLeedham! - Add esbuild configurations to vite/esbuild/rollup plugins

Patch Changes

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

Patch Changes

• #716 9b6f3ea Thanks @mattcompiles! - Fix unresolvable imports inside monorepos

• #707 162b66f Thanks @AndrewLeedham! - Fix styles not updating in dev mode

• #706 3fc5040 Thanks @graup! - Suppress empty sourcemap warnings

Patch Changes

• #710 e338442 Thanks @riccardoperra! - Normalize import path for emitted css files

• #706 3fc5040 Thanks @graup! - Suppress empty sourcemap warnings