diff --git a/.changeset/cold-eyes-rescue.md b/.changeset/cold-eyes-rescue.md deleted file mode 100644 index 399a86a6d..000000000 --- a/.changeset/cold-eyes-rescue.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@vanilla-extract/css": minor ---- - -Add `::-webkit-calendar-picker-indicator` as a valid pseudo-element diff --git a/.changeset/good-wombats-doubt.md b/.changeset/good-wombats-doubt.md deleted file mode 100644 index 10f908329..000000000 --- a/.changeset/good-wombats-doubt.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@vanilla-extract/babel-plugin-debug-ids": minor ---- - -Add support for the new `createViewTransition` API diff --git a/.changeset/purple-cheetahs-hear.md b/.changeset/purple-cheetahs-hear.md deleted file mode 100644 index 28cbeb67e..000000000 --- a/.changeset/purple-cheetahs-hear.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -"@vanilla-extract/css": minor ---- - -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 -}); -`` diff --git a/.changeset/twelve-pans-dress.md b/.changeset/twelve-pans-dress.md deleted file mode 100644 index 9a4f43834..000000000 --- a/.changeset/twelve-pans-dress.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@vanilla-extract/vite-plugin': patch ---- - -Fixes a bug where Vanilla Extract files with extensions other than `css.ts` were not being invalidated during HMR diff --git a/packages/babel-plugin-debug-ids/CHANGELOG.md b/packages/babel-plugin-debug-ids/CHANGELOG.md index 03ff8542c..28266ef39 100644 --- a/packages/babel-plugin-debug-ids/CHANGELOG.md +++ b/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 diff --git a/packages/babel-plugin-debug-ids/package.json b/packages/babel-plugin-debug-ids/package.json index 8f2f62820..19ee25609 100644 --- a/packages/babel-plugin-debug-ids/package.json +++ b/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", diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md index 0fee299c6..f1e6cefb1 100644 --- a/packages/css/CHANGELOG.md +++ b/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' }); ``` diff --git a/packages/css/package.json b/packages/css/package.json index 9dfd7945d..3493f55a8 100644 --- a/packages/css/package.json +++ b/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", diff --git a/packages/esbuild-plugin/CHANGELOG.md b/packages/esbuild-plugin/CHANGELOG.md index ec6f43cb6..105d77c5a 100644 --- a/packages/esbuild-plugin/CHANGELOG.md +++ b/packages/esbuild-plugin/CHANGELOG.md @@ -1,5 +1,12 @@ # @vanilla-extract/esbuild-plugin +## 2.3.11 + +### Patch Changes + +- Updated dependencies []: + - @vanilla-extract/integration@7.1.10 + ## 2.3.10 ### Patch Changes @@ -113,7 +120,7 @@ // redBox ~= 'styles_redBox_asdfgj' const redBox = style({ - background: 'red', + background: 'red' }); ``` @@ -209,15 +216,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' }); ``` @@ -235,14 +249,19 @@ **Example for postcss with autoprefixer:** ```js - const { vanillaExtractPlugin } = require('@vanilla-extract/esbuild-plugin'); + const { + vanillaExtractPlugin + } = require('@vanilla-extract/esbuild-plugin'); const postcss = require('postcss'); const autoprefixer = require('autoprefixer'); async function processCss(css) { - const result = await postcss([autoprefixer]).process(css, { - from: undefined /* suppress source map warning */, - }); + const result = await postcss([autoprefixer]).process( + css, + { + from: undefined /* suppress source map warning */ + } + ); return result.css; } @@ -253,10 +272,10 @@ bundle: true, plugins: [ vanillaExtractPlugin({ - processCss, - }), + processCss + }) ], - outfile: 'out.js', + outfile: 'out.js' }) .catch(() => process.exit(1)); ``` diff --git a/packages/esbuild-plugin/package.json b/packages/esbuild-plugin/package.json index c8e6de2cf..d4fdbf3ec 100644 --- a/packages/esbuild-plugin/package.json +++ b/packages/esbuild-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/esbuild-plugin", - "version": "2.3.10", + "version": "2.3.11", "description": "Zero-runtime Stylesheets-in-TypeScript", "main": "dist/vanilla-extract-esbuild-plugin.cjs.js", "module": "dist/vanilla-extract-esbuild-plugin.esm.js", diff --git a/packages/integration/CHANGELOG.md b/packages/integration/CHANGELOG.md index 65330c974..330509223 100644 --- a/packages/integration/CHANGELOG.md +++ b/packages/integration/CHANGELOG.md @@ -1,5 +1,13 @@ # @vanilla-extract/integration +## 7.1.10 + +### Patch Changes + +- Updated dependencies [[`cd9d8b2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cd9d8b231bbd7a7ac6674d2b28f77cff93e5be9e), [`7b256d2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7b256d2a8ee815911ee96199abe78d6b7246c415), [`7b256d2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7b256d2a8ee815911ee96199abe78d6b7246c415)]: + - @vanilla-extract/css@1.16.0 + - @vanilla-extract/babel-plugin-debug-ids@1.1.0 + ## 7.1.9 ### Patch Changes @@ -410,15 +418,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' }); ``` diff --git a/packages/integration/package.json b/packages/integration/package.json index e242cf637..6b27f984b 100644 --- a/packages/integration/package.json +++ b/packages/integration/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/integration", - "version": "7.1.9", + "version": "7.1.10", "description": "Zero-runtime Stylesheets-in-TypeScript", "main": "dist/vanilla-extract-integration.cjs.js", "types": "dist/vanilla-extract-integration.cjs.d.ts", diff --git a/packages/jest-transform/CHANGELOG.md b/packages/jest-transform/CHANGELOG.md index 89958d09e..5ee644114 100644 --- a/packages/jest-transform/CHANGELOG.md +++ b/packages/jest-transform/CHANGELOG.md @@ -1,5 +1,12 @@ # @vanilla-extract/jest-transform +## 1.1.10 + +### Patch Changes + +- Updated dependencies []: + - @vanilla-extract/integration@7.1.10 + ## 1.1.9 ### Patch Changes diff --git a/packages/jest-transform/package.json b/packages/jest-transform/package.json index 7f48a0a13..b1d7eecc1 100644 --- a/packages/jest-transform/package.json +++ b/packages/jest-transform/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/jest-transform", - "version": "1.1.9", + "version": "1.1.10", "description": "Jest transformer for vanilla-extract", "main": "dist/vanilla-extract-jest-transform.cjs.js", "module": "dist/vanilla-extract-jest-transform.esm.js", diff --git a/packages/next-plugin/CHANGELOG.md b/packages/next-plugin/CHANGELOG.md index d7343bb5e..eca47c9f1 100644 --- a/packages/next-plugin/CHANGELOG.md +++ b/packages/next-plugin/CHANGELOG.md @@ -1,5 +1,12 @@ # @vanilla-extract/next-plugin +## 2.4.6 + +### Patch Changes + +- Updated dependencies []: + - @vanilla-extract/webpack-plugin@2.3.14 + ## 2.4.5 ### Patch Changes diff --git a/packages/next-plugin/package.json b/packages/next-plugin/package.json index 6230b6315..2f1a34787 100644 --- a/packages/next-plugin/package.json +++ b/packages/next-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/next-plugin", - "version": "2.4.5", + "version": "2.4.6", "description": "Zero-runtime Stylesheets-in-TypeScript", "main": "dist/vanilla-extract-next-plugin.cjs.js", "module": "dist/vanilla-extract-next-plugin.esm.js", diff --git a/packages/parcel-transformer/CHANGELOG.md b/packages/parcel-transformer/CHANGELOG.md index 037192276..b7dbaf466 100644 --- a/packages/parcel-transformer/CHANGELOG.md +++ b/packages/parcel-transformer/CHANGELOG.md @@ -1,5 +1,12 @@ # @vanilla-extract/parcel-transformer +## 1.0.10 + +### Patch Changes + +- Updated dependencies []: + - @vanilla-extract/integration@7.1.10 + ## 1.0.9 ### Patch Changes diff --git a/packages/parcel-transformer/package.json b/packages/parcel-transformer/package.json index e3f75d4e5..bda2b7ef6 100644 --- a/packages/parcel-transformer/package.json +++ b/packages/parcel-transformer/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/parcel-transformer", - "version": "1.0.9", + "version": "1.0.10", "description": "Zero-runtime Stylesheets-in-TypeScript", "main": "dist/vanilla-extract-parcel-transformer.cjs.js", "module": "dist/vanilla-extract-parcel-transformer.esm.js", diff --git a/packages/rollup-plugin/CHANGELOG.md b/packages/rollup-plugin/CHANGELOG.md index 32d889756..94b497fed 100644 --- a/packages/rollup-plugin/CHANGELOG.md +++ b/packages/rollup-plugin/CHANGELOG.md @@ -1,5 +1,12 @@ # @vanilla-extract/rollup-plugin +## 1.3.10 + +### Patch Changes + +- Updated dependencies []: + - @vanilla-extract/integration@7.1.10 + ## 1.3.9 ### Patch Changes @@ -103,7 +110,7 @@ // redBox ~= 'styles_redBox_asdfgj' const redBox = style({ - background: 'red', + background: 'red' }); ``` diff --git a/packages/rollup-plugin/package.json b/packages/rollup-plugin/package.json index 8003bb3f9..b61078f00 100644 --- a/packages/rollup-plugin/package.json +++ b/packages/rollup-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/rollup-plugin", - "version": "1.3.9", + "version": "1.3.10", "description": "Zero-runtime Stylesheets-in-TypeScript", "main": "dist/vanilla-extract-rollup-plugin.cjs.js", "module": "dist/vanilla-extract-rollup-plugin.esm.js", diff --git a/packages/vite-plugin/CHANGELOG.md b/packages/vite-plugin/CHANGELOG.md index d394784e7..5da5f4e65 100644 --- a/packages/vite-plugin/CHANGELOG.md +++ b/packages/vite-plugin/CHANGELOG.md @@ -1,5 +1,14 @@ # @vanilla-extract/vite-plugin +## 4.0.16 + +### Patch Changes + +- [#1482](https://github.com/vanilla-extract-css/vanilla-extract/pull/1482) [`30c0305`](https://github.com/vanilla-extract-css/vanilla-extract/commit/30c0305577638ada06393729f8eaaa7a72d69369) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug where Vanilla Extract files with extensions other than `css.ts` were not being invalidated during HMR + +- Updated dependencies []: + - @vanilla-extract/integration@7.1.10 + ## 4.0.15 ### Patch Changes @@ -237,9 +246,9 @@ export default { plugins: [ vanillaExtractPlugin({ - emitCssInSsr: true, - }), - ], + emitCssInSsr: true + }) + ] }; ``` @@ -284,7 +293,7 @@ // redBox ~= 'styles_redBox_asdfgj' const redBox = style({ - background: 'red', + background: 'red' }); ``` @@ -556,15 +565,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' }); ``` diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json index 8f5046e5d..5c9bc6ebd 100644 --- a/packages/vite-plugin/package.json +++ b/packages/vite-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/vite-plugin", - "version": "4.0.15", + "version": "4.0.16", "description": "Zero-runtime Stylesheets-in-TypeScript", "main": "dist/vanilla-extract-vite-plugin.cjs.js", "module": "dist/vanilla-extract-vite-plugin.esm.js", diff --git a/packages/webpack-plugin/CHANGELOG.md b/packages/webpack-plugin/CHANGELOG.md index 33ebae1bf..42d092065 100644 --- a/packages/webpack-plugin/CHANGELOG.md +++ b/packages/webpack-plugin/CHANGELOG.md @@ -1,5 +1,12 @@ # @vanilla-extract/webpack-plugin +## 2.3.14 + +### Patch Changes + +- Updated dependencies []: + - @vanilla-extract/integration@7.1.10 + ## 2.3.13 ### Patch Changes @@ -273,15 +280,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' }); ``` diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json index cd9cd7f4d..4c91e6358 100644 --- a/packages/webpack-plugin/package.json +++ b/packages/webpack-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/webpack-plugin", - "version": "2.3.13", + "version": "2.3.14", "description": "Zero-runtime Stylesheets-in-TypeScript", "main": "dist/vanilla-extract-webpack-plugin.cjs.js", "module": "dist/vanilla-extract-webpack-plugin.esm.js",