Version Packages

packages/babel-plugin-debug-ids/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vanilla-extract/babel-plugin-debug-ids
 
+## 1.1.0
+
+### Minor Changes
+
+- [#1450](https://github.com/vanilla-extract-css/vanilla-extract/pull/1450) [`7b256d2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7b256d2a8ee815911ee96199abe78d6b7246c415) Thanks [@wuz](https://github.com/wuz)! - Add support for the new `createViewTransition` API
+
 ## 1.0.6
 
 ### Patch Changes

packages/babel-plugin-debug-ids/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanilla-extract/babel-plugin-debug-ids",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-babel-plugin-debug-ids.cjs.js",
   "module": "dist/vanilla-extract-babel-plugin-debug-ids.esm.js",

packages/css/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @vanilla-extract/css
 
+## 1.16.0
+
+### Minor Changes
+
+- [#1475](https://github.com/vanilla-extract-css/vanilla-extract/pull/1475) [`cd9d8b2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cd9d8b231bbd7a7ac6674d2b28f77cff93e5be9e) Thanks [@corradopetrelli](https://github.com/corradopetrelli)! - Add `::-webkit-calendar-picker-indicator` as a valid pseudo-element
+
+- [#1450](https://github.com/vanilla-extract-css/vanilla-extract/pull/1450) [`7b256d2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7b256d2a8ee815911ee96199abe78d6b7246c415) Thanks [@wuz](https://github.com/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.
+
+  ```ts
+  import {
+    style,
+    createViewTransition
+  } from '@vanilla-extract/css';
+
+  export const titleViewTransition = createViewTransition();
+
+  export const pageTitle = style({
+    viewTransitionName: titleViewTransition
+  });
+  ``;
+  ```
+
 ## 1.15.5
 
 ### Patch Changes
@@ -54,12 +78,12 @@
   globalFontFace(gentium, [
     {
       src: 'local("Gentium")',
-      fontWeight: 'normal',
+      fontWeight: 'normal'
     },
     {
       src: 'local("Gentium Bold")',
-      fontWeight: 'bold',
-    },
+      fontWeight: 'bold'
+    }
   ]);
   ```
 
@@ -110,16 +134,16 @@
   const gentium = fontFace([
     {
       src: 'local("Gentium")',
-      fontWeight: 'normal',
+      fontWeight: 'normal'
     },
     {
       src: 'local("Gentium Bold")',
-      fontWeight: 'bold',
-    },
+      fontWeight: 'bold'
+    }
   ]);
 
   export const font = style({
-    fontFamily: gentium,
+    fontFamily: gentium
   });
   ```
 
@@ -152,9 +176,9 @@
   export const standard = style({
     '@layer': {
       [typography]: {
-        fontSize: '1rem',
-      },
-    },
+        fontSize: '1rem'
+      }
+    }
   });
   ```
 
@@ -225,7 +249,7 @@
 
   const identifier = generateIdentifier({
     debugId,
-    debugFileName: false,
+    debugFileName: false
   });
   ```
 
@@ -244,20 +268,23 @@
   `createContainer` creates a single scoped container name for use with CSS Container Queries. This avoids potential naming collisions with other containers.
 
   ```ts
-  import { style, createContainer } from '@vanilla-extract/css';
+  import {
+    style,
+    createContainer
+  } from '@vanilla-extract/css';
 
   export const sidebarContainer = createContainer();
 
   export const sidebar = style({
-    containerName: sidebarContainer,
+    containerName: sidebarContainer
   });
 
   export const navigation = style({
     '@container': {
       [`${sidebarContainer} (min-width: 400px)`]: {
-        display: 'flex',
-      },
-    },
+        display: 'flex'
+      }
+    }
   });
   ```
 
@@ -269,9 +296,9 @@
   export const myStyle = style({
     '@container': {
       '(min-width: 400px)': {
-        display: 'flex',
-      },
-    },
+        display: 'flex'
+      }
+    }
   });
   ```
 
@@ -409,9 +436,15 @@
 
   const base = style({ padding: 12 });
 
-  export const primary = style([base, { background: 'blue' }]);
+  export const primary = style([
+    base,
+    { background: 'blue' }
+  ]);
 
-  export const secondary = style([base, { background: 'aqua' }]);
+  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.
@@ -425,7 +458,7 @@
   export const container = style([background, padding]);
 
   globalStyle(`${container} *`, {
-    boxSizing: 'border-box',
+    boxSizing: 'border-box'
   });
   ```
 
@@ -450,25 +483,25 @@
   // themes.css.ts
   import {
     createGlobalThemeContract,
-    createGlobalTheme,
+    createGlobalTheme
   } from '@vanilla-extract/css';
 
   export const vars = createGlobalThemeContract({
     color: {
-      brand: 'color-brand',
+      brand: 'color-brand'
     },
     font: {
-      body: 'font-body',
-    },
+      body: 'font-body'
+    }
   });
 
   createGlobalTheme(':root', vars, {
     color: {
-      brand: 'blue',
+      brand: 'blue'
     },
     font: {
-      body: 'arial',
-    },
+      body: 'arial'
+    }
   });
   ```
 
@@ -483,13 +516,13 @@
   export const vars = createGlobalThemeContract(
     {
       color: {
-        brand: 'color-brand',
+        brand: 'color-brand'
       },
       font: {
-        body: 'font-body',
-      },
+        body: 'font-body'
+      }
     },
-    (value) => `prefix-${value}`,
+    (value) => `prefix-${value}`
   );
   ```
 
@@ -502,13 +535,13 @@
   export const vars = createGlobalThemeContract(
     {
       color: {
-        brand: null,
+        brand: null
       },
       font: {
-        body: null,
-      },
+        body: null
+      }
     },
-    (_value, path) => `prefix-${path.join('-')}`,
+    (_value, path) => `prefix-${path.join('-')}`
   );
   ```
 
@@ -541,15 +574,22 @@
   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.
 
   ```ts
-  import { style, globalStyle, composeStyles } from '@vanilla-extract/css';
+  import {
+    style,
+    globalStyle,
+    composeStyles
+  } from '@vanilla-extract/css';
 
   const background = style({ background: 'mintcream' });
   const padding = style({ padding: 12 });
 
-  export const container = composeStyles(background, padding);
+  export const container = composeStyles(
+    background,
+    padding
+  );
 
   globalStyle(`${container} *`, {
-    boxSizing: 'border-box',
+    boxSizing: 'border-box'
   });
   ```
 

packages/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanilla-extract/css",
-  "version": "1.15.5",
+  "version": "1.16.0",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "sideEffects": true,
   "main": "dist/vanilla-extract-css.cjs.js",