Skip to content

CHANGELOG.md

Latest commit

 

History

History
996 lines (631 loc) · 45.8 KB

CHANGELOG.md

File metadata and controls

996 lines (631 loc) · 45.8 KB

@vanilla-extract/css

1.18.0

Minor Changes

  • #1566 8b49b35 Thanks @lfantone! - style: Add support for @starting-style rules

    EXAMPLE USAGE:

    import { style } from '@vanilla-extact/css';
export const styleWithStartingStyle = style({
  backgroundColor: 'black',
  '@starting-style': {
    backgroundColor: 'white'
  }
});

Patch Changes

  • #1646 0b2c09e Thanks @plesiecki! - Swap the order of createVar's overloads to enable inference of VarDelcaration type

  • #1666 c6047fb Thanks @askoufis! - Remove custom container properties type

    The csstype package used by Vanilla Extract now provides types for container properties, so the custom type definitions that were previously necessary have been removed.

1.17.5

Patch Changes

1.17.4

Patch Changes

1.17.3

Patch Changes

1.17.2

Patch Changes

1.17.1

Patch Changes

  • #1533 c432ff3 Thanks @askoufis! - Fixes a bug where @container queries inside selectors were not being generated

1.17.0

Minor Changes

  • #1092 fd673f6 Thanks @z4o4z! - keyframes: Add support for a vars property to steps within keyframes declarations

    Example usage:

    import {
  createVar,
  keyframes
} from '@vanilla-extract/css';

const angle = createVar({
  syntax: '<angle>',
  inherits: false,
  initialValue: '0deg'
});

export const angleKeyframes = keyframes({
  '0%': {
    vars: {
      [angle]: '0deg'
    }
  },
  '100%': {
    vars: {
      [angle]: '360deg'
    }
  }
});

  • #1512 4abfc0b Thanks @askoufis! - createTheme, createGlobalTheme: Add support for assigning themes to a layer

    Themes can now be assigned to a layer by name using the @layer key at the top-level of the theme definition.

    EXAMPLE USAGE:

    // themes.css.ts
import {
  createTheme,
  createGlobalTheme,
  layer
} from '@vanilla-extract/css';

export const themeLayer = layer();

export const [themeA, vars] = createTheme({
  '@layer': themeLayer,
  color: {
    brand: 'blue'
  },
  font: {
    body: 'arial'
  }
});

export const vars2 = createGlobalTheme(':root', {
  '@layer': themeLayer,
  space: {
    small: '10px',
    large: '20px'
  }
});

    This will generate the following CSS:

    @layer themes_themeLayer__1k6oxph0;
@layer themes_themeLayer__1k6oxph0 {
  .themes_themeA__1k6oxph1 {
    --color-brand__1k6oxph2: blue;
    --font-body__1k6oxph3: arial;
  }

  :root {
    --space-small__z05zdf1: 10px;
    --space-large__z05zdf2: 20px;
  }
}

  • #1092 fd673f6 Thanks @z4o4z! - createVar: Add support for defining @property rules

    Example usage:

    import { createVar } from '@vanilla-extract/css';

export const myVar = createVar({
  syntax: '<number>',
  inherits: false,
  initialValue: '0.5'
});

    This will generate the following CSS:

    @property --myVar__jteyb14 {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.5;
}

1.16.1

Patch Changes

  • #1505 103ce57 Thanks @askoufis! - Fixes a bug that caused invalid selectors to be generated when adjacent classnames contained a substring equal to another local classname

1.16.0

Minor Changes

  • #1475 cd9d8b2 Thanks @corradopetrelli! - Add ::-webkit-calendar-picker-indicator as a valid pseudo-element

  • #1450 7b256d2 Thanks @wuz! - Add createViewTransition API

    createViewTransition creates a single scoped view transition name for use with CSS View Transitions. This avoids potential naming collisions with other view transitions.

    import {
  style,
  createViewTransition
} from '@vanilla-extract/css';

export const titleViewTransition = createViewTransition();

export const pageTitle = style({
  viewTransitionName: titleViewTransition
});

1.15.5

Patch Changes

1.15.4

Patch Changes

1.15.3

Patch Changes

1.15.2

Patch Changes

1.15.1

Patch Changes

1.15.0

Minor Changes

  • #1379 df9fe3ee3fc0057bc14a2333a405f8229f80c214 Thanks @ronci! - Add support for passing multiple font face rules to globalFontFace

    EXAMPLE USAGE:

    const gentium = 'GlobalGentium';

globalFontFace(gentium, [
  {
    src: 'local("Gentium")',
    fontWeight: 'normal'
  },
  {
    src: 'local("Gentium Bold")',
    fontWeight: 'bold'
  }
]);

1.14.2

Patch Changes

1.14.1

Patch Changes

1.14.0

Minor Changes

Patch Changes

1.13.0

Minor Changes

1.12.0

Minor Changes

  • #1114 001be83 Thanks @taylorfsteele! - Supports passing multiple font face rules to fontFace

    Example usage

    import { fontFace, style } from '@vanilla-extract/css';

const gentium = fontFace([
  {
    src: 'local("Gentium")',
    fontWeight: 'normal'
  },
  {
    src: 'local("Gentium Bold")',
    fontWeight: 'bold'
  }
]);

export const font = style({
  fontFamily: gentium
});

1.11.1

Patch Changes

1.11.0

Minor Changes

  • #955 ece5fc3 Thanks @mrm007! - Add support for cascade layers, i.e. @layer.

    Create a scoped layer to avoid naming collisions, or with an explicit name using globalLayer. Styles can then be assigned to layers using the @layer key within your style definition.

    // layers.css.ts
import { layer } from '@vanilla-extract/css';

export const reset = layer('reset');
export const framework = layer('framework');
export const typography = layer('typography');

// typography.css.ts
import { style } from '@vanilla-extract/css';
import { typography } from './layers.css';

export const standard = style({
  '@layer': {
    [typography]: {
      fontSize: '1rem'
    }
  }
});

1.10.0

Minor Changes

  • #1030 49ff399 Thanks @markdalgleish! - Provide current file scope as an additional argument to the adapter methods registerClassName and registerComposition. This is to allow fine-grained caching of registered class names and class compositions per file.

Patch Changes

1.9.5

Patch Changes

  • #990 3b724b9 Thanks @askoufis! - Align transformation of @keyframes rules with other rules

    This fixes a bug where invalid CSS could be generated inside @keyframes rules.

1.9.4

Patch Changes

1.9.3

Patch Changes

  • #943 4ecdcd7 Thanks @AndrewLeedham! - Fix a tsc error caused by a dependency's type declarations being unnecessarily bundled

1.9.2

Patch Changes

  • #854 98f8b03 Thanks @mrm007! - Bundle TypeScript declaration files (.d.ts) when building packages
  • #893 8ed77c2 Thanks @mattcompiles! - Fix issue where conditional styles (e.g. @media, @supports, etc) could be ordered incorrectly

1.9.1

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.

1.9.0

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

1.8.0

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

1.7.4

Patch Changes

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

1.7.3

Patch Changes

1.7.2

Patch Changes

1.7.1

Patch Changes

1.7.0

Minor Changes

1.6.8

Patch Changes

  • #520 b294764 Thanks @mattcompiles! - Transpile code to meet esmodules target

    This should allow code that runs in the browser to conform to most browser policies. If you need to support browsers prior to the esmodules target (e.g. IE 11) then you'll need to configure custom transpilation in your projects.

  • Updated dependencies [b294764]:

1.6.7

Patch Changes

  • #514 e3dfd4a Thanks @benjervis! - Export the package.json for css/fileScope

    This is required to maintain backwards compatibility with older versions of webpack-plugin

1.6.6

Patch Changes

  • #508 d15e783 Thanks @markdalgleish! - Add exports field to package.json so nested package paths can be imported in a Node.js ESM context

1.6.5

Patch Changes

1.6.4

Patch Changes

1.6.3

Patch Changes

1.6.2

Patch Changes

  • #409 a9c5cb7 Thanks @benjervis! - Improve the browser runtime dev experience.

    The vanilla browser runtime now creates style tags containing the CSS itself, rather than injecting it directly into the CSSOM.

    This helps with debugability, as the generated CSS can actually be seen in the devtools. There are also some new attributes set on the style tags, making it easier to identify the source of each style.

1.6.1

Patch Changes

1.6.0

Minor Changes

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

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

1.5.1

Patch Changes

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

1.5.0

Minor Changes

1.4.1

Patch Changes

1.4.0

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]);

1.3.0

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 } 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 } from '@vanilla-extract/css';

export const vars = createGlobalThemeContract(
  {
    color: {
      brand: null
    },
    font: {
      body: null
    }
  },
  (_value, path) => `prefix-${path.join('-')}`
);

1.2.3

Patch Changes

1.2.2

Patch Changes

1.2.1

Patch Changes

1.2.0

Minor Changes

  • #259 b8a6441 Thanks @markdalgleish! - Allow the result of composeStyles to be used in selectors

    When style compositions are used in selectors, they are now assigned an additional class 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,
  composeStyles
} from '@vanilla-extract/css';

const background = style({ background: 'mintcream' });
const padding = style({ padding: 12 });

export const container = composeStyles(
  background,
  padding
);

globalStyle(`${container} *`, {
  boxSizing: 'border-box'
});

1.1.2

Patch Changes

1.1.1

Patch Changes

1.1.0

Minor Changes

  • #206 64c18f9 Thanks @mattcompiles! - Add disableRuntimeStyles entrypoint

    In testing environments (like jsdom) vanilla-extract will create and insert styles. While this is often desirable, it can be a major slowdown in your tests. If your tests don't require styles to be available, the disableRuntimeStyles import will disable all style creation.

    // setupTests.ts
import '@vanilla-extract/css/disableRuntimeStyles';

1.0.1

Patch Changes

1.0.0

Major Changes

Patch Changes

0.5.3

Patch Changes

0.5.2

Patch Changes

  • #154 f5ab957 Thanks @mattcompiles! - Improved conditional CSS rendering

    Previously all conditional CSS (@media and @supports) in a .css.ts file would merge together. This meant each unique query (e.g. @media screen and (min-width: 700px)) would only be rendered once. This output is ideal for file size but can lead to the conditions being rendered in the wrong order. The new strategy will still merge conditions together but only if it is considered safe to do so.

  • #152 ae532f5 Thanks @Saartje87! - Added support for the following simple pseudo selectors

    • ::-webkit-resizer
    • ::-webkit-scrollbar-button
    • ::-webkit-scrollbar-corner
    • ::-webkit-scrollbar-thumb
    • ::-webkit-scrollbar-track-piece
    • ::-webkit-scrollbar-track
    • ::-webkit-scrollbar

0.5.1

Patch Changes

0.5.0

Minor Changes

Patch Changes

0.4.4

Patch Changes

0.4.3

Patch Changes

0.4.2

Patch Changes

0.4.1

Patch Changes

0.4.0

Minor Changes

  • #52 2d98bcc Thanks @markdalgleish! - Rename createThemeVars to createThemeContract

    BREAKING CHANGE

    import {
-  createThemeVars,
+  createThemeContract,
  createTheme
} from '@vanilla-extract/css';

-export const vars = createThemeVars({
+export const vars = createThemeContract({
  color: {
    brand: null
  },
  font: {
    body: null
  }
});

Patch Changes

0.3.2

Patch Changes

  • #47 a18bc03 Thanks @mattcompiles! - Improve dev prefixes on generated class names

    • Add file name to class names even if no debug id is present
    • If file is the index file use directory name instead

0.3.1

Patch Changes

0.3.0

Minor Changes

  • #37 ae9864c Thanks @markdalgleish! - Rename mapToStyles to styleVariants

    BREAKING CHANGE

    -import { mapToStyles } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';

-export const variant = mapToStyles({
+export const variant = styleVariants({
  primary: { background: 'blue' },
  secondary: { background: 'aqua' },
});

Patch Changes

0.2.0

Minor Changes

  • #20 3311914 Thanks @mattcompiles! - Ensure generated hashes are scoped by package

    vanilla-extract uses file path to ensure unique identifier (e.g. class names, CSS Variables, keyframes, etc) hashes across your application. This information is added to your *.css.ts files at build time. The issue with this approach is it meant *.css.ts files couldn't be pre-compiled when being published to npm.

    This change adds support for pre-compilation of packages by adding package name information to identifier hashes.

  • #25 c4bedd5 Thanks @markdalgleish! - The createInlineTheme function has now moved to the @vanilla-extract/dynamic package.

    -import { createInlineTheme } from '@vanilla-extract/css/createInlineTheme';
+import { createInlineTheme } from '@vanilla-extract/dynamic';

0.1.0

Minor Changes

  • e83ad50: Initial release