...
,
document.body
);
};
```
## `useStyles` / `resolveStyles`
The whole concept of `styleRefs` and `useStyles`/`resolveStyles` goes away. No more plumbing required, just access the CSS exports directly.
```diff
-import { useStyles } from 'react-treat';
-import * as styleRefs from './styles.treat';
+import * as styles from './styles.css';
export const Foo = () => {
- const styles = useStyles(styleRefs);
return (
',
inherits: false,
initialValue: '0deg',
});
const angleKeyframes = keyframes({
'100%': {
vars: {
[angle]: '360deg',
},
},
});
export const root = style({
background: 'pink',
color: 'blue',
padding: '16px',
transition: `opacity .1s ease, color .1s ease`, // Testing autoprefixer
backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
animation: `${angleKeyframes} 7s infinite ease-in-out both`,
':hover': {
opacity: 0.8,
color: color,
},
vars: {
[color]: '#fef',
[angle]: fallbackVar(angle, '138deg'),
},
});
================================================
FILE: examples/next/components/HelloWorld.tsx
================================================
import * as styles from './HelloWorld.css';
export function HelloWorld() {
return (
🧁 Hello from vanilla-extract!
);
}
================================================
FILE: examples/next/next.config.js
================================================
const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();
module.exports = withVanillaExtract();
================================================
FILE: examples/next/package.json
================================================
{
"name": "vanilla-extract-example-next",
"description": "Example project using vanilla-extract, compiling with Next.js",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "12.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@vanilla-extract/css": "workspace:^",
"@vanilla-extract/next-plugin": "workspace:^"
},
"browserslist": [
">0.3%",
"ie 11",
"safari 4",
"not op_mini all"
]
}
================================================
FILE: examples/next/pages/index.tsx
================================================
import { HelloWorld } from '../components/HelloWorld';
export default function Home() {
return
👋
🧁
🍨
Hello from vanilla-extract and Sprinkles
);
================================================
FILE: examples/webpack-react/src/global.css.ts
================================================
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body, body *', {
all: 'unset',
boxSizing: 'border-box',
});
================================================
FILE: examples/webpack-react/src/index.tsx
================================================
import { render } from 'react-dom';
import './global.css';
import { App } from './App';
const root = document.createElement('div');
document.body.appendChild(root);
render(Vite App
================================================
FILE: fixtures/features/package.json
================================================
{
"name": "@fixtures/features",
"version": "0.0.31",
"main": "src/index.ts",
"sideEffects": true,
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^",
"@vanilla-extract/dynamic": "workspace:^"
}
}
================================================
FILE: fixtures/features/src/features.css.ts
================================================
import { globalStyle, style, styleVariants } from '@vanilla-extract/css';
export const mergedStyle = style([
{ height: 50, ':after': { display: 'block', content: '"Below 700px"' } },
{
'@media': {
'screen and (min-width: 700px)': {
':after': { content: '"Above 700px"' },
},
},
},
{
'@media': {
'screen and (min-width: 700px)': {
color: 'plum',
},
},
},
]);
export const styleWithComposition = style([
{ backgroundColor: 'powderblue' },
mergedStyle,
{ selectors: { '&:hover': { backgroundColor: 'slategray' } } },
]);
export const styleWithNestedComposition = style([
{ backgroundColor: 'powderblue' },
[mergedStyle],
{ selectors: { '&:hover': { backgroundColor: 'slategray' } } },
]);
export const styleVariantsWithComposition = styleVariants({
variant: [
{ backgroundColor: 'powderblue' },
mergedStyle,
{ selectors: { '&:hover': { backgroundColor: 'slategray' } } },
],
});
export const styleVariantsWithMappedComposition = styleVariants(
{ variant: 'slategray' },
(backgroundColor) => [
{ backgroundColor: 'powderblue' },
mergedStyle,
{ selectors: { '&:hover': { backgroundColor } } },
],
);
export const compositionOnly = style([mergedStyle, styleWithComposition]);
// Force composition for use in selector
export const styleCompositionInSelector = style([
style({ color: 'white' }),
style({ backgroundColor: 'black' }),
]);
globalStyle(`body ${styleCompositionInSelector}`, {
fontSize: '24px',
});
export const styleVariantsCompositionInSelector = styleVariants({
variant: [style({ color: 'white' }), style({ backgroundColor: 'black' })],
});
globalStyle(`body ${styleVariantsCompositionInSelector.variant}`, {
fontSize: '24px',
});
export const styleWithStartingStyle = style({
backgroundColor: 'black',
'@starting-style': {
backgroundColor: 'white',
},
});
================================================
FILE: fixtures/features/src/html.ts
================================================
import * as styles from './features.css';
import testNodes from '../test-nodes.json';
export default `
Merged style
Style with composition
Style with nested composition
Style variants with composition
Style variants with mapped composition
Composition only
Style composition in selector
Style variants composition in selector
Style with @starting-style rule
`;
// @ts-expect-error Vite env not defined
if (import.meta.hot) {
// @ts-expect-error Vite env not defined
import.meta.hot.accept();
}
================================================
FILE: fixtures/features/src/index.ts
================================================
import html from './html';
function render() {
document.body.innerHTML = html;
}
render();
================================================
FILE: fixtures/features/test-nodes.json
================================================
{
"mergedStyle": "mergedStyle",
"styleWithComposition": "styleWithComposition",
"styleWithNestedComposition": "styleWithNestedComposition",
"styleVariantsWithComposition": "styleVariantsWithComposition",
"styleVariantsWithMappedComposition": "styleVariantsWithMappedComposition",
"compositionOnly": "compositionOnly",
"styleCompositionInSelector": "styleCompositionInSelector",
"styleVariantsCompositionInSelector": "styleVariantsCompositionInSelector",
"styleWithStartingStyle": "styleWithStartingStyle"
}
================================================
FILE: fixtures/layers/CHANGELOG.md
================================================
# @fixtures/layers
## 0.0.14
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
## 0.0.13
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
## 0.0.12
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
## 0.0.11
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/css@1.15.2
## 0.0.10
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.9
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.8
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 0.0.7
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
## 0.0.6
### Patch Changes
- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/css@1.14.0
## 0.0.5
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/css@1.13.0
## 0.0.4
### Patch Changes
- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:
- @vanilla-extract/css@1.12.0
## 0.0.3
### Patch Changes
- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:
- @vanilla-extract/css@1.11.1
## 0.0.2
### Patch Changes
- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:
- @vanilla-extract/css@1.11.0
================================================
FILE: fixtures/layers/index.html
================================================
Layers
================================================
FILE: fixtures/layers/package.json
================================================
{
"name": "@fixtures/layers",
"version": "0.0.14",
"main": "src/index.ts",
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^"
}
}
================================================
FILE: fixtures/layers/src/index.ts
================================================
import { link, pink } from './styles.css';
const html = String.raw;
document.body.innerHTML = html`
This link should be red on mobile, green on
desktop.
This link with class of link
should be blue on mobile, green on desktop.
This link with class of pink
should be pink on mobile, green on desktop.
`;
================================================
FILE: fixtures/layers/src/styles.css.ts
================================================
import { style, globalStyle, layer, globalLayer } from '@vanilla-extract/css';
/*
The resulting layer order:
1. lib
2. base
3. typography (when above 600px)
4. utilities
5. typography (when below 600px)
This will make links red/blue/pink when below 600px and green when above 600px.
*/
const typography = 'typography'; // this layer is defined conditionally
const lib = globalLayer('lib');
const base = layer({ parent: lib });
globalStyle('a', {
'@media': {
'screen and (min-width: 600px)': {
'@layer': {
[typography]: {
color: 'green', // styles *all* links
fontSize: '1.5rem',
},
},
},
},
'@layer': {
[base]: {
fontWeight: 800,
color: 'red',
},
},
});
export const link = style({
'@layer': {
[base]: {
color: 'blue',
},
},
});
const utilities = layer({ parent: lib });
export const pink = style({
'@layer': {
[utilities]: {
color: 'hotpink', // styles *all* .pink's
},
},
});
globalLayer(typography);
================================================
FILE: fixtures/low-level/CHANGELOG.md
================================================
# @fixtures/low-level
## 0.0.31
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
## 0.0.30
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
## 0.0.29
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
## 0.0.28
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/css@1.15.2
## 0.0.27
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.26
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.25
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 0.0.24
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
## 0.0.23
### Patch Changes
- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/css@1.14.0
## 0.0.22
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/css@1.13.0
## 0.0.21
### Patch Changes
- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:
- @vanilla-extract/css@1.12.0
## 0.0.20
### Patch Changes
- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:
- @vanilla-extract/css@1.11.1
## 0.0.19
### Patch Changes
- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:
- @vanilla-extract/css@1.11.0
## 0.0.18
### Patch Changes
- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/css@1.10.0
## 0.0.17
### Patch Changes
- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:
- @vanilla-extract/css@1.9.5
## 0.0.16
### Patch Changes
- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:
- @vanilla-extract/css@1.9.4
## 0.0.15
### Patch Changes
- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:
- @vanilla-extract/css@1.9.3
## 0.0.14
### Patch Changes
- Updated dependencies [[`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39)]:
- @vanilla-extract/css@1.9.2
## 0.0.13
### Patch Changes
- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:
- @vanilla-extract/css@1.9.1
## 0.0.12
### Patch Changes
- Updated dependencies [[`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb)]:
- @vanilla-extract/css@1.9.0
## 0.0.11
### Patch Changes
- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:
- @vanilla-extract/css@1.8.0
## 0.0.10
### Patch Changes
- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:
- @vanilla-extract/css@1.7.4
## 0.0.9
### Patch Changes
- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:
- @vanilla-extract/css@1.7.3
## 0.0.8
### Patch Changes
- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:
- @vanilla-extract/css@1.7.2
## 0.0.7
### Patch Changes
- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:
- @vanilla-extract/css@1.7.1
## 0.0.6
### Patch Changes
- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:
- @vanilla-extract/css@1.7.0
## 0.0.5
### Patch Changes
- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/css@1.6.8
## 0.0.4
### Patch Changes
- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:
- @vanilla-extract/css@1.6.7
## 0.0.3
### Patch Changes
- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:
- @vanilla-extract/css@1.6.6
## 0.0.2
### Patch Changes
- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:
- @vanilla-extract/css@1.6.5
## 0.0.1
### Patch Changes
- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:
- @vanilla-extract/css@1.6.4
================================================
FILE: fixtures/low-level/index.html
================================================
Vite App
================================================
FILE: fixtures/low-level/package.json
================================================
{
"name": "@fixtures/low-level",
"version": "0.0.31",
"main": "src/index.ts",
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^"
}
}
================================================
FILE: fixtures/low-level/src/index.ts
================================================
import { block, container } from './styles.css';
import testNodes from '../test-nodes.json';
document.body.innerHTML = `
`;
// @ts-expect-error Vite env not defined
if (import.meta.hot) {
// @ts-expect-error Vite env not defined
import.meta.hot.accept();
}
================================================
FILE: fixtures/low-level/src/styles.css.ts
================================================
import { style, createVar, createContainer } from '@vanilla-extract/css';
const color = createVar();
const myContainer = createContainer('my-container');
export const container = style({
containerType: 'size',
containerName: myContainer,
width: 500,
});
export const block = style({
vars: {
[color]: 'blue',
},
backgroundColor: color,
padding: 20,
'@media': {
'screen and (min-width: 200px)': {
'@container': {
[`${myContainer} (min-width: 400px)`]: {
color: 'white',
},
},
},
},
});
================================================
FILE: fixtures/low-level/test-nodes.json
================================================
{
"block": "block"
}
================================================
FILE: fixtures/next-12-pages-router/CHANGELOG.md
================================================
# @fixtures/next-pages-router
## 0.0.7
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @fixtures/features@0.0.31
- @fixtures/recipes@0.0.36
- @fixtures/sprinkles@0.0.36
- @vanilla-extract/recipes@0.5.5
- @vanilla-extract/sprinkles@1.6.3
## 0.0.6
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @vanilla-extract/recipes@0.5.5
- @vanilla-extract/sprinkles@1.6.3
- @fixtures/features@0.0.30
- @fixtures/recipes@0.0.35
- @fixtures/sprinkles@0.0.35
## 0.0.5
### Patch Changes
- Updated dependencies [[`2a7acc989fba707220186f2d0b824bc4cc37ad66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2a7acc989fba707220186f2d0b824bc4cc37ad66)]:
- @vanilla-extract/recipes@0.5.4
- @fixtures/recipes@0.0.34
## 0.0.4
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @fixtures/features@0.0.29
- @fixtures/recipes@0.0.33
- @fixtures/sprinkles@0.0.34
- @vanilla-extract/recipes@0.5.3
- @vanilla-extract/sprinkles@1.6.2
## 0.0.3
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/sprinkles@1.6.2
- @vanilla-extract/recipes@0.5.3
- @vanilla-extract/css@1.15.2
- @fixtures/sprinkles@0.0.33
- @fixtures/features@0.0.28
- @fixtures/recipes@0.0.32
## 0.0.2
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
- @fixtures/features@0.0.27
- @fixtures/recipes@0.0.31
- @fixtures/sprinkles@0.0.32
## 0.0.1
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
- @fixtures/features@0.0.26
- @fixtures/recipes@0.0.30
- @fixtures/sprinkles@0.0.31
================================================
FILE: fixtures/next-12-pages-router/next.config.js
================================================
const {
createVanillaExtractPlugin,
} = require('./next-plugin/dist/vanilla-extract-next-plugin.cjs.js');
const withVanillaExtract = createVanillaExtractPlugin();
/** @type {import('next').NextConfig} */
const config = withVanillaExtract({
// we need to differentiate build and dev folders
// so they don't overwrite eachother when running tests
distDir: process.env.NODE_ENV === 'production' ? 'dist' : '.next',
experimental: {
externalDir: true,
},
onDemandEntries: {
// Make sure entries are not getting disposed.
maxInactiveAge: 1000 * 60 * 60,
},
});
module.exports = config;
================================================
FILE: fixtures/next-12-pages-router/package.json
================================================
{
"name": "@fixtures/next-12-pages-router",
"description": "Next pages router fixtures",
"version": "0.0.7",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"clean:dev": "rm -rf .next",
"clean:prod": "rm -rf dist"
},
"dependencies": {
"@fixtures/features": "workspace:*",
"@fixtures/recipes": "workspace:*",
"@fixtures/sprinkles": "workspace:*",
"@vanilla-extract/css": "workspace:*",
"@vanilla-extract/recipes": "workspace:*",
"@vanilla-extract/sprinkles": "workspace:*",
"next": "12.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@vanilla-extract/next-plugin": "workspace:*",
"@vanilla-extract/webpack-plugin": "workspace:*"
},
"browserslist": [
">0.3%",
"ie 11",
"safari 4",
"not op_mini all"
]
}
================================================
FILE: fixtures/next-12-pages-router/src/pages/features/index.tsx
================================================
import html from '@fixtures/features/src/html';
export default function Features() {
return (
<>
);
}
================================================
FILE: fixtures/next-12-pages-router/src/pages/index.tsx
================================================
import Link from 'next/link';
export default function Home() {
return (
<>
);
}
================================================
FILE: fixtures/next-12-pages-router/src/pages/sprinkles/index.tsx
================================================
import html from '@fixtures/sprinkles/src/html';
export default function Sprinkles() {
return (
<>
);
}
================================================
FILE: fixtures/next-12-pages-router/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"forceConsistentCasingInFileNames": true,
"jsx": "preserve",
"strictNullChecks": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
================================================
FILE: fixtures/next-13-app-router/CHANGELOG.md
================================================
# @fixtures/next-app-router
## 0.0.7
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @fixtures/features@0.0.31
- @fixtures/recipes@0.0.36
- @fixtures/sprinkles@0.0.36
- @vanilla-extract/recipes@0.5.5
- @vanilla-extract/sprinkles@1.6.3
## 0.0.6
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @vanilla-extract/recipes@0.5.5
- @vanilla-extract/sprinkles@1.6.3
- @fixtures/features@0.0.30
- @fixtures/recipes@0.0.35
- @fixtures/sprinkles@0.0.35
## 0.0.5
### Patch Changes
- Updated dependencies [[`2a7acc989fba707220186f2d0b824bc4cc37ad66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2a7acc989fba707220186f2d0b824bc4cc37ad66)]:
- @vanilla-extract/recipes@0.5.4
- @fixtures/recipes@0.0.34
## 0.0.4
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @fixtures/features@0.0.29
- @fixtures/recipes@0.0.33
- @fixtures/sprinkles@0.0.34
- @vanilla-extract/recipes@0.5.3
- @vanilla-extract/sprinkles@1.6.2
## 0.0.3
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/sprinkles@1.6.2
- @vanilla-extract/recipes@0.5.3
- @vanilla-extract/css@1.15.2
- @fixtures/sprinkles@0.0.33
- @fixtures/features@0.0.28
- @fixtures/recipes@0.0.32
## 0.0.2
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
- @fixtures/features@0.0.27
- @fixtures/recipes@0.0.31
- @fixtures/sprinkles@0.0.32
## 0.0.1
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
- @fixtures/features@0.0.26
- @fixtures/recipes@0.0.30
- @fixtures/sprinkles@0.0.31
================================================
FILE: fixtures/next-13-app-router/next.config.js
================================================
const {
createVanillaExtractPlugin,
} = require('./next-plugin/dist/vanilla-extract-next-plugin.cjs.js');
const withVanillaExtract = createVanillaExtractPlugin();
/** @type {import('next').NextConfig} */
const config = withVanillaExtract({
// we need to differentiate build and dev folders
// so they don't overwrite eachother when running tests
distDir: process.env.NODE_ENV === 'production' ? 'dist' : '.next',
experimental: {
externalDir: true,
},
onDemandEntries: {
// Make sure entries are not getting disposed.
maxInactiveAge: 1000 * 60 * 60,
},
});
module.exports = config;
================================================
FILE: fixtures/next-13-app-router/package.json
================================================
{
"name": "@fixtures/next-13-app-router",
"description": "Next app router fixtures",
"version": "0.0.7",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"clean:dev": "rm -rf .next",
"clean:prod": "rm -rf dist"
},
"dependencies": {
"@fixtures/features": "workspace:*",
"@fixtures/recipes": "workspace:*",
"@fixtures/sprinkles": "workspace:*",
"@vanilla-extract/css": "workspace:*",
"@vanilla-extract/recipes": "workspace:*",
"@vanilla-extract/sprinkles": "workspace:*",
"next": "npm:next@13.5.11",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@vanilla-extract/next-plugin": "workspace:*",
"@vanilla-extract/webpack-plugin": "workspace:*"
},
"browserslist": [
">0.3%",
"ie 11",
"safari 4",
"not op_mini all"
]
}
================================================
FILE: fixtures/next-13-app-router/src/app/features/page.tsx
================================================
import html from '@fixtures/features/src/html';
export default function Features() {
return (
<>
);
}
================================================
FILE: fixtures/next-13-app-router/src/app/layout.tsx
================================================
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
================================================
FILE: fixtures/next-13-app-router/src/app/page.tsx
================================================
import Link from 'next/link';
export default function Home() {
return (
<>
);
}
================================================
FILE: fixtures/next-13-app-router/src/app/sprinkles/page.tsx
================================================
import html from '@fixtures/sprinkles/src/html';
export default function Sprinkles() {
return (
<>
);
}
================================================
FILE: fixtures/next-13-app-router/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"forceConsistentCasingInFileNames": true,
"jsx": "preserve",
"plugins": [
{
"name": "next"
}
],
"strictNullChecks": true,
"module": "esnext"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"dist/types/**/*.ts"
],
"exclude": ["node_modules"]
}
================================================
FILE: fixtures/next-16-app-pages-router/next.config.ts
================================================
import { NextConfig } from 'next';
import { createVanillaExtractPlugin } from './next-plugin/dist/vanilla-extract-next-plugin.cjs.js';
const withVanillaExtract = createVanillaExtractPlugin({
unstable_turbopack: { mode: 'auto' },
});
export const config: NextConfig = {
distDir: process.env.NEXT_DIST_DIR || '.next',
experimental: { externalDir: true },
onDemandEntries: { maxInactiveAge: 1000 * 60 * 60 },
transpilePackages: ['@fixtures/sprinkles/src/html'],
devIndicators: false,
};
export default withVanillaExtract(config);
================================================
FILE: fixtures/next-16-app-pages-router/package.json
================================================
{
"name": "@fixtures/next-16-app-pages-router",
"version": "0.0.1",
"private": true,
"description": "Next 16 fixture with app + pages routers; supports webpack and turbopack builds",
"scripts": {
"dev-webpack": "NEXT_DIST_DIR=.next/webpack next dev --webpack",
"dev-turbo": "NEXT_DIST_DIR=.next/turbo next dev --turbo",
"build-webpack": "NEXT_DIST_DIR=dist/webpack next build --webpack",
"start-webpack": "NEXT_DIST_DIR=dist/webpack next start",
"build-turbo": "NEXT_DIST_DIR=dist/turbo next build --turbo",
"start-turbo": "NEXT_DIST_DIR=dist/turbo next start",
"clean:dev": "rm -rf .next",
"clean:prod": "rm -rf dist"
},
"dependencies": {
"@fixtures/features": "workspace:*",
"@fixtures/recipes": "workspace:*",
"@fixtures/sprinkles": "workspace:*",
"@vanilla-extract/css": "workspace:*",
"@vanilla-extract/recipes": "workspace:*",
"@vanilla-extract/sprinkles": "workspace:*",
"next": "npm:next@^16.0.0",
"react": "npm:react@^19.2.0",
"react-dom": "npm:react-dom@^19.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@vanilla-extract/next-plugin": "workspace:*",
"@vanilla-extract/webpack-plugin": "workspace:*"
}
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/creepster/page.tsx
================================================
import { creepsterText } from '../../styles/creepster.css';
export default function CreepsterPage() {
return (
This text should look scary (Creepster Font)
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/a-plain.css.ts
================================================
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: '#0cdbcd',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/a.css.ts
================================================
import { globalStyle, style } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: '#0cdbcd',
});
export const a = style({
border: '1px solid black',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/b-plain.css.ts
================================================
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: '#0cdbcd',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/b.css.ts
================================================
import { globalStyle, style } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: '#0cdbcd',
});
export const b = style({
border: '1px solid red',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/extra/c-plain.css.ts
================================================
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: '#0cdbcd',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/extra/c.css.ts
================================================
import { globalStyle, style } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: '#0cdbcd',
});
export const c = style({
border: '1px solid black',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/page.tsx
================================================
import './a-plain.css';
import { a } from './a.css';
import './b-plain.css';
import { b } from './b.css';
import './extra/c-plain.css';
import { c } from './extra/c.css';
export default function DuplicationTestPage() {
return (
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/features/page.tsx
================================================
import html from '@fixtures/features/src/html';
export default function Features() {
return (
<>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/function-serializer/page.tsx
================================================
import { RedBox, BlueText } from './source.css';
export default function Page() {
return (
Function Serializer Test
This should be a red box with blue text inside
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/function-serializer/runtime.tsx
================================================
export function runtimeStyled(
tag: Tag,
className: string,
) {
return function Component(props: React.ComponentProps) {
const Element = tag as any;
return (
(
tag: Tag,
styles: StyleRule,
) {
const className = style(styles);
const args = [tag, className] as const;
const Component = runtimeStyled(...args);
addFunctionSerializer(Component, {
importPath: './runtime',
importName: 'runtimeStyled',
args,
});
return Component;
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/layout.tsx
================================================
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/next-font/page.tsx
================================================
import * as directFonts from '../../styles/fonts';
import { pickedValues } from '../../styles/nextFont.css';
export default function NextFontChecks() {
const pairs: Array<
[string, string | number | undefined, string | number | undefined]
> = [];
for (const [name, vePicked] of Object.entries(pickedValues)) {
const direct = directFonts[name as keyof typeof directFonts];
const style = direct?.style || {};
pairs.push([`${name} family`, vePicked.fontFamily, style.fontFamily]);
pairs.push([`${name} weight`, vePicked.fontWeight, style.fontWeight]);
pairs.push([`${name} style`, vePicked.fontStyle, style.fontStyle]);
}
pairs.sort((a, b) => a[0].localeCompare(b[0]));
for (const [name, fromVe, direct] of pairs) {
if (String(fromVe) !== String(direct)) {
throw new Error(
`[next-font] mismatch for ${name}:\n${String(fromVe)} !==\n${String(
direct,
)}`,
);
}
}
return (
next 16 next/font comparisons
{pairs.map(([name, fromVe, direct]) => (
{name}: {fromVe}
))}
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/next-image/image.css.ts
================================================
import logo from './logo.png';
import { style } from '@vanilla-extract/css';
import type { StaticImageData } from 'next/image';
// types are funky because of our monorepo setup
const withCast = logo as unknown as StaticImageData;
export const imageStyle = style({
backgroundImage: `url(${withCast.src})`,
width: `${withCast.width}px`,
height: `${withCast.height}px`,
border: '1px solid red',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/next-image/page.tsx
================================================
import { imageStyle } from './image.css';
export default function NextImagePage() {
return Next Image Page
;
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/page.tsx
================================================
import Link from 'next/link';
export default function Home() {
return (
<>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/sprinkles/page.tsx
================================================
import html from '@fixtures/sprinkles/src/html';
export default function Sprinkles() {
return (
<>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/pages/pages-router/features/index.tsx
================================================
import html from '@fixtures/features/src/html';
export default function Features() {
return (
<>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/pages/pages-router/index.tsx
================================================
import Link from 'next/link';
export default function Home() {
return (
<>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/pages/pages-router/sprinkles/index.tsx
================================================
import html from '@fixtures/sprinkles/src/html';
export default function Sprinkles() {
return (
<>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/styles/creepster-font.ts
================================================
import { Creepster } from 'next/font/google';
export const creepster = Creepster({
weight: '400',
subsets: ['latin'],
display: 'block',
preload: true,
});
================================================
FILE: fixtures/next-16-app-pages-router/src/styles/creepster.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { creepster } from './creepster-font';
export const creepsterText = style({
fontFamily: creepster.style.fontFamily,
fontSize: '40px',
color: 'red',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/styles/fonts.ts
================================================
// --- 1. Imports ---
// Test weirdly named imports for both local and google fonts.
import {
Noto_Serif as NotoSerif,
Roboto as R,
Roboto_Flex as RF,
Inter as Weird_Renamed_Font$8a_,
} from 'next/font/google';
import weird_renamed_local$3_ from 'next/font/local';
// =================================================================
// next/font/local (using weird_renamed_local$3_)
// =================================================================
// --- 2. Local: Variable Name Edge Cases (Export) ---
// The import name is already tested. This tests weird export names.
export const localSimple = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
preload: false,
});
export const $local_weird_EXPORT_name_ = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
fallback: ['system-ui'],
preload: false,
});
// --- 3. Local: Fallback Prop ---
export const localFallbackOmitted = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
// fallback is omitted
preload: false,
});
export const localFallbackSingleArray = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
fallback: ['system-ui'],
preload: false,
});
export const localFallbackMultiArray = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
fallback: ['Times New Roman', 'Gill Sans', 'emoji'],
preload: false,
});
// --- 4. Local: Style Prop ---
export const localStyleOmitted = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
// style is omitted
preload: false,
});
export const localStyleSingle = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
style: 'italic',
preload: false,
});
// --- 5. Local: Weight Prop ---
export const localWeightOmitted = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
// weight is omitted
preload: false,
});
export const localWeightSingle = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
weight: '400',
preload: false,
});
// =================================================================
// next/font/google (using Weird_Renamed_Font$8a_)
// =================================================================
// --- 6. Google: Variable Name Edge Cases (Export) ---
// The import name is already tested. This tests weird export names.
export const googleSimple = Weird_Renamed_Font$8a_({
subsets: ['latin'],
preload: false,
});
export const $google_weird_EXPORT_name_ = Weird_Renamed_Font$8a_({
subsets: ['latin'],
fallback: ['system-ui'],
preload: false,
});
// --- 7. Google: Fallback Prop ---
export const googleFallbackOmitted = Weird_Renamed_Font$8a_({
subsets: ['latin'],
// fallback is omitted
preload: false,
});
export const googleFallbackSingleArray = Weird_Renamed_Font$8a_({
subsets: ['latin'],
fallback: ['system-ui'],
preload: false,
});
export const googleFallbackMultiArray = Weird_Renamed_Font$8a_({
subsets: ['latin'],
fallback: ['Times New Roman', 'Gill Sans', 'emoji'],
preload: false,
});
// --- 8. Google: Style Prop ---
export const googleStyleOmitted = Weird_Renamed_Font$8a_({
subsets: ['latin'],
// style is omitted
preload: false,
});
export const googleStyleSingle = Weird_Renamed_Font$8a_({
subsets: ['latin'],
style: 'italic',
preload: false,
});
export const googleStyleArray = Weird_Renamed_Font$8a_({
subsets: ['latin'],
style: ['italic', 'normal'],
preload: false,
});
// --- 9. Google: Weight Prop ---
export const googleWeightOmitted = Weird_Renamed_Font$8a_({
subsets: ['latin'],
// weight is omitted
preload: false,
});
export const googleWeightSingle = Weird_Renamed_Font$8a_({
subsets: ['latin'],
weight: '400',
preload: false,
});
export const googleWeightVariable = Weird_Renamed_Font$8a_({
subsets: ['latin'],
weight: 'variable',
preload: false,
});
export const googleWeightArray = Weird_Renamed_Font$8a_({
subsets: ['latin'],
weight: ['400', '700', '900'],
preload: false,
});
// intentionally odd local variable name to exercise transform edge-cases
export const __Local_Font = weird_renamed_local$3_({
src: [{ path: './fonts/Inter-Regular.woff2', weight: '400' }],
fallback: ['system-ui'],
preload: false,
});
// renamed imports
export const _Roboto = R({
weight: '400',
subsets: ['latin'],
fallback: ['system-ui', 'skibidi', 'third font'],
style: ['italic', 'normal'],
preload: false,
});
export const _Flex = RF({
subsets: ['latin', 'greek'],
weight: ['200', '300'],
adjustFontFallback: false,
style: 'normal',
fallback: ['system-ui'],
preload: false,
});
// style properties are consumed dynamically in nextFont.css.ts via pickedValues
// mirror additional cases from next-16
export const _localMultiFallback = weird_renamed_local$3_({
src: [{ path: './fonts/Inter-Regular.woff2' }],
fallback: ['system-ui', 'ui-monospace', 'third font'],
preload: false,
});
export const _localExplicit = weird_renamed_local$3_({
src: [{ path: './fonts/Inter-Regular.woff2' }],
weight: '400',
style: 'italic',
fallback: ['Times New Roman', 'Gill Sans'],
preload: false,
});
export const _localDupFallback = weird_renamed_local$3_({
src: [{ path: './fonts/Inter-Regular.woff2' }],
fallback: ['system-ui', 'system-ui', 'ui-serif', 'weird_font'],
preload: false,
});
export const _robotoDefaultStyle = R({
subsets: ['latin'],
fallback: ['serif'],
preload: false,
});
export const _robotoItalic = R({
subsets: ['latin'],
fallback: ['sans-serif'],
style: 'italic',
weight: '400',
preload: false,
});
export const _robotoMultiStyle = R({
subsets: ['latin'],
fallback: ['monospace'],
style: ['italic', 'normal'],
preload: false,
});
export const _robotoWeightStr = R({ weight: '400', preload: false });
export const _robotoWeightVar = R({ weight: 'variable', preload: false });
export const _notoSerif = NotoSerif({
subsets: ['latin'],
fallback: ['system-ui'],
preload: false,
});
export const _robotoFallbackSpaces = R({
subsets: ['latin'],
fallback: ['Times New Roman', 'Gill Sans', 'Avenir Next'],
preload: false,
});
export const _robotoDupFallback = R({
subsets: ['latin'],
fallback: ['system-ui', 'system-ui', 'ui-serif', 'weird_font'],
preload: false,
});
================================================
FILE: fixtures/next-16-app-pages-router/src/styles/nextFont.css.ts
================================================
import * as fonts from './fonts';
export const pickedValues = Object.fromEntries(
Object.entries(fonts).map(
([importName, { style }]) =>
[
importName,
{
fontFamily: style.fontFamily,
fontWeight: style.fontWeight,
fontStyle: style.fontStyle,
},
] as const,
),
) as Record<
keyof typeof fonts,
{
fontFamily: string;
fontWeight: number;
fontStyle: string;
}
>;
================================================
FILE: fixtures/next-16-app-pages-router/tsconfig.json
================================================
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": [
"next-env.d.ts",
".next/types/**/*.ts",
".next/dev/types/**/*.ts",
"**/*.mts",
"**/*.ts",
"**/*.tsx",
"dist/turbo/types/**/*.ts",
"dist/turbo/dev/types/**/*.ts",
"dist/webpack/types/**/*.ts",
"dist/webpack/dev/types/**/*.ts",
".next/turbo/types/**/*.ts",
".next/turbo/dev/types/**/*.ts",
".next/webpack/types/**/*.ts",
".next/webpack/dev/types/**/*.ts"
],
"exclude": ["node_modules"]
}
================================================
FILE: fixtures/react-library-example/package.json
================================================
{
"name": "@fixtures/react-library-example",
"description": "React design system library",
"version": "0.0.1",
"private": true,
"type": "module",
"main": "./dist/index.js",
"dependencies": {
"@vanilla-extract/css": "workspace:*",
"clsx": "^2.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19"
}
}
================================================
FILE: fixtures/react-library-example/src/button/button.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { vars } from '../styles/vars.css.js';
export const btn = style({
background: vars.color.background.brand,
borderRadius: vars.size.radius[200],
color: vars.color.text.brand,
...vars.typography.body.medium,
paddingBlock: vars.size.space[200],
paddingInline: vars.size.space[300],
});
================================================
FILE: fixtures/react-library-example/src/button/button.tsx
================================================
import clsx from 'clsx';
import * as styles from './button.css.js';
export default function Button({
className,
children,
type = 'button',
...props
}: React.ComponentProps<'button'>) {
return (
{children}
);
}
================================================
FILE: fixtures/react-library-example/src/checkbox/checkbox.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { vars } from '../styles/vars.css.js';
export const label = style({
display: 'block',
...vars.typography.body.medium,
'::before': {
background: vars.color.background.brand,
borderColor: vars.color.border.default,
borderWidth: 1,
borderStyle: 'solid',
content: '',
borderRadius: vars.size.radius['200'],
marginRight: vars.size.space['300'],
},
});
export const input = style({
width: '1.5rem',
height: '1.5rem',
});
================================================
FILE: fixtures/react-library-example/src/checkbox/checkbox.tsx
================================================
import { useId } from 'react';
import clsx from 'clsx';
import * as styles from './checkbox.css.js';
export default function Radio({
children,
className,
id,
...props
}: React.ComponentProps<'input'> & { children: React.ReactNode }) {
const randomID = useId();
return (
<>
{children}
);
}
================================================
FILE: fixtures/react-library-example/src/index.ts
================================================
// 1. Style reset
import './styles/reset.css.js';
// 2. Design library
export { default as Button } from './button/button.js';
export { default as Checkbox } from './checkbox/checkbox.js';
export { default as Radio } from './radio/radio.js';
// 3. Utility CSS should be last
import './styles/utility.css.js';
================================================
FILE: fixtures/react-library-example/src/radio/radio.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { vars } from '../styles/vars.css.js';
export const label = style({
display: 'block',
...vars.typography.body.medium,
'::before': {
background: vars.color.background.brand,
borderColor: vars.color.border.default,
borderWidth: 1,
borderStyle: 'solid',
content: '',
borderRadius: vars.size.radius.full,
marginRight: vars.size.space['300'],
},
});
export const input = style({
width: '1.5rem',
height: '1.5rem',
});
================================================
FILE: fixtures/react-library-example/src/radio/radio.tsx
================================================
import { useId } from 'react';
import clsx from 'clsx';
import * as styles from './radio.css.js';
export default function Radio({
children,
className,
id,
...props
}: React.ComponentProps<'input'> & { children: React.ReactNode }) {
const randomID = useId();
return (
<>
{children}
);
}
================================================
FILE: fixtures/react-library-example/src/styles/reset.css.ts
================================================
import { globalStyle } from '@vanilla-extract/css';
globalStyle('html, body', {
fontSize: '100%',
height: '100%',
lineHeight: 1,
margin: 0,
});
================================================
FILE: fixtures/react-library-example/src/styles/utility.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { vars } from './vars.css.js';
// Note: these aren’t meant to be intended as best practice over Sprinkles,
// these are only testing style() declarations loaded differently
export const mt100 = style({ marginTop: vars.size.space[100] });
export const mt200 = style({ marginTop: vars.size.space[200] });
export const mt300 = style({ marginTop: vars.size.space[300] });
export const mt400 = style({ marginTop: vars.size.space[400] });
================================================
FILE: fixtures/react-library-example/src/styles/vars.css.ts
================================================
import { createGlobalThemeContract, createTheme } from '@vanilla-extract/css';
/**
* Figma’s Simple Design System
* Licensed under Creative Commons Attribution 4.0
* @see https://www.figma.com/community/file/1380235722331273046
*/
export const vars = createGlobalThemeContract({
color: {
black: {
'100': 'color-black-100',
'200': 'color-black-200',
'300': 'color-black-300',
'400': 'color-black-400',
'500': 'color-black-500',
'600': 'color-black-600',
'700': 'color-black-700',
'800': 'color-black-800',
'900': 'color-black-900',
'1000': 'color-black-1000',
},
brand: {
'100': 'color-brand-100',
'200': 'color-brand-200',
'300': 'color-brand-300',
'400': 'color-brand-400',
'500': 'color-brand-500',
'600': 'color-brand-600',
'700': 'color-brand-700',
'800': 'color-brand-800',
'900': 'color-brand-900',
'1000': 'color-brand-1000',
},
gray: {
'100': 'color-gray-100',
'200': 'color-gray-200',
'300': 'color-gray-300',
'400': 'color-gray-400',
'500': 'color-gray-500',
'600': 'color-gray-600',
'700': 'color-gray-700',
'800': 'color-gray-800',
'900': 'color-gray-900',
'1000': 'color-gray-1000',
},
green: {
'100': 'color-green-100',
'200': 'color-green-200',
'300': 'color-green-300',
'400': 'color-green-400',
'500': 'color-green-500',
'600': 'color-green-600',
'700': 'color-green-700',
'800': 'color-green-800',
'900': 'color-green-900',
'1000': 'color-green-1000',
},
pink: {
'100': 'color-pink-100',
'200': 'color-pink-200',
'300': 'color-pink-300',
'400': 'color-pink-400',
'500': 'color-pink-500',
'600': 'color-pink-600',
'700': 'color-pink-700',
'800': 'color-pink-800',
'900': 'color-pink-900',
'1000': 'color-pink-1000',
},
red: {
'100': 'color-red-100',
'200': 'color-red-200',
'300': 'color-red-300',
'400': 'color-red-400',
'500': 'color-red-500',
'600': 'color-red-600',
'700': 'color-red-700',
'800': 'color-red-800',
'900': 'color-red-900',
'1000': 'color-red-1000',
},
slate: {
'100': 'color-slate-100',
'200': 'color-slate-200',
'300': 'color-slate-300',
'400': 'color-slate-400',
'500': 'color-slate-500',
'600': 'color-slate-600',
'700': 'color-slate-700',
'800': 'color-slate-800',
'900': 'color-slate-900',
'1000': 'color-slate-1000',
},
white: {
'100': 'color-white-100',
'200': 'color-white-200',
'300': 'color-white-300',
'400': 'color-white-400',
'500': 'color-white-500',
'600': 'color-white-600',
'700': 'color-white-700',
'800': 'color-white-800',
'900': 'color-white-900',
'1000': 'color-white-1000',
},
yellow: {
'100': 'color-yellow-100',
'200': 'color-yellow-200',
'300': 'color-yellow-300',
'400': 'color-yellow-400',
'500': 'color-yellow-500',
'600': 'color-yellow-600',
'700': 'color-yellow-700',
'800': 'color-yellow-800',
'900': 'color-yellow-900',
'1000': 'color-yellow-1000',
},
background: {
brand: 'color-background-brand-default',
default: 'color-background-default-default',
},
border: {
default: 'color-border-default-default',
},
text: {
brand: 'color-text-brand-default',
default: 'color-text-default-default',
},
},
size: {
blur: {
'100': 'size-blur-100',
},
depth: {
'0': 'size-depth-0',
'025': 'size-depth-025',
'100': 'size-depth-100',
'200': 'size-depth-200',
'400': 'size-depth-400',
'800': 'size-depth-800',
'1200': 'size-depth-1200',
negative025: 'size-depth-negative-025',
negative100: 'size-depth-negative-100',
negative200: 'size-depth-negative-200',
negative400: 'size-depth-negative-400',
negative800: 'size-depth-negative-800',
negative1200: 'size-depth-negative-1200',
},
icon: {
small: 'size-icon-small',
medium: 'size-icon-medium',
large: 'size-icon-large',
},
radius: {
'100': 'size-radius-100',
'200': 'size-radius-200',
'400': 'size-radius-400',
full: 'size-radius-full',
},
space: {
'0': 'size-space-0',
'050': 'size-space-050',
'100': 'size-space-100',
'150': 'size-space-150',
'200': 'size-space-200',
'300': 'size-space-300',
'400': 'size-space-400',
'600': 'size-space-600',
'800': 'size-space-800',
'1200': 'size-space-1200',
'1600': 'size-space-1600',
'2400': 'size-space-2400',
'4000': 'size-space-4000',
negative100: 'size-space-negative-100',
negative200: 'size-space-negative-200',
negative300: 'size-space-negative-300',
negative400: 'size-space-negative-400',
negative600: 'size-space-negative-600',
},
stroke: {
border: 'size-stroke-border',
focusRing: 'size-stroke-focus-ring',
},
},
typography: {
body: {
small: {
fontFamily: 'typography-body-small-font-family',
fontSize: 'typography-body-small-font-size',
fontWeight: 'typography-body-small-font-weight',
},
medium: {
fontFamily: 'typography-body-medium-font-family',
fontSize: 'typography-body-medium-font-size',
fontWeight: 'typography-body-medium-font-weight',
},
large: {
fontFamily: 'typography-body-large-font-family',
fontSize: 'typography-body-large-font-size',
fontWeight: 'typography-body-large-font-weight',
},
},
code: {
small: {
fontFamily: 'typography-code-small-font-family',
fontSize: 'typography-code-small-font-size',
fontWeight: 'typography-code-small-font-weight',
},
medium: {
fontFamily: 'typography-code-medium-font-family',
fontSize: 'typography-code-medium-font-size',
fontWeight: 'typography-code-medium-font-weight',
},
large: {
fontFamily: 'typography-code-large-font-family',
fontSize: 'typography-code-large-font-size',
fontWeight: 'typography-code-large-font-weight',
},
},
family: {
mono: 'typography-family-mono',
sans: 'typography-family-sans',
serif: 'typography-family-serif',
},
scale: {
'10': 'typography-scale-10',
'01': 'typography-scale-01',
'02': 'typography-scale-02',
'03': 'typography-scale-03',
'04': 'typography-scale-04',
'05': 'typography-scale-05',
'06': 'typography-scale-06',
'07': 'typography-scale-07',
'08': 'typography-scale-08',
'09': 'typography-scale-09',
},
weight: {
thin: 'typography-weight-thin',
extralight: 'typography-weight-extralight',
light: 'typography-weight-light',
regular: 'typography-weight-regular',
medium: 'typography-weight-medium',
semibold: 'typography-weight-semibold',
bold: 'typography-weight-bold',
extrabold: 'typography-weight-extrabold',
black: 'typography-weight-black',
},
},
});
createTheme(vars, {
color: {
black: {
'100':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.050980392156862744)',
'200':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.10196078431372549)',
'300':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.2)',
'400':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.4)',
'500':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.6980392156862745)',
'600':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8)',
'700':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8509803921568627)',
'800':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8980392156862745)',
'900':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.9490196078431372)',
'1000':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744)',
},
brand: {
'100':
'color(srgb 0.9607843137254902 0.9607843137254902 0.9607843137254902)',
'200':
'color(srgb 0.9019607843137255 0.9019607843137255 0.9019607843137255)',
'300':
'color(srgb 0.8509803921568627 0.8509803921568627 0.8509803921568627)',
'400':
'color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254)',
'500':
'color(srgb 0.4588235294117647 0.4588235294117647 0.4588235294117647)',
'600':
'color(srgb 0.26666666666666666 0.26666666666666666 0.26666666666666666)',
'700':
'color(srgb 0.2196078431372549 0.2196078431372549 0.2196078431372549)',
'800':
'color(srgb 0.17254901960784313 0.17254901960784313 0.17254901960784313)',
'900':
'color(srgb 0.11764705882352941 0.11764705882352941 0.11764705882352941)',
'1000':
'color(srgb 0.06666666666666667 0.06666666666666667 0.06666666666666667)',
},
gray: {
'100':
'color(srgb 0.9607843137254902 0.9607843137254902 0.9607843137254902)',
'200':
'color(srgb 0.9019607843137255 0.9019607843137255 0.9019607843137255)',
'300':
'color(srgb 0.8509803921568627 0.8509803921568627 0.8509803921568627)',
'400':
'color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254)',
'500':
'color(srgb 0.4588235294117647 0.4588235294117647 0.4588235294117647)',
'600':
'color(srgb 0.26666666666666666 0.26666666666666666 0.26666666666666666)',
'700':
'color(srgb 0.2196078431372549 0.2196078431372549 0.2196078431372549)',
'800':
'color(srgb 0.17254901960784313 0.17254901960784313 0.17254901960784313)',
'900':
'color(srgb 0.11764705882352941 0.11764705882352941 0.11764705882352941)',
'1000':
'color(srgb 0.06666666666666667 0.06666666666666667 0.06666666666666667)',
},
green: {
'100': 'color(srgb 0.9215686274509803 1 0.9333333333333333)',
'200':
'color(srgb 0.8117647058823529 0.9686274509803922 0.8274509803921568)',
'300':
'color(srgb 0.6862745098039216 0.9568627450980393 0.7764705882352941)',
'400':
'color(srgb 0.5215686274509804 0.8784313725490196 0.6392156862745098)',
'500':
'color(srgb 0.0784313725490196 0.6823529411764706 0.3607843137254902)',
'600': 'color(srgb 0 0.6 0.3176470588235294)',
'700': 'color(srgb 0 0.5019607843137255 0.2627450980392157)',
'800':
'color(srgb 0.00784313725490196 0.32941176470588235 0.17647058823529413)',
'900':
'color(srgb 0.00784313725490196 0.25098039215686274 0.13725490196078433)',
'1000':
'color(srgb 0.023529411764705882 0.17647058823529413 0.10588235294117647)',
},
pink: {
'100':
'color(srgb 0.9882352941176471 0.9450980392156862 0.9921568627450981)',
'200':
'color(srgb 0.9803921568627451 0.8823529411764706 0.9803921568627451)',
'300':
'color(srgb 0.9607843137254902 0.7529411764705882 0.9372549019607843)',
'400':
'color(srgb 0.9450980392156862 0.6196078431372549 0.8627450980392157)',
'500':
'color(srgb 0.9176470588235294 0.24705882352941178 0.7215686274509804)',
'600':
'color(srgb 0.8431372549019608 0.19607843137254902 0.6588235294117647)',
'700':
'color(srgb 0.7294117647058823 0.16470588235294117 0.5725490196078431)',
'800':
'color(srgb 0.5411764705882353 0.13333333333333333 0.43529411764705883)',
'900':
'color(srgb 0.3411764705882353 0.09411764705882353 0.2901960784313726)',
'1000':
'color(srgb 0.24705882352941178 0.08235294117647059 0.21176470588235294)',
},
red: {
'100':
'color(srgb 0.996078431372549 0.9137254901960784 0.9058823529411765)',
'200':
'color(srgb 0.9921568627450981 0.8274509803921568 0.8156862745098039)',
'300':
'color(srgb 0.9882352941176471 0.7019607843137254 0.6784313725490196)',
'400':
'color(srgb 0.9568627450980393 0.4666666666666667 0.41568627450980394)',
'500':
'color(srgb 0.9254901960784314 0.13333333333333333 0.12156862745098039)',
'600':
'color(srgb 0.7529411764705882 0.058823529411764705 0.047058823529411764)',
'700':
'color(srgb 0.5647058823529412 0.043137254901960784 0.03529411764705882)',
'800':
'color(srgb 0.4117647058823529 0.03137254901960784 0.027450980392156862)',
'900':
'color(srgb 0.30196078431372547 0.043137254901960784 0.0392156862745098)',
'1000':
'color(srgb 0.18823529411764706 0.023529411764705882 0.011764705882352941)',
},
slate: {
'100':
'color(srgb 0.9529411764705882 0.9529411764705882 0.9529411764705882)',
'200':
'color(srgb 0.8901960784313725 0.8901960784313725 0.8901960784313725)',
'300':
'color(srgb 0.803921568627451 0.803921568627451 0.803921568627451)',
'400':
'color(srgb 0.6980392156862745 0.6980392156862745 0.6980392156862745)',
'500':
'color(srgb 0.5803921568627451 0.5803921568627451 0.5803921568627451)',
'600':
'color(srgb 0.4627450980392157 0.4627450980392157 0.4627450980392157)',
'700':
'color(srgb 0.35294117647058826 0.35294117647058826 0.35294117647058826)',
'800':
'color(srgb 0.2627450980392157 0.2627450980392157 0.2627450980392157)',
'900':
'color(srgb 0.18823529411764706 0.18823529411764706 0.18823529411764706)',
'1000':
'color(srgb 0.1411764705882353 0.1411764705882353 0.1411764705882353)',
},
white: {
'100': 'color(srgb 1 1 1 / 0.050980392156862744)',
'200': 'color(srgb 1 1 1 / 0.10196078431372549)',
'300': 'color(srgb 1 1 1 / 0.2)',
'400': 'color(srgb 1 1 1 / 0.4)',
'500': 'color(srgb 1 1 1 / 0.6980392156862745)',
'600': 'color(srgb 1 1 1 / 0.8)',
'700': 'color(srgb 1 1 1 / 0.8509803921568627)',
'800': 'color(srgb 1 1 1 / 0.8980392156862745)',
'900': 'color(srgb 1 1 1 / 0.9490196078431372)',
'1000': 'color(srgb 1 1 1)',
},
yellow: {
'100': 'color(srgb 1 0.984313725490196 0.9215686274509803)',
'200': 'color(srgb 1 0.9450980392156862 0.7607843137254902)',
'300': 'color(srgb 1 0.9098039215686274 0.6392156862745098)',
'400':
'color(srgb 0.9098039215686274 0.7254901960784313 0.19215686274509805)',
'500': 'color(srgb 0.8980392156862745 0.6274509803921569 0)',
'600':
'color(srgb 0.7490196078431373 0.41568627450980394 0.00784313725490196)',
'700':
'color(srgb 0.592156862745098 0.3176470588235294 0.00784313725490196)',
'800':
'color(srgb 0.40784313725490196 0.17647058823529413 0.011764705882352941)',
'900':
'color(srgb 0.3215686274509804 0.1450980392156863 0.01568627450980392)',
'1000':
'color(srgb 0.25098039215686274 0.10588235294117647 0.00392156862745098)',
},
background: {
brand: vars.color.brand[800],
default: vars.color.white[1000],
},
border: {
default: vars.color.gray[300],
},
text: {
brand: vars.color.brand[800],
default: vars.color.gray[900],
},
},
size: {
blur: {
'100': '0.25rem',
},
depth: {
'0': '0',
'025': '0.0625rem',
'100': '0.25rem',
'200': '0.5rem',
'400': '1rem',
'800': '2rem',
'1200': '3rem',
negative025: '-0.0625rem',
negative100: '-0.25rem',
negative200: '-0.5rem',
negative400: '-1rem',
negative800: '-2rem',
negative1200: '-3rem',
},
icon: {
small: '1.5rem',
medium: '2rem',
large: '2.5rem',
},
radius: {
'100': '0.25rem',
'200': '0.5rem',
'400': '1rem',
full: '624.9375rem',
},
space: {
'0': '0',
'050': '0.125rem',
'100': '0.25rem',
'150': '0.375rem',
'200': '0.5rem',
'300': '0.75rem',
'400': '1rem',
'600': '1.5rem',
'800': '2rem',
'1200': '3rem',
'1600': '4rem',
'2400': '6rem',
'4000': '0',
negative100: '-0.25rem',
negative200: '-0.5rem',
negative300: '-0.75rem',
negative400: '-1rem',
negative600: '-1.5rem',
},
stroke: {
border: '0.0625rem',
focusRing: '0.125rem',
},
},
typography: {
body: {
small: {
fontFamily: vars.typography.family.sans,
fontSize: vars.typography.scale['02'],
fontWeight: vars.typography.weight.regular,
},
medium: {
fontFamily: vars.typography.family.sans,
fontSize: vars.typography.scale['03'],
fontWeight: vars.typography.weight.regular,
},
large: {
fontFamily: vars.typography.family.sans,
fontSize: vars.typography.scale['04'],
fontWeight: vars.typography.weight.regular,
},
},
code: {
small: {
fontFamily: vars.typography.family.mono,
fontSize: vars.typography.scale['02'],
fontWeight: vars.typography.weight.regular,
},
medium: {
fontFamily: vars.typography.family.mono,
fontSize: vars.typography.scale['03'],
fontWeight: vars.typography.weight.regular,
},
large: {
fontFamily: vars.typography.family.mono,
fontSize: vars.typography.scale['04'],
fontWeight: vars.typography.weight.regular,
},
},
family: {
mono: '"roboto mono", monospace',
sans: 'inter, sans-serif',
serif: '"noto serif", serif',
},
scale: {
'01': '0.75rem',
'02': '0.875rem',
'03': '1rem',
'04': '1.25rem',
'05': '1.5rem',
'06': '2rem',
'07': '2.5rem',
'08': '3rem',
'09': '4rem',
'10': '4.5rem',
},
weight: {
thin: '100',
extralight: '200',
light: '300',
regular: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
},
},
});
================================================
FILE: fixtures/react-library-example/tsconfig.json
================================================
{
"compilerOptions": {
"baseUrl": "src",
"module": "NodeNext",
"moduleResolution": "nodenext",
"incremental": true,
"strict": true,
"jsx": "react-jsx",
"verbatimModuleSyntax": true
},
"include": ["src"]
}
================================================
FILE: fixtures/recipes/CHANGELOG.md
================================================
# @fixtures/recipes
## 0.0.36
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @vanilla-extract/recipes@0.5.5
## 0.0.35
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @vanilla-extract/recipes@0.5.5
## 0.0.34
### Patch Changes
- Updated dependencies [[`2a7acc989fba707220186f2d0b824bc4cc37ad66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2a7acc989fba707220186f2d0b824bc4cc37ad66)]:
- @vanilla-extract/recipes@0.5.4
## 0.0.33
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @vanilla-extract/recipes@0.5.3
## 0.0.32
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/recipes@0.5.3
- @vanilla-extract/css@1.15.2
## 0.0.31
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.30
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.29
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 0.0.28
### Patch Changes
- Updated dependencies [[`3f8b653`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3f8b65368b26100919debd4591245380322c2cd7)]:
- @vanilla-extract/recipes@0.5.2
## 0.0.27
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
## 0.0.26
### Patch Changes
- Updated dependencies [[`d16c22f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d16c22f19d86bf01c1fc4bf4c8914786fb0b9cc9), [`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/recipes@0.5.1
- @vanilla-extract/css@1.14.0
## 0.0.25
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/css@1.13.0
## 0.0.24
### Patch Changes
- Updated dependencies [[`fd5fac5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5fac56573c65f3cd9326cfaa1d2835a7212bcb), [`fd5fac5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5fac56573c65f3cd9326cfaa1d2835a7212bcb)]:
- @vanilla-extract/recipes@0.5.0
## 0.0.23
### Patch Changes
- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:
- @vanilla-extract/css@1.12.0
## 0.0.22
### Patch Changes
- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:
- @vanilla-extract/css@1.11.1
## 0.0.21
### Patch Changes
- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:
- @vanilla-extract/css@1.11.0
## 0.0.20
### Patch Changes
- Updated dependencies [[`3163abc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3163abc75c2e280e96989f732e4e5e60e4941eff)]:
- @vanilla-extract/recipes@0.4.0
## 0.0.19
### Patch Changes
- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/css@1.10.0
## 0.0.18
### Patch Changes
- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:
- @vanilla-extract/css@1.9.5
## 0.0.17
### Patch Changes
- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:
- @vanilla-extract/css@1.9.4
## 0.0.16
### Patch Changes
- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:
- @vanilla-extract/css@1.9.3
## 0.0.15
### Patch Changes
- Updated dependencies [[`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39), [`0906063`](https://github.com/vanilla-extract-css/vanilla-extract/commit/09060639099ec580ac90cac48c3b79f0177ecfcd)]:
- @vanilla-extract/css@1.9.2
- @vanilla-extract/recipes@0.3.0
## 0.0.14
### Patch Changes
- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:
- @vanilla-extract/css@1.9.1
## 0.0.13
### Patch Changes
- Updated dependencies [[`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb)]:
- @vanilla-extract/css@1.9.0
## 0.0.12
### Patch Changes
- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:
- @vanilla-extract/css@1.8.0
## 0.0.11
### Patch Changes
- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:
- @vanilla-extract/css@1.7.4
## 0.0.10
### Patch Changes
- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:
- @vanilla-extract/css@1.7.3
## 0.0.9
### Patch Changes
- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:
- @vanilla-extract/css@1.7.2
## 0.0.8
### Patch Changes
- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0), [`64378b0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64378b083ed6fb54f073e77b62fefee673602742)]:
- @vanilla-extract/css@1.7.1
- @vanilla-extract/recipes@0.2.5
## 0.0.7
### Patch Changes
- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:
- @vanilla-extract/css@1.7.0
## 0.0.6
### Patch Changes
- Updated dependencies [[`d91ddde`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d91dddeb0d57f2322a6e3c1936cde2a2771d7414)]:
- @vanilla-extract/recipes@0.2.4
## 0.0.5
### Patch Changes
- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/css@1.6.8
- @vanilla-extract/recipes@0.2.3
## 0.0.4
### Patch Changes
- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:
- @vanilla-extract/css@1.6.7
## 0.0.3
### Patch Changes
- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:
- @vanilla-extract/css@1.6.6
- @vanilla-extract/recipes@0.2.2
## 0.0.2
### Patch Changes
- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:
- @vanilla-extract/css@1.6.5
## 0.0.1
### Patch Changes
- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:
- @vanilla-extract/css@1.6.4
================================================
FILE: fixtures/recipes/index.html
================================================
Vite App
================================================
FILE: fixtures/recipes/package.json
================================================
{
"name": "@fixtures/recipes",
"version": "0.0.36",
"main": "src/index.ts",
"sideEffects": true,
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^",
"@vanilla-extract/recipes": "workspace:^"
}
}
================================================
FILE: fixtures/recipes/src/html.ts
================================================
import { button, stack } from './styles.css';
export default `
Standard calm button
Small calm button
Standard angry button
Small angry button
`;
================================================
FILE: fixtures/recipes/src/index.ts
================================================
import html from './html';
function render() {
document.body.innerHTML = html;
}
render();
================================================
FILE: fixtures/recipes/src/styles.css.ts
================================================
import { style, createThemeContract, createTheme } from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes';
const vars = createThemeContract({
bg: null,
fg: null,
});
const calm = createTheme(vars, {
bg: 'powderblue',
fg: 'white',
});
const angry = createTheme(vars, {
bg: 'crimson',
fg: 'black',
});
export const reset = style({
border: 0,
});
export const button = recipe(
{
base: [
reset,
{
borderRadius: '6px',
background: vars.bg,
color: vars.fg,
transition: 'all 0.2s ease',
':hover': {
transform: 'translateY(-3px)',
},
},
],
variants: {
size: {
small: {
fontSize: '16px',
lineHeight: '24px',
},
standard: {
fontSize: '24px',
lineHeight: '40px',
},
},
tone: {
calm,
angry: [
angry,
{
':hover': {
boxShadow: '0 10px 6px -6px #777',
},
},
],
},
bold: {
true: {
fontWeight: 'bold',
},
},
},
defaultVariants: {
size: 'standard',
tone: 'calm',
},
compoundVariants: [
{
variants: {
size: 'small',
bold: true,
},
style: {
'@media': {
'only screen and (min-width: 600px)': {
border: '2px green solid',
},
},
},
},
],
},
'button',
);
export const stack = recipe({
base: {
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
},
variants: {
space: {
medium: {
gap: 20,
'@media': {
'only screen and (min-width: 600px)': {
gap: 30,
},
},
},
},
},
defaultVariants: {
space: 'medium',
},
});
================================================
FILE: fixtures/sprinkles/CHANGELOG.md
================================================
# @fixtures/sprinkles
## 0.0.36
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @vanilla-extract/sprinkles@1.6.3
## 0.0.35
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @vanilla-extract/sprinkles@1.6.3
## 0.0.34
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @vanilla-extract/sprinkles@1.6.2
## 0.0.33
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/sprinkles@1.6.2
- @vanilla-extract/css@1.15.2
## 0.0.32
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.31
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.30
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 0.0.29
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
## 0.0.28
### Patch Changes
- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/css@1.14.0
## 0.0.27
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/css@1.13.0
## 0.0.26
### Patch Changes
- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3), [`8a35dff`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8a35dff7f8b4f75691b7ba6ecdc98f45d6e8c5f4)]:
- @vanilla-extract/css@1.12.0
- @vanilla-extract/sprinkles@1.6.1
## 0.0.25
### Patch Changes
- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:
- @vanilla-extract/css@1.11.1
## 0.0.24
### Patch Changes
- Updated dependencies [[`d33aa4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d33aa4a2c6422803967bf4ff1131d1a86a35797d)]:
- @vanilla-extract/sprinkles@1.6.0
## 0.0.23
### Patch Changes
- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:
- @vanilla-extract/css@1.11.0
## 0.0.22
### Patch Changes
- Updated dependencies [[`4e8377b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4e8377bdcfb8ffa237f94da67624458a8ff3b2b5), [`8365959`](https://github.com/vanilla-extract-css/vanilla-extract/commit/836595943eb21f97400986a123788ec46f165139)]:
- @vanilla-extract/sprinkles@1.5.2
## 0.0.21
### Patch Changes
- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/css@1.10.0
## 0.0.20
### Patch Changes
- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:
- @vanilla-extract/css@1.9.5
## 0.0.19
### Patch Changes
- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:
- @vanilla-extract/css@1.9.4
## 0.0.18
### Patch Changes
- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:
- @vanilla-extract/css@1.9.3
## 0.0.17
### Patch Changes
- Updated dependencies [[`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39)]:
- @vanilla-extract/css@1.9.2
- @vanilla-extract/sprinkles@1.5.1
## 0.0.16
### Patch Changes
- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:
- @vanilla-extract/css@1.9.1
## 0.0.15
### Patch Changes
- Updated dependencies [[`009e122`](https://github.com/vanilla-extract-css/vanilla-extract/commit/009e122693b92834125b6ca14b30fee5e626e245)]:
- @vanilla-extract/sprinkles@1.5.0
## 0.0.14
### Patch Changes
- Updated dependencies [[`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb)]:
- @vanilla-extract/css@1.9.0
## 0.0.13
### Patch Changes
- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:
- @vanilla-extract/css@1.8.0
## 0.0.12
### Patch Changes
- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:
- @vanilla-extract/css@1.7.4
## 0.0.11
### Patch Changes
- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:
- @vanilla-extract/css@1.7.3
## 0.0.10
### Patch Changes
- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:
- @vanilla-extract/css@1.7.2
## 0.0.9
### Patch Changes
- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:
- @vanilla-extract/css@1.7.1
## 0.0.8
### Patch Changes
- Updated dependencies [[`98ab94a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98ab94a99fa7dbee395a7ae6ea4af24c7b1bd7ab)]:
- @vanilla-extract/sprinkles@1.4.1
## 0.0.7
### Patch Changes
- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:
- @vanilla-extract/css@1.7.0
## 0.0.6
### Patch Changes
- Updated dependencies [[`81a3d98`](https://github.com/vanilla-extract-css/vanilla-extract/commit/81a3d98b3fb36660406a59049e1cd464418b00fc)]:
- @vanilla-extract/sprinkles@1.4.0
## 0.0.5
### Patch Changes
- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/css@1.6.8
- @vanilla-extract/sprinkles@1.3.3
## 0.0.4
### Patch Changes
- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:
- @vanilla-extract/css@1.6.7
## 0.0.3
### Patch Changes
- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:
- @vanilla-extract/css@1.6.6
- @vanilla-extract/sprinkles@1.3.2
## 0.0.2
### Patch Changes
- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:
- @vanilla-extract/css@1.6.5
## 0.0.1
### Patch Changes
- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:
- @vanilla-extract/css@1.6.4
================================================
FILE: fixtures/sprinkles/index.html
================================================
Vite App
================================================
FILE: fixtures/sprinkles/package.json
================================================
{
"name": "@fixtures/sprinkles",
"version": "0.0.36",
"main": "src/index.ts",
"sideEffects": true,
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^",
"@vanilla-extract/sprinkles": "workspace:^"
}
}
================================================
FILE: fixtures/sprinkles/src/html.ts
================================================
import {
sprinkles,
mapResponsiveValue,
normalizeResponsiveValue,
preComposedSprinkles,
preComposedSprinklesUsedInSelector,
container,
} from './styles.css';
import testNodes from '../test-nodes.json';
export default `
Sprinkles
Precomposed sprinkles
Precomposed Sprinkles Used In Selector
`;
================================================
FILE: fixtures/sprinkles/src/index.ts
================================================
import html from './html';
function render() {
document.body.innerHTML = html;
}
render();
================================================
FILE: fixtures/sprinkles/src/styles.css.ts
================================================
import {
globalStyle,
createVar,
createContainer,
style,
} from '@vanilla-extract/css';
import {
defineProperties,
createSprinkles,
createMapValueFn,
createNormalizeValueFn,
} from '@vanilla-extract/sprinkles';
const alpha = createVar();
const textAlpha = createVar();
const containerName = createContainer();
export const container = style({
containerName,
containerType: 'size',
});
const responsiveConditions = {
defaultCondition: 'mobile',
conditions: {
mobile: {},
tablet: {
'@container': `${containerName} (min-width: 768px)`,
'@media': 'screen and (min-width: 768px)',
},
desktop: {
'@container': `${containerName} (min-width: 1024px)`,
'@media': 'screen and (min-width: 1024px)',
},
darkDesktop: {
'@supports': 'not (display: grid)',
'@media': 'screen and (min-width: 1024px)',
selector: '[data-dark-mode] &',
},
},
responsiveArray: ['mobile', 'tablet', 'desktop'],
} as const;
const responsiveProperties = defineProperties({
...responsiveConditions,
properties: {
display: ['flex', 'none', 'block'],
paddingTop: {
small: '10px',
medium: '20px',
},
},
});
const responsiveLayerProperties = defineProperties({
'@layer': 'responsive-layer-name',
...responsiveConditions,
properties: {
background: {
red: {
vars: { [alpha]: '1' },
background: `rgba(255, 0, 0, ${alpha})`,
},
},
backgroundOpacity: {
1: { vars: { [alpha]: '1' } },
0.1: { vars: { [alpha]: '0.1' } },
0.2: { vars: { [alpha]: '0.2' } },
0.3: { vars: { [alpha]: '0.3' } },
},
},
});
const unconditionalProperties = defineProperties({
properties: {
color: {
red: {
vars: {
[textAlpha]: '1',
},
color: `rgba(255, 0, 0, ${textAlpha})`,
},
},
},
});
const unconditionalLayerProperties = defineProperties({
'@layer': 'unconditional-layer-name',
properties: {
textOpacity: {
1: { vars: { [textAlpha]: '1' } },
0.8: { vars: { [textAlpha]: '0.8' } },
},
},
});
export const sprinkles = createSprinkles(
responsiveProperties,
responsiveLayerProperties,
unconditionalProperties,
unconditionalLayerProperties,
);
export const mapResponsiveValue = createMapValueFn(responsiveProperties);
export const normalizeResponsiveValue =
createNormalizeValueFn(responsiveProperties);
export const preComposedSprinkles = sprinkles({
display: 'block',
paddingTop: 'small',
background: 'red',
backgroundOpacity: { mobile: 0.1, tablet: 0.2, desktop: 0.3 },
color: 'red',
textOpacity: 0.8,
});
export const preComposedSprinklesUsedInSelector = sprinkles({
display: 'flex',
paddingTop: 'medium',
});
globalStyle('body', {
margin: 0,
});
globalStyle(`body ${preComposedSprinklesUsedInSelector}`, {
background: 'red',
});
================================================
FILE: fixtures/sprinkles/test-nodes.json
================================================
{
"root": "root"
}
================================================
FILE: fixtures/template-string-paths/CHANGELOG.md
================================================
# @fixtures/template-string-paths
## 0.0.8
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
## 0.0.7
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
## 0.0.6
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
## 0.0.5
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/css@1.15.2
## 0.0.4
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.3
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.2
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
================================================
FILE: fixtures/template-string-paths/index.html
================================================
Vite App
================================================
FILE: fixtures/template-string-paths/package.json
================================================
{
"name": "@fixtures/template-string-paths",
"version": "0.0.8",
"main": "src/index.ts",
"sideEffects": true,
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^"
}
}
================================================
FILE: fixtures/template-string-paths/src/[...slug]/index.css.ts
================================================
import { style } from '@vanilla-extract/css';
export const catchAllSegment = style({ color: 'lime' });
================================================
FILE: fixtures/template-string-paths/src/[[...slug]]/index.css.ts
================================================
import { style } from '@vanilla-extract/css';
export const optionalCatchAllSegment = style({ color: 'orchid' });
================================================
FILE: fixtures/template-string-paths/src/[[id]]/index.css.ts
================================================
import { style } from '@vanilla-extract/css';
export const doubleSquareBracketId = style({ color: 'darkkhaki' });
================================================
FILE: fixtures/template-string-paths/src/[]/index.css.ts
================================================
import { style } from '@vanilla-extract/css';
export const emptySquareBrackets = style({ color: 'blue' });
================================================
FILE: fixtures/template-string-paths/src/[blog-id]/index.css.ts
================================================
import { style } from '@vanilla-extract/css';
export const withHyphen = style({ color: 'indigo' });
================================================
FILE: fixtures/template-string-paths/src/[id]/index.css.ts
================================================
import { style } from '@vanilla-extract/css';
export const singleSquareBracketsId = style({ color: 'tomato' });
================================================
FILE: fixtures/template-string-paths/src/index.ts
================================================
import { emptySquareBrackets } from './[]/index.css';
import { singleSquareBracketsId } from './[id]/index.css';
import { doubleSquareBracketId } from './[[id]]/index.css';
import { catchAllSegment } from './[...slug]/index.css';
import { optionalCatchAllSegment } from './[[...slug]]/index.css';
import { withHyphen } from './[blog-id]/index.css';
// Fixture for testing escaping of webpack template strings and Next.js dyanmic routes
// https://webpack.js.org/configuration/output/#template-strings
// https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
function render() {
document.body.innerHTML = `
[] path
[id] path
[[id]] path
[...slug] path
[[...slug]] path
[blog-id] path
`;
}
render();
================================================
FILE: fixtures/themed/CHANGELOG.md
================================================
# @fixtures/themed
## 0.0.31
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @vanilla-extract/dynamic@2.1.2
## 0.0.30
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @vanilla-extract/dynamic@2.1.2
## 0.0.29
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @vanilla-extract/dynamic@2.1.1
## 0.0.28
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/dynamic@2.1.1
- @vanilla-extract/css@1.15.2
## 0.0.27
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.26
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.25
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 0.0.24
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
## 0.0.23
### Patch Changes
- Updated dependencies [[`ca854f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca854f51d5068fb1105a44b3d9af2852d4b61839), [`ca854f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca854f51d5068fb1105a44b3d9af2852d4b61839), [`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/dynamic@2.1.0
- @vanilla-extract/css@1.14.0
## 0.0.22
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/css@1.13.0
## 0.0.21
### Patch Changes
- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:
- @vanilla-extract/css@1.12.0
## 0.0.20
### Patch Changes
- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:
- @vanilla-extract/css@1.11.1
## 0.0.19
### Patch Changes
- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:
- @vanilla-extract/css@1.11.0
## 0.0.18
### Patch Changes
- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/css@1.10.0
## 0.0.17
### Patch Changes
- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:
- @vanilla-extract/css@1.9.5
## 0.0.16
### Patch Changes
- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:
- @vanilla-extract/css@1.9.4
## 0.0.15
### Patch Changes
- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:
- @vanilla-extract/css@1.9.3
## 0.0.14
### Patch Changes
- Updated dependencies [[`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39)]:
- @vanilla-extract/css@1.9.2
- @vanilla-extract/dynamic@2.0.3
## 0.0.13
### Patch Changes
- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:
- @vanilla-extract/css@1.9.1
## 0.0.12
### Patch Changes
- Updated dependencies [[`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb)]:
- @vanilla-extract/css@1.9.0
## 0.0.11
### Patch Changes
- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:
- @vanilla-extract/css@1.8.0
## 0.0.10
### Patch Changes
- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:
- @vanilla-extract/css@1.7.4
## 0.0.9
### Patch Changes
- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:
- @vanilla-extract/css@1.7.3
## 0.0.8
### Patch Changes
- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:
- @vanilla-extract/css@1.7.2
## 0.0.7
### Patch Changes
- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:
- @vanilla-extract/css@1.7.1
## 0.0.6
### Patch Changes
- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:
- @vanilla-extract/css@1.7.0
## 0.0.5
### Patch Changes
- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/css@1.6.8
- @vanilla-extract/dynamic@2.0.2
## 0.0.4
### Patch Changes
- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:
- @vanilla-extract/css@1.6.7
## 0.0.3
### Patch Changes
- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:
- @vanilla-extract/css@1.6.6
- @vanilla-extract/dynamic@2.0.1
## 0.0.2
### Patch Changes
- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:
- @vanilla-extract/css@1.6.5
## 0.0.1
### Patch Changes
- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:
- @vanilla-extract/css@1.6.4
================================================
FILE: fixtures/themed/index.html
================================================
Vite App
================================================
FILE: fixtures/themed/package.json
================================================
{
"name": "@fixtures/themed",
"version": "0.0.31",
"main": "src/index.ts",
"sideEffects": true,
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^",
"@vanilla-extract/dynamic": "workspace:^"
}
}
================================================
FILE: fixtures/themed/src/index.ts
================================================
import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';
import { theme, altTheme, responsiveTheme, vars } from './themes.css';
import { button, container, opacity } from './styles.css';
import { shadow } from './shared.css';
import testNodes from '../test-nodes.json';
// Uncomment to get HMR for Vite working
// if (import.meta.hot) {
// import.meta.hot.accept(
// ['./themes.css', './styles.css', './shared.css'],
// () => {
// render();
// },
// );
// }
const inlineTheme = assignInlineVars(vars, {
colors: {
backgroundColor: 'orange',
text: 'black',
},
space: {
1: '4px',
2: '8px',
3: '12px',
},
});
function render() {
document.body.innerHTML = `
Root theme
Main theme button
Alt theme
Alt theme button
Back to root theme
Main theme button
Inline theme
Inline theme button
Dynamic vars
Dynamic vars button
Responsive theme
Responsive theme button
',
inherits: false,
initialValue: '0.5',
});
const blankVar2 = createVar();
export const opacity = styleVariants(
{
'1/2': blankVar1,
'1/4': fallbackVar(blankVar1, blankVar2, '0.25'),
},
(value) => ({
selectors: { 'html &': { opacity: value } },
}),
);
================================================
FILE: fixtures/themed/src/themes.css.ts
================================================
import {
createGlobalTheme,
createTheme,
assignVars,
style,
layer,
} from '@vanilla-extract/css';
export const theme = style({});
export const vars = createGlobalTheme(`:root, ${theme}`, {
colors: {
backgroundColor: 'blue',
text: 'white',
},
space: {
1: '4px',
2: '8px',
3: '12px',
},
});
export const altTheme = createTheme(vars, {
colors: {
backgroundColor: 'green',
text: 'white',
},
space: {
1: '8px',
2: '12px',
3: '16px',
},
});
const themeLayer = layer();
// Not tested visually, exported for CSS output testing
export const [altTheme2Class, altTheme2Contract] = createTheme({
'@layer': themeLayer,
colors: {
backgroundColor: 'green',
text: 'white',
},
space: {
1: '8px',
2: '12px',
3: '16px',
},
});
// Not tested visually, exported for CSS output testing
export const altTheme3 = createGlobalTheme(':root', altTheme2Contract, {
'@layer': 'globalThemeLayer',
colors: {
backgroundColor: 'green',
text: 'white',
},
space: {
1: '8px',
2: '12px',
3: '16px',
},
});
export const responsiveTheme = style({
vars: assignVars(vars, {
colors: {
backgroundColor: 'pink',
text: 'purple',
},
space: {
1: '6px',
2: '12px',
3: '18px',
},
}),
'@media': {
'screen and (min-width: 768px)': {
vars: assignVars(vars.colors, {
backgroundColor: 'purple',
text: 'pink',
}),
},
},
});
================================================
FILE: fixtures/themed/test-nodes.json
================================================
{
"root": "root",
"rootContainer": "rootContainer",
"rootButton": "rootButton",
"altContainer": "altContainer",
"altButton": "altButton",
"nestedRootContainer": "nestedRootContainer",
"nestedRootButton": "nestedRootButton",
"inlineThemeContainer": "inlineThemeContainer",
"inlineThemeButton": "inlineThemeButton",
"dynamicVarsContainer": "dynamicVarsContainer",
"dynamicVarsButton": "dynamicVarsButton",
"responsiveThemeContainer": "responsiveThemeContainer",
"responsiveThemeButton": "responsiveThemeButton"
}
================================================
FILE: fixtures/thirdparty/CHANGELOG.md
================================================
# @fixtures/thirdparty
## 0.0.9
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @fixtures/thirdparty-dep@0.0.9
## 0.0.8
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @fixtures/thirdparty-dep@0.0.8
## 0.0.7
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @fixtures/thirdparty-dep@0.0.7
## 0.0.6
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/css@1.15.2
- @fixtures/thirdparty-dep@0.0.6
## 0.0.5
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
- @fixtures/thirdparty-dep@0.0.5
## 0.0.4
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
- @fixtures/thirdparty-dep@0.0.4
## 0.0.3
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
- @fixtures/thirdparty-dep@0.0.3
## 0.0.2
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
- @fixtures/thirdparty-dep@0.0.2
================================================
FILE: fixtures/thirdparty/index.html
================================================
Vite App
================================================
FILE: fixtures/thirdparty/package.json
================================================
{
"name": "@fixtures/thirdparty",
"version": "0.0.9",
"main": "src/index.ts",
"author": "SEEK",
"private": true,
"dependencies": {
"@fixtures/thirdparty-dep": "workspace:*",
"@vanilla-extract/css": "workspace:*"
}
}
================================================
FILE: fixtures/thirdparty/src/index.ts
================================================
import { block, depBlock, depdepBlock } from './styles.css';
import testNodes from '../test-nodes.json';
document.body.innerHTML = `
I'm a first-party block
I'm a third party block
I'm a third party of third party block
Vite App
================================================
FILE: fixtures/unused-modules/package.json
================================================
{
"name": "@fixtures/unused-modules",
"version": "1.0.31",
"main": "src/index.ts",
"sideEffects": [
"src/global.css.ts"
],
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^"
}
}
================================================
FILE: fixtures/unused-modules/src/global.css.ts
================================================
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: 'lavender',
});
================================================
FILE: fixtures/unused-modules/src/index.ts
================================================
import './global.css';
import { usedStyle } from './lookup';
import { resetStyle } from './reset';
import testNodes from '../test-nodes.json';
const node = document.createElement('div');
node.setAttribute('id', testNodes.root);
node.setAttribute('class', `${resetStyle} ${usedStyle}`);
document.body.appendChild(node);
================================================
FILE: fixtures/unused-modules/src/lookup.ts
================================================
export * from './unused';
export * from './used';
export * from './reset';
================================================
FILE: fixtures/unused-modules/src/reset/index.ts
================================================
export { default as resetStyle } from './reset.css';
================================================
FILE: fixtures/unused-modules/src/reset/reset.css.ts
================================================
import { style } from '@vanilla-extract/css';
export default style({
boxSizing: 'border-box',
});
================================================
FILE: fixtures/unused-modules/src/shared/index.ts
================================================
export { default as sharedStyle } from './shared.css';
================================================
FILE: fixtures/unused-modules/src/shared/shared.css.ts
================================================
import { globalStyle, style } from '@vanilla-extract/css';
globalStyle('body', {
border: '5px solid black',
});
export default style({
display: 'flex',
});
================================================
FILE: fixtures/unused-modules/src/unused/index.ts
================================================
export { default as unusedStyle } from './unused.css';
================================================
FILE: fixtures/unused-modules/src/unused/unused.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { sharedStyle } from '../shared';
const className = style({
color: 'red',
backgroundColor: 'blue',
});
export default `${className} ${sharedStyle}`;
================================================
FILE: fixtures/unused-modules/src/used/index.ts
================================================
export { default as usedStyle } from './used.css';
================================================
FILE: fixtures/unused-modules/src/used/used.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { sharedStyle } from '../shared';
const className = style({
height: 100,
width: 100,
background: 'green',
});
export default `${className} ${sharedStyle}`;
================================================
FILE: fixtures/unused-modules/test-nodes.json
================================================
{
"root": "root"
}
================================================
FILE: package.json
================================================
{
"name": "vanilla-extract",
"version": "0.0.0",
"private": true,
"author": "SEEK",
"license": "MIT",
"scripts": {
"dev": "preconstruct dev",
"build": "preconstruct build && pnpm build:dts",
"build:dts": "node ./scripts/build-dts.ts",
"watch": "preconstruct watch",
"start-fixture": "tsx ./test-helpers/src/startFixtureCLI",
"start": "pnpm start-fixture themed",
"start-site": "pnpm --filter=site start",
"build-site": "pnpm --filter=site build",
"test:unit": "vitest run",
"test:playwright": "pnpm test:clean-next && pnpm test:build-next && playwright test",
"test:clean-next": "pnpm --filter=@fixtures/next-* run '/^clean.*/'",
"test:build-next": "node scripts/copy-next-plugin.ts && pnpm --filter=@fixtures/next-* run '/^build.*/'",
"format": "oxlint --fix && prettier --write .",
"lint": "pnpm run --no-bail '/^lint:.*/'",
"lint:manypkg": "manypkg check",
"lint:prettier": "prettier --cache --check .",
"lint:tsc": "tsc",
"lint:oxlint": "oxlint",
"copy-readme-to-packages": "node scripts/copy-readme-to-packages.ts",
"version": "changeset version && pnpm install --lockfile-only",
"prepare-release": "pnpm copy-readme-to-packages && pnpm build",
"release": "pnpm prepare-release && changeset publish"
},
"devDependencies": {
"@babel/core": "^7.23.9",
"@babel/preset-env": "^7.23.9",
"@babel/preset-react": "^7.23.3",
"@babel/preset-typescript": "^7.23.3",
"@changesets/changelog-github": "^0.6.0",
"@changesets/cli": "^2.30.0",
"@manypkg/cli": "^0.25.1",
"@playwright/test": "^1.57.0",
"@preconstruct/cli": "^2.8.2",
"@types/node": "^22.15.3",
"@vanilla-extract/vite-plugin": "workspace:*",
"jsdom": "^29.0.0",
"oxlint": "^1.55.0",
"prettier": "^3.8.1",
"tsx": "^4.20.6",
"typescript": "^5.8.3",
"vitest": "^4.1.0"
},
"preconstruct": {
"___experimentalFlags_WILL_CHANGE_IN_PATCH": {
"keepDynamicImportAsDynamicImportInCommonJS": true
},
"packages": [
"packages/*"
]
},
"manypkg": {
"workspaceProtocol": "require"
},
"packageManager": "pnpm@10.32.0"
}
================================================
FILE: packages/babel-plugin-debug-ids/CHANGELOG.md
================================================
# @vanilla-extract/babel-plugin-debug-ids
## 1.2.2
### Patch Changes
- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert "Improve ESM package entrypoints (#1597)" to fix `Named export not found` error when importing ESM entrypoints
## 1.2.1
### Patch Changes
- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path
## 1.2.0
### Minor Changes
- [#1092](https://github.com/vanilla-extract-css/vanilla-extract/pull/1092) [`fd673f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd673f658da3b0019d19a0c7d6d9208d1685ff5b) Thanks [@z4o4z](https://github.com/z4o4z)! - Add support for `createVar` calls that declare `@property` rules
## 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
- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`
## 1.0.5
### Patch Changes
- [#1319](https://github.com/vanilla-extract-css/vanilla-extract/pull/1319) [`6f7f738`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6f7f7382495582759cececa421ef83142935772b) Thanks [@joeldavuk](https://github.com/joeldavuk)! - Update Babel dependencies to address https://github.com/advisories/GHSA-67hx-6x53-jw92
## 1.0.4
### Patch Changes
- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14
## 1.0.3
### Patch Changes
- [#1054](https://github.com/vanilla-extract-css/vanilla-extract/pull/1054) [`3c74cc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c74cc2a8fab0dde26aab57c568af70b42ab5347) Thanks [@askoufis](https://github.com/askoufis)! - Handle alternative compiled forms of array destructured `createTheme`
## 1.0.2
### Patch Changes
- [#1015](https://github.com/vanilla-extract-css/vanilla-extract/pull/1015) [`8a1751c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8a1751c8fcbeaa0cfb8d894a8050535372516dd4) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Fix `args.at is not a function` error
Refactor argument traversal to ensure compatibility with node 14.
## 1.0.1
### Patch Changes
- [#956](https://github.com/vanilla-extract-css/vanilla-extract/pull/956) [`eea3c7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/eea3c7d1595cd881e68cfbb279c641dc2fdd9101) Thanks [@mrm007](https://github.com/mrm007)! - Ensure support for new TypeScript language features by bumping the minimum required Babel dependency versions.
================================================
FILE: packages/babel-plugin-debug-ids/package.json
================================================
{
"name": "@vanilla-extract/babel-plugin-debug-ids",
"version": "1.2.2",
"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",
"types": "dist/vanilla-extract-babel-plugin-debug-ids.cjs.d.ts",
"preconstruct": {
"entrypoints": [
"index.ts"
]
},
"files": [
"/dist"
],
"repository": {
"type": "git",
"url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
"directory": "packages/babel-plugin-debug-ids"
},
"author": "SEEK",
"license": "MIT",
"dependencies": {
"@babel/core": "^7.23.9"
},
"devDependencies": {
"@babel/plugin-syntax-typescript": "^7.23.3",
"@types/babel__core": "^7.20.5"
}
}
================================================
FILE: packages/babel-plugin-debug-ids/src/index.test.ts
================================================
import { describe, expect, it } from 'vitest';
import { transformSync } from '@babel/core';
// @ts-expect-error
import typescriptSyntax from '@babel/plugin-syntax-typescript';
import plugin from './';
// remove quotes around the snapshot
expect.addSnapshotSerializer({
test: (val) => typeof val === 'string',
print: (val) => (val as string).trim(),
});
const transform = (source: string, filename = './dir/mockFilename.css.ts') => {
const result = transformSync(source, {
filename,
cwd: __dirname,
plugins: [plugin, typescriptSyntax],
configFile: false,
});
if (!result) {
throw new Error('No result');
}
return result.code;
};
describe('babel plugin', () => {
it('should not crash when using `satisfies` operator', () => {
const source = `
const dummy = {} satisfies {};
`;
expect(() => transform(source)).not.toThrow();
});
it('should handle style assigned to const', () => {
const source = `
import { style } from '@vanilla-extract/css';
const one = style({
zIndex: 2,
});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style } from '@vanilla-extract/css';
const one = style({
zIndex: 2
}, "one");
`);
});
it('should handle styleVariants assigned to const', () => {
const source = `
import { styleVariants } from '@vanilla-extract/css';
const colors = styleVariants({
red: { color: 'red' }
});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { styleVariants } from '@vanilla-extract/css';
const colors = styleVariants({
red: {
color: 'red'
}
}, "colors");
`);
});
it('should handle styleVariants with mapper assigned to const', () => {
const source = `
import { styleVariants } from '@vanilla-extract/css';
const colors = styleVariants({
red: 'red'
}, (color) => ({ color }));
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { styleVariants } from '@vanilla-extract/css';
const colors = styleVariants({
red: 'red'
}, color => ({
color
}), "colors");
`);
});
it('should handle style assigned to default export', () => {
const source = `
import { style } from '@vanilla-extract/css';
export default style({
zIndex: 2,
});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style } from '@vanilla-extract/css';
export default style({
zIndex: 2
}, "default");
`);
});
it('should handle style assigned to object property', () => {
const source = `
import { style } from '@vanilla-extract/css';
const test = {
one: {
two: style({
zIndex: 2,
})
}
};
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style } from '@vanilla-extract/css';
const test = {
one: {
two: style({
zIndex: 2
}, "test_one_two")
}
};
`);
});
it('should handle style returned from an arrow function', () => {
const source = `
import { style } from '@vanilla-extract/css';
const test = () => {
return style({
color: 'red'
});
};
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style } from '@vanilla-extract/css';
const test = () => {
return style({
color: 'red'
}, "test");
};
`);
});
it('should handle style returned implicitly from an arrow function', () => {
const source = `
import { style } from '@vanilla-extract/css';
const test = () => style({
color: 'red'
});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style } from '@vanilla-extract/css';
const test = () => style({
color: 'red'
}, "test");
`);
});
it('should handle style returned from a function', () => {
const source = `
import { style } from '@vanilla-extract/css';
function test() {
return style({
color: 'red'
});
}
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style } from '@vanilla-extract/css';
function test() {
return style({
color: 'red'
}, "test");
}
`);
});
it('should handle globalStyle', () => {
const source = `
import { globalStyle } from '@vanilla-extract/css';
globalStyle('html, body', { margin: 0 });
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { globalStyle } from '@vanilla-extract/css';
globalStyle('html, body', {
margin: 0
});
`);
});
it('should handle createVar assigned to const', () => {
const source = `
import { createVar } from '@vanilla-extract/css';
const myVar = createVar();
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { createVar } from '@vanilla-extract/css';
const myVar = createVar("myVar");
`);
});
it('should handle typed createVar assigned to const', () => {
const source = `
import { createVar } from '@vanilla-extract/css';
const myVar = createVar({ syntax: '*', inherits: true });
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { createVar } from '@vanilla-extract/css';
const myVar = createVar({
syntax: '*',
inherits: true
}, "myVar");
`);
});
it('should handle createContainer assigned to const', () => {
const source = `
import { createContainer } from '@vanilla-extract/css';
const myContainer = createContainer();
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { createContainer } from '@vanilla-extract/css';
const myContainer = createContainer("myContainer");
`);
});
it('should handle createViewTransition assigned to const', () => {
const source = `
import { createViewTransition } from '@vanilla-extract/css';
const myViewTransition = createViewTransition();
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { createViewTransition } from '@vanilla-extract/css';
const myViewTransition = createViewTransition("myViewTransition");
`);
});
it('should handle fontFace assigned to const', () => {
const source = `
import { fontFace } from '@vanilla-extract/css';
const myFont = fontFace({
src: 'local("Comic Sans MS")',
});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { fontFace } from '@vanilla-extract/css';
const myFont = fontFace({
src: 'local("Comic Sans MS")'
}, "myFont");
`);
});
it('should handle globalFontFace', () => {
const source = `
import { globalFontFace } from '@vanilla-extract/css';
globalFontFace('myFont', {
src: 'local("Comic Sans MS")',
});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { globalFontFace } from '@vanilla-extract/css';
globalFontFace('myFont', {
src: 'local("Comic Sans MS")'
});
`);
});
it('should handle keyframes assigned to const', () => {
const source = `
import { keyframes } from '@vanilla-extract/css';
const myAnimation = keyframes({
from: { transform: 'rotate(0deg)' },
to: { transform: 'rotate(360deg)' }
});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { keyframes } from '@vanilla-extract/css';
const myAnimation = keyframes({
from: {
transform: 'rotate(0deg)'
},
to: {
transform: 'rotate(360deg)'
}
}, "myAnimation");
`);
});
it('should handle globalKeyframes', () => {
const source = `
import { globalKeyframes } from '@vanilla-extract/css';
globalKeyframes('myKeyframes', {
from: { transform: 'rotate(0deg)' },
to: { transform: 'rotate(360deg)' }
});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { globalKeyframes } from '@vanilla-extract/css';
globalKeyframes('myKeyframes', {
from: {
transform: 'rotate(0deg)'
},
to: {
transform: 'rotate(360deg)'
}
});
`);
});
it('should handle layer assigned to const', () => {
const source = `
import { layer } from '@vanilla-extract/css';
const autoDebugId = layer();
const providedDebugId = layer('utils');
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { layer } from '@vanilla-extract/css';
const autoDebugId = layer("autoDebugId");
const providedDebugId = layer('utils');
`);
});
it('should handle layer assigned to a variable', () => {
const source = `
import { layer } from '@vanilla-extract/css';
let reset;
reset = layer();
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { layer } from '@vanilla-extract/css';
let reset;
reset = layer("reset");
`);
});
it('should handle layer with a parent', () => {
const source = `
import { layer } from '@vanilla-extract/css';
const reset = layer({ parent: 'papa' });
const providedDebugId = layer({ parent: 'papa' }, 'utils');
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { layer } from '@vanilla-extract/css';
const reset = layer({
parent: 'papa'
}, "reset");
const providedDebugId = layer({
parent: 'papa'
}, 'utils');
`);
});
it('should handle globalLayer', () => {
const source = `
import { globalLayer } from '@vanilla-extract/css';
globalLayer('reset');
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { globalLayer } from '@vanilla-extract/css';
globalLayer('reset');
`);
});
it('should handle globalLayer with a parent', () => {
const source = `
import { globalLayer } from '@vanilla-extract/css';
const reset = globalLayer({ parent: 'papa' }, 'my-reset');
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { globalLayer } from '@vanilla-extract/css';
const reset = globalLayer({
parent: 'papa'
}, 'my-reset');
`);
});
it('should handle createTheme assigned to const', () => {
const source = `
import { createTheme } from '@vanilla-extract/css';
const darkTheme = createTheme({}, {});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { createTheme } from '@vanilla-extract/css';
const darkTheme = createTheme({}, {}, "darkTheme");
`);
});
it('should handle createTheme using destructuring', () => {
const source = `
import { createTheme } from '@vanilla-extract/css';
const [theme, vars] = createTheme({}, {});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { createTheme } from '@vanilla-extract/css';
const [theme, vars] = createTheme({}, {}, "theme");
`);
});
it('should handle createTheme using destructuring when already compiled scenario 1', () => {
const source = `
import { createTheme } from '@vanilla-extract/css';
var _createTheme = createTheme({}),
_createTheme2 = _slicedToArray(_createTheme, 2),
myThemeClass = _createTheme2[0],
vars = _createTheme2[1];
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { createTheme } from '@vanilla-extract/css';
var _createTheme = createTheme({}, "myThemeClass"),
_createTheme2 = _slicedToArray(_createTheme, 2),
myThemeClass = _createTheme2[0],
vars = _createTheme2[1];
`);
});
it('should handle createTheme using destructuring when already compiled scenario 2', () => {
const source = `
import { createTheme } from '@vanilla-extract/css';
var ref = _slicedToArray(createTheme({}), 2);
export var myThemeClass = ref[0],
vars = ref[1];
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { createTheme } from '@vanilla-extract/css';
var ref = _slicedToArray(createTheme({}, "myThemeClass"), 2);
export var myThemeClass = ref[0],
vars = ref[1];
`);
});
it('should handle createTheme using destructuring when already compiled scenario 3', () => {
const source = `
import { createTheme } from '@vanilla-extract/css';
var ref = _slicedToArray(createTheme({}), 2),
myThemeClass = ref[0],
vars = ref[1];
export { myThemeClass, vars };
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { createTheme } from '@vanilla-extract/css';
var ref = _slicedToArray(createTheme({}, "myThemeClass"), 2),
myThemeClass = ref[0],
vars = ref[1];
export { myThemeClass, vars };
`);
});
it('should handle createGlobalTheme', () => {
const source = `
import { createGlobalTheme } from '@vanilla-extract/css';
const vars = createGlobalTheme(':root', { foo: 'bar' });
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { createGlobalTheme } from '@vanilla-extract/css';
const vars = createGlobalTheme(':root', {
foo: 'bar'
});
`);
});
it('should handle createThemeContract', () => {
const source = `
import { createThemeContract } from '@vanilla-extract/css';
const vars = createThemeContract({
foo: 'bar'
});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { createThemeContract } from '@vanilla-extract/css';
const vars = createThemeContract({
foo: 'bar'
});
`);
});
it('should handle recipe assigned to const', () => {
const source = `
import { recipe } from '@vanilla-extract/recipes';
const button = recipe({});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { recipe } from '@vanilla-extract/recipes';
const button = recipe({}, "button");
`);
});
it('should ignore functions that already supply a debug name', () => {
const source = `
import { style, styleVariants } from '@vanilla-extract/css';
const three = style({
testStyle: {
zIndex: 2,
}
}, 'myDebugValue');
const four = styleVariants({
red: { color: 'red' }
}, 'myDebugValue');
const fourTemplate = styleVariants({
red: { color: 'red' }
}, \`myDebugValue_\${i}\`);
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style, styleVariants } from '@vanilla-extract/css';
const three = style({
testStyle: {
zIndex: 2
}
}, 'myDebugValue');
const four = styleVariants({
red: {
color: 'red'
}
}, 'myDebugValue');
const fourTemplate = styleVariants({
red: {
color: 'red'
}
}, \`myDebugValue_\${i}\`);
`);
});
it('should only apply debug ids to functions imported from the relevant package', () => {
const source = `
import { style } from 'some-other-package';
const three = style({
zIndex: 2,
});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style } from 'some-other-package';
const three = style({
zIndex: 2
});
`);
});
it('should handle renaming imports', () => {
const source = `
import { style as specialStyle } from '@vanilla-extract/css';
const four = specialStyle({
zIndex: 2,
});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style as specialStyle } from '@vanilla-extract/css';
const four = specialStyle({
zIndex: 2
}, "four");
`);
});
it('should handle anonymous style in arrays', () => {
const source = `
import { style } from '@vanilla-extract/css';
export const height = [
style({
zIndex: 2,
})
];
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style } from '@vanilla-extract/css';
export const height = [style({
zIndex: 2
}, "height")];
`);
});
it('should handle object key with anonymous style in arrays', () => {
const source = `
import { style } from '@vanilla-extract/css';
export const height = {
full: [style({
zIndex: 2,
})]
};
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style } from '@vanilla-extract/css';
export const height = {
full: [style({
zIndex: 2
}, "height_full")]
};
`);
});
it('should handle namespace imports', () => {
const source = `
import * as css from '@vanilla-extract/css';
const one = css.style({
zIndex: 2,
});
`;
expect(transform(source)).toMatchInlineSnapshot(`
import * as css from '@vanilla-extract/css';
const one = css.style({
zIndex: 2
}, "one");
`);
});
it('should handle nested call expressions', () => {
const source = `
import { style } from '@vanilla-extract/css';
const one = instrument(style({
zIndex: 1,
}));
const two = instrument(instrument(style({
zIndex: 2,
})));
const three = instrument(instrument(instrument(style({
zIndex: 3,
}))));
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style } from '@vanilla-extract/css';
const one = instrument(style({
zIndex: 1
}, "one"));
const two = instrument(instrument(style({
zIndex: 2
}, "two")));
const three = instrument(instrument(instrument(style({
zIndex: 3
}, "three"))));
`);
});
it('should handle instrumentation via sequence expresions', () => {
const source = `
import { style } from '@vanilla-extract/css';
const one = (something++, style({
zIndex: 1,
}));
`;
expect(transform(source)).toMatchInlineSnapshot(`
import { style } from '@vanilla-extract/css';
const one = (something++, style({
zIndex: 1
}, "one"));
`);
});
});
================================================
FILE: packages/babel-plugin-debug-ids/src/index.ts
================================================
import {
types as t,
type PluginObj,
type PluginPass,
type NodePath,
} from '@babel/core';
const packageIdentifiers = new Set([
'@vanilla-extract/css',
'@vanilla-extract/recipes',
]);
type DebugConfig = {
maxParams: number;
hasDebugId?: (node: t.CallExpression) => boolean;
};
const debuggableFunctionConfig = {
style: {
maxParams: 2,
},
createTheme: {
maxParams: 3,
},
styleVariants: {
maxParams: 3,
hasDebugId: ({ arguments: args }) => {
const previousArg = args[args.length - 1];
return t.isStringLiteral(previousArg) || t.isTemplateLiteral(previousArg);
},
},
fontFace: {
maxParams: 2,
},
keyframes: {
maxParams: 2,
},
createVar: {
maxParams: 2,
hasDebugId: ({ arguments: args }) => {
const previousArg = args[args.length - 1];
return t.isStringLiteral(previousArg) || t.isTemplateLiteral(previousArg);
},
},
recipe: {
maxParams: 2,
},
createContainer: {
maxParams: 1,
},
createViewTransition: {
maxParams: 1,
},
layer: {
maxParams: 2,
hasDebugId: ({ arguments: args }) => {
const previousArg = args[args.length - 1];
return t.isStringLiteral(previousArg) || t.isTemplateLiteral(previousArg);
},
},
} satisfies Record;
const styleFunctions = [
...(Object.keys(debuggableFunctionConfig) as Array<
keyof typeof debuggableFunctionConfig
>),
'globalStyle',
'createGlobalTheme',
'createThemeContract',
'globalFontFace',
'globalKeyframes',
'globalLayer',
'recipe',
] as const;
type StyleFunction = (typeof styleFunctions)[number];
const extractName = (node: t.Node) => {
if (t.isObjectProperty(node) && t.isIdentifier(node.key)) {
return node.key.name;
} else if (
(t.isVariableDeclarator(node) || t.isFunctionDeclaration(node)) &&
t.isIdentifier(node.id)
) {
return node.id.name;
} else if (t.isAssignmentExpression(node) && t.isIdentifier(node.left)) {
return node.left.name;
} else if (t.isExportDefaultDeclaration(node)) {
return 'default';
} else if (
t.isVariableDeclarator(node) &&
t.isArrayPattern(node.id) &&
t.isIdentifier(node.id.elements[0])
) {
return node.id.elements[0].name;
}
};
const getDebugId = (path: NodePath) => {
const firstRelevantParentPath = path.findParent(
({ node }) => !(t.isCallExpression(node) || t.isSequenceExpression(node)),
);
if (!firstRelevantParentPath) {
return;
}
// Special case 1: Handle `export const [themeClass, vars] = createTheme({});`
// when it's already been compiled into one of the following forms:
//
// var _createTheme = createTheme({}),
// _createTheme2 = _slicedToArray(_createTheme, 2),
// themeClass = _createTheme2[0],
// vars = _createTheme2[1];
if (t.isVariableDeclaration(firstRelevantParentPath.parent)) {
if (firstRelevantParentPath.parent.declarations.length === 4) {
const [themeDeclarator, , classNameDeclarator] =
firstRelevantParentPath.parent.declarations;
if (
t.isCallExpression(themeDeclarator.init) &&
t.isIdentifier(themeDeclarator.init.callee, { name: 'createTheme' }) &&
t.isIdentifier(classNameDeclarator.id)
) {
return classNameDeclarator.id.name;
}
}
// alternative compiled form:
//
// var ref = _slicedToArray(createTheme({}), 2);
// export var themeClass = ref[0],
// vars = ref[1];
else if (firstRelevantParentPath.parent.declarations.length === 1) {
const [themeDeclarator] = firstRelevantParentPath.parent.declarations;
const nextSibling =
firstRelevantParentPath.parentPath?.getNextSibling().node;
if (
t.isCallExpression(themeDeclarator.init) &&
t.isCallExpression(themeDeclarator.init.arguments[0]) &&
t.isIdentifier(themeDeclarator.init.arguments[0].callee, {
name: 'createTheme',
}) &&
t.isExportNamedDeclaration(nextSibling) &&
t.isVariableDeclaration(nextSibling.declaration) &&
t.isVariableDeclarator(nextSibling.declaration.declarations[0]) &&
t.isIdentifier(nextSibling.declaration.declarations[0].id)
) {
return nextSibling.declaration.declarations[0].id.name;
}
}
// Special case 2: Handle `const [themeClass, vars] = createTheme({});
// export { themeClass, vars };`
// when compiled into the following:
//
// var ref = _slicedToArray(createTheme({}), 2),
// myThemeClass = ref[0],
// vars = ref[1];
// export { themeClass, vars };
else if (firstRelevantParentPath.parent.declarations.length === 3) {
const [themeDeclarator, classNameDeclarator] =
firstRelevantParentPath.parent.declarations;
if (
t.isCallExpression(themeDeclarator.init) &&
t.isCallExpression(themeDeclarator.init.arguments[0]) &&
t.isIdentifier(themeDeclarator.init.arguments[0].callee, {
name: 'createTheme',
}) &&
t.isIdentifier(classNameDeclarator.id)
) {
return classNameDeclarator.id.name;
}
}
}
const relevantParent = firstRelevantParentPath.node;
if (
t.isObjectProperty(relevantParent) ||
t.isReturnStatement(relevantParent) ||
t.isArrowFunctionExpression(relevantParent) ||
t.isArrayExpression(relevantParent) ||
t.isSpreadElement(relevantParent)
) {
const names: Array = [];
path.findParent(({ node }) => {
const name = extractName(node);
if (name) {
names.unshift(name);
}
// Traverse all the way to the root
return false;
});
return names.join('_');
} else {
return extractName(relevantParent);
}
};
const getRelevantCall = (
node: t.CallExpression,
namespaceImport: string,
importIdentifiers: Map,
) => {
const { callee } = node;
if (
namespaceImport &&
t.isMemberExpression(callee) &&
t.isIdentifier(callee.object, { name: namespaceImport })
) {
return styleFunctions.find((exportName) =>
t.isIdentifier(callee.property, { name: exportName }),
);
} else {
const importInfo = Array.from(importIdentifiers.entries()).find(
([identifier]) => t.isIdentifier(callee, { name: identifier }),
);
if (importInfo) {
return importInfo[1];
}
}
};
type Context = PluginPass & {
namespaceImport: string;
importIdentifiers: Map;
};
export default function (): PluginObj {
return {
pre() {
this.importIdentifiers = new Map();
this.namespaceImport = '';
},
visitor: {
ImportDeclaration(path) {
if (packageIdentifiers.has(path.node.source.value)) {
path.node.specifiers.forEach((specifier) => {
if (t.isImportNamespaceSpecifier(specifier)) {
this.namespaceImport = specifier.local.name;
} else if (t.isImportSpecifier(specifier)) {
const { imported, local } = specifier;
const importName = (
t.isIdentifier(imported) ? imported.name : imported.value
) as StyleFunction;
if (styleFunctions.includes(importName)) {
this.importIdentifiers.set(local.name, importName);
}
}
});
}
},
CallExpression(path) {
const { node } = path;
const usedExport = getRelevantCall(
node,
this.namespaceImport,
this.importIdentifiers,
);
if (usedExport && usedExport in debuggableFunctionConfig) {
const { maxParams, hasDebugId } = (
debuggableFunctionConfig as Record
)[usedExport];
if (node.arguments.length < maxParams && !hasDebugId?.(node)) {
const debugIdent = getDebugId(path);
if (debugIdent) {
node.arguments.push(t.stringLiteral(debugIdent));
}
}
}
},
},
};
}
================================================
FILE: packages/compiler/CHANGELOG.md
================================================
# @vanilla-extract/compiler
## 0.6.0
### Minor Changes
- [#1701](https://github.com/vanilla-extract-css/vanilla-extract/pull/1701) [`b066d1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b066d1c253ee09f2967bfddd7b6762f5dfa2d7d7) Thanks [@askoufis](https://github.com/askoufis)! - Expose `compiler.findImporterTree` API
## 0.5.1
### Patch Changes
- [#1696](https://github.com/vanilla-extract-css/vanilla-extract/pull/1696) [`680097c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/680097c49f79a562fdd88aba85ce0f655ed8fb5a) Thanks [@askoufis](https://github.com/askoufis)! - Set `appType: 'custom'` on compiler's Vite server to disable unused HTML middlewares
- [#1696](https://github.com/vanilla-extract-css/vanilla-extract/pull/1696) [`680097c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/680097c49f79a562fdd88aba85ce0f655ed8fb5a) Thanks [@askoufis](https://github.com/askoufis)! - Propagate `server.middlewareMode` from parent server's Vite config
- [#1694](https://github.com/vanilla-extract-css/vanilla-extract/pull/1694) [`d1257c7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d1257c7e934865bd381941f601af5305cbcc2b90) Thanks [@askoufis](https://github.com/askoufis)! - Add `^5.0.0` and `^6.0.0` to `vite-node` dependency range
- Updated dependencies [[`9b1bfd0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9b1bfd068a61a042ff0276a901edf4e44f6c8cea), [`c34e69a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c34e69a918b55e02ce8106a193b10dcfce933437)]:
- @vanilla-extract/css@1.19.1
- @vanilla-extract/integration@8.0.9
## 0.5.0
### Minor Changes
- [#1687](https://github.com/vanilla-extract-css/vanilla-extract/pull/1687) [`e29f242`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e29f242953fcb46315cebe5b3374a5a1f89d93af) Thanks [@askoufis](https://github.com/askoufis)! - Add support for Vite 8
## 0.4.0
### Minor Changes
- [#1639](https://github.com/vanilla-extract-css/vanilla-extract/pull/1639) [`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1) Thanks [@RJWadley](https://github.com/RJWadley)! - Add `unstable_splitCssPerRule` option to generate one CSS import per rule instead of one per file
- [#1639](https://github.com/vanilla-extract-css/vanilla-extract/pull/1639) [`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1) Thanks [@RJWadley](https://github.com/RJWadley)! - Add `unstable_invalidateAllModules` API to manually clear module cache
- [#1639](https://github.com/vanilla-extract-css/vanilla-extract/pull/1639) [`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1) Thanks [@RJWadley](https://github.com/RJWadley)! - `createCompiler`: The `cssImportSpecifier` option now receives the CSS content in addition to the module id
### Patch Changes
- Updated dependencies [[`1a63a60`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1a63a600b7a707f9317ce5f6607998eba4eb9c99)]:
- @vanilla-extract/css@1.19.0
- @vanilla-extract/integration@8.0.8
## 0.3.4
### Patch Changes
- [#1665](https://github.com/vanilla-extract-css/vanilla-extract/pull/1665) [`352fc19`](https://github.com/vanilla-extract-css/vanilla-extract/commit/352fc19169e5f0233f8135842857399ccd46727d) Thanks [@askoufis](https://github.com/askoufis)! - Pass through `viteConfig.build.assetsInlineLimit` to the compiler's `vite` server
- Updated dependencies [[`a440470`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a440470b9912aab705ae32cd5248ff6479535704), [`0b2c09e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0b2c09e0fec1bee0e996f1920a106daab471178a), [`c6047fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c6047fbe3f5e55a45780aa3dffd478a7743b8b3a), [`8b49b35`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b49b354d4364ce6e0db5e8ba16c92ca3e6b9cea)]:
- @vanilla-extract/integration@8.0.7
- @vanilla-extract/css@1.18.0
## 0.3.3
### Patch Changes
- Updated dependencies [[`11a7c66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/11a7c668683d0c3e324d4337676e807680a895bd)]:
- @vanilla-extract/css@1.17.5
- @vanilla-extract/integration@8.0.6
## 0.3.2
### Patch Changes
- [#1638](https://github.com/vanilla-extract-css/vanilla-extract/pull/1638) [`46ef1db`](https://github.com/vanilla-extract-css/vanilla-extract/commit/46ef1db201ad83d50c4620e331ec53f9affe1d84) Thanks [@PsychoLlama](https://github.com/PsychoLlama)! - Inherit parent vite `server.watch` options
- Updated dependencies [[`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1)]:
- @vanilla-extract/integration@8.0.5
## 0.3.1
### Patch Changes
- [#1624](https://github.com/vanilla-extract-css/vanilla-extract/pull/1624) [`50f1234`](https://github.com/vanilla-extract-css/vanilla-extract/commit/50f12348894a9e77a36ec269fcdf2ad159e5211d) Thanks [@BPScott](https://github.com/BPScott)! - Include `^7.0.0` in `vite` dependency range
## 0.3.0
### Minor Changes
- [#1614](https://github.com/vanilla-extract-css/vanilla-extract/pull/1614) [`4e92cce`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4e92ccee6d7b0c2ee16163446e5938c7365224b3) Thanks [@askoufis](https://github.com/askoufis)! - Add new `getAllCss` API
The `Compiler` class now provides a `getAllCss` method that returns all the CSS currently stored by the compiler.
**EXAMPLE USAGE**:
```ts
import { createCompiler } from '@vanilla-extract/compiler';
const compiler = createCompiler({
root: process.cwd()
});
await compiler.processVanillaFile('foo.css.ts');
await compiler.processVanillaFile('bar.css.ts');
// Contains all CSS created by `foo.css.ts` and `bar.css.ts`
const allCss = compiler.getAllCss();
```
## 0.2.3
### Patch Changes
- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert "Improve ESM package entrypoints (#1597)" to fix `Named export not found` error when importing ESM entrypoints
- Updated dependencies [[`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd)]:
- @vanilla-extract/css@1.17.4
- @vanilla-extract/integration@8.0.4
## 0.2.2
### Patch Changes
- [#1605](https://github.com/vanilla-extract-css/vanilla-extract/pull/1605) [`9bf58ee`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9bf58ee1e9a8371f4ddc245b0a96afcfcf5eac29) Thanks [@sapphi-red](https://github.com/sapphi-red)! - Update `vite-node` dependency to `^3.2.2`
## 0.2.1
### Patch Changes
- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path
- Updated dependencies [[`f0533be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f0533be939e6835ae961e3dd10b764c0c052ee75), [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e)]:
- @vanilla-extract/css@1.17.3
- @vanilla-extract/integration@8.0.3
## 0.2.0
### Minor Changes
- [#1592](https://github.com/vanilla-extract-css/vanilla-extract/pull/1592) [`35d6b3f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/35d6b3fe5d297dc76f1629a9f54f21d0f97e7c9f) Thanks [@askoufis](https://github.com/askoufis)! - `createCompiler`: Add `enableFileWatcher` option
By default, the compiler sets up its own file watcher.
This option allows you to disable it if necessary, such as during a production build.
**EXAMPLE USAGE**:
```ts
const compiler = createCompiler({
root: process.cwd(),
enableFileWatcher: false
});
```
## 0.1.3
### Patch Changes
- [#1583](https://github.com/vanilla-extract-css/vanilla-extract/pull/1583) [`6488e28`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6488e28337106582231b418778c884f26e393219) Thanks [@askoufis](https://github.com/askoufis)! - Ignore Vite `base` config
Fixes a bug where imported asset URLs would be transformed by the compiler when setting the `base` option in Vite, resulting in incorrect resolution and bundling of these assets during the build process.
- Updated dependencies [[`134117d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/134117d32e25d92edc24c8c863d757294d7b5df8), [`c66be53`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c66be53d600802b2922da1d6034e2a5ff3fbbcae)]:
- @vanilla-extract/css@1.17.2
- @vanilla-extract/integration@8.0.2
## 0.1.2
### Patch Changes
- Updated dependencies [[`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483)]:
- @vanilla-extract/integration@8.0.1
## 0.1.1
### Patch Changes
- [#1529](https://github.com/vanilla-extract-css/vanilla-extract/pull/1529) [`d5b6e70`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d5b6e70f44a3d4f03e113fe78e0605b358e9c0d7) Thanks [@askoufis](https://github.com/askoufis)! - Update `vite-node` dependency
- [#1529](https://github.com/vanilla-extract-css/vanilla-extract/pull/1529) [`d5b6e70`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d5b6e70f44a3d4f03e113fe78e0605b358e9c0d7) Thanks [@askoufis](https://github.com/askoufis)! - Include `^6.0.0` in `vite` dependency range
## 0.1.0
### Minor Changes
- [#1536](https://github.com/vanilla-extract-css/vanilla-extract/pull/1536) [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3) Thanks [@askoufis](https://github.com/askoufis)! - Initial release
### Patch Changes
- Updated dependencies [[`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3), [`c432ff3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c432ff33a8aead2c94fa6a4fcc9fcb1d7990427d), [`ec0b024`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ec0b024fd19c133c233445f9e860626d104f9d97), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3)]:
- @vanilla-extract/integration@8.0.0
- @vanilla-extract/css@1.17.1
================================================
FILE: packages/compiler/README.md
================================================
# @vanilla-extract/compiler
This package is not intended for public consumption.
================================================
FILE: packages/compiler/package.json
================================================
{
"name": "@vanilla-extract/compiler",
"version": "0.6.0",
"description": "Zero-runtime Stylesheets-in-TypeScript",
"main": "dist/vanilla-extract-compiler.cjs.js",
"module": "dist/vanilla-extract-compiler.esm.js",
"types": "dist/vanilla-extract-compiler.cjs.d.ts",
"files": [
"/dist"
],
"repository": {
"type": "git",
"url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
"directory": "packages/compiler"
},
"author": "SEEK",
"license": "MIT",
"dependencies": {
"@vanilla-extract/css": "workspace:^",
"@vanilla-extract/integration": "workspace:^",
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
"vite-node": "^3.2.2 || ^5.0.0 || ^6.0.0"
}
}
================================================
FILE: packages/compiler/src/compiler.ts
================================================
import assert from 'assert';
import { join, isAbsolute } from 'path';
import type { Adapter } from '@vanilla-extract/css';
import { transformCss } from '@vanilla-extract/css/transformCss';
import type { ModuleNode, UserConfig as ViteUserConfig } from 'vite';
import {
cssFileFilter,
transform,
normalizePath,
getPackageInfo,
serializeVanillaModule,
type IdentifierOption,
} from '@vanilla-extract/integration';
import { lock } from './lock';
type Css = Parameters[0];
type Composition = Parameters[0];
const globalAdapterIdentifier = '__vanilla_globalCssAdapter__';
type ModuleScanResult = {
cssDeps: string[];
watchFiles: Set;
};
const createModuleScanner = () => {
const cache = new Map();
const scanModule = (
moduleNode: ModuleNode,
path: string[] = [],
): ModuleScanResult => {
const watchFiles = new Set();
const cacheKey = moduleNode.id ?? moduleNode.file;
if (
!cacheKey ||
moduleNode.id?.includes('@vanilla-extract/') ||
path.includes(cacheKey)
) {
return {
cssDeps: [],
watchFiles,
};
}
if (cache.has(cacheKey)) {
return cache.get(cacheKey)!;
}
cache.set(cacheKey, {
cssDeps: [],
watchFiles,
});
const cssDeps = new Set();
const currentPath = [...path, cacheKey];
for (const dependencyNode of moduleNode.importedModules) {
const { cssDeps: dependencyCssDeps, watchFiles: dependencyWatchFiles } =
scanModule(dependencyNode, currentPath);
dependencyCssDeps.forEach((file) => cssDeps.add(file));
dependencyWatchFiles.forEach((file) => watchFiles.add(file));
}
const cssDepsArray = Array.from(cssDeps);
if (moduleNode.id && cssFileFilter.test(moduleNode.id)) {
cssDepsArray.push(moduleNode.id);
}
if (moduleNode.file) {
watchFiles.add(moduleNode.file);
}
const scanResult = {
cssDeps: cssDepsArray,
watchFiles,
};
cache.set(cacheKey, scanResult);
return scanResult;
};
return scanModule;
};
const createViteServer = async ({
root,
identifiers,
viteConfig,
enableFileWatcher = true,
}: Required<
Pick
> &
Pick) => {
const pkg = getPackageInfo(root);
const vite = await import('vite');
const server = await vite.createServer({
...viteConfig,
// The vite-node server should not rewrite imported asset URLs within VE stylesheets.
// Doing so interferes with Vite's resolution and bundling of these assets at build time.
base: undefined,
configFile: false,
root,
// Don't include HTML middlewares
appType: 'custom',
server: {
middlewareMode: viteConfig.server?.middlewareMode,
hmr: false,
watch: enableFileWatcher ? viteConfig.server?.watch : null,
},
logLevel: 'silent',
optimizeDeps: {
noDiscovery: true,
},
build: {
dynamicImportVarsOptions: {
// Temporary workaround for https://github.com/vitejs/vite/issues/19245.
// Shouldn't affect functionality as it's equivalent to the default value.
// Can be removed once https://github.com/vitejs/vite/pull/19247 is released.
exclude: [/node_modules/],
},
assetsInlineLimit: viteConfig.build?.assetsInlineLimit,
},
ssr: {
noExternal: true,
// `cssesc` is CJS-only, so we need to mark it as external as Vite's transform pipeline
// can't handle CJS during dev-time.
// See https://github.com/withastro/astro/blob/0879cc2ce7e15a2e7330c68d6667d9a2edea52ab/packages/astro/src/core/create-vite.ts#L86
// and https://github.com/withastro/astro/issues/11395
external: ['cssesc'],
},
plugins: [
{
name: 'vanilla-extract-externalize',
enforce: 'pre',
async resolveId(source, importer) {
if (source.startsWith('@vanilla-extract/')) {
const result = await this.resolve(source, importer, {
skipSelf: true,
});
return result ? { ...result, external: true } : null;
}
},
},
{
name: 'vanilla-extract-transform',
async transform(code, id) {
if (cssFileFilter.test(id)) {
const filescopedCode = await transform({
source: code,
rootPath: root,
filePath: id,
packageName: pkg.name,
identOption: identifiers,
globalAdapterIdentifier,
});
return filescopedCode;
}
},
},
...(viteConfig.plugins ?? []),
],
});
// this is need to initialize the plugins
await server.pluginContainer.buildStart({});
const { ViteNodeRunner } = await import('vite-node/client');
const { ViteNodeServer } = await import('vite-node/server');
const node = new ViteNodeServer(server);
class ViteNodeRunnerWithContext extends ViteNodeRunner {
cssAdapter: Adapter | undefined;
prepareContext(context: Record): Record {
return {
...super.prepareContext(context),
[globalAdapterIdentifier]: this.cssAdapter,
};
}
}
const runner = new ViteNodeRunnerWithContext({
root,
base: server.config.base,
fetchModule(id) {
return node.fetchModule(id);
},
resolveId(id, importer) {
return node.resolveId(id, importer);
},
});
if (enableFileWatcher) {
server.watcher.on('change', (filePath) => {
runner.moduleCache.invalidateDepTree([filePath]);
});
}
return {
server,
runner,
};
};
class NormalizedMap extends Map {
constructor(readonly root: string) {
super();
}
#normalizePath(filePath: string) {
return normalizePath(
isAbsolute(filePath) ? filePath : join(this.root, filePath),
);
}
get(filePath: string) {
filePath = this.#normalizePath(filePath);
return super.get(filePath);
}
set(filePath: string, value: V) {
filePath = this.#normalizePath(filePath);
return super.set(filePath, value);
}
}
export interface Compiler {
processVanillaFile(
filePath: string,
options?: {
outputCss?: boolean;
},
): Promise<{ source: string; watchFiles: Set }>;
unstable_invalidateAllModules(): Promise;
getCssForFile(virtualCssFilePath: string): { filePath: string; css: string };
close(): Promise;
getAllCss(): string;
findImporterTree(
filePath: string,
transformedVeModules: Set,
): Promise>;
}
interface ProcessedVanillaFile {
source: string;
watchFiles: Set;
}
export interface CreateCompilerOptions {
root: string;
/**
* By default, the compiler sets up its own file watcher. This option allows you to disable it if
* necessary, such as during a production build.
*
* @default true
*/
enableFileWatcher?: boolean;
cssImportSpecifier?: (
filePath: string,
css: string,
) => string | Promise;
/**
* When true, generates one CSS import per rule instead of one per file.
* This can help bundlers like Turbopack deduplicate shared CSS more effectively.
*
* @default false
*/
unstable_splitCssPerRule?: boolean;
identifiers?: IdentifierOption;
viteConfig?: ViteUserConfig;
/** @deprecated */
viteResolve?: ViteUserConfig['resolve'];
/** @deprecated */
vitePlugins?: ViteUserConfig['plugins'];
}
export const createCompiler = ({
root,
identifiers = 'debug',
cssImportSpecifier = (filePath) => filePath + '.vanilla.css',
unstable_splitCssPerRule: splitCssPerRule = false,
viteConfig,
enableFileWatcher,
viteResolve,
vitePlugins,
}: CreateCompilerOptions): Compiler => {
assert(
!(viteConfig && (viteResolve || vitePlugins)),
'viteConfig cannot be used with viteResolve or vitePlugins',
);
const vitePromise = createViteServer({
root,
identifiers,
viteConfig: viteConfig ?? {
resolve: viteResolve,
plugins: vitePlugins,
},
enableFileWatcher,
});
const processVanillaFileCache = new Map<
string,
{
lastInvalidationTimestamp: number;
result: ProcessedVanillaFile;
}
>();
const cssCache = new NormalizedMap<{ css: string; cssRules: string[] }>(root);
const classRegistrationsByModuleId = new NormalizedMap<{
localClassNames: Set;
composedClassLists: Array;
}>(root);
return {
async processVanillaFile(
filePath,
options = {},
): Promise {
const { server, runner } = await vitePromise;
filePath = isAbsolute(filePath) ? filePath : join(root, filePath);
const outputCss = options.outputCss ?? true;
const cacheKey = Object.entries({ filePath, outputCss })
.map((entry) => entry.join('='))
.join('|');
const cachedFile = processVanillaFileCache.get(cacheKey);
if (cachedFile) {
const moduleNode = server.moduleGraph.getModuleById(filePath);
if (
cachedFile.lastInvalidationTimestamp ===
moduleNode?.lastInvalidationTimestamp
) {
return cachedFile.result;
}
}
const cssByModuleId = new NormalizedMap>(root);
const localClassNames = new Set();
const composedClassLists: Array = [];
const cssAdapter: Adapter = {
getIdentOption: () => identifiers,
onBeginFileScope: (fileScope) => {
// Before evaluating a file, reset the cache for it
const moduleId = normalizePath(fileScope.filePath);
cssByModuleId.set(moduleId, []);
classRegistrationsByModuleId.set(moduleId, {
localClassNames: new Set(),
composedClassLists: [],
});
},
onEndFileScope: (fileScope) => {
// For backwards compatibility, ensure the cache is populated even if
// a file didn't contain any CSS. This is to ensure that the only
// error messages shown in older versions are the ones below.
const moduleId = normalizePath(fileScope.filePath);
const cssObjs = cssByModuleId.get(moduleId) ?? [];
cssByModuleId.set(moduleId, cssObjs);
},
registerClassName: (className, fileScope) => {
if (!fileScope) {
throw new Error(
'Your version of @vanilla-extract/css must be at least v1.10.0. Please update to a compatible version.',
);
}
localClassNames.add(className);
const moduleId = normalizePath(fileScope.filePath);
classRegistrationsByModuleId
.get(moduleId)!
.localClassNames.add(className);
},
registerComposition: (composedClassList, fileScope) => {
if (!fileScope) {
throw new Error(
'Your version of @vanilla-extract/css must be at least v1.10.0. Please update to a compatible version.',
);
}
composedClassLists.push(composedClassList);
const moduleId = normalizePath(fileScope.filePath);
classRegistrationsByModuleId
.get(moduleId)!
.composedClassLists.push(composedClassList);
},
markCompositionUsed: () => {
// This compiler currently retains all composition classes
},
appendCss: (css, fileScope) => {
const moduleId = normalizePath(fileScope.filePath);
const cssObjs = cssByModuleId.get(moduleId) ?? [];
cssObjs.push(css);
cssByModuleId.set(moduleId, cssObjs);
},
};
const { fileExports, cssImports, watchFiles, lastInvalidationTimestamp } =
await lock(async () => {
runner.cssAdapter = cssAdapter;
const fileExports = (await runner.executeFile(filePath)) as Record<
string,
unknown
>;
const moduleId = normalizePath(filePath);
const moduleNode = server.moduleGraph.getModuleById(moduleId);
if (!moduleNode) {
throw new Error(`Can't find ModuleNode for ${filePath}`);
}
const cssImports: string[] = [];
const orderedComposedClassLists: Composition[] = [];
const scanModule = createModuleScanner();
const { cssDeps, watchFiles } = scanModule(moduleNode);
for (const cssDep of cssDeps) {
const cssDepModuleId = normalizePath(cssDep);
const cssObjs = cssByModuleId.get(cssDepModuleId);
const cachedCss = cssCache.get(cssDepModuleId);
const cachedClassRegistrations =
classRegistrationsByModuleId.get(cssDepModuleId);
if (cachedClassRegistrations) {
orderedComposedClassLists.push(
...cachedClassRegistrations.composedClassLists,
);
}
if (!cssObjs && !cachedCss && !cachedClassRegistrations) {
continue;
}
if (cssObjs) {
let cssRules: string[] = [];
if (cssObjs.length > 0) {
cssRules = transformCss({
localClassNames: Array.from(localClassNames),
composedClassLists: orderedComposedClassLists,
cssObjs,
});
}
cssCache.set(cssDepModuleId, {
css: cssRules.join('\n'),
cssRules,
});
} else if (cachedClassRegistrations) {
cachedClassRegistrations.localClassNames.forEach(
(localClassName) => {
localClassNames.add(localClassName);
},
);
composedClassLists.push(
...cachedClassRegistrations.composedClassLists,
);
}
const { css = '', cssRules = [] } =
cssCache.get(cssDepModuleId) ?? {};
if (cssObjs || css) {
if (splitCssPerRule) {
const importSpecifiers = await Promise.all(
cssRules.map((rule, i) =>
cssImportSpecifier(cssDepModuleId + `#${i}`, rule),
),
);
for (const specifier of importSpecifiers) {
cssImports.push(`import '${specifier}';`);
}
} else {
const specifier = await cssImportSpecifier(cssDepModuleId, css);
cssImports.push(`import '${specifier}';`);
}
}
}
return {
fileExports,
cssImports: outputCss ? cssImports : [],
watchFiles,
lastInvalidationTimestamp: moduleNode.lastInvalidationTimestamp,
};
});
const result: ProcessedVanillaFile = {
source: serializeVanillaModule(
cssImports,
fileExports,
null, // This compiler currently retains all composition classes
),
watchFiles,
};
processVanillaFileCache.set(cacheKey, {
lastInvalidationTimestamp,
result,
});
return result;
},
async unstable_invalidateAllModules() {
const { server, runner } = await vitePromise;
for (const [key] of runner.moduleCache.entries()) {
if (!key.includes('node_modules')) {
runner.moduleCache.delete(key);
}
}
for (const [id, moduleNode] of server.moduleGraph.idToModuleMap) {
if (!id.includes('node_modules')) {
server.moduleGraph.invalidateModule(moduleNode);
}
}
},
getCssForFile(filePath: string) {
filePath = isAbsolute(filePath) ? filePath : join(root, filePath);
const moduleId = normalizePath(filePath);
const result = cssCache.get(moduleId);
if (!result) {
throw new Error(`No CSS for file: ${filePath}`);
}
return {
css: result.css,
filePath: filePath,
resolveDir: root,
};
},
async close() {
const { server } = await vitePromise;
await server.close();
},
getAllCss() {
let allCss = '';
for (const { css } of cssCache.values()) {
if (css) {
allCss += css + '\n';
}
}
return allCss;
},
/**
* Returns an importer tree based off the compiler's module graph. We can't use the
* consuming Vite dev server's module graph as it ends up modified by the `transform` hook to a
* point where we can't reconstruct the original importer chain.
*/
async findImporterTree(filePath, transformedModules) {
const { server } = await vitePromise;
// The compiler's module graph is always a subset of the consuming Vite dev server's module
// graph, so this early exit will be hit for any modules that aren't involved in compiling VE
// modules
const moduleNode = server.moduleGraph.getModuleById(
normalizePath(filePath),
);
if (!moduleNode) {
return new Set();
}
return _findImporterTree(moduleNode, transformedModules);
},
};
};
function _findImporterTree(
moduleNode: ModuleNode,
transformedModules: Set,
visited = new Set(),
): Set {
const result = new Set();
if (!moduleNode.id || visited.has(moduleNode.id)) {
return result;
}
// Include the starting module in the tree
result.add(moduleNode);
visited.add(moduleNode.id);
// Stop if we hit a transformed module as this is a VE module boundary that we don't
// need to invalidate past
if (transformedModules.has(moduleNode.id)) {
return result;
}
for (const importer of moduleNode.importers) {
const chain = _findImporterTree(importer, transformedModules, visited);
for (const mod of chain) {
result.add(mod);
}
}
return result;
}
================================================
FILE: packages/compiler/src/index.ts
================================================
export {
createCompiler,
type Compiler,
type CreateCompilerOptions,
} from './compiler';
================================================
FILE: packages/compiler/src/lock.ts
================================================
type AsyncFunction = () => Promise;
const queue: Array<() => void> = [];
let isProcessingQueue = false;
export async function lock(fn: AsyncFunction): Promise {
return new Promise((resolve, reject) => {
const queueFn = async () => {
try {
const result = await fn();
resolve(result);
} catch (error) {
reject(error);
} finally {
isProcessingQueue = false;
processQueue();
}
};
queue.push(queueFn);
if (!isProcessingQueue) {
processQueue();
}
});
}
async function processQueue() {
if (isProcessingQueue || queue.length === 0) {
return;
}
isProcessingQueue = true;
const fn = queue.shift()!;
await fn();
}
================================================
FILE: packages/css/CHANGELOG.md
================================================
# @vanilla-extract/css
## 1.20.0
### Minor Changes
- [#1702](https://github.com/vanilla-extract-css/vanilla-extract/pull/1702) [`48a9caf`](https://github.com/vanilla-extract-css/vanilla-extract/commit/48a9cafbbd4abfcc1bf0e72f01ad4f19f59e48cd) Thanks [@bschlenk](https://github.com/bschlenk)! - Allow `:where` and `:is` in `selectors` if all selectors target `&`
EXAMPLE USAGE:
```ts
const example = style({
color: 'red',
selectors: {
// Valid: all selectors in the list target `example`
':is(h1 > &, h2 > &)': { color: 'blue' }
// Invalid: the second selector in the list does not target `example`
':is(h1 > &, h2)': { color: 'blue' }
}
});
```
## 1.19.1
### Patch Changes
- [#1558](https://github.com/vanilla-extract-css/vanilla-extract/pull/1558) [`9b1bfd0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9b1bfd068a61a042ff0276a901edf4e44f6c8cea) Thanks [@andjsrk](https://github.com/andjsrk)! - `style`: Fixed a bug where nested arrays of classnames could cause missing or malformed CSS during [style composition](https://vanilla-extract.style/documentation/style-composition/) in certain situations.
For example, the following style composition would not generate CSS for the `backgroundColor: 'orange'` style, and would also generate malformed CSS:
```ts
const styleWithNestedComposition = style([
[style1, style2],
{ backgroundColor: 'orange' },
[style3]
]);
```
## 1.19.0
### Minor Changes
- [#1686](https://github.com/vanilla-extract-css/vanilla-extract/pull/1686) [`1a63a60`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1a63a600b7a707f9317ce5f6607998eba4eb9c99) Thanks [@askoufis](https://github.com/askoufis)! - Add `./vanilla.virtual.css?*` entrypoint for Turbopack integration
## 1.18.0
### Minor Changes
- [#1566](https://github.com/vanilla-extract-css/vanilla-extract/pull/1566) [`8b49b35`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b49b354d4364ce6e0db5e8ba16c92ca3e6b9cea) Thanks [@lfantone](https://github.com/lfantone)! - `style`: Add support for `@starting-style` rules
**EXAMPLE USAGE**:
```ts
import { style } from '@vanilla-extact/css';
export const styleWithStartingStyle = style({
backgroundColor: 'black',
'@starting-style': {
backgroundColor: 'white'
}
});
```
### Patch Changes
- [#1646](https://github.com/vanilla-extract-css/vanilla-extract/pull/1646) [`0b2c09e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0b2c09e0fec1bee0e996f1920a106daab471178a) Thanks [@plesiecki](https://github.com/plesiecki)! - Swap the order of `createVar`'s overloads to enable inference of `VarDelcaration` type
- [#1666](https://github.com/vanilla-extract-css/vanilla-extract/pull/1666) [`c6047fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c6047fbe3f5e55a45780aa3dffd478a7743b8b3a) Thanks [@askoufis](https://github.com/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.
[`csstype`]: https://www.npmjs.com/package/csstype
## 1.17.5
### Patch Changes
- [#1655](https://github.com/vanilla-extract-css/vanilla-extract/pull/1655) [`11a7c66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/11a7c668683d0c3e324d4337676e807680a895bd) Thanks [@askoufis](https://github.com/askoufis)! - Update `csstype` dependency to `^3.2.3`
## 1.17.4
### Patch Changes
- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert "Improve ESM package entrypoints (#1597)" to fix `Named export not found` error when importing ESM entrypoints
- Updated dependencies [[`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd)]:
- @vanilla-extract/private@1.0.9
## 1.17.3
### Patch Changes
- [#1596](https://github.com/vanilla-extract-css/vanilla-extract/pull/1596) [`f0533be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f0533be939e6835ae961e3dd10b764c0c052ee75) Thanks [@cqh963852](https://github.com/cqh963852)! - `addFunctionSerializer`: Fix `args` type to support arrays of primitive values
- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path
- Updated dependencies [[`9d16de8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9d16de85b149b531f2e049e8d93bdb862667ff1f), [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e)]:
- @vanilla-extract/private@1.0.8
## 1.17.2
### Patch Changes
- [#1557](https://github.com/vanilla-extract-css/vanilla-extract/pull/1557) [`134117d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/134117d32e25d92edc24c8c863d757294d7b5df8) Thanks [@askoufis](https://github.com/askoufis)! - `css`: Improve type-checking performance of string literal types that include CSS variables
- [#1560](https://github.com/vanilla-extract-css/vanilla-extract/pull/1560) [`c66be53`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c66be53d600802b2922da1d6034e2a5ff3fbbcae) Thanks [@andjsrk](https://github.com/andjsrk)! - Remove unnecessary intersections in a few types
- Updated dependencies [[`134117d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/134117d32e25d92edc24c8c863d757294d7b5df8)]:
- @vanilla-extract/private@1.0.7
## 1.17.1
### Patch Changes
- [#1533](https://github.com/vanilla-extract-css/vanilla-extract/pull/1533) [`c432ff3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c432ff33a8aead2c94fa6a4fcc9fcb1d7990427d) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug where `@container` queries inside `selectors` were not being generated
## 1.17.0
### Minor Changes
- [#1092](https://github.com/vanilla-extract-css/vanilla-extract/pull/1092) [`fd673f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd673f658da3b0019d19a0c7d6d9208d1685ff5b) Thanks [@z4o4z](https://github.com/z4o4z)! - `keyframes`: Add support for a `vars` property to steps within `keyframes` declarations
Example usage:
```ts
import {
createVar,
keyframes
} from '@vanilla-extract/css';
const angle = createVar({
syntax: '',
inherits: false,
initialValue: '0deg'
});
export const angleKeyframes = keyframes({
'0%': {
vars: {
[angle]: '0deg'
}
},
'100%': {
vars: {
[angle]: '360deg'
}
}
});
```
- [#1512](https://github.com/vanilla-extract-css/vanilla-extract/pull/1512) [`4abfc0b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4abfc0b47c675f9a7bfdb4c3316b1c62d2b8e558) Thanks [@askoufis](https://github.com/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**:
```ts
// 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:
```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](https://github.com/vanilla-extract-css/vanilla-extract/pull/1092) [`fd673f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd673f658da3b0019d19a0c7d6d9208d1685ff5b) Thanks [@z4o4z](https://github.com/z4o4z)! - `createVar`: Add support for defining [`@property`] rules
Example usage:
```ts
import { createVar } from '@vanilla-extract/css';
export const myVar = createVar({
syntax: '',
inherits: false,
initialValue: '0.5'
});
```
This will generate the following CSS:
```css
@property --myVar__jteyb14 {
syntax: '';
inherits: false;
initial-value: 0.5;
}
```
[`@property`]: https://developer.mozilla.org/en-US/docs/Web/CSS/@property
## 1.16.1
### Patch Changes
- [#1505](https://github.com/vanilla-extract-css/vanilla-extract/pull/1505) [`103ce57`](https://github.com/vanilla-extract-css/vanilla-extract/commit/103ce57c98bf632a56fab1d71ae44039a77f5291) Thanks [@askoufis](https://github.com/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](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
- [#1466](https://github.com/vanilla-extract-css/vanilla-extract/pull/1466) [`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c) Thanks [@askoufis](https://github.com/askoufis)! - Speed up dev prefix generation for long file paths
## 1.15.4
### Patch Changes
- [#1463](https://github.com/vanilla-extract-css/vanilla-extract/pull/1463) [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a) Thanks [@askoufis](https://github.com/askoufis)! - Export types with `export { type T }` syntax
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/private@1.0.6
## 1.15.3
### Patch Changes
- [#1425](https://github.com/vanilla-extract-css/vanilla-extract/pull/1425) [`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug where declarations with identical selectors would not be merged correctly inside conditional rules
- [#1410](https://github.com/vanilla-extract-css/vanilla-extract/pull/1410) [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813) Thanks [@pengooseDev](https://github.com/pengooseDev)! - Fixes a bug causing incorrect type inference when calling `createTheme` with a theme contract
## 1.15.2
### Patch Changes
- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/private@1.0.5
## 1.15.1
### Patch Changes
- [#1386](https://github.com/vanilla-extract-css/vanilla-extract/pull/1386) [`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb) Thanks [@askoufis](https://github.com/askoufis)! - Replace `outdent` dependency with `dedent`
- [#1385](https://github.com/vanilla-extract-css/vanilla-extract/pull/1385) [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a) Thanks [@askoufis](https://github.com/askoufis)! - Replace `chalk` dependency with `picocolors`
## 1.15.0
### Minor Changes
- [#1379](https://github.com/vanilla-extract-css/vanilla-extract/pull/1379) [`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214) Thanks [@ronci](https://github.com/ronci)! - Add support for passing multiple font face rules to `globalFontFace`
**EXAMPLE USAGE:**
```ts
const gentium = 'GlobalGentium';
globalFontFace(gentium, [
{
src: 'local("Gentium")',
fontWeight: 'normal'
},
{
src: 'local("Gentium Bold")',
fontWeight: 'bold'
}
]);
```
## 1.14.2
### Patch Changes
- [#1368](https://github.com/vanilla-extract-css/vanilla-extract/pull/1368) [`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed) Thanks [@askoufis](https://github.com/askoufis)! - Update `@vanilla-extract/private` dependency
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/private@1.0.4
## 1.14.1
### Patch Changes
- [#1254](https://github.com/vanilla-extract-css/vanilla-extract/pull/1254) [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0) Thanks [@EvgenNoskov](https://github.com/EvgenNoskov)! - Allow hyphens in class names when using a custom identifier
## 1.14.0
### Minor Changes
- [#1207](https://github.com/vanilla-extract-css/vanilla-extract/pull/1207) [`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4) Thanks [@CroModder](https://github.com/CroModder)! - Add some missing [simple pseudo selectors]
[simple pseudo selectors]: https://vanilla-extract.style/documentation/styling/#simple-pseudo-selectors
### Patch Changes
- [#1215](https://github.com/vanilla-extract-css/vanilla-extract/pull/1215) [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99) Thanks [@mrm007](https://github.com/mrm007)! - Replace dependency `ahocorasick` with `modern-ahocorasick`
## 1.13.0
### Minor Changes
- [#1160](https://github.com/vanilla-extract-css/vanilla-extract/pull/1160) [`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180) Thanks [@SombreroElGringo](https://github.com/SombreroElGringo)! - Users can now provide a custom identifier hashing function
## 1.12.0
### Minor Changes
- [#1114](https://github.com/vanilla-extract-css/vanilla-extract/pull/1114) [`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3) Thanks [@taylorfsteele](https://github.com/taylorfsteele)! - Supports passing multiple font face rules to `fontFace`
**Example usage**
```ts
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
- [#1106](https://github.com/vanilla-extract-css/vanilla-extract/pull/1106) [`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix "Invalid selector" errors on pseudo-elements with params
## 1.11.0
### Minor Changes
- [#955](https://github.com/vanilla-extract-css/vanilla-extract/pull/955) [`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01) Thanks [@mrm007](https://github.com/mrm007)! - Add support for [cascade layers, i.e. `@layer`][cascade layers].
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.
```tsx
// 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'
}
}
});
```
[cascade layers]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
[layer]: https://vanilla-extract.style/documentation/api/layer
[globallayer]: https://vanilla-extract.style/documentation/global-api/global-layer
## 1.10.0
### Minor Changes
- [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/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
- [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Throw when `setAdapter` is called with a falsy value
## 1.9.5
### Patch Changes
- [#990](https://github.com/vanilla-extract-css/vanilla-extract/pull/990) [`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da) Thanks [@askoufis](https://github.com/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
- [#938](https://github.com/vanilla-extract-css/vanilla-extract/pull/938) [`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9) Thanks [@adrianaferrugento](https://github.com/adrianaferrugento)! - Bump `deep-object-diff` to v1.1.9 in order to fix security vulnerability
## 1.9.3
### Patch Changes
- [#943](https://github.com/vanilla-extract-css/vanilla-extract/pull/943) [`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b) Thanks [@AndrewLeedham](https://github.com/AndrewLeedham)! - Fix a `tsc` error caused by a dependency's type declarations being unnecessarily bundled
## 1.9.2
### Patch Changes
- [#900](https://github.com/vanilla-extract-css/vanilla-extract/pull/900) [`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb) Thanks [@wobsoriano](https://github.com/wobsoriano)! - Bump `@emotion/hash` to 0.9.0
* [#854](https://github.com/vanilla-extract-css/vanilla-extract/pull/854) [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e) Thanks [@mrm007](https://github.com/mrm007)! - Bundle TypeScript declaration files (`.d.ts`) when building packages
- [#893](https://github.com/vanilla-extract-css/vanilla-extract/pull/893) [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix issue where conditional styles (e.g. `@media`, `@supports`, etc) could be ordered incorrectly
## 1.9.1
### Patch Changes
- [#837](https://github.com/vanilla-extract-css/vanilla-extract/pull/837) [`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve performance of selector transforms
This issue occured on M1 Macs due to performance issues with large regex patterns.
* [#833](https://github.com/vanilla-extract-css/vanilla-extract/pull/833) [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix entrypoint resolving in Vitest
## 1.9.0
### Minor Changes
- [#810](https://github.com/vanilla-extract-css/vanilla-extract/pull/810) [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Support excluding file names from `generateIdentifier` output. This is available by passing a newly-added options object rather than a string.
**Example usage**
```ts
import { generateIdentifier } from '@vanilla-extract/css';
const identifier = generateIdentifier({
debugId,
debugFileName: false
});
```
### Patch Changes
- [#810](https://github.com/vanilla-extract-css/vanilla-extract/pull/810) [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix spaces in debug IDs for variable names.
* [#810](https://github.com/vanilla-extract-css/vanilla-extract/pull/810) [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix file name prefix in debug names when file extension is `.cjs` or `.mjs`.
## 1.8.0
### Minor Changes
- [#807](https://github.com/vanilla-extract-css/vanilla-extract/pull/807) [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba) Thanks [@mattcompiles](https://github.com/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.
```ts
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](https://github.com/vanilla-extract-css/vanilla-extract/pull/807) [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add support for container queries via the new `@container` key.
```ts
import { style } from '@vanilla-extract/css';
export const myStyle = style({
'@container': {
'(min-width: 400px)': {
display: 'flex'
}
}
});
```
## 1.7.4
### Patch Changes
- [#804](https://github.com/vanilla-extract-css/vanilla-extract/pull/804) [`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b) Thanks [@m7yue](https://github.com/m7yue)! - Fix `styleVariants` type when using the map data function
## 1.7.3
### Patch Changes
- [#788](https://github.com/vanilla-extract-css/vanilla-extract/pull/788) [`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47) Thanks [@Dremora](https://github.com/Dremora)! - Add `scale` to the list of unitless properties.
## 1.7.2
### Patch Changes
- [#723](https://github.com/vanilla-extract-css/vanilla-extract/pull/723) [`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Validate duplicate '@media' in media queries
## 1.7.1
### Patch Changes
- [#684](https://github.com/vanilla-extract-css/vanilla-extract/pull/684) [`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve media query validation messaging
## 1.7.0
### Minor Changes
- [#651](https://github.com/vanilla-extract-css/vanilla-extract/pull/651) [`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c) Thanks [@amorriscode](https://github.com/amorriscode)! - Add CSS media query validation
## 1.6.8
### Patch Changes
- [#520](https://github.com/vanilla-extract-css/vanilla-extract/pull/520) [`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Transpile code to meet [esmodules target](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)
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`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/private@1.0.3
## 1.6.7
### Patch Changes
- [#514](https://github.com/vanilla-extract-css/vanilla-extract/pull/514) [`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40) Thanks [@benjervis](https://github.com/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](https://github.com/vanilla-extract-css/vanilla-extract/pull/508) [`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1) Thanks [@markdalgleish](https://github.com/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
- [#504](https://github.com/vanilla-extract-css/vanilla-extract/pull/504) [`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure identifiers are escaped properly
## 1.6.4
### Patch Changes
- [#489](https://github.com/vanilla-extract-css/vanilla-extract/pull/489) [`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix theme contract types in TypeScript 4.5
- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:
- @vanilla-extract/private@1.0.2
## 1.6.3
### Patch Changes
- [#428](https://github.com/vanilla-extract-css/vanilla-extract/pull/428) [`e915f7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e915f7f0c1176f8403118d867216cc19490ad13f) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure whitespace is stripped from debug Ids
## 1.6.2
### Patch Changes
- [#409](https://github.com/vanilla-extract-css/vanilla-extract/pull/409) [`a9c5cb7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0) Thanks [@benjervis](https://github.com/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
- [#381](https://github.com/vanilla-extract-css/vanilla-extract/pull/381) [`b1e5936`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b1e5936db253d81cca60c31adeabd2dd0a240389) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix identfiers not respecting `NODE_ENV` for SSR builds
## 1.6.0
### Minor Changes
- [#361](https://github.com/vanilla-extract-css/vanilla-extract/pull/361) [`531044b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/531044b8c5c2d13c465ed77641d3cc6a11903ced) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Automatically add quotes to `content` values when necessary
For example `{ content: '' }` will now return CSS of `{ content: "" }`
## 1.5.1
### Patch Changes
- [#354](https://github.com/vanilla-extract-css/vanilla-extract/pull/354) [`cdad52d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cdad52d6e95422f4ce53b74456fd510880a4a32a) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix function serialization with older versions of the `@vanilla-extract/integration` package
## 1.5.0
### Minor Changes
- [#348](https://github.com/vanilla-extract-css/vanilla-extract/pull/348) [`c6cd1f2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c6cd1f2eee982474c213f43fc23ee38b7a8c5e42) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `addFunctionSerializer` function
This also marks `addRecipe` as deprecated.
## 1.4.1
### Patch Changes
- [#343](https://github.com/vanilla-extract-css/vanilla-extract/pull/343) [`50bae14`](https://github.com/vanilla-extract-css/vanilla-extract/commit/50bae14bf38c8a971ad1727cb8e827c86da06772) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Cleanup adapter after processing styles
## 1.4.0
### Minor Changes
- [#326](https://github.com/vanilla-extract-css/vanilla-extract/pull/326) [`2d9b4c3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2d9b4c3e711310e55dbefe4b3430a771d95d62fd) Thanks [@mattcompiles](https://github.com/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.
```ts
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.
```ts
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.
```diff
-export const container = composeStyles(background, padding);
+export const container = style([background, padding]);
```
## 1.3.0
### Minor Changes
- [#319](https://github.com/vanilla-extract-css/vanilla-extract/pull/319) [`26832f1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/26832f162e75b72f83dba0c230295a5dfed683aa) Thanks [@nicksrandall](https://github.com/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.
```ts
// 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.
```ts
// 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.
```ts
// themes.css.ts
import { createGlobalThemeContract } from '@vanilla-extract/css';
export const vars = createGlobalThemeContract(
{
color: {
brand: null
},
font: {
body: null
}
},
(_value, path) => `prefix-${path.join('-')}`
);
```
* [#323](https://github.com/vanilla-extract-css/vanilla-extract/pull/323) [`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Support configurable identifier types
## 1.2.3
### Patch Changes
- [#284](https://github.com/vanilla-extract-css/vanilla-extract/pull/284) [`e65c029`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e65c0297a557f141cf84ca0836ee8ab4060c9d78) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix multiple top-level conditional styles in runtime version
## 1.2.2
### Patch Changes
- [#274](https://github.com/vanilla-extract-css/vanilla-extract/pull/274) [`21e2197`](https://github.com/vanilla-extract-css/vanilla-extract/commit/21e2197363fdfbf4ba2cec54ab630cd343281816) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix type errors with nested null values in theme contracts
## 1.2.1
### Patch Changes
- [#265](https://github.com/vanilla-extract-css/vanilla-extract/pull/265) [`385155f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/385155faff4eeab0bba5137383fe948999c04b2c) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix fileScope error if `composeStyles` is called at runtime
## 1.2.0
### Minor Changes
- [#259](https://github.com/vanilla-extract-css/vanilla-extract/pull/259) [`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a) Thanks [@markdalgleish](https://github.com/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.
```ts
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
- [#238](https://github.com/vanilla-extract-css/vanilla-extract/pull/238) [`1ee9ba2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1ee9ba2c5e6598450b8bac10d244b7e375e71617) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Allow passing of null contract tokens in `createThemeContract`
## 1.1.1
### Patch Changes
- [#235](https://github.com/vanilla-extract-css/vanilla-extract/pull/235) [`1e49dfc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e49dfc4fc21ccb53870e297e5e4664b098cc22e) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix `createGlobalTheme` types when accepting an existing contract
- Updated dependencies [[`1e49dfc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e49dfc4fc21ccb53870e297e5e4664b098cc22e)]:
- @vanilla-extract/private@1.0.1
## 1.1.0
### Minor Changes
- [#206](https://github.com/vanilla-extract-css/vanilla-extract/pull/206) [`64c18f9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64c18f976bdada1f99022e88065a8277d56b5592) Thanks [@mattcompiles](https://github.com/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.
```ts
// setupTests.ts
import '@vanilla-extract/css/disableRuntimeStyles';
```
## 1.0.1
### Patch Changes
- [#204](https://github.com/vanilla-extract-css/vanilla-extract/pull/204) [`16f77ef`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16f77efba69a11fb37a43c83af8e39c1534dffea) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Ensure `:where`/`:is` selectors are supported when validating scoped selectors
## 1.0.0
### Major Changes
- [#171](https://github.com/vanilla-extract-css/vanilla-extract/pull/171) [`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1
### Patch Changes
- Updated dependencies [[`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869)]:
- @vanilla-extract/private@1.0.0
## 0.5.3
### Patch Changes
- [#166](https://github.com/vanilla-extract-css/vanilla-extract/pull/166) [`156e585`](https://github.com/vanilla-extract-css/vanilla-extract/commit/156e585cb6e3fdaed9e02d6b443a3b67c2210c37) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve missing filescope error
* [#168](https://github.com/vanilla-extract-css/vanilla-extract/pull/168) [`962d64f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/962d64f82cb5afe154eeaef51689bb03baa0a7e3) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Allow camel-case CSS var names instead of converting to snake-case
## 0.5.2
### Patch Changes
- [#154](https://github.com/vanilla-extract-css/vanilla-extract/pull/154) [`f5ab957`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f5ab957b34586886ef428b58de1f2b55b4ab65e0) Thanks [@mattcompiles](https://github.com/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](https://github.com/vanilla-extract-css/vanilla-extract/pull/152) [`ae532f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ae532f5a112c0e89a510fea224b43c6706ce6ac2) Thanks [@Saartje87](https://github.com/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
- [#146](https://github.com/vanilla-extract-css/vanilla-extract/pull/146) [`bf51ab5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bf51ab56f5b10474476ef61a00edaaf297a10218) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix escaped characters in selectors
## 0.5.0
### Minor Changes
- [#132](https://github.com/vanilla-extract-css/vanilla-extract/pull/132) [`4f92126`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4f92126c92d853f02e73ffadfed424b594e41166) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Introduce `addRecipe` function, exposed via `@vanilla-extract/css/recipe` entrypoint
### Patch Changes
- [#128](https://github.com/vanilla-extract-css/vanilla-extract/pull/128) [`ed76e45`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ed76e450038cb7cbaf12a511fda9e2a3a6d21b96) Thanks [@ntkoopman](https://github.com/ntkoopman)! - Fix --webkit-line-clamp unit
## 0.4.4
### Patch Changes
- [#121](https://github.com/vanilla-extract-css/vanilla-extract/pull/121) [`823478b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/823478b942e91a7b371743651cf1dc35823be98a) Thanks [@Brendan-csel](https://github.com/Brendan-csel)! - Fix development identifiers for Windows paths
## 0.4.3
### Patch Changes
- [#95](https://github.com/vanilla-extract-css/vanilla-extract/pull/95) [`f9ca82b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f9ca82b908b720785df271ed18d7abe048191759) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix fallbackVar type defintion
## 0.4.2
### Patch Changes
- [#84](https://github.com/vanilla-extract-css/vanilla-extract/pull/84) [`0bc4e0a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0bc4e0a164e9167e0356557f8feee42d7889d4b1) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Validate tokens match corresponding theme contracts
- Updated dependencies [[`0bc4e0a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0bc4e0a164e9167e0356557f8feee42d7889d4b1)]:
- @vanilla-extract/private@0.1.2
## 0.4.1
### Patch Changes
- [#63](https://github.com/vanilla-extract-css/vanilla-extract/pull/63) [`2cecc8a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2cecc8af8634b71f217d713c5a9faf989b46e353) Thanks [@fnky](https://github.com/fnky)! - Export CSSProperties type
## 0.4.0
### Minor Changes
- [#52](https://github.com/vanilla-extract-css/vanilla-extract/pull/52) [`2d98bcc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2d98bccb40603585cf9eab70ff0afc52c33f803d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Rename `createThemeVars` to `createThemeContract`
**BREAKING CHANGE**
```diff
import {
- createThemeVars,
+ createThemeContract,
createTheme
} from '@vanilla-extract/css';
-export const vars = createThemeVars({
+export const vars = createThemeContract({
color: {
brand: null
},
font: {
body: null
}
});
```
### Patch Changes
- [#50](https://github.com/vanilla-extract-css/vanilla-extract/pull/50) [`48c4a78`](https://github.com/vanilla-extract-css/vanilla-extract/commit/48c4a7866a8361de712b89b06abb380bf4709656) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Allow vars to be passed as values to all style properties
## 0.3.2
### Patch Changes
- [#47](https://github.com/vanilla-extract-css/vanilla-extract/pull/47) [`a18bc03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a18bc034885a8b1cc1396b3890111067d4858626) Thanks [@mattcompiles](https://github.com/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
* [#49](https://github.com/vanilla-extract-css/vanilla-extract/pull/49) [`2ae4db3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2ae4db3cd442fc493ccc00fd519841b72f1381bf) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Update the unit-less property map
The original list was borrowed from the [postcss-js parser](https://github.com/postcss/postcss-js/blob/d5127d4278c133f333f1c66f990f3552a907128e/parser.js#L5), but decided to reverse engineer an updated list from [csstype](https://github.com/frenic/csstype) for more thorough coverage.
## 0.3.1
### Patch Changes
- [#45](https://github.com/vanilla-extract-css/vanilla-extract/pull/45) [`e154028`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1540281d327fc0883f47255f710de3f9b342c64) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix `createThemeVars` when using null values
- Updated dependencies [[`e154028`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1540281d327fc0883f47255f710de3f9b342c64)]:
- @vanilla-extract/private@0.1.1
## 0.3.0
### Minor Changes
- [#38](https://github.com/vanilla-extract-css/vanilla-extract/pull/38) [`156b491`](https://github.com/vanilla-extract-css/vanilla-extract/commit/156b49182367bf233564eae7fd3ea9d3f50fd68a) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `composeStyles` function
* [#37](https://github.com/vanilla-extract-css/vanilla-extract/pull/37) [`ae9864c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ae9864c727c2edd0d415b77f738a3c959c98fca6) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Rename `mapToStyles` to `styleVariants`
**BREAKING CHANGE**
```diff
-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
- [#34](https://github.com/vanilla-extract-css/vanilla-extract/pull/34) [`756d9b0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/756d9b0d0305e8b8a63f0ca1ebe635ab320a5f5b) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Reduce CSS var and identifier lengths
## 0.2.0
### Minor Changes
- [#20](https://github.com/vanilla-extract-css/vanilla-extract/pull/20) [`3311914`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3311914d92406cda5d5bb71ee72075501f868bd5) Thanks [@mattcompiles](https://github.com/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](https://github.com/vanilla-extract-css/vanilla-extract/pull/25) [`c4bedd5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c4bedd571f0c21291b58e050589b4db9465c0460) Thanks [@markdalgleish](https://github.com/markdalgleish)! - The `createInlineTheme` function has now moved to the `@vanilla-extract/dynamic` package.
```diff
-import { createInlineTheme } from '@vanilla-extract/css/createInlineTheme';
+import { createInlineTheme } from '@vanilla-extract/dynamic';
```
## 0.1.0
### Minor Changes
- e83ad50: Initial release
================================================
FILE: packages/css/adapter/package.json
================================================
{
"main": "dist/vanilla-extract-css-adapter.cjs.js",
"module": "dist/vanilla-extract-css-adapter.esm.js",
"browser": {
"./dist/vanilla-extract-css-adapter.cjs.js": "./dist/vanilla-extract-css-adapter.browser.cjs.js",
"./dist/vanilla-extract-css-adapter.esm.js": "./dist/vanilla-extract-css-adapter.browser.esm.js"
},
"sideEffects": false,
"exports": {
"./package.json": "./package.json",
".": {
"browser": {
"module": "./dist/vanilla-extract-css-adapter.browser.esm.js",
"default": "./dist/vanilla-extract-css-adapter.browser.cjs.js"
},
"module": "./dist/vanilla-extract-css-adapter.esm.js",
"default": "./dist/vanilla-extract-css-adapter.cjs.js"
}
}
}
================================================
FILE: packages/css/disableRuntimeStyles/package.json
================================================
{
"main": "dist/vanilla-extract-css-disableRuntimeStyles.cjs.js",
"module": "dist/vanilla-extract-css-disableRuntimeStyles.esm.js",
"browser": {
"./dist/vanilla-extract-css-disableRuntimeStyles.cjs.js": "./dist/vanilla-extract-css-disableRuntimeStyles.browser.cjs.js",
"./dist/vanilla-extract-css-disableRuntimeStyles.esm.js": "./dist/vanilla-extract-css-disableRuntimeStyles.browser.esm.js"
},
"exports": {
"./package.json": "./package.json",
".": {
"browser": {
"module": "./dist/vanilla-extract-css-disableRuntimeStyles.browser.esm.js",
"default": "./dist/vanilla-extract-css-disableRuntimeStyles.browser.cjs.js"
},
"module": "./dist/vanilla-extract-css-disableRuntimeStyles.esm.js",
"default": "./dist/vanilla-extract-css-disableRuntimeStyles.cjs.js"
}
}
}
================================================
FILE: packages/css/fileScope/package.json
================================================
{
"main": "dist/vanilla-extract-css-fileScope.cjs.js",
"module": "dist/vanilla-extract-css-fileScope.esm.js",
"browser": {
"./dist/vanilla-extract-css-fileScope.cjs.js": "./dist/vanilla-extract-css-fileScope.browser.cjs.js",
"./dist/vanilla-extract-css-fileScope.esm.js": "./dist/vanilla-extract-css-fileScope.browser.esm.js"
},
"sideEffects": false,
"exports": {
"./package.json": "./package.json",
".": {
"browser": {
"module": "./dist/vanilla-extract-css-fileScope.browser.esm.js",
"default": "./dist/vanilla-extract-css-fileScope.browser.cjs.js"
},
"module": "./dist/vanilla-extract-css-fileScope.esm.js",
"default": "./dist/vanilla-extract-css-fileScope.cjs.js"
}
}
}
================================================
FILE: packages/css/functionSerializer/package.json
================================================
{
"main": "dist/vanilla-extract-css-functionSerializer.cjs.js",
"module": "dist/vanilla-extract-css-functionSerializer.esm.js",
"browser": {
"./dist/vanilla-extract-css-functionSerializer.cjs.js": "./dist/vanilla-extract-css-functionSerializer.browser.cjs.js",
"./dist/vanilla-extract-css-functionSerializer.esm.js": "./dist/vanilla-extract-css-functionSerializer.browser.esm.js"
},
"exports": {
"./package.json": "./package.json",
".": {
"browser": {
"module": "./dist/vanilla-extract-css-functionSerializer.browser.esm.js",
"default": "./dist/vanilla-extract-css-functionSerializer.browser.cjs.js"
},
"module": "./dist/vanilla-extract-css-functionSerializer.esm.js",
"default": "./dist/vanilla-extract-css-functionSerializer.cjs.js"
}
}
}
================================================
FILE: packages/css/injectStyles/package.json
================================================
{
"main": "dist/vanilla-extract-css-injectStyles.cjs.js",
"module": "dist/vanilla-extract-css-injectStyles.esm.js",
"browser": {
"./dist/vanilla-extract-css-injectStyles.cjs.js": "./dist/vanilla-extract-css-injectStyles.browser.cjs.js",
"./dist/vanilla-extract-css-injectStyles.esm.js": "./dist/vanilla-extract-css-injectStyles.browser.esm.js"
},
"exports": {
"./package.json": "./package.json",
".": {
"browser": {
"module": "./dist/vanilla-extract-css-injectStyles.browser.esm.js",
"default": "./dist/vanilla-extract-css-injectStyles.browser.cjs.js"
},
"module": "./dist/vanilla-extract-css-injectStyles.esm.js",
"default": "./dist/vanilla-extract-css-injectStyles.cjs.js"
}
}
}
================================================
FILE: packages/css/package.json
================================================
{
"name": "@vanilla-extract/css",
"version": "1.20.0",
"description": "Zero-runtime Stylesheets-in-TypeScript",
"sideEffects": true,
"main": "dist/vanilla-extract-css.cjs.js",
"module": "dist/vanilla-extract-css.esm.js",
"types": "dist/vanilla-extract-css.cjs.d.ts",
"browser": {
"./dist/vanilla-extract-css.cjs.js": "./dist/vanilla-extract-css.browser.cjs.js",
"./dist/vanilla-extract-css.esm.js": "./dist/vanilla-extract-css.browser.esm.js"
},
"exports": {
"./package.json": "./package.json",
"./vanilla.virtual.css?*": "./vanilla.virtual.css?*",
".": {
"types": "./dist/vanilla-extract-css.cjs.d.ts",
"browser": {
"module": "./dist/vanilla-extract-css.browser.esm.js",
"default": "./dist/vanilla-extract-css.browser.cjs.js"
},
"module": "./dist/vanilla-extract-css.esm.js",
"default": "./dist/vanilla-extract-css.cjs.js"
},
"./recipe": {
"types": "./recipe/dist/vanilla-extract-css-recipe.cjs.d.ts",
"browser": {
"module": "./recipe/dist/vanilla-extract-css-recipe.browser.esm.js",
"default": "./recipe/dist/vanilla-extract-css-recipe.browser.cjs.js"
},
"module": "./recipe/dist/vanilla-extract-css-recipe.esm.js",
"default": "./recipe/dist/vanilla-extract-css-recipe.cjs.js"
},
"./functionSerializer": {
"types": "./functionSerializer/dist/vanilla-extract-css-functionSerializer.cjs.d.ts",
"browser": {
"module": "./functionSerializer/dist/vanilla-extract-css-functionSerializer.browser.esm.js",
"default": "./functionSerializer/dist/vanilla-extract-css-functionSerializer.browser.cjs.js"
},
"module": "./functionSerializer/dist/vanilla-extract-css-functionSerializer.esm.js",
"default": "./functionSerializer/dist/vanilla-extract-css-functionSerializer.cjs.js"
},
"./adapter": {
"types": "./adapter/dist/vanilla-extract-css-adapter.cjs.d.ts",
"browser": {
"module": "./adapter/dist/vanilla-extract-css-adapter.browser.esm.js",
"default": "./adapter/dist/vanilla-extract-css-adapter.browser.cjs.js"
},
"module": "./adapter/dist/vanilla-extract-css-adapter.esm.js",
"default": "./adapter/dist/vanilla-extract-css-adapter.cjs.js"
},
"./transformCss": {
"types": "./transformCss/dist/vanilla-extract-css-transformCss.cjs.d.ts",
"browser": {
"module": "./transformCss/dist/vanilla-extract-css-transformCss.browser.esm.js",
"default": "./transformCss/dist/vanilla-extract-css-transformCss.browser.cjs.js"
},
"module": "./transformCss/dist/vanilla-extract-css-transformCss.esm.js",
"default": "./transformCss/dist/vanilla-extract-css-transformCss.cjs.js"
},
"./fileScope": {
"types": "./fileScope/dist/vanilla-extract-css-fileScope.cjs.d.ts",
"browser": {
"module": "./fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js",
"default": "./fileScope/dist/vanilla-extract-css-fileScope.browser.cjs.js"
},
"module": "./fileScope/dist/vanilla-extract-css-fileScope.esm.js",
"default": "./fileScope/dist/vanilla-extract-css-fileScope.cjs.js"
},
"./fileScope/package.json": "./fileScope/package.json",
"./injectStyles": {
"types": "./injectStyles/dist/vanilla-extract-css-injectStyles.cjs.d.ts",
"browser": {
"module": "./injectStyles/dist/vanilla-extract-css-injectStyles.browser.esm.js",
"default": "./injectStyles/dist/vanilla-extract-css-injectStyles.browser.cjs.js"
},
"module": "./injectStyles/dist/vanilla-extract-css-injectStyles.esm.js",
"default": "./injectStyles/dist/vanilla-extract-css-injectStyles.cjs.js"
},
"./disableRuntimeStyles": {
"types": "./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.cjs.d.ts",
"browser": {
"module": "./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.browser.esm.js",
"default": "./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.browser.cjs.js"
},
"module": "./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.esm.js",
"default": "./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.cjs.js"
}
},
"preconstruct": {
"entrypoints": [
"index.ts",
"recipe.ts",
"functionSerializer.ts",
"adapter.ts",
"transformCss.ts",
"fileScope.ts",
"injectStyles.ts",
"disableRuntimeStyles.ts"
]
},
"files": [
"/dist",
"/recipe",
"/functionSerializer",
"/adapter",
"/transformCss",
"/fileScope",
"/injectStyles",
"/disableRuntimeStyles",
"vanilla.virtual.css"
],
"repository": {
"type": "git",
"url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
"directory": "packages/css"
},
"author": "SEEK",
"license": "MIT",
"dependencies": {
"@emotion/hash": "^0.9.0",
"@vanilla-extract/private": "workspace:^",
"css-what": "^6.1.0",
"cssesc": "^3.0.0",
"csstype": "^3.2.3",
"dedent": "^1.5.3",
"deep-object-diff": "^1.1.9",
"deepmerge": "^4.2.2",
"lru-cache": "^10.4.3",
"media-query-parser": "^2.0.2",
"modern-ahocorasick": "^1.0.0",
"picocolors": "^1.0.0"
},
"devDependencies": {
"@types/cssesc": "^3.0.0"
}
}
================================================
FILE: packages/css/recipe/package.json
================================================
{
"main": "dist/vanilla-extract-css-recipe.cjs.js",
"module": "dist/vanilla-extract-css-recipe.esm.js",
"browser": {
"./dist/vanilla-extract-css-recipe.cjs.js": "./dist/vanilla-extract-css-recipe.browser.cjs.js",
"./dist/vanilla-extract-css-recipe.esm.js": "./dist/vanilla-extract-css-recipe.browser.esm.js"
},
"exports": {
"./package.json": "./package.json",
".": {
"browser": {
"module": "./dist/vanilla-extract-css-recipe.browser.esm.js",
"default": "./dist/vanilla-extract-css-recipe.browser.cjs.js"
},
"module": "./dist/vanilla-extract-css-recipe.esm.js",
"default": "./dist/vanilla-extract-css-recipe.cjs.js"
}
}
}
================================================
FILE: packages/css/src/adapter.ts
================================================
import type { Adapter } from './types';
export const mockAdapter: Adapter = {
appendCss: () => {},
registerClassName: () => {},
onEndFileScope: () => {},
registerComposition: () => {},
markCompositionUsed: () => {},
getIdentOption: () =>
process.env.NODE_ENV === 'production' ? 'short' : 'debug',
};
const adapterStack: Array = [mockAdapter];
const currentAdapter = () => {
if (adapterStack.length < 1) {
throw new Error('No adapter configured');
}
return adapterStack[adapterStack.length - 1];
};
let hasConfiguredAdapter = false;
export const setAdapterIfNotSet = (newAdapter: Adapter): void => {
if (!hasConfiguredAdapter) {
setAdapter(newAdapter);
}
};
export const setAdapter = (newAdapter: Adapter): void => {
if (!newAdapter) {
throw new Error('No adapter provided when calling "setAdapter"');
}
hasConfiguredAdapter = true;
adapterStack.push(newAdapter);
};
export const removeAdapter = (): void => {
adapterStack.pop();
};
export const appendCss: Adapter['appendCss'] = (...props) => {
return currentAdapter().appendCss(...props);
};
export const registerClassName: Adapter['registerClassName'] = (...props) => {
return currentAdapter().registerClassName(...props);
};
export const registerComposition: Adapter['registerComposition'] = (
...props
) => {
return currentAdapter().registerComposition(...props);
};
export const markCompositionUsed: Adapter['markCompositionUsed'] = (
...props
) => {
return currentAdapter().markCompositionUsed(...props);
};
export const onBeginFileScope: NonNullable = (
...props
) => {
return currentAdapter().onBeginFileScope?.(...props);
};
export const onEndFileScope: Adapter['onEndFileScope'] = (...props) => {
return currentAdapter().onEndFileScope(...props);
};
export const getIdentOption: Adapter['getIdentOption'] = (...props) => {
const adapter = currentAdapter();
// Backwards compatibility with old versions of the integration package
if (!('getIdentOption' in adapter)) {
return process.env.NODE_ENV === 'production' ? 'short' : 'debug';
}
return adapter.getIdentOption(...props);
};
================================================
FILE: packages/css/src/conditionalRulesets.ts
================================================
/** e.g. @media screen and (min-width: 500px) */
type Query = string;
interface Rule {
selector: string;
rule: any;
}
type Condition = {
query: Query;
rules: Array;
children: ConditionalRuleset;
};
type RenderedConditionalRule = Record>;
export class ConditionalRuleset {
ruleset: Map;
/**
* Stores information about where conditions must be in relation to other conditions
*
* e.g. mobile -> tablet, desktop
*/
precedenceLookup: Map>;
constructor() {
this.ruleset = new Map();
this.precedenceLookup = new Map();
}
findOrCreateCondition(conditionQuery: Query): Condition {
let targetCondition = this.ruleset.get(conditionQuery);
if (!targetCondition) {
// No target condition so create one
targetCondition = {
query: conditionQuery,
rules: [],
children: new ConditionalRuleset(),
};
this.ruleset.set(conditionQuery, targetCondition);
}
return targetCondition;
}
getConditionalRulesetByPath(conditionPath: Array): ConditionalRuleset {
// Couldn't fine a way around this
// oxlint-disable-next-line typescript/no-this-alias
let currRuleset: ConditionalRuleset = this;
for (const query of conditionPath) {
const condition = currRuleset.findOrCreateCondition(query);
currRuleset = condition.children;
}
return currRuleset;
}
addRule(
rule: Rule,
conditionQuery: Query,
conditionPath: Array,
): void {
const ruleset = this.getConditionalRulesetByPath(conditionPath);
const targetCondition = ruleset.findOrCreateCondition(conditionQuery);
if (!targetCondition) {
throw new Error('Failed to add conditional rule');
}
targetCondition.rules.push(rule);
}
addConditionPrecedence(
conditionPath: Array,
conditionOrder: Array,
): void {
const ruleset = this.getConditionalRulesetByPath(conditionPath);
for (let i = 0; i < conditionOrder.length; i++) {
const query = conditionOrder[i];
const conditionPrecedence =
ruleset.precedenceLookup.get(query) ?? new Set();
for (const lowerPrecedenceCondition of conditionOrder.slice(i + 1)) {
conditionPrecedence.add(lowerPrecedenceCondition);
}
ruleset.precedenceLookup.set(query, conditionPrecedence);
}
}
isCompatible(incomingRuleset: ConditionalRuleset): boolean {
for (const [
condition,
orderPrecedence,
] of this.precedenceLookup.entries()) {
for (const lowerPrecedenceCondition of orderPrecedence) {
if (
incomingRuleset.precedenceLookup
.get(lowerPrecedenceCondition as string)
?.has(condition)
) {
return false;
}
}
}
// Check that children are compatible
for (const { query, children } of incomingRuleset.ruleset.values()) {
const matchingCondition = this.ruleset.get(query);
if (
matchingCondition &&
!matchingCondition.children.isCompatible(children)
) {
return false;
}
}
return true;
}
merge(incomingRuleset: ConditionalRuleset): void {
// Merge rulesets into one array
for (const { query, rules, children } of incomingRuleset.ruleset.values()) {
const matchingCondition = this.ruleset.get(query);
if (matchingCondition) {
matchingCondition.rules.push(...rules);
matchingCondition.children.merge(children);
} else {
this.ruleset.set(query, { query, rules, children });
}
}
// Merge order precedences
for (const [
condition,
incomingOrderPrecedence,
] of incomingRuleset.precedenceLookup.entries()) {
const orderPrecedence = this.precedenceLookup.get(condition) ?? new Set();
this.precedenceLookup.set(
condition,
new Set([...orderPrecedence, ...incomingOrderPrecedence]),
);
}
}
/**
* Merge another ConditionalRuleset into this one if they are compatible
*
* @returns true if successful, false if the ruleset is incompatible
*/
mergeIfCompatible(incomingRuleset: ConditionalRuleset): boolean {
if (!this.isCompatible(incomingRuleset)) {
return false;
}
this.merge(incomingRuleset);
return true;
}
getSortedRuleset(): Condition[] {
const sortedRuleset: Array = [];
// Loop through all queries and add them to the sorted ruleset
for (const [query, dependents] of this.precedenceLookup.entries()) {
const conditionForQuery = this.ruleset.get(query);
if (!conditionForQuery) {
throw new Error(`Can't find condition for ${query}`);
}
// Find the location of the first dependent condition in the sortedRuleset
// A dependent condition is a condition that must be placed *after* the current one
const firstMatchingDependent = sortedRuleset.findIndex((condition) =>
dependents.has(condition.query),
);
if (firstMatchingDependent > -1) {
// Insert the condition before the dependent one
sortedRuleset.splice(firstMatchingDependent, 0, conditionForQuery);
} else {
// No match, just insert at the end
sortedRuleset.push(conditionForQuery);
}
}
return sortedRuleset;
}
renderToArray(): RenderedConditionalRule[] {
const arr: RenderedConditionalRule[] = [];
for (const { query, rules, children } of this.getSortedRuleset()) {
const selectors: Record = {};
for (const rule of rules) {
selectors[rule.selector] = {
// Preserve existing declarations if a rule with the same selector has already been added
...selectors[rule.selector],
...rule.rule,
};
}
Object.assign(selectors, ...children.renderToArray());
arr.push({ [query]: selectors });
}
return arr;
}
}
================================================
FILE: packages/css/src/container.ts
================================================
import { generateIdentifier } from './identifier';
// createContainer is used for local scoping of CSS containers
// For now it is mostly just an alias of generateIdentifier
export const createContainer = (debugId?: string): string =>
generateIdentifier(debugId);
================================================
FILE: packages/css/src/disableRuntimeStyles.ts
================================================
import { setAdapter, mockAdapter } from './adapter';
setAdapter(mockAdapter);
================================================
FILE: packages/css/src/fileScope.ts
================================================
import dedent from 'dedent';
import { onBeginFileScope, onEndFileScope } from './adapter';
import type { FileScope } from './types';
let refCounter = 0;
const fileScopes: Array = [];
export function setFileScope(filePath: string, packageName?: string): void {
refCounter = 0;
const fileScope = {
filePath,
packageName,
};
fileScopes.unshift(fileScope);
onBeginFileScope(fileScope);
}
export function endFileScope(): void {
onEndFileScope(getFileScope());
refCounter = 0;
fileScopes.splice(0, 1);
}
export function hasFileScope(): boolean {
return fileScopes.length > 0;
}
export function getFileScope(): FileScope {
if (fileScopes.length === 0) {
throw new Error(
dedent`
Styles were unable to be assigned to a file. This is generally caused by one of the following:
- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
`,
);
}
return fileScopes[0];
}
export function getAndIncrementRefCounter(): number {
return refCounter++;
}
================================================
FILE: packages/css/src/functionSerializer.ts
================================================
type Primitive = string | number | boolean | null | undefined;
type Serializable =
| Primitive
| {
[Key in string | number]: Primitive | Serializable;
}
| ReadonlyArray;
interface SerializerConfig {
importPath: string;
importName: string;
args: ReadonlyArray;
}
export function addFunctionSerializer(
target: Target,
recipe: SerializerConfig,
): Target {
// TODO: Update to "__function_serializer__" in future.
// __recipe__ is the backwards compatible name
Object.defineProperty(target, '__recipe__', {
value: recipe,
writable: false,
});
return target;
}
================================================
FILE: packages/css/src/getDebugFileName.test.ts
================================================
import { describe, expect, it } from 'vitest';
import { getDebugFileName } from './getDebugFileName';
const testCases = [
{
name: 'longPath',
input:
'node_modules/.pnpm/braid-design-system@32.23.0_@types+react@18.3.3_babel-plugin-macros@3.1.0_react-dom@18.3.1_re_ctndskkf4y74v2qksfjwfz6ezy/node_modules/braid-design-system/dist/lib/components/ButtonDir/Button.css.mjs',
expected: 'Button',
},
{
name: 'emojiPath',
input: 'node_modules/my_package/dist/👨👩👦Test🎉Dir👨🚀/Test🎉File👨🚀.css.ts',
expected: 'Test🎉File👨🚀',
},
{
name: 'loneSurrogates',
input: 'node_modules/my_package/dist/Test\uD801Dir/Test\uDC01File.css.ts',
expected: 'Test\uDC01File',
},
{
name: 'noExtension',
input: 'node_modules/my_package/dist/TestDir/TestFile',
expected: '',
},
{
name: 'singleFileSparator',
input: 'src/Button.css.ts',
expected: 'Button',
},
{
name: 'noDir',
input: 'myFile.css.ts',
expected: 'myFile',
},
];
describe('getDebugFileName', () => {
testCases.forEach(({ name, input, expected }) => {
it(name, () => {
const result = getDebugFileName(input);
expect(result).toStrictEqual(expected);
});
});
});
================================================
FILE: packages/css/src/getDebugFileName.ts
================================================
import { LRUCache } from 'lru-cache';
const getLastSlashBeforeIndex = (path: string, index: number) => {
let pathIndex = index - 1;
while (pathIndex >= 0) {
if (path[pathIndex] === '/') {
return pathIndex;
}
pathIndex--;
}
return -1;
};
/**
* Assumptions:
* - The path is always normalized to use posix file separators (/) (see `addFileScope`)
* - The path is always relative to the project root, i.e. there will never be a leading slash (see `addFileScope`)
* - As long as `.css` is there, we have a valid `.css.*` file path, because otherwise there wouldn't
* be a file scope to begin with
*
* The LRU cache we use can't cache undefined/null values, so we opt to return an empty string,
* rather than using a custom Symbol or something similar.
*/
const _getDebugFileName = (path: string): string => {
let file: string;
const lastIndexOfDotCss = path.lastIndexOf('.css');
if (lastIndexOfDotCss === -1) {
return '';
}
const lastSlashIndex = getLastSlashBeforeIndex(path, lastIndexOfDotCss);
file = path.slice(lastSlashIndex + 1, lastIndexOfDotCss);
// There are no slashes, therefore theres no directory to extract
if (lastSlashIndex === -1) {
return file;
}
let secondLastSlashIndex = getLastSlashBeforeIndex(path, lastSlashIndex - 1);
// If secondLastSlashIndex is -1, it means that the path looks like `directory/file.css.ts`,
// in which case dir will still be sliced starting at 0, which is what we want
const dir = path.slice(secondLastSlashIndex + 1, lastSlashIndex);
const debugFileName = file !== 'index' ? file : dir;
return debugFileName;
};
const memoizedGetDebugFileName = () => {
const cache = new LRUCache({
max: 500,
});
return (path: string): string => {
const cachedResult = cache.get(path);
if (cachedResult) {
return cachedResult;
}
const result = _getDebugFileName(path);
cache.set(path, result);
return result;
};
};
export const getDebugFileName: (path: string) => string =
memoizedGetDebugFileName();
================================================
FILE: packages/css/src/identifier.test.ts
================================================
import { afterAll, beforeAll, describe, expect, it } from 'vitest';
import { removeAdapter, setAdapter } from './adapter';
import { endFileScope, setFileScope } from './fileScope';
import { generateIdentifier } from './identifier';
describe('identifier', () => {
beforeAll(() => {
setFileScope('path/to/file.css.ts');
});
afterAll(() => {
endFileScope();
});
it(`should ignore file scopes without a file extension when creating a path prefix`, () => {
setFileScope('test');
expect(generateIdentifier(undefined)).toMatchInlineSnapshot(`"skkcyc0"`);
endFileScope();
});
it(`should create a valid identifier`, () => {
expect(generateIdentifier(undefined)).toMatchInlineSnapshot(
`"file__18bazsm0"`,
);
});
it('should create a valid identifier with a debug id', () => {
expect(generateIdentifier('debug')).toMatchInlineSnapshot(
`"file_debug__18bazsm1"`,
);
});
it('should create a valid identifier with a debug id with whitespace', () => {
expect(generateIdentifier('debug and more')).toMatchInlineSnapshot(
`"file_debug_and_more__18bazsm2"`,
);
});
describe('options object', () => {
it(`should create a valid identifier`, () => {
expect(generateIdentifier({})).toMatchInlineSnapshot(`"file__18bazsm3"`);
});
it('should create a valid identifier with a debug id and with file name debugging explicitly enabled', () => {
expect(
generateIdentifier({ debugId: 'debug', debugFileName: true }),
).toMatchInlineSnapshot(`"file_debug__18bazsm4"`);
});
it('should create a valid identifier with a debug id and without file name debugging', () => {
expect(
generateIdentifier({ debugId: 'debug', debugFileName: false }),
).toMatchInlineSnapshot(`"debug__18bazsm5"`);
});
it('should create a valid identifier without a debug ID or file name', () => {
expect(
generateIdentifier({ debugFileName: false }),
).toMatchInlineSnapshot(`"_18bazsm6"`);
});
});
describe('with custom callback', () => {
beforeAll(() => {
setFileScope('path/to/file.css.ts', 'packagetest');
setAdapter({
appendCss: () => {},
registerClassName: () => {},
onEndFileScope: () => {},
registerComposition: () => {},
markCompositionUsed: () => {},
getIdentOption:
() =>
({ hash, debugId, filePath, packageName }) => {
const filenameWithExtension = filePath?.split('/').pop();
const filenameWithoutExtension =
filenameWithExtension?.split('.')?.[0];
return `abc_${debugId}_${hash}_${packageName}_${filenameWithoutExtension}`;
},
});
});
afterAll(() => {
removeAdapter();
endFileScope();
});
it('defers to a custom callback', () => {
expect(generateIdentifier(`a`)).toMatchInlineSnapshot(
`"abc_a_s0xkdr0_packagetest_file"`,
);
});
it('should allow hyphens in a class name', () => {
expect(generateIdentifier('a-b')).toMatchInlineSnapshot(
`"abc_a-b_s0xkdr1_packagetest_file"`,
);
expect(generateIdentifier('a-b-c')).toMatchInlineSnapshot(
`"abc_a-b-c_s0xkdr2_packagetest_file"`,
);
});
it('rejects invalid identifiers', () => {
// getIdentOption() does not remove spaces from the debug info so the
// resulting identifier should be invalid here.
expect(() => generateIdentifier(`a b`)).toThrow();
});
});
});
================================================
FILE: packages/css/src/identifier.ts
================================================
import hash from '@emotion/hash';
import { getIdentOption } from './adapter';
import { getAndIncrementRefCounter, getFileScope } from './fileScope';
import { getDebugFileName } from './getDebugFileName';
function getDevPrefix({
debugId,
debugFileName,
}: {
debugId?: string;
debugFileName: boolean;
}) {
const parts = debugId ? [debugId.replace(/\s/g, '_')] : [];
if (debugFileName) {
const { filePath } = getFileScope();
const debugFileName = getDebugFileName(filePath);
// debugFileName could be an empty string
if (debugFileName) {
parts.unshift(debugFileName);
}
}
return parts.join('_');
}
function normalizeIdentifier(identifier: string) {
return identifier.match(/^[0-9]/) ? `_${identifier}` : identifier;
}
interface GenerateIdentifierOptions {
debugId?: string;
debugFileName?: boolean;
}
export function generateIdentifier(debugId?: string): string;
export function generateIdentifier(options?: GenerateIdentifierOptions): string;
export function generateIdentifier(
arg?: string | GenerateIdentifierOptions,
): string {
const identOption = getIdentOption();
const { debugId, debugFileName = true } = {
...(typeof arg === 'string' ? { debugId: arg } : null),
...(typeof arg === 'object' ? arg : null),
};
// Convert ref count to base 36 for optimal hash lengths
const refCount = getAndIncrementRefCounter().toString(36);
const { filePath, packageName } = getFileScope();
const fileScopeHash = hash(
packageName ? `${packageName}${filePath}` : filePath,
);
let identifier = `${fileScopeHash}${refCount}`;
if (identOption === 'debug') {
const devPrefix = getDevPrefix({ debugId, debugFileName });
if (devPrefix) {
identifier = `${devPrefix}__${identifier}`;
}
return normalizeIdentifier(identifier);
}
if (typeof identOption === 'function') {
identifier = identOption({
hash: identifier,
debugId,
filePath,
packageName,
});
if (!identifier.match(/^[A-Z_][0-9A-Z_-]+$/i)) {
throw new Error(
`Identifier function returned invalid indentifier: "${identifier}"`,
);
}
return identifier;
}
return normalizeIdentifier(identifier);
}
================================================
FILE: packages/css/src/index.ts
================================================
import './runtimeAdapter';
export type {
StyleRule,
ComplexStyleRule,
GlobalStyleRule,
Adapter,
FileScope,
CSSProperties,
} from './types';
export * from './identifier';
export * from './theme';
export * from './style';
export * from './vars';
export { createContainer } from './container';
export { createViewTransition } from './viewTransition';
export * from './layer';
================================================
FILE: packages/css/src/injectStyles.ts
================================================
import type { FileScope } from './types';
const stylesheets: Record = {};
interface InjectStylesOptions {
fileScope: FileScope;
css: string;
}
export const injectStyles = ({ fileScope, css }: InjectStylesOptions): void => {
const fileScopeId = fileScope.packageName
? [fileScope.packageName, fileScope.filePath].join('/')
: fileScope.filePath;
let stylesheet = stylesheets[fileScopeId];
if (!stylesheet) {
const styleEl = document.createElement('style');
if (fileScope.packageName) {
styleEl.setAttribute('data-package', fileScope.packageName);
}
styleEl.setAttribute('data-file', fileScope.filePath);
styleEl.setAttribute('type', 'text/css');
stylesheet = stylesheets[fileScopeId] = styleEl;
document.head.appendChild(styleEl);
}
stylesheet.innerHTML = css;
};
================================================
FILE: packages/css/src/layer.test.ts
================================================
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import * as adapter from './adapter';
import { endFileScope, setFileScope } from './fileScope';
import { globalLayer, layer } from './layer';
vi.mock('./adapter', async () => ({
...(await vi.importActual('./adapter')),
appendCss: vi.fn().mockName('appendCss'),
}));
const appendCss = vi.mocked(adapter.appendCss);
beforeEach(() => {
setFileScope('path/to/file.css.ts', 'foo-package');
});
afterEach(() => {
endFileScope();
appendCss.mockClear();
});
describe('layer', () => {
it('creates a hashed layer name', () => {
expect(layer()).toMatchInlineSnapshot(`"file__7a74oh0"`);
expect(layer('foo')).toMatchInlineSnapshot(`"file_foo__7a74oh1"`);
});
it('creates a hashed layer name with a parent', () => {
expect(layer({ parent: 'papa' })).toMatchInlineSnapshot(
`"papa.file__7a74oh0"`,
);
expect(layer({ parent: 'papa' }, 'foo')).toMatchInlineSnapshot(
`"papa.file_foo__7a74oh1"`,
);
});
it('commits layers by default', () => {
const one = layer('one');
layer({ parent: one }, 'two');
expect(appendCss.mock.calls).toMatchInlineSnapshot(`
[
[
{
"name": "file_one__7a74oh0",
"type": "layer",
},
{
"filePath": "path/to/file.css.ts",
"packageName": "foo-package",
},
],
[
{
"name": "file_one__7a74oh0.file_two__7a74oh1",
"type": "layer",
},
{
"filePath": "path/to/file.css.ts",
"packageName": "foo-package",
},
],
]
`);
});
});
describe('globalLayer', () => {
it('commits layers by default', () => {
globalLayer('one');
globalLayer('two');
expect(appendCss.mock.calls).toMatchInlineSnapshot(`
[
[
{
"name": "one",
"type": "layer",
},
{
"filePath": "path/to/file.css.ts",
"packageName": "foo-package",
},
],
[
{
"name": "two",
"type": "layer",
},
{
"filePath": "path/to/file.css.ts",
"packageName": "foo-package",
},
],
]
`);
});
it('supports specifying a parent', () => {
expect(globalLayer({ parent: 'parent' }, 'myLayer')).toMatchInlineSnapshot(
`"parent.myLayer"`,
);
});
});
================================================
FILE: packages/css/src/layer.ts
================================================
import { appendCss } from './adapter';
import { getFileScope } from './fileScope';
import { generateIdentifier } from './identifier';
type LayerOptions = {
parent?: string;
};
const defaultLayerOptions: LayerOptions = {};
const merge = (obj1: Partial, obj2: Partial) => ({ ...obj1, ...obj2 });
const getLayerArgs = (
...args: any[]
): [Options, string] => {
let options = defaultLayerOptions;
let debugId: string = args[0];
if (typeof args[0] === 'object') {
options = merge(defaultLayerOptions, args[0]);
debugId = args[1];
}
return [options as Options, debugId];
};
export function layer(options: LayerOptions, debugId?: string): string;
export function layer(debugId?: string): string;
export function layer(...args: any[]): string {
const [options, debugId] = getLayerArgs(...args);
let name = generateIdentifier(debugId);
if (options.parent) {
name = `${options.parent}.${name}`;
}
appendCss({ type: 'layer', name }, getFileScope());
return name;
}
export function globalLayer(options: LayerOptions, name: string): string;
export function globalLayer(name: string): string;
export function globalLayer(...args: any[]): string {
let [options, name] = getLayerArgs(...args);
if (options.parent) {
name = `${options.parent}.${name}`;
}
appendCss({ type: 'layer', name }, getFileScope());
return name;
}
================================================
FILE: packages/css/src/recipe.ts
================================================
import { addFunctionSerializer } from './functionSerializer';
export {
/**
* @deprecated Use 'addFunctionSerializer' from '@vanilla-extract/css/functionSerializer'
*/
addFunctionSerializer as addRecipe,
};
================================================
FILE: packages/css/src/runtimeAdapter.ts
================================================
import type { Adapter, Composition, CSS } from './types';
import { injectStyles } from './injectStyles';
import { transformCss } from './transformCss';
import { setAdapterIfNotSet } from './adapter';
const localClassNames = new Set();
const composedClassLists: Array = [];
let bufferedCSSObjs: Array = [];
const browserRuntimeAdapter: Adapter = {
appendCss: (cssObj: CSS) => {
bufferedCSSObjs.push(cssObj);
},
registerClassName: (className) => {
localClassNames.add(className);
},
registerComposition: (composition) => {
composedClassLists.push(composition);
},
markCompositionUsed: () => {},
onEndFileScope: (fileScope) => {
const css = transformCss({
localClassNames: Array.from(localClassNames),
composedClassLists,
cssObjs: bufferedCSSObjs,
}).join('\n');
injectStyles({ fileScope, css });
bufferedCSSObjs = [];
},
getIdentOption: () =>
process.env.NODE_ENV === 'production' ? 'short' : 'debug',
};
if (typeof window !== 'undefined') {
setAdapterIfNotSet(browserRuntimeAdapter);
}
================================================
FILE: packages/css/src/simplePseudos.ts
================================================
const simplePseudoMap = {
':-moz-any-link': true,
':-moz-full-screen': true,
':-moz-placeholder': true,
':-moz-read-only': true,
':-moz-read-write': true,
':-ms-fullscreen': true,
':-ms-input-placeholder': true,
':-webkit-any-link': true,
':-webkit-full-screen': true,
'::-moz-color-swatch': true,
'::-moz-list-bullet': true,
'::-moz-list-number': true,
'::-moz-page-sequence': true,
'::-moz-page': true,
'::-moz-placeholder': true,
'::-moz-progress-bar': true,
'::-moz-range-progress': true,
'::-moz-range-thumb': true,
'::-moz-range-track': true,
'::-moz-scrolled-page-sequence': true,
'::-moz-selection': true,
'::-ms-backdrop': true,
'::-ms-browse': true,
'::-ms-check': true,
'::-ms-clear': true,
'::-ms-fill-lower': true,
'::-ms-fill-upper': true,
'::-ms-fill': true,
'::-ms-reveal': true,
'::-ms-thumb': true,
'::-ms-ticks-after': true,
'::-ms-ticks-before': true,
'::-ms-tooltip': true,
'::-ms-track': true,
'::-ms-value': true,
'::-webkit-backdrop': true,
'::-webkit-calendar-picker-indicator': true,
'::-webkit-inner-spin-button': true,
'::-webkit-input-placeholder': true,
'::-webkit-meter-bar': true,
'::-webkit-meter-even-less-good-value': true,
'::-webkit-meter-inner-element': true,
'::-webkit-meter-optimum-value': true,
'::-webkit-meter-suboptimum-value': true,
'::-webkit-outer-spin-button': true,
'::-webkit-progress-bar': true,
'::-webkit-progress-inner-element': true,
'::-webkit-progress-inner-value': true,
'::-webkit-progress-value': true,
'::-webkit-resizer': true,
'::-webkit-scrollbar-button': true,
'::-webkit-scrollbar-corner': true,
'::-webkit-scrollbar-thumb': true,
'::-webkit-scrollbar-track-piece': true,
'::-webkit-scrollbar-track': true,
'::-webkit-scrollbar': true,
'::-webkit-search-cancel-button': true,
'::-webkit-search-results-button': true,
'::-webkit-slider-runnable-track': true,
'::-webkit-slider-thumb': true,
'::after': true,
'::backdrop': true,
'::before': true,
'::cue': true,
'::file-selector-button': true,
'::first-letter': true,
'::first-line': true,
'::grammar-error': true,
'::marker': true,
'::placeholder': true,
'::selection': true,
'::spelling-error': true,
'::target-text': true,
'::view-transition-group': true,
'::view-transition-image-pair': true,
'::view-transition-new': true,
'::view-transition-old': true,
'::view-transition': true,
':active': true,
':after': true,
':any-link': true,
':before': true,
':blank': true,
':checked': true,
':default': true,
':defined': true,
':disabled': true,
':empty': true,
':enabled': true,
':first-child': true,
':first-letter': true,
':first-line': true,
':first-of-type': true,
':first': true,
':focus-visible': true,
':focus-within': true,
':focus': true,
':fullscreen': true,
':hover': true,
':in-range': true,
':indeterminate': true,
':invalid': true,
':last-child': true,
':last-of-type': true,
':left': true,
':link': true,
':only-child': true,
':only-of-type': true,
':optional': true,
':out-of-range': true,
':placeholder-shown': true,
':read-only': true,
':read-write': true,
':required': true,
':right': true,
':root': true,
':scope': true,
':target': true,
':valid': true,
':visited': true,
} as const;
export type SimplePseudos = keyof typeof simplePseudoMap;
export const simplePseudos = Object.keys(
simplePseudoMap,
) as Array;
export const simplePseudoLookup = simplePseudoMap as Record;
================================================
FILE: packages/css/src/style.ts
================================================
import cssesc from 'cssesc';
import dedent from 'dedent';
import deepmerge from 'deepmerge';
import type {
FontFaceRule,
CSSKeyframes,
StyleRule,
GlobalStyleRule,
ClassNames,
ComplexStyleRule,
} from './types';
import {
registerClassName,
appendCss,
registerComposition,
markCompositionUsed,
} from './adapter';
import { getFileScope, hasFileScope } from './fileScope';
import { generateIdentifier } from './identifier';
import { dedupeAndJoinClassList } from './utils';
function composedStyle(rules: Array, debugId?: string) {
const className = generateIdentifier(debugId);
registerClassName(className, getFileScope());
const classList = [];
const styleRules = [];
for (const rule of rules) {
if (typeof rule === 'string' || Array.isArray(rule)) {
classList.push(rule);
} else {
styleRules.push(rule);
}
}
let result = className;
if (classList.length > 0) {
result = `${className} ${dedupeAndJoinClassList(classList)}`;
registerComposition(
{
identifier: className,
classList: result,
},
getFileScope(),
);
if (styleRules.length > 0) {
// If there are styles attached to this composition then it is
// always used and should never be removed
markCompositionUsed(className);
}
}
if (styleRules.length > 0) {
const rule = deepmerge.all(styleRules, {
// Replace arrays rather than merging
arrayMerge: (_, sourceArray) => sourceArray,
});
appendCss({ type: 'local', selector: className, rule }, getFileScope());
}
return result;
}
export function style(rule: ComplexStyleRule, debugId?: string): string {
if (Array.isArray(rule)) {
return composedStyle(rule, debugId);
}
const className = generateIdentifier(debugId);
registerClassName(className, getFileScope());
appendCss({ type: 'local', selector: className, rule }, getFileScope());
return className;
}
/**
* @deprecated The same functionality is now provided by the 'style' function when you pass it an array
*/
export function composeStyles(...classNames: Array): string {
const compose = hasFileScope() ? composedStyle : dedupeAndJoinClassList;
return compose(classNames);
}
export function globalStyle(selector: string, rule: GlobalStyleRule): void {
appendCss({ type: 'global', selector, rule }, getFileScope());
}
export function fontFace(
rule: FontFaceRule | FontFaceRule[],
debugId?: string,
): string {
const fontFamily = `"${cssesc(generateIdentifier(debugId), {
quotes: 'double',
})}"`;
const rules = Array.isArray(rule) ? rule : [rule];
for (const singleRule of rules) {
if ('fontFamily' in singleRule) {
throw new Error(dedent`
This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
`);
}
appendCss(
{ type: 'fontFace', rule: { ...singleRule, fontFamily } },
getFileScope(),
);
}
return fontFamily;
}
export function globalFontFace(
fontFamily: string,
rule: FontFaceRule | FontFaceRule[],
): void {
const rules = Array.isArray(rule) ? rule : [rule];
for (const singleRule of rules) {
appendCss(
{ type: 'fontFace', rule: { ...singleRule, fontFamily } },
getFileScope(),
);
}
}
export function keyframes(rule: CSSKeyframes, debugId?: string): string {
const name = cssesc(generateIdentifier(debugId), {
isIdentifier: true,
});
appendCss({ type: 'keyframes', name, rule }, getFileScope());
return name;
}
export function globalKeyframes(name: string, rule: CSSKeyframes): void {
appendCss({ type: 'keyframes', name, rule }, getFileScope());
}
export function styleVariants<
StyleMap extends Record,
>(styleMap: StyleMap, debugId?: string): Record;
export function styleVariants<
Data extends Record,
Key extends keyof Data,
>(
data: Data,
mapData: (value: Data[Key], key: Key) => ComplexStyleRule,
debugId?: string,
): Record;
export function styleVariants(...args: any[]) {
if (typeof args[1] === 'function') {
const data = args[0];
const mapData = args[1];
const debugId = args[2];
const classMap: Record = {};
for (const key in data) {
classMap[key] = style(
mapData(data[key], key),
debugId ? `${debugId}_${key}` : key,
);
}
return classMap;
}
const styleMap = args[0];
const debugId = args[1];
const classMap: Record = {};
for (const key in styleMap) {
classMap[key] = style(styleMap[key], debugId ? `${debugId}_${key}` : key);
}
return classMap;
}
================================================
FILE: packages/css/src/theme.ts
================================================
import type { Contract, MapLeafNodes } from '@vanilla-extract/private';
import type { GlobalStyleRule, Resolve, ThemeVars, Tokens } from './types';
import { appendCss, registerClassName } from './adapter';
import { getFileScope } from './fileScope';
import { generateIdentifier } from './identifier';
import { createThemeContract, assignVars } from './vars';
type WithOptionalLayer = T & {
'@layer'?: string;
};
type WithoutLayer = Omit;
export function createGlobalTheme(
selector: string,
tokens: WithOptionalLayer,
): Resolve>>;
export function createGlobalTheme(
selector: string,
themeContract: ThemeContract,
tokens: WithOptionalLayer>,
): void;
export function createGlobalTheme(
selector: string,
arg2: any,
arg3?: any,
): any {
const themeContractProvided = Boolean(arg3);
const tokenArg = (
themeContractProvided ? arg3 : arg2
) as WithOptionalLayer;
const { layerName, tokens } = extractLayerFromTokens(tokenArg);
const themeContract = themeContractProvided
? (arg2 as ThemeVars)
: createThemeContract(tokens);
let rule: GlobalStyleRule = {
vars: assignVars(themeContract, tokens),
};
if (layerName) {
rule = {
'@layer': {
[layerName]: rule,
},
};
}
appendCss(
{
type: 'global',
selector: selector,
rule,
},
getFileScope(),
);
if (!themeContractProvided) {
return themeContract;
}
}
export function createTheme(
themeContract: ThemeContract,
tokens: WithOptionalLayer>,
debugId?: string,
): string;
export function createTheme(
tokens: WithOptionalLayer,
debugId?: string,
): [className: string, vars: Resolve>>];
export function createTheme(arg1: any, arg2?: any, arg3?: string): any {
const themeClassName = generateIdentifier(
typeof arg2 === 'object' ? arg3 : arg2,
);
registerClassName(themeClassName, getFileScope());
const vars =
typeof arg2 === 'object'
? createGlobalTheme(themeClassName, arg1, arg2)
: createGlobalTheme(themeClassName, arg1);
return vars ? [themeClassName, vars] : themeClassName;
}
function extractLayerFromTokens(
tokens: WithOptionalLayer>,
): {
layerName?: string;
tokens: MapLeafNodes;
} {
if ('@layer' in tokens) {
const { '@layer': layerName, ...rest } = tokens;
return { layerName, tokens: rest };
}
return { tokens };
}
================================================
FILE: packages/css/src/transformCss.test.ts
================================================
import { describe, expect, it } from 'vitest';
import { setFileScope, endFileScope } from './fileScope';
import { createVar } from './vars';
import { transformCss } from './transformCss';
import { style } from './style';
setFileScope('test');
const testVar = createVar();
const testPropertyVar = createVar(
{
syntax: '',
inherits: false,
initialValue: '0deg',
},
'test-property',
);
const style1 = style({});
const style2 = style({});
// remove quotes around the snapshot
expect.addSnapshotSerializer({
test: (val) => typeof val === 'string',
print: (val) => (val as string).trim(),
});
describe('transformCss', () => {
it('should escape class names', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['test_1/2_className', '[test_with_brackets]'],
cssObjs: [
{
type: 'local',
selector: 'test_1/2_className',
rule: {
color: 'red',
'@media': {
'screen and (min-width: 700px)': {
color: 'green',
},
'screen and (min-width: 1000px)': {
color: 'purple',
},
},
},
},
{
type: 'local',
selector: '[test_with_brackets]',
rule: {
color: 'blue',
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.test_1\\/2_className {
color: red;
}
.\\[test_with_brackets\\] {
color: blue;
}
@media screen and (min-width: 700px) {
.test_1\\/2_className {
color: green;
}
}
@media screen and (min-width: 1000px) {
.test_1\\/2_className {
color: purple;
}
}
`);
});
it('should handle media queries', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
color: 'red',
'@media': {
'screen and (min-width: 700px)': {
color: 'green',
},
'screen and (min-width: 1000px)': {
color: 'purple',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
color: red;
}
@media screen and (min-width: 700px) {
.testClass {
color: green;
}
}
@media screen and (min-width: 1000px) {
.testClass {
color: purple;
}
}
`);
});
it('should handle media queries inside selectors', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
color: 'red',
'@media': {
'screen and (min-width: 700px)': {
color: 'yellow',
},
'screen and (min-width: 1000px)': {
color: 'green',
},
},
selectors: {
'body &': {
'@media': {
'screen and (min-width: 700px)': {
color: 'green',
},
'screen and (min-width: 1000px)': {
color: 'purple',
},
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
color: red;
}
@media screen and (min-width: 700px) {
.testClass {
color: yellow;
}
body .testClass {
color: green;
}
}
@media screen and (min-width: 1000px) {
.testClass {
color: green;
}
body .testClass {
color: purple;
}
}
`);
});
it('should merge media queries', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
color: 'green',
'@media': {
'screen and (min-width: 1000px)': {
color: 'red',
},
},
},
},
{
type: 'local',
selector: '.otherClass',
rule: {
color: 'purple',
'@media': {
'screen and (min-width: 700px)': {
color: 'red',
},
},
},
},
{
type: 'local',
selector: '.otherOtherClass',
rule: {
color: 'purple',
'@media': {
'screen and (min-width: 700px)': {
color: 'green',
},
'screen and (min-width: 1000px)': {
color: 'yellow',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
color: green;
}
.otherClass {
color: purple;
}
.otherOtherClass {
color: purple;
}
@media screen and (min-width: 700px) {
.otherClass {
color: red;
}
.otherOtherClass {
color: green;
}
}
@media screen and (min-width: 1000px) {
.testClass {
color: red;
}
.otherOtherClass {
color: yellow;
}
}
`);
});
it('should not merge media queries if not safe to do so', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@media': {
'screen and (min-width: 1000px)': {
color: 'red',
},
},
},
},
{
type: 'local',
selector: '.otherClass',
rule: {
'@media': {
'screen and (min-width: 700px)': {
color: 'yellow',
},
'screen and (min-width: 1000px)': {
color: 'purple',
},
},
},
},
{
type: 'local',
selector: '.otherOtherClass',
rule: {
'@media': {
'screen and (min-width: 600px)': {
color: 'yellow',
},
'screen and (min-width: 1000px)': {
color: 'purple',
},
'screen and (min-width: 700px)': {
color: 'purple',
},
},
},
},
{
type: 'local',
selector: '.otherOtherOtherClass',
rule: {
'@media': {
'screen and (min-width: 600px)': {
color: 'yellow',
},
'screen and (min-width: 700px)': {
color: 'purple',
},
'screen and (min-width: 1700px)': {
color: 'purple',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@media screen and (min-width: 700px) {
.otherClass {
color: yellow;
}
}
@media screen and (min-width: 1000px) {
.testClass {
color: red;
}
.otherClass {
color: purple;
}
}
@media screen and (min-width: 600px) {
.otherOtherClass {
color: yellow;
}
.otherOtherOtherClass {
color: yellow;
}
}
@media screen and (min-width: 1000px) {
.otherOtherClass {
color: purple;
}
}
@media screen and (min-width: 700px) {
.otherOtherClass {
color: purple;
}
.otherOtherOtherClass {
color: purple;
}
}
@media screen and (min-width: 1700px) {
.otherOtherOtherClass {
color: purple;
}
}
`);
});
it('should not merge nested media queries if not safe to do so', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@supports': {
'(display: grid)': {
'@media': {
'screen and (min-width: 1000px)': {
color: 'red',
},
},
},
},
},
},
{
type: 'local',
selector: '.otherClass',
rule: {
'@supports': {
'(display: grid)': {
'@media': {
'screen and (min-width: 700px)': {
color: 'yellow',
},
'screen and (min-width: 1000px)': {
color: 'purple',
},
},
},
},
},
},
{
type: 'local',
selector: '.otherOtherClass',
rule: {
'@supports': {
'(display: grid)': {
'@media': {
'screen and (min-width: 600px)': {
color: 'yellow',
},
'screen and (min-width: 1000px)': {
color: 'purple',
},
'screen and (min-width: 700px)': {
color: 'purple',
},
},
},
},
},
},
{
type: 'local',
selector: '.otherOtherOtherClass',
rule: {
'@supports': {
'(display: grid)': {
'@media': {
'screen and (min-width: 600px)': {
color: 'yellow',
},
'screen and (min-width: 700px)': {
color: 'purple',
},
'screen and (min-width: 1700px)': {
color: 'purple',
},
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@supports (display: grid) {
@media screen and (min-width: 700px) {
.otherClass {
color: yellow;
}
}
@media screen and (min-width: 1000px) {
.testClass {
color: red;
}
.otherClass {
color: purple;
}
}
}
@supports (display: grid) {
@media screen and (min-width: 600px) {
.otherOtherClass {
color: yellow;
}
.otherOtherOtherClass {
color: yellow;
}
}
@media screen and (min-width: 1000px) {
.otherOtherClass {
color: purple;
}
}
@media screen and (min-width: 700px) {
.otherOtherClass {
color: purple;
}
.otherOtherOtherClass {
color: purple;
}
}
@media screen and (min-width: 1700px) {
.otherOtherOtherClass {
color: purple;
}
}
}
`);
});
it('should merge nested media queries if safe to do so', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@media': {
'screen and (min-width: 1024px)': {
padding: '50px',
},
},
},
},
{
type: 'local',
selector: '.otherClass',
rule: {
'@media': {
'screen and (min-width: 1200px)': {
color: 'red',
},
},
},
},
{
type: 'local',
selector: '.otherOtherClass',
rule: {
'@media': {
'screen and (min-width: 768px)': {
background: 'blue',
},
'screen and (min-width: 1024px)': {
background: 'green',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@media screen and (min-width: 768px) {
.otherOtherClass {
background: blue;
}
}
@media screen and (min-width: 1024px) {
.testClass {
padding: 50px;
}
.otherOtherClass {
background: green;
}
}
@media screen and (min-width: 1200px) {
.otherClass {
color: red;
}
}
`);
});
it('should merge declarations with the same selector when merging conditional rules', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: [],
cssObjs: [
{
type: 'local',
selector: '.testClass',
rule: {
'@layer': {
myLayer: {
color: 'red',
},
},
},
},
{
type: 'local',
selector: '.testClass',
rule: {
'@layer': {
myLayer: {
fontSize: '32px',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@layer myLayer;
@layer myLayer {
.testClass {
color: red;
font-size: 32px;
}
}
`);
});
it('should handle simple pseudos', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
color: 'red',
':hover': {
color: 'blue',
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
color: red;
}
.testClass:hover {
color: blue;
}
`);
});
it('should handle property fallbacks', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
color: ['red', 'blue'],
':hover': {
color: ['blue', 'red', 'yellow'],
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
color: red;
color: blue;
}
.testClass:hover {
color: blue;
color: red;
color: yellow;
}
`);
});
it('should dashify properties but leave custom properties', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
backgroundColor: 'green',
WebkitAlignContent: 'end',
vars: {
'--myCustomVar': '10px',
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
--myCustomVar: 10px;
background-color: green;
-webkit-align-content: end;
}
`);
});
it('should handle blank content', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
content: '',
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
content: "";
}
`);
});
it('should add quotes to custom content values', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
content: 'hello',
selectors: {
'&': { content: 'there' },
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
content: "hello";
}
.testClass {
content: "there";
}
`);
});
it('should handle content with fallbacks', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
content: ['hello', 'there'],
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
content: "hello";
content: "there";
}
`);
});
it('should not add quotes to content that already has quotes', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
content: "'hello there'",
selectors: {
'&': { content: '"hello there"' },
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
content: 'hello there';
}
.testClass {
content: "hello there";
}
`);
});
it('should not add quotes to meaningful content values (examples from mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/content)', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
content: 'normal',
selectors: {
'._01 &': { content: 'none' },
'._02 &': { content: 'url("http://www.example.com/test.png")' },
'._03 &': { content: 'linear-gradient(#e66465, #9198e5)' },
'._04 &': {
content: 'image-set("image1x.png" 1x, "image2x.png" 2x)',
},
'._05 &': {
content:
'url("http://www.example.com/test.png") / "This is the alt text"',
},
'._06 &': { content: '"prefix"' },
'._07 &': { content: 'counter(chapter_counter)' },
'._08 &': { content: 'counter(chapter_counter, upper-roman)' },
'._09 &': { content: 'counters(section_counter, ".")' },
'._10 &': {
content:
'counters(section_counter, ".", decimal-leading-zero)',
},
'._11 &': { content: 'attr(value string)' },
'._12 &': { content: 'open-quote' },
'._13 &': { content: 'close-quote' },
'._14 &': { content: 'no-open-quote' },
'._15 &': { content: 'no-close-quote' },
'._16 &': { content: 'open-quote counter(chapter_counter)' },
'._17 &': { content: 'inherit' },
'._18 &': { content: 'initial' },
'._19 &': { content: 'revert' },
'._20 &': { content: 'unset' },
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
content: normal;
}
._01 .testClass {
content: none;
}
._02 .testClass {
content: url("http://www.example.com/test.png");
}
._03 .testClass {
content: linear-gradient(#e66465, #9198e5);
}
._04 .testClass {
content: image-set("image1x.png" 1x, "image2x.png" 2x);
}
._05 .testClass {
content: url("http://www.example.com/test.png") / "This is the alt text";
}
._06 .testClass {
content: "prefix";
}
._07 .testClass {
content: counter(chapter_counter);
}
._08 .testClass {
content: counter(chapter_counter, upper-roman);
}
._09 .testClass {
content: counters(section_counter, ".");
}
._10 .testClass {
content: counters(section_counter, ".", decimal-leading-zero);
}
._11 .testClass {
content: attr(value string);
}
._12 .testClass {
content: open-quote;
}
._13 .testClass {
content: close-quote;
}
._14 .testClass {
content: no-open-quote;
}
._15 .testClass {
content: no-close-quote;
}
._16 .testClass {
content: open-quote counter(chapter_counter);
}
._17 .testClass {
content: inherit;
}
._18 .testClass {
content: initial;
}
._19 .testClass {
content: revert;
}
._20 .testClass {
content: unset;
}
`);
});
it('should handle simple pseudos within conditionals', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@media': {
'screen and (min-width: 500px)': {
color: 'red',
':hover': {
color: 'blue',
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@media screen and (min-width: 500px) {
.testClass {
color: red;
}
.testClass:hover {
color: blue;
}
}
`);
});
it('should honour input order for simple pseudos', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
color: 'red',
':link': {
color: 'orange',
},
':visited': {
color: 'yellow',
},
':hover': {
color: 'green',
},
':active': {
color: 'blue',
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
color: red;
}
.testClass:link {
color: orange;
}
.testClass:visited {
color: yellow;
}
.testClass:hover {
color: green;
}
.testClass:active {
color: blue;
}
`);
});
it('should handle complex selectors', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass', 'parentClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
color: 'red',
selectors: {
'&:nth-child(3)': {
color: 'blue',
},
'parentClass > div > span ~ &.someGlobalClass:hover': {
background: 'green',
},
'parentClass&': {
background: 'black',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
color: red;
}
.testClass:nth-child(3) {
color: blue;
}
.parentClass > div > span ~ .testClass.someGlobalClass:hover {
background: green;
}
.parentClass.testClass {
background: black;
}
`);
});
it('should handle getter selectors', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass', 'parentClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
color: 'red',
get selectors() {
return {
'&:nth-child(3)': {
color: 'blue',
},
'parentClass > div > span ~ &.someGlobalClass:hover': {
background: 'green',
},
'parentClass&': {
background: 'black',
},
};
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
color: red;
}
.testClass:nth-child(3) {
color: blue;
}
.parentClass > div > span ~ .testClass.someGlobalClass:hover {
background: green;
}
.parentClass.testClass {
background: black;
}
`);
});
it('should handle complex selectors within media queries', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
color: 'red',
'@media': {
'screen and (min-width: 700px)': {
selectors: {
'&:nth-child(3)': {
color: 'blue',
},
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
color: red;
}
@media screen and (min-width: 700px) {
.testClass:nth-child(3) {
color: blue;
}
}
`);
});
it('should handle @supports queries', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
display: 'flex',
'@supports': {
'(display: grid)': {
display: 'grid',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
display: flex;
}
@supports (display: grid) {
.testClass {
display: grid;
}
}
`);
});
it('should handle @container queries', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
display: 'flex',
containerName: 'sidebar',
'@container': {
'sidebar (min-width: 700px)': {
display: 'grid',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
display: flex;
container-name: sidebar;
}
@container sidebar (min-width: 700px) {
.testClass {
display: grid;
}
}
`);
});
it('should handle container queries inside selectors', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
containerName: 'myContainer',
'@container': {
'myContainer (min-width: 700px)': {
color: 'red',
},
},
selectors: {
['h1 &']: {
'@container': {
'myContainer (min-width: 700px)': {
color: 'blue',
},
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
container-name: myContainer;
}
@container myContainer (min-width: 700px) {
.testClass {
color: red;
}
h1 .testClass {
color: blue;
}
}
`);
});
it('should handle @layer declarations', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'layer',
name: 'reset',
},
{
type: 'layer',
name: 'foo.bar.baz',
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@layer reset;
@layer foo.bar.baz;
`);
});
it('should hoist @layer declarations', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
display: 'flex',
'@layer': {
layer1: {
display: 'grid',
},
},
},
},
{
type: 'layer',
name: 'layer1',
},
{
type: 'layer',
name: 'layer2',
},
{
type: 'local',
selector: 'testClass',
rule: {
display: 'flex',
'@layer': {
layer2: {
display: 'grid',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@layer layer1;
@layer layer2;
.testClass {
display: flex;
}
.testClass {
display: flex;
}
@layer layer1 {
.testClass {
display: grid;
}
}
@layer layer2 {
.testClass {
display: grid;
}
}
`);
});
it('should handle conditional declaration of layers', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['link', 'pink'],
cssObjs: [
{ type: 'layer', name: 'lib' },
{ type: 'layer', name: 'lib.base' },
{
type: 'global',
selector: 'a',
rule: {
'@media': {
'screen and (min-width: 600px)': {
'@layer': {
'lib.typography': {
color: 'green',
},
},
},
},
'@layer': {
'lib.base': {
fontWeight: 800,
color: 'red',
},
},
},
},
{
type: 'local',
selector: 'link',
rule: {
'@layer': {
'lib.base': {
color: 'blue',
},
},
},
},
{ type: 'layer', name: 'lib.utilities' },
{
type: 'local',
selector: 'pink',
rule: {
'@layer': {
'lib.utilities': {
color: 'hotpink',
},
},
},
},
{ type: 'layer', name: 'lib.typography' },
],
}).join('\n'),
).toMatchInlineSnapshot(`
@layer lib;
@layer lib.base;
@media screen and (min-width: 600px) {
@layer lib.typography;
}
@layer lib.utilities;
@layer lib.typography;
@layer lib.base {
a {
font-weight: 800;
color: red;
}
.link {
color: blue;
}
}
@media screen and (min-width: 600px) {
@layer lib.typography {
a {
color: green;
}
}
}
@layer lib.utilities {
.pink {
color: hotpink;
}
}
`);
});
it('should merge styles from the same layer', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['link', 'pink'],
cssObjs: [
{
type: 'global',
selector: 'a',
rule: {
'@layer': {
lib: {
fontWeight: 800,
color: 'red',
'@media': {
'screen and (min-width: 600px)': {
color: 'green',
},
},
},
},
},
},
{
type: 'local',
selector: 'link',
rule: {
'@layer': {
lib: {
color: 'blue',
},
},
},
},
{
type: 'local',
selector: 'pink',
rule: {
'@layer': {
lib: {
color: 'hotpink',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@layer lib;
@layer lib {
a {
font-weight: 800;
color: red;
}
.link {
color: blue;
}
.pink {
color: hotpink;
}
@media screen and (min-width: 600px) {
a {
color: green;
}
}
}
`);
});
it('should bailout merging for nested layers', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass', 'otherTestClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@layer': {
layerA: {
'@media': {
'(min-width: 700px)': {
display: 'grid',
},
},
},
},
},
},
{
type: 'layer',
name: 'layerA.layerA1',
},
{
type: 'layer',
name: 'layerA.layerA2',
},
{
type: 'local',
selector: 'otherTestClass',
rule: {
'@layer': {
layerA: {
'@media': {
'(min-width: 700px)': {
'@layer': {
layerA2: {
display: 'block',
},
},
},
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@layer layerA;
@layer layerA.layerA1;
@layer layerA.layerA2;
@layer layerA {
@media (min-width: 700px) {
@layer layerA2;
}
}
@layer layerA {
@media (min-width: 700px) {
.testClass {
display: grid;
}
@layer layerA2 {
.otherTestClass {
display: block;
}
}
}
}
`);
});
it('should handle @layer rules with complex selectors and simple pseudos', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@layer': {
foo: {
':hover': {
color: 'purple',
},
selectors: {
'&:nth-child(3)': {
color: 'blue',
},
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@layer foo;
@layer foo {
.testClass:hover {
color: purple;
}
.testClass:nth-child(3) {
color: blue;
}
}
`);
});
it('should handle nested @supports, @media and @container queries', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
display: 'flex',
'@supports': {
'(display: grid)': {
backgroundColor: 'yellow',
'@media': {
'screen and (min-width: 700px)': {
display: 'grid',
'@container': {
'sidebar (min-width: 700px)': {
display: 'grid',
},
},
},
},
},
},
'@media': {
'screen and (min-width: 700px)': {
color: 'green',
'@supports': {
'(display: grid)': {
borderColor: 'blue',
'@container': {
'sidebar (min-width: 700px)': {
display: 'grid',
},
},
},
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
display: flex;
}
@media screen and (min-width: 700px) {
.testClass {
color: green;
}
@supports (display: grid) {
.testClass {
border-color: blue;
}
@container sidebar (min-width: 700px) {
.testClass {
display: grid;
}
}
}
}
@supports (display: grid) {
.testClass {
background-color: yellow;
}
@media screen and (min-width: 700px) {
.testClass {
display: grid;
}
@container sidebar (min-width: 700px) {
.testClass {
display: grid;
}
}
}
}
`);
});
it('should merge nested @supports, @media and @container queries when safe to do so', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass', 'otherClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@media': {
'screen and (min-width: 700px)': {
'@supports': {
'(display: grid)': {
borderColor: 'blue',
'@container': {
'sidebar (min-width: 700px)': {
display: 'grid',
},
'sidebar (min-width: 800px)': {
display: 'grid',
},
},
},
},
},
},
},
},
{
type: 'local',
selector: 'otherClass',
rule: {
'@media': {
'screen and (min-width: 700px)': {
'@supports': {
'(display: grid)': {
borderColor: 'blue',
'@container': {
'sidebar (min-width: 700px)': {
display: 'grid',
},
'sidebar (min-width: 800px)': {
display: 'grid',
},
},
},
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@media screen and (min-width: 700px) {
@supports (display: grid) {
.testClass {
border-color: blue;
}
.otherClass {
border-color: blue;
}
@container sidebar (min-width: 700px) {
.testClass {
display: grid;
}
.otherClass {
display: grid;
}
}
@container sidebar (min-width: 800px) {
.testClass {
display: grid;
}
.otherClass {
display: grid;
}
}
}
}
`);
});
it('should not merge nested @supports, @media and @container queries when not safe to do so', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass', 'otherClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@media': {
'screen and (min-width: 700px)': {
'@supports': {
'(display: grid)': {
borderColor: 'blue',
'@container': {
'sidebar (min-width: 700px)': {
display: 'grid',
},
'sidebar (min-width: 800px)': {
display: 'grid',
},
},
},
},
},
},
},
},
{
type: 'local',
selector: 'otherClass',
rule: {
'@media': {
'screen and (min-width: 700px)': {
'@supports': {
'(display: grid)': {
borderColor: 'blue',
'@container': {
'sidebar (min-width: 800px)': {
display: 'grid',
},
'sidebar (min-width: 700px)': {
display: 'grid',
},
},
},
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@media screen and (min-width: 700px) {
@supports (display: grid) {
.testClass {
border-color: blue;
}
@container sidebar (min-width: 700px) {
.testClass {
display: grid;
}
}
@container sidebar (min-width: 800px) {
.testClass {
display: grid;
}
}
}
}
@media screen and (min-width: 700px) {
@supports (display: grid) {
.otherClass {
border-color: blue;
}
@container sidebar (min-width: 800px) {
.otherClass {
display: grid;
}
}
@container sidebar (min-width: 700px) {
.otherClass {
display: grid;
}
}
}
}
`);
});
it('should handle @supports negation queries', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
display: 'grid',
'@supports': {
'not (display: grid)': {
display: 'flex',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
display: grid;
}
@supports not (display: grid) {
.testClass {
display: flex;
}
}
`);
});
it('should handle animations', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'keyframes',
name: 'myAnimation',
rule: {
from: {
opacity: 0,
content: 'none',
padding: 0,
},
to: {
opacity: 1,
content: 'foo',
padding: 10,
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@keyframes myAnimation {
from {
content: none;
opacity: 0;
padding: 0;
}
to {
content: "foo";
opacity: 1;
padding: 10px;
}
}
`);
});
it('should handle animations with vars', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'keyframes',
name: 'myAnimation',
rule: {
from: {
vars: {
'--my-var': 'red',
[testVar]: 'green',
},
},
to: {
vars: {
'--my-var': 'orange',
[testVar]: 'blue',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@keyframes myAnimation {
from {
--my-var: red;
--skkcyc0: green;
}
to {
--my-var: orange;
--skkcyc0: blue;
}
}
`);
});
it('should handle font face', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: [],
cssObjs: [
{
type: 'fontFace',
rule: {
src: 'local("Comic Sans MS")',
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@font-face {
src: local("Comic Sans MS");
}
`);
});
it('should handle multiple font faces of the same family', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: [],
cssObjs: [
{
type: 'fontFace',
rule: {
fontFamily: 'MyFont',
src: 'local("Helvetica")',
},
},
{
type: 'fontFace',
rule: {
fontFamily: 'MyFont',
src: 'local("Helvetica-Bold")',
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@font-face {
font-family: MyFont;
src: local("Helvetica");
}
@font-face {
font-family: MyFont;
src: local("Helvetica-Bold");
}
`);
});
it('should handle multiple font faces', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: [],
cssObjs: [
{
type: 'fontFace',
rule: {
fontFamily: 'MyFont1',
src: 'local("Comic Sans MS")',
},
},
{
type: 'fontFace',
rule: {
fontFamily: 'MyFont2',
src: 'local("Impact")',
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@font-face {
font-family: MyFont1;
src: local("Comic Sans MS");
}
@font-face {
font-family: MyFont2;
src: local("Impact");
}
`);
});
it('should not create empty rules', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@media': {
'screen and (min-width: 700px)': {
color: 'green',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@media screen and (min-width: 700px) {
.testClass {
color: green;
}
}
`);
});
it('should lower all conditionals styles', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
color: 'hotpink',
'@media': {
'screen and (min-width: 700px)': {
color: 'green',
},
},
},
},
{
type: 'local',
selector: '.otherClass',
rule: {
color: 'indigo',
'@media': {
'screen and (min-width: 700px)': {
color: 'red',
},
},
},
},
{
type: 'local',
selector: '.otherOtherClass',
rule: {
color: 'lightcyan',
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
color: hotpink;
}
.otherClass {
color: indigo;
}
.otherOtherClass {
color: lightcyan;
}
@media screen and (min-width: 700px) {
.testClass {
color: green;
}
.otherClass {
color: red;
}
}
`);
});
it('should handle simple css properties', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
display: 'block',
vars: {
'--my-var': 'red',
[testVar]: 'green',
},
selectors: {
'&:nth-child(3)': {
vars: {
'--my-var': 'orange',
[testVar]: 'black',
},
},
},
'@media': {
'screen and (min-width: 700px)': {
vars: {
'--my-var': 'yellow',
[testVar]: 'blue',
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
--my-var: red;
--skkcyc0: green;
display: block;
}
.testClass:nth-child(3) {
--my-var: orange;
--skkcyc0: black;
}
@media screen and (min-width: 700px) {
.testClass {
--my-var: yellow;
--skkcyc0: blue;
}
}
`);
});
it('should handle complicated css properties', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
display: 'block',
vars: {
'--my-var': 'red',
[testPropertyVar]: '10deg',
},
selectors: {
'&:nth-child(3)': {
vars: {
'--my-var': 'orange',
[testPropertyVar]: '20deg',
},
},
},
'@media': {
'screen and (min-width: 700px)': {
vars: {
'--my-var': 'yellow',
[testPropertyVar]: '50deg',
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
--my-var: red;
--test-property__skkcyc1: 10deg;
display: block;
}
.testClass:nth-child(3) {
--my-var: orange;
--test-property__skkcyc1: 20deg;
}
@media screen and (min-width: 700px) {
.testClass {
--my-var: yellow;
--test-property__skkcyc1: 50deg;
}
}
`);
});
it('should cast property values to pixels when relevant', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
display: 'block',
paddingTop: 10,
lineHeight: 20,
vars: {
'--my-var': '12',
[testVar]: '24',
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
--my-var: 12;
--skkcyc0: 24;
display: block;
padding-top: 10px;
line-height: 20;
}
`);
});
it('should allow valid global styles', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'global',
selector: 'testClass > div',
rule: {
color: 'red',
'@media': {
'screen and (min-width: 700px)': {
color: 'blue',
},
},
'@supports': {
'not (display: grid)': {
display: 'flex',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass > div {
color: red;
}
@media screen and (min-width: 700px) {
.testClass > div {
color: blue;
}
}
@supports not (display: grid) {
.testClass > div {
display: flex;
}
}
`);
});
it('should not allow simple pseudos on global styles', () => {
expect(() =>
transformCss({
composedClassLists: [],
localClassNames: [],
cssObjs: [
{
type: 'global',
selector: 'div',
rule: {
// @ts-expect-error
':hover': {
color: 'red',
},
},
},
],
}),
).toThrowErrorMatchingInlineSnapshot(
`[Error: Simple pseudos are not valid in "globalStyle"]`,
);
});
it('should not allow selectors on global styles', () => {
expect(() =>
transformCss({
composedClassLists: [],
localClassNames: [],
cssObjs: [
{
type: 'global',
selector: 'div',
rule: {
// @ts-expect-error
selectors: {
'& > span': {
color: 'red',
},
},
},
},
],
}),
).toThrowErrorMatchingInlineSnapshot(
`[Error: Selectors are not allowed within "globalStyle"]`,
);
});
it('should map composed class lists into single identifiers', () => {
const composedStyle1 = 'composedStyle1 pd-sm dblock border-red';
const composedStyle2 = `composedStyle2 background-red ${composedStyle1}`;
expect(
transformCss({
composedClassLists: [
{ identifier: 'composedStyle1', classList: composedStyle1 },
{
identifier: 'composedStyle2',
classList: composedStyle2,
},
],
localClassNames: ['composedStyle1', 'composedStyle2'],
cssObjs: [
{
type: 'local',
selector: `${composedStyle1} button, body > ${composedStyle2}`,
rule: {
display: 'block',
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.composedStyle1 button, body > .composedStyle2 {
display: block;
}
`);
});
it('should handle the pseudo-elements with params', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
selectors: {
'&::part(external-wrapper)': {
display: 'block',
},
'&::slotted(span)': {
display: 'block',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass::part(external-wrapper) {
display: block;
}
.testClass::slotted(span) {
display: block;
}
`);
});
it('should handle multiple references to the same locally scoped selector', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: [style1, style2, '_1g1ptzo1', '_1g1ptzo10'],
cssObjs: [
{
type: 'local',
selector: style1,
rule: {
selectors: {
[`${style2} &:before, ${style2} &:after`]: {
background: 'black',
},
[`_1g1ptzo1_1g1ptzo10 ${style1}`]: {
background: 'blue',
},
[`_1g1ptzo10_1g1ptzo1 ${style1}`]: {
background: 'blue',
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.skkcyc3 .skkcyc2:before, .skkcyc3 .skkcyc2:after {
background: black;
}
._1g1ptzo1._1g1ptzo10 .skkcyc2 {
background: blue;
}
._1g1ptzo10._1g1ptzo1 .skkcyc2 {
background: blue;
}
`);
});
it('should handle adjacent classnames containing a separate local classname as a substring', () => {
// Note that `classname2` starts and ends with the same character, so when two `classname1`s are
// adjacent, the resulting string will contain `classname2` as a substring
const classname1 = 'debugName_hash1';
const classname2 = 'debugName_hash1d';
expect(
transformCss({
composedClassLists: [],
localClassNames: [classname1, classname2],
cssObjs: [
{
type: 'local',
selector: classname1,
rule: {
selectors: {
['&&']: {
background: 'black',
},
[`${classname2}&`]: {
background: 'orange',
},
[`&${classname2}&`]: {
background: 'orange',
},
[`${classname2}${classname2}&`]: {
background: 'orange',
},
},
},
},
{
type: 'local',
selector: classname2,
rule: {},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.debugName_hash1.debugName_hash1 {
background: black;
}
.debugName_hash1d.debugName_hash1 {
background: orange;
}
.debugName_hash1.debugName_hash1d.debugName_hash1 {
background: orange;
}
.debugName_hash1d.debugName_hash1d.debugName_hash1 {
background: orange;
}
`);
});
it('should handle @starting-style declaration', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
opacity: 1,
top: '100%',
'@starting-style': {
opacity: 0,
top: '50%',
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
opacity: 1;
top: 100%;
}
@starting-style {
.testClass {
opacity: 0;
top: 50%;
}
}
`);
});
it('should handle @starting-style inside media queries', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
display: 'flex',
'@media': {
'screen and (min-width: 700px)': {
top: '0',
'@starting-style': {
top: '100%',
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
display: flex;
}
@media screen and (min-width: 700px) {
.testClass {
top: 0;
}
@starting-style {
.testClass {
top: 100%;
}
}
}
`);
});
it('should handle @starting-style inside container queries', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@container': {
'sidebar (min-width: 700px)': {
top: '0',
'@starting-style': {
top: '100%',
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@container sidebar (min-width: 700px) {
.testClass {
top: 0;
}
@starting-style {
.testClass {
top: 100%;
}
}
}
`);
});
it('should handle @starting-style inside a layer', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@layer': {
'mock-layer': {
top: '0',
'@starting-style': {
top: '100%',
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@layer mock-layer;
@layer mock-layer {
.testClass {
top: 0;
}
@starting-style {
.testClass {
top: 100%;
}
}
}
`);
});
it('should handle @starting-style inside selectors', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
selectors: {
'&:hover': {
top: '0',
'@starting-style': {
top: '100%',
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass:hover {
top: 0;
}
@starting-style {
.testClass:hover {
top: 100%;
}
}
`);
});
it('should handle @starting-style inside @supports', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@supports': {
'(display: grid)': {
top: '0',
'@starting-style': {
top: '100%',
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
@supports (display: grid) {
.testClass {
top: 0;
}
@starting-style {
.testClass {
top: 100%;
}
}
}
`);
});
it('should handle simple pseudos and selectors inside @starting-style', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
color: 'orange',
'@starting-style': {
color: 'green',
':hover': {
color: 'red',
},
':focus': {
backgroundColor: 'blue',
},
selectors: {
'.active &': {
color: 'purple',
},
'& + &': {
marginLeft: '10px',
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
color: orange;
}
@starting-style {
.testClass {
color: green;
}
.testClass:hover {
color: red;
}
.testClass:focus {
background-color: blue;
}
.active .testClass {
color: purple;
}
.testClass + .testClass {
margin-left: 10px;
}
}
`);
});
it('should handle many at-rules with an inner starting-style', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
color: 'orange',
'@media': {
'screen and (min-width: 700px)': {
'@container': {
'sidebar (min-width: 700px)': {
'@supports': {
'(display: grid)': {
'@starting-style': {
color: 'green',
':hover': {
color: 'red',
},
selectors: {
'& + &': {
marginLeft: '10px',
},
},
},
},
},
},
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.testClass {
color: orange;
}
@media screen and (min-width: 700px) {
@container sidebar (min-width: 700px) {
@supports (display: grid) {
@starting-style {
.testClass {
color: green;
}
.testClass:hover {
color: red;
}
.testClass + .testClass {
margin-left: 10px;
}
}
}
}
}
`);
});
// BUG: This is a long-standing bug with all at-rules, not just starting-style. This should result
// in a runtime error as well as a type error.
it('should not process simple pseudos and selectors inside @starting-style for non-local root types', () => {
expect(
transformCss({
composedClassLists: [],
localClassNames: [],
cssObjs: [
{
type: 'global',
selector: '.globalClass',
rule: {
color: 'orange',
'@starting-style': {
color: 'green',
// @ts-expect-error
':hover': {
color: 'red',
},
':focus': {
backgroundColor: 'blue',
},
selectors: {
'.active &': {
color: 'purple',
},
},
},
},
},
],
}).join('\n'),
).toMatchInlineSnapshot(`
.globalClass {
color: orange;
}
@starting-style {
.globalClass {
color: green;
}
}
`);
});
it('should throw an error when a at-rule is use inside @starting-style scope', () => {
expect(() =>
transformCss({
composedClassLists: [],
localClassNames: ['testClass'],
cssObjs: [
{
type: 'local',
selector: 'testClass',
rule: {
'@starting-style': {
// @ts-expect-error - Using a media query inside @starting-style for testing purposes
'@media': {
'screen and (min-width: 700px)': {
display: 'grid',
},
},
},
},
},
],
}),
).toThrowErrorMatchingInlineSnapshot(
`[Error: Nested at-rules (e.g. "@media") are not allowed inside @starting-style.]`,
);
});
});
endFileScope();
================================================
FILE: packages/css/src/transformCss.ts
================================================
import { getVarName } from '@vanilla-extract/private';
import cssesc from 'cssesc';
import AhoCorasick from 'modern-ahocorasick';
import type {
CSS,
CSSStyleBlock,
CSSKeyframesBlock,
CSSPropertiesWithVars,
StyleRule,
StyleWithSelectors,
GlobalFontFaceRule,
CSSSelectorBlock,
Composition,
WithQueries,
CSSPropertyBlock,
} from './types';
import { markCompositionUsed } from './adapter';
import { forEach, omit, mapKeys } from './utils';
import { validateSelector } from './validateSelector';
import { ConditionalRuleset } from './conditionalRulesets';
import { simplePseudos, simplePseudoLookup } from './simplePseudos';
import { validateMediaQuery } from './validateMediaQuery';
const DECLARATION = '__DECLARATION';
const UNITLESS: Record = {
animationIterationCount: true,
borderImage: true,
borderImageOutset: true,
borderImageSlice: true,
borderImageWidth: true,
boxFlex: true,
boxFlexGroup: true,
columnCount: true,
columns: true,
flex: true,
flexGrow: true,
flexShrink: true,
fontWeight: true,
gridArea: true,
gridColumn: true,
gridColumnEnd: true,
gridColumnStart: true,
gridRow: true,
gridRowEnd: true,
gridRowStart: true,
initialLetter: true,
lineClamp: true,
lineHeight: true,
maxLines: true,
opacity: true,
order: true,
orphans: true,
scale: true,
tabSize: true,
WebkitLineClamp: true,
widows: true,
zIndex: true,
zoom: true,
// svg properties
fillOpacity: true,
floodOpacity: true,
maskBorder: true,
maskBorderOutset: true,
maskBorderSlice: true,
maskBorderWidth: true,
shapeImageThreshold: true,
stopOpacity: true,
strokeDashoffset: true,
strokeMiterlimit: true,
strokeOpacity: true,
strokeWidth: true,
};
function dashify(str: string) {
return str
.replace(/([A-Z])/g, '-$1')
.replace(/^ms-/, '-ms-')
.toLowerCase();
}
function replaceBetweenIndexes(
target: string,
startIndex: number,
endIndex: number,
replacement: string,
) {
const start = target.slice(0, startIndex);
const end = target.slice(endIndex);
return `${start}${replacement}${end}`;
}
const DOUBLE_SPACE = ' ';
const specialKeys = [
...simplePseudos,
'@layer',
'@media',
'@supports',
'@container',
'@starting-style',
'selectors',
];
interface CSSRule {
conditions?: Array;
selector: string;
rule: CSSPropertiesWithVars;
}
class Stylesheet {
rules: Array;
conditionalRulesets: Array;
currConditionalRuleset: ConditionalRuleset | undefined;
fontFaceRules: Array;
keyframesRules: Array;
localClassNamesMap: Map;
localClassNamesSearch: AhoCorasick;
composedClassLists: Array<{ identifier: string; regex: RegExp }>;
layers: Map>;
propertyRules: Array;
constructor(
localClassNames: Array,
composedClassLists: Array,
) {
this.rules = [];
this.conditionalRulesets = [new ConditionalRuleset()];
this.fontFaceRules = [];
this.keyframesRules = [];
this.propertyRules = [];
this.localClassNamesMap = new Map(
localClassNames.map((localClassName) => [localClassName, localClassName]),
);
this.localClassNamesSearch = new AhoCorasick(localClassNames);
this.layers = new Map();
// Class list compositions should be priortized by Newer > Older
// Therefore we reverse the array as they are added in sequence
this.composedClassLists = composedClassLists
.map(({ identifier, classList }) => ({
identifier,
regex: RegExp(`(${classList})`, 'g'),
}))
.reverse();
}
processCssObj(root: CSS) {
if (root.type === 'fontFace') {
this.fontFaceRules.push(root.rule);
return;
}
if (root.type === 'property') {
this.propertyRules.push(root);
return;
}
if (root.type === 'keyframes') {
root.rule = Object.fromEntries(
Object.entries(root.rule).map(([keyframe, rule]) => {
return [keyframe, this.transformVars(this.transformProperties(rule))];
}),
);
this.keyframesRules.push(root);
return;
}
this.currConditionalRuleset = new ConditionalRuleset();
if (root.type === 'layer') {
const layerDefinition = `@layer ${root.name}`;
this.addLayer([layerDefinition]);
} else {
// Add main styles
const mainRule = omit(root.rule, specialKeys);
this.addRule({
selector: root.selector,
rule: mainRule,
});
this.transformLayer(root, root.rule['@layer']);
this.transformMedia(root, root.rule['@media']);
this.transformSupports(root, root.rule['@supports']);
this.transformContainer(root, root.rule['@container']);
this.transformStartingStyle(root, root.rule['@starting-style']);
this.transformSimplePseudos(root, root.rule);
this.transformSelectors(root, root.rule);
}
const activeConditionalRuleset =
this.conditionalRulesets[this.conditionalRulesets.length - 1];
if (
!activeConditionalRuleset.mergeIfCompatible(this.currConditionalRuleset)
) {
// Ruleset merge failed due to incompatibility. We now deopt by starting a fresh ConditionalRuleset
this.conditionalRulesets.push(this.currConditionalRuleset);
}
}
addConditionalRule(cssRule: CSSRule, conditions: Array) {
// Run `transformProperties` before `transformVars` as we don't want to pixelify CSS Vars
const rule = this.transformVars(this.transformProperties(cssRule.rule));
const selector = this.transformSelector(cssRule.selector);
if (!this.currConditionalRuleset) {
throw new Error(`Couldn't add conditional rule`);
}
const conditionQuery = conditions[conditions.length - 1];
const parentConditions = conditions.slice(0, conditions.length - 1);
this.currConditionalRuleset.addRule(
{
selector,
rule,
},
conditionQuery,
parentConditions,
);
}
addRule(cssRule: CSSRule) {
// Run `transformProperties` before `transformVars` as we don't want to pixelify CSS Vars
const rule = this.transformVars(this.transformProperties(cssRule.rule));
const selector = this.transformSelector(cssRule.selector);
this.rules.push({
selector,
rule,
});
}
addLayer(layer: Array) {
const uniqueLayerKey = layer.join(' - ');
this.layers.set(uniqueLayerKey, layer);
}
transformProperties(cssRule: CSSPropertiesWithVars) {
return this.transformContent(this.pixelifyProperties(cssRule));
}
pixelifyProperties(cssRule: CSSPropertiesWithVars) {
forEach(cssRule, (value, key) => {
if (
typeof value === 'number' &&
value !== 0 &&
!UNITLESS[key as keyof CSSPropertiesWithVars]
) {
// @ts-expect-error Any ideas?
cssRule[key] = `${value}px`;
}
});
return cssRule;
}
transformVars({ vars, ...rest }: CSSPropertiesWithVars) {
if (!vars) {
return rest;
}
return {
...mapKeys(vars, (_value, key) => getVarName(key)),
...rest,
};
}
transformContent({ content, ...rest }: CSSPropertiesWithVars) {
if (typeof content === 'undefined') {
return rest;
}
// Handle fallback arrays:
const contentArray = Array.isArray(content) ? content : [content];
return {
content: contentArray.map((value) =>
// This logic was adapted from Stitches :)
value &&
(value.includes('"') ||
value.includes("'") ||
/^([A-Za-z-]+\([^]*|[^]*-quote|inherit|initial|none|normal|revert|unset)(\s|$)/.test(
value,
))
? value
: `"${value}"`,
),
...rest,
};
}
transformClassname(identifier: string) {
return `.${cssesc(identifier, {
isIdentifier: true,
})}`;
}
transformSelector(selector: string) {
// Map class list compositions to single identifiers
let transformedSelector = selector;
for (const { identifier, regex } of this.composedClassLists) {
transformedSelector = transformedSelector.replace(regex, () => {
markCompositionUsed(identifier);
return identifier;
});
}
if (this.localClassNamesMap.has(transformedSelector)) {
return this.transformClassname(transformedSelector);
}
const results = this.localClassNamesSearch.search(transformedSelector);
let lastReplaceIndex = transformedSelector.length;
// Perform replacements backwards to simplify index handling
for (let i = results.length - 1; i >= 0; i--) {
const [endIndex, [firstMatch]] = results[i];
const startIndex = endIndex - firstMatch.length + 1;
// Class names can be substrings of other class names
// e.g. '_1g1ptzo1' and '_1g1ptzo10'
//
// Additionally, concatenated classnames can contain substrings equal to other classnames
// e.g. '&&' where '&' is 'debugName_hash1' and 'debugName_hash1d' is also a local classname
// Before transforming the selector, this would look like `debugName_hash1debugName_hash1`
// which contains the substring `debugName_hash1d`’.
//
// In either of these cases, the last replace index will occur either before or within the
// current replacement range (from `startIndex` to `endIndex`).
// If this occurs, we skip the replacement to avoid transforming the selector incorrectly.
const skipReplacement = lastReplaceIndex <= endIndex;
if (skipReplacement) {
continue;
}
lastReplaceIndex = startIndex;
// If class names already starts with a '.' then skip
if (transformedSelector[startIndex - 1] !== '.') {
transformedSelector = replaceBetweenIndexes(
transformedSelector,
startIndex,
endIndex + 1,
this.transformClassname(firstMatch),
);
}
}
return transformedSelector;
}
transformSelectors(
root: CSSStyleBlock | CSSSelectorBlock,
rule: StyleWithSelectors,
conditions?: Array,
) {
forEach(rule.selectors, (selectorRule, selector) => {
if (root.type !== 'local') {
throw new Error(
`Selectors are not allowed within ${
root.type === 'global' ? '"globalStyle"' : '"selectors"'
}`,
);
}
const transformedSelector = this.transformSelector(
selector.replace(RegExp('&', 'g'), root.selector),
);
validateSelector(transformedSelector, root.selector);
const rule = {
selector: transformedSelector,
rule: omit(selectorRule, specialKeys),
};
if (conditions) {
this.addConditionalRule(rule, conditions);
} else {
this.addRule(rule);
}
const selectorRoot: CSSSelectorBlock = {
type: 'selector',
selector: transformedSelector,
rule: selectorRule,
};
this.transformLayer(selectorRoot, selectorRule['@layer'], conditions);
this.transformSupports(
selectorRoot,
selectorRule['@supports'],
conditions,
);
this.transformMedia(selectorRoot, selectorRule['@media'], conditions);
this.transformContainer(
selectorRoot,
selectorRule['@container'],
conditions,
);
this.transformStartingStyle(
selectorRoot,
selectorRule['@starting-style'],
conditions,
);
});
}
transformMedia(
root: CSSStyleBlock | CSSSelectorBlock,
rules: WithQueries['@media'],
parentConditions: Array = [],
) {
if (rules) {
this.currConditionalRuleset?.addConditionPrecedence(
parentConditions,
Object.keys(rules).map((query) => `@media ${query}`),
);
for (const [query, mediaRule] of Object.entries(rules)) {
const mediaQuery = `@media ${query}`;
validateMediaQuery(mediaQuery);
const conditions = [...parentConditions, mediaQuery];
this.addConditionalRule(
{
selector: root.selector,
rule: omit(mediaRule, specialKeys),
},
conditions,
);
if (root.type === 'local') {
this.transformSimplePseudos(root, mediaRule!, conditions);
this.transformSelectors(root, mediaRule!, conditions);
}
this.transformLayer(root, mediaRule!['@layer'], conditions);
this.transformSupports(root, mediaRule!['@supports'], conditions);
this.transformContainer(root, mediaRule!['@container'], conditions);
this.transformStartingStyle(
root,
mediaRule!['@starting-style'],
conditions,
);
}
}
}
transformContainer(
root: CSSStyleBlock | CSSSelectorBlock,
rules: WithQueries['@container'],
parentConditions: Array = [],
) {
if (rules) {
this.currConditionalRuleset?.addConditionPrecedence(
parentConditions,
Object.keys(rules).map((query) => `@container ${query}`),
);
forEach(rules, (containerRule, query) => {
const containerQuery = `@container ${query}`;
const conditions = [...parentConditions, containerQuery];
this.addConditionalRule(
{
selector: root.selector,
rule: omit(containerRule, specialKeys),
},
conditions,
);
if (root.type === 'local') {
this.transformSimplePseudos(root, containerRule!, conditions);
this.transformSelectors(root, containerRule!, conditions);
}
this.transformLayer(root, containerRule!['@layer'], conditions);
this.transformSupports(root, containerRule!['@supports'], conditions);
this.transformMedia(root, containerRule!['@media'], conditions);
this.transformStartingStyle(
root,
containerRule!['@starting-style'],
conditions,
);
});
}
}
transformLayer(
root: CSSStyleBlock | CSSSelectorBlock,
rules: WithQueries['@layer'],
parentConditions: Array = [],
) {
if (rules) {
this.currConditionalRuleset?.addConditionPrecedence(
parentConditions,
Object.keys(rules).map((name) => `@layer ${name}`),
);
forEach(rules, (layerRule, name) => {
const conditions = [...parentConditions, `@layer ${name}`];
this.addLayer(conditions);
this.addConditionalRule(
{
selector: root.selector,
rule: omit(layerRule, specialKeys),
},
conditions,
);
if (root.type === 'local') {
this.transformSimplePseudos(root, layerRule!, conditions);
this.transformSelectors(root, layerRule!, conditions);
}
this.transformMedia(root, layerRule!['@media'], conditions);
this.transformSupports(root, layerRule!['@supports'], conditions);
this.transformContainer(root, layerRule!['@container'], conditions);
this.transformStartingStyle(
root,
layerRule!['@starting-style'],
conditions,
);
});
}
}
transformSupports(
root: CSSStyleBlock | CSSSelectorBlock,
rules: WithQueries['@supports'],
parentConditions: Array = [],
) {
if (rules) {
this.currConditionalRuleset?.addConditionPrecedence(
parentConditions,
Object.keys(rules).map((query) => `@supports ${query}`),
);
forEach(rules, (supportsRule, query) => {
const conditions = [...parentConditions, `@supports ${query}`];
this.addConditionalRule(
{
selector: root.selector,
rule: omit(supportsRule, specialKeys),
},
conditions,
);
if (root.type === 'local') {
this.transformSimplePseudos(root, supportsRule!, conditions);
this.transformSelectors(root, supportsRule!, conditions);
}
this.transformLayer(root, supportsRule!['@layer'], conditions);
this.transformMedia(root, supportsRule!['@media'], conditions);
this.transformContainer(root, supportsRule!['@container'], conditions);
this.transformStartingStyle(
root,
supportsRule!['@starting-style'],
conditions,
);
});
}
}
transformSimplePseudos(
root: CSSStyleBlock | CSSSelectorBlock,
rule: StyleRule,
conditions?: Array,
) {
for (const key of Object.keys(rule)) {
// Process simple pseudos
if (simplePseudoLookup[key]) {
if (root.type !== 'local') {
throw new Error(
`Simple pseudos are not valid in ${
root.type === 'global' ? '"globalStyle"' : '"selectors"'
}`,
);
}
if (conditions) {
this.addConditionalRule(
{
selector: `${root.selector}${key}`,
rule: rule[key as keyof typeof rule] as CSSPropertiesWithVars,
},
conditions,
);
} else {
this.addRule({
conditions,
selector: `${root.selector}${key}`,
rule: rule[key as keyof typeof rule] as CSSPropertiesWithVars,
});
}
}
}
}
transformStartingStyle(
root: CSSStyleBlock | CSSSelectorBlock,
rules: WithQueries['@starting-style'],
parentConditions: Array = [],
) {
if (rules) {
const nestedAtRuleKey = Object.keys(rules).find((key) =>
key.startsWith('@'),
);
if (nestedAtRuleKey) {
throw new Error(
`Nested at-rules (e.g. "${nestedAtRuleKey}") are not allowed inside @starting-style.`,
);
}
this.currConditionalRuleset?.addConditionPrecedence(parentConditions, [
'@starting-style',
]);
const conditions = [...parentConditions, '@starting-style'];
this.addConditionalRule(
{
selector: root.selector,
rule: omit(rules, specialKeys),
},
conditions,
);
if (root.type === 'local') {
this.transformSimplePseudos(root, rules, conditions);
this.transformSelectors(root, rules, conditions);
}
}
}
toCss() {
const css: Array = [];
// Render font-face rules
for (const fontFaceRule of this.fontFaceRules) {
css.push(renderCss({ '@font-face': fontFaceRule }));
}
// Render property rules
for (const property of this.propertyRules) {
css.push(renderCss({ [`@property ${property.name}`]: property.rule }));
}
// Render keyframes
for (const keyframe of this.keyframesRules) {
css.push(renderCss({ [`@keyframes ${keyframe.name}`]: keyframe.rule }));
}
// Render layer definitions
for (const layer of this.layers.values()) {
const [definition, ...nesting] = layer.reverse();
let cssObj: Record = {
[definition]: DECLARATION,
};
for (const part of nesting) {
cssObj = {
[part]: cssObj,
};
}
css.push(renderCss(cssObj));
}
// Render unconditional rules
for (const rule of this.rules) {
css.push(renderCss({ [rule.selector]: rule.rule }));
}
// Render conditional rules
for (const conditionalRuleset of this.conditionalRulesets) {
for (const conditionalRule of conditionalRuleset.renderToArray()) {
css.push(renderCss(conditionalRule));
}
}
return css.filter(Boolean);
}
}
function renderCss(v: Record, indent: string = '') {
const rules: Array = [];
for (const key of Object.keys(v)) {
const value = v[key];
if (value && Array.isArray(value)) {
rules.push(...value.map((v) => renderCss({ [key]: v }, indent)));
} else if (value && typeof value === 'object') {
const isEmpty = Object.keys(value).length === 0;
if (!isEmpty) {
rules.push(
`${indent}${key} {\n${renderCss(
value,
indent + DOUBLE_SPACE,
)}\n${indent}}`,
);
}
} else if (value === DECLARATION) {
rules.push(`${indent}${key};`);
} else {
rules.push(
`${indent}${key.startsWith('--') ? key : dashify(key)}: ${value};`,
);
}
}
return rules.join('\n');
}
interface TransformCSSParams {
localClassNames: Array;
composedClassLists: Array;
cssObjs: Array;
}
export function transformCss({
localClassNames,
cssObjs,
composedClassLists,
}: TransformCSSParams): string[] {
const stylesheet = new Stylesheet(localClassNames, composedClassLists);
for (const root of cssObjs) {
stylesheet.processCssObj(root);
}
return stylesheet.toCss();
}
================================================
FILE: packages/css/src/types.ts
================================================
import type { CSSVarFunction, MapLeafNodes } from '@vanilla-extract/private';
import type { AtRule, Properties } from 'csstype';
import type { SimplePseudos } from './simplePseudos';
export type Resolve = {
[Key in keyof T]: T[Key];
} & {};
type CSSTypeProperties = Properties;
export type CSSProperties = {
[Property in keyof CSSTypeProperties]:
| CSSTypeProperties[Property]
| CSSVarFunction
| Array;
};
export interface CSSKeyframes {
[time: string]: CSSPropertiesWithVars;
}
export type CSSPropertiesWithVars = CSSProperties & {
vars?: {
[key: string]: string;
};
};
type PseudoProperties = {
[key in SimplePseudos]?: CSSPropertiesWithVars;
};
type CSSPropertiesAndPseudos = CSSPropertiesWithVars & PseudoProperties;
type Query = {
[key in Key]?: {
[query: string]: Omit;
};
};
export type MediaQueries = Query<'@media', StyleType>;
export type FeatureQueries = Query<'@supports', StyleType>;
export type ContainerQueries = Query<'@container', StyleType>;
export type Layers = Query<'@layer', StyleType>;
export type StartingStyle = {
'@starting-style'?: Omit;
};
interface AllQueries
extends
MediaQueries>,
FeatureQueries>,
ContainerQueries>,
Layers>,
StartingStyle {}
export type WithQueries = StyleType & AllQueries;
interface SelectorMap {
[selector: string]: WithQueries;
}
export interface StyleWithSelectors extends CSSPropertiesAndPseudos {
selectors?: SelectorMap;
}
export type StyleRule = WithQueries;
export type GlobalStyleRule = WithQueries;
export type GlobalFontFaceRule = Omit &
Required>;
export type FontFaceRule = Omit;
export type CSSStyleBlock = {
type: 'local';
selector: string;
rule: StyleRule;
};
export type CSSFontFaceBlock = {
type: 'fontFace';
rule: GlobalFontFaceRule;
};
export type CSSKeyframesBlock = {
type: 'keyframes';
name: string;
rule: CSSKeyframes;
};
export type CSSSelectorBlock = {
type: 'selector' | 'global';
selector: string;
rule: GlobalStyleRule;
};
export type CSSLayerDeclaration = {
type: 'layer';
name: string;
};
export type CSSPropertyBlock = {
type: 'property';
name: string;
rule: AtRule.Property;
};
export type CSS =
| CSSStyleBlock
| CSSFontFaceBlock
| CSSKeyframesBlock
| CSSSelectorBlock
| CSSLayerDeclaration
| CSSPropertyBlock;
export type FileScope = {
packageName?: string;
filePath: string;
};
export interface Composition {
identifier: string;
classList: string;
}
type CustomIdentFunction = (params: {
hash: string;
filePath: string;
debugId?: string;
packageName?: string;
}) => string;
type IdentOption = 'short' | 'debug' | CustomIdentFunction;
export interface Adapter {
appendCss: (css: CSS, fileScope: FileScope) => void;
registerClassName: (className: string, fileScope: FileScope) => void;
registerComposition: (composition: Composition, fileScope: FileScope) => void;
markCompositionUsed: (identifier: string) => void;
onBeginFileScope?: (fileScope: FileScope) => void;
onEndFileScope: (fileScope: FileScope) => void;
getIdentOption: () => IdentOption;
}
export type NullableTokens = {
[key: string]: string | NullableTokens | null;
};
export type Tokens = {
[key: string]: string | Tokens;
};
export type ThemeVars = MapLeafNodes<
ThemeContract,
CSSVarFunction
>;
export type ClassNames = string | Array;
export type ComplexStyleRule = StyleRule | Array;
type _PropertySyntax =
| ''
| ''
| ''
| ''
| ''
| ''
| ''
| ''
| ''
| ''
| ''
| ''
| ''
| ''
| ''
| '*';
/** Suggests elements of the provided string union `Suggestions` while still accepting any string */
type LooseAutocomplete =
| Suggestions
| Omit;
export type PropertySyntax = LooseAutocomplete<_PropertySyntax>;
================================================
FILE: packages/css/src/utils.test.ts
================================================
import { describe, expect, it } from 'vitest';
import { isEqual, dedupeAndJoinClassList } from './utils';
describe('isEqual', () => {
it.each([
[{ a: true }, { a: true }, true],
[{ a: true }, { a: false }, false],
[{ a: true }, { b: true }, false],
[{ a: true, b: [1, 2] }, { a: true, b: [1, 2] }, true],
[{ a: true, b: [1, 2] }, { a: true, b: [1, 3] }, false],
[{ a: true, b: [1, 2, 3] }, { a: true, b: [1, 2] }, false],
[{ a: { b: { c: '1' } } }, { a: { b: { c: '1' } } }, true],
[{ a: { b: { c: '1' } } }, { a: { b: { c: '2' } } }, false],
])('isEqual', (a, b, expected) => {
expect(isEqual(a, b)).toBe(expected);
});
});
describe('dedupeAndJoinClassList', () => {
it.each([
{ args: ['1'], output: '1' },
{ args: ['1 1'], output: '1' },
{ args: ['1 2 3'], output: '1 2 3' },
{ args: ['1', '2', '3'], output: '1 2 3' },
{ args: [['1', '2'], '3'], output: '1 2 3' },
{ args: [['1', ['2', '3']], '4'], output: '1 2 3 4' },
{
args: [['1', ['2', ['3', '4']]], ['5', '6'], '7'],
output: '1 2 3 4 5 6 7',
},
{ args: ['1', '1', '1'], output: '1' },
{
args: ['1', ['1', '2'], ['1', '2', '3'], ['1', '2', '3', '4']],
output: '1 2 3 4',
},
{ args: ['1 2 3', '2 3 4', '1 5'], output: '1 2 3 4 5' },
{ args: [' 1 2 3 2 ', ' 2 3 4 2 ', ' 1 5 1 '], output: '1 2 3 4 5' },
{ args: ['1', '', '2'], output: '1 2' },
])('composeStyles', ({ args, output }) => {
expect(dedupeAndJoinClassList(args)).toBe(output);
});
});
================================================
FILE: packages/css/src/utils.ts
================================================
import type { ClassNames } from './types';
type BasicObj = { [key: string]: any };
export function forEach(value: Input[Key], key: string) => void,
): void {
for (const key in obj) {
fn(obj[key], key);
}
}
export function omit,
): Omit {
let result: any = {};
for (const key in obj) {
if (omitKeys.indexOf(key as any) === -1) {
result[key] = obj[key];
}
}
return result;
}
export function mapKeys(value: Input[Key], key: string) => string,
): Record {
let result: any = {};
for (const key in obj) {
result[fn(obj[key], key)] = obj[key];
}
return result;
}
export function isEqual(a: any, b: any) {
if (typeof a !== typeof b) {
return false;
}
if (typeof a === 'object') {
const keys1 = Object.keys(a);
const keys2 = Object.keys(b);
if (keys1.length !== keys2.length) {
return false;
}
for (const key in a) {
if (!isEqual(a[key], b[key])) {
return false;
}
}
return true;
} else {
return a === b;
}
}
function composeStylesIntoSet(
set: Set,
...classNames: Array
) {
for (const className of classNames) {
if (className.length === 0) {
continue;
}
if (typeof className === 'string') {
if (className.includes(' ')) {
composeStylesIntoSet(set, ...className.trim().split(' '));
} else {
set.add(className);
}
} else if (Array.isArray(className)) {
composeStylesIntoSet(set, ...className);
}
}
}
export function dedupeAndJoinClassList(classNames: Array) {
const set: Set = new Set();
composeStylesIntoSet(set, ...classNames);
return Array.from(set).join(' ');
}
================================================
FILE: packages/css/src/validateContract.test.ts
================================================
import { describe, expect, it } from 'vitest';
import { validateContract } from './validateContract';
describe('validateContract', () => {
it('should return valid when tokens match contract', () => {
const contract = {
colors: {
red: '',
green: '',
blue: '',
},
space: {
1: '',
2: '',
3: '',
},
};
expect(validateContract(contract, contract).valid).toBe(true);
});
it('should show nice diff for added properties', () => {
const contract = {
colors: {
red: '',
green: '',
blue: '',
},
space: {
1: '',
2: '',
3: '',
},
};
const { valid, diffString } = validateContract(contract, {
...contract,
fontWeight: { 300: '300' },
});
expect(valid).toBe(false);
expect(diffString).toMatchInlineSnapshot(`
" {
+ fontWeight: ...,
}"
`);
});
it('should show nice diff for removed properties', () => {
const contract = {
colors: {
red: '',
green: '',
blue: '',
},
space: {
1: '',
2: '',
3: '',
},
};
const { valid, diffString } = validateContract(contract, {
...contract,
colors: undefined,
});
expect(valid).toBe(false);
expect(diffString).toMatchInlineSnapshot(`
" {
- colors: ...,
}"
`);
});
it('should show nice diff for mixed properties', () => {
const contract = {
colors: {
red: '',
green: '',
blue: '',
},
space: {
1: '',
2: '',
3: '',
},
};
const { valid, diffString } = validateContract(contract, {
...contract,
colors: undefined,
fontWeight: { 300: '300' },
});
expect(valid).toBe(false);
expect(diffString).toMatchInlineSnapshot(`
" {
- colors: ...,
+ fontWeight: ...,
}"
`);
});
it('should show nice diff for missing nested properties', () => {
const contract = {
colors: {
red: '',
green: '',
blue: '',
},
space: {
1: '',
2: '',
3: '',
},
};
const { valid, diffString } = validateContract(contract, {
...contract,
colors: {
red: '',
blue: '',
},
});
expect(valid).toBe(false);
expect(diffString).toMatchInlineSnapshot(`
" {
colors: {
- green: ...,
}
}"
`);
});
});
================================================
FILE: packages/css/src/validateContract.ts
================================================
import { type Contract, walkObject } from '@vanilla-extract/private';
import { diff } from 'deep-object-diff';
import pc from 'picocolors';
const normaliseObject = (obj: Contract) => walkObject(obj, () => '');
export function validateContract(
contract: any,
tokens: any,
): {
valid: boolean;
diffString: string;
} {
const theDiff = diff(normaliseObject(contract), normaliseObject(tokens));
const valid = Object.keys(theDiff).length === 0;
return {
valid,
diffString: valid ? '' : renderDiff(contract, theDiff),
};
}
function diffLine(value: string, nesting: number, type?: '+' | '-') {
const whitespace = [...Array(nesting).keys()].map(() => ' ').join('');
const line = `${type ? type : ' '}${whitespace}${value}`;
if (process.env.NODE_ENV !== 'test') {
if (type === '-') {
return pc.red(line);
}
if (type === '+') {
return pc.green(line);
}
}
return line;
}
function renderDiff(orig: any, diff: any, nesting: number = 0): string {
const lines = [];
if (nesting === 0) {
lines.push(diffLine('{', 0));
}
const innerNesting = nesting + 1;
const keys = Object.keys(diff).sort();
for (const key of keys) {
const value = diff[key];
if (!(key in orig)) {
lines.push(diffLine(`${key}: ...,`, innerNesting, '+'));
} else if (typeof value === 'object') {
lines.push(diffLine(`${key}: {`, innerNesting));
lines.push(renderDiff(orig[key], diff[key], innerNesting));
lines.push(diffLine('}', innerNesting));
} else {
lines.push(diffLine(`${key}: ...,`, innerNesting, '-'));
}
}
if (nesting === 0) {
lines.push(diffLine('}', 0));
}
return lines.join('\n');
}
================================================
FILE: packages/css/src/validateMediaQuery.test.ts
================================================
import { describe, expect, it } from 'vitest';
import { validateMediaQuery } from './validateMediaQuery';
describe('validateMediaQuery', () => {
describe('valid selectors', () => {
const validMediaQueries = [
'@media screen',
'@media screen, print',
'@media screen and (max-width: 600px)',
'@media (min-width: 5rem)',
'@media (min-width: 30em) and (orientation: landscape)',
'@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi)',
'@media not screen and (color), print and (color)',
'@media (prefers-reduced-motion)',
'@media (prefers-reduced-motion: no-preference)',
];
validMediaQueries.forEach((query) =>
it(query, () => {
expect(() => validateMediaQuery(query)).not.toThrow();
}),
);
});
describe('invalid media queries', () => {
it('empty query', () => {
expect(() => validateMediaQuery('@media '))
.toThrowErrorMatchingInlineSnapshot(`
[Error: Invalid media query: "@media "
Query is empty
Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries]
`);
});
it('random query', () => {
expect(() => validateMediaQuery('@media random query'))
.toThrowErrorMatchingInlineSnapshot(`
[Error: Invalid media query: "@media random query"
Unknown ident 'random' in media query
Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries]
`);
});
it('(min-height: 600px', () => {
expect(() => validateMediaQuery('@media (min-height: 600px'))
.toThrowErrorMatchingInlineSnapshot(`
[Error: Invalid media query: "@media (min-height: 600px"
Invalid media condition
Expected media condition after '('
Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries]
`);
});
it('min-width: 600px)', () => {
expect(() => validateMediaQuery('@media min-width: 600px)'))
.toThrowErrorMatchingInlineSnapshot(`
[Error: Invalid media query: "@media min-width: 600px)"
Unknown ident 'min-width' in media query
Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries]
`);
});
it('prefers-reduced-motion: no-preference', () => {
expect(() =>
validateMediaQuery('@media prefers-reduced-motion: no-preference'),
).toThrowErrorMatchingInlineSnapshot(`
[Error: Invalid media query: "@media prefers-reduced-motion: no-preference"
Unknown ident 'prefers-reduced-motion' in media query
Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries]
`);
});
it('Double media: @media @media screen and (min-width: 640px)', () => {
expect(() =>
validateMediaQuery('@media @media screen and (min-width: 640px)'),
).toThrowErrorMatchingInlineSnapshot(`
[Error: Invalid media query: "@media @media screen and (min-width: 640px)"
Expected media condition or media prefix
Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries]
`);
});
});
});
================================================
FILE: packages/css/src/validateMediaQuery.ts
================================================
import dedent from 'dedent';
import { toAST } from 'media-query-parser';
const createMediaQueryError = (mediaQuery: string, msg: string) =>
new Error(
dedent`
Invalid media query: "${mediaQuery}"
${msg}
Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
`,
);
export const validateMediaQuery = (mediaQuery: string): void => {
// Empty queries will start with '@media '
if (mediaQuery === '@media ') {
throw createMediaQueryError(mediaQuery, 'Query is empty');
}
try {
toAST(mediaQuery);
} catch (e: any) {
throw createMediaQueryError(mediaQuery, e.message);
}
};
================================================
FILE: packages/css/src/validateSelector.test.ts
================================================
import { describe, expect, it } from 'vitest';
import { validateSelector } from './validateSelector';
describe('validateSelector', () => {
describe('valid selectors', () => {
const validSelectors = [
'.target',
'.target, .target',
'.target:hover',
'.target:hover:focus',
'.target:where(:hover, :focus)',
'.target:where(:hover, :focus), .target',
'.target:is(:hover, :focus)',
'.target:hover:focus:not(.a)',
'.target:hover:focus:where(:not(.a, .b))',
'.target:hover:focus:is(:not(.a, .b))',
'.target.a',
'.a.target',
'.a.target.b',
'.a.b.target',
'.a .target',
'.a .target:hover',
'.a > .target',
'.a ~ .target',
'.a + .target',
'.a > .b ~ .target',
'.a > .b + .target:hover',
'.a:where(.b, .c) > .target',
'.a:is(.b, .c) > .target',
'.target, .foo .target',
':where(.target)',
':where(.target):hover',
':is(.target)',
':is(.target):hover',
'.a :where(.target)',
'.a > :is(.target)',
':where(.target, .a.target)',
':is(.target, .a.target)',
':where(.target, .a .target)',
':is(.target, .a .target)',
':is(h1, h2, h3) .target',
'.target:is(h1, h2, h3)',
];
it.each(validSelectors)('%s', (selector) => {
expect(() => validateSelector(selector, 'target')).not.toThrow();
});
});
describe('invalid selectors', () => {
const invalidSelectors = [
'.a',
'.target .a',
'.target, .a',
'.a, .target',
'.target, .target, .a',
'.a .target .b',
'.target :hover',
'.a .target :hover',
'.target > .a',
'.target + .a',
'.target ~ .a',
'.target:where(:hover, :focus) .a',
':where(.target) .a',
':is(.target) > .a',
':where(.target, .a)',
':is(.target, .a)',
':where(.target, .a, .target)',
':is(.target, .a, .target)',
':where(.target, .target > span)',
':is(.target, .target > span)',
':where(.a, .b, .c)',
':is(.a, .b, .c)',
];
it.each(invalidSelectors)('%s', (selector) => {
expect(() => validateSelector(selector, 'target')).toThrow();
});
});
});
================================================
FILE: packages/css/src/validateSelector.ts
================================================
import { parse } from 'css-what';
import cssesc from 'cssesc';
import dedent from 'dedent';
// https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
function escapeRegex(string: string) {
return string.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
}
type Selector = ReturnType[number];
function targetsClassName(tokens: Selector, targetClassName: string): boolean {
for (let i = tokens.length - 1; i >= 0; i--) {
const token = tokens[i];
if (
token.type === 'child' ||
token.type === 'parent' ||
token.type === 'sibling' ||
token.type === 'adjacent' ||
token.type === 'descendant'
) {
return false;
}
if (
token.type === 'attribute' &&
token.name === 'class' &&
token.value === targetClassName
) {
return true;
}
if (
token.type === 'pseudo' &&
Array.isArray(token.data) &&
(token.name === 'is' || token.name === 'where')
) {
if (token.data.every((sub) => targetsClassName(sub, targetClassName))) {
return true;
}
}
}
return false;
}
export const validateSelector = (
selector: string,
targetClassName: string,
): void => {
const replaceTarget = () => {
const targetRegex = new RegExp(
`.${escapeRegex(cssesc(targetClassName, { isIdentifier: true }))}`,
'g',
);
return selector.replace(targetRegex, '&');
};
let selectorParts: ReturnType;
try {
selectorParts = parse(selector);
} catch (err) {
throw new Error(`Invalid selector: ${replaceTarget()}`, { cause: err });
}
selectorParts.forEach((tokens) => {
if (!targetsClassName(tokens, targetClassName)) {
throw new Error(
dedent`
Invalid selector: ${replaceTarget()}
Style selectors must target the '&' character (along with any modifiers), e.g. ${'`${parent} &`'} or ${'`${parent} &:hover`'}.
This is to ensure that each style block only affects the styling of a single class.
If your selector is targeting another class, you should move it to the style definition for that class, e.g. given we have styles for 'parent' and 'child' elements, instead of adding a selector of ${'`& ${child}`'}) to 'parent', you should add ${'`${parent} &`'} to 'child').
If your selector is targeting something global, use the 'globalStyle' function instead, e.g. if you wanted to write ${'`& h1`'}, you should instead write 'globalStyle(${'`${parent} h1`'}, { ... })'
`,
);
}
});
};
================================================
FILE: packages/css/src/vars.test.ts
================================================
import { describe, expect, it } from 'vitest';
import { fallbackVar, createGlobalThemeContract } from './vars';
describe('fallbackVar', () => {
it('supports a single string fallback', () => {
expect(fallbackVar('var(--foo-bar)', 'blue')).toMatchInlineSnapshot(
`"var(--foo-bar, blue)"`,
);
});
it('supports a single numeric fallback', () => {
expect(fallbackVar('var(--foo-bar)', '10px')).toMatchInlineSnapshot(
`"var(--foo-bar, 10px)"`,
);
});
it('supports a single var fallback', () => {
expect(fallbackVar('var(--foo-bar)', 'var(--baz)')).toMatchInlineSnapshot(
`"var(--foo-bar, var(--baz))"`,
);
});
it('supports multiple fallbacks resolving to a string', () => {
expect(
fallbackVar('var(--foo)', 'var(--bar)', 'var(--baz)', 'blue'),
).toMatchInlineSnapshot(`"var(--foo, var(--bar, var(--baz, blue)))"`);
});
it('supports multiple fallbacks resolving to a number', () => {
expect(
fallbackVar('var(--foo)', 'var(--bar)', 'var(--baz)', '10px'),
).toMatchInlineSnapshot(`"var(--foo, var(--bar, var(--baz, 10px)))"`);
});
it('supports multiple fallbacks resolving to a var', () => {
expect(
fallbackVar(
'var(--foo)',
'var(--bar)',
'var(--baz)',
'var(--final-fallback)',
),
).toMatchInlineSnapshot(
`"var(--foo, var(--bar, var(--baz, var(--final-fallback))))"`,
);
});
it('should throw with invalid vars', () => {
expect(() => {
fallbackVar('INVALID', '10px');
}).toThrowErrorMatchingInlineSnapshot(
`[Error: Invalid variable name: INVALID]`,
);
expect(() => {
fallbackVar('INVALID1', 'INVALID2', '10px');
}).toThrowErrorMatchingInlineSnapshot(
`[Error: Invalid variable name: INVALID2]`,
);
expect(() => {
// @ts-expect-error
fallbackVar('INVALID', 10, 10);
}).toThrowErrorMatchingInlineSnapshot(`[Error: Invalid variable name: 10]`);
expect(() => {
fallbackVar('var(--foo-bar)', 'INVALID', '10px');
}).toThrowErrorMatchingInlineSnapshot(
`[Error: Invalid variable name: INVALID]`,
);
expect(() => {
fallbackVar('INVALID', 'var(--foo-bar)', '10px');
}).toThrowErrorMatchingInlineSnapshot(
`[Error: Invalid variable name: INVALID]`,
);
});
});
describe('createGlobalThemeContract', () => {
it('supports defining css vars via object properties', () => {
expect(
createGlobalThemeContract({
color: {
red: 'color-red',
blue: 'color-blue',
green: 'color-green',
},
}),
).toMatchInlineSnapshot(`
{
"color": {
"blue": "var(--color-blue)",
"green": "var(--color-green)",
"red": "var(--color-red)",
},
}
`);
});
it('ignores leading double hyphen', () => {
expect(
createGlobalThemeContract({
color: {
red: '--color-red',
blue: '--color-blue',
green: '--color-green',
},
}),
).toMatchInlineSnapshot(`
{
"color": {
"blue": "var(--color-blue)",
"green": "var(--color-green)",
"red": "var(--color-red)",
},
}
`);
});
it('supports adding a prefix', () => {
expect(
createGlobalThemeContract(
{
color: {
red: 'color-red',
blue: 'color-blue',
green: 'color-green',
},
},
(value) => `prefix-${value}`,
),
).toMatchInlineSnapshot(`
{
"color": {
"blue": "var(--prefix-color-blue)",
"green": "var(--prefix-color-green)",
"red": "var(--prefix-color-red)",
},
}
`);
});
it('ignores leading double hyphen when adding a prefix', () => {
expect(
createGlobalThemeContract(
{
color: {
red: 'color-red',
blue: 'color-blue',
green: 'color-green',
},
},
(value) => `--prefix-${value}`,
),
).toMatchInlineSnapshot(`
{
"color": {
"blue": "var(--prefix-color-blue)",
"green": "var(--prefix-color-green)",
"red": "var(--prefix-color-red)",
},
}
`);
});
it('supports path based names', () => {
expect(
createGlobalThemeContract(
{
color: {
red: null,
blue: null,
green: null,
},
},
(_, path) => `prefix-${path.join('-')}`,
),
).toMatchInlineSnapshot(`
{
"color": {
"blue": "var(--prefix-color-blue)",
"green": "var(--prefix-color-green)",
"red": "var(--prefix-color-red)",
},
}
`);
});
it('errors when invalid property value', () => {
expect(() =>
createGlobalThemeContract({
color: {
// @ts-expect-error
red: null,
blue: 'color-blue',
green: 'color-green',
},
}),
).toThrowErrorMatchingInlineSnapshot(
`[Error: Invalid variable name for "color.red": null]`,
);
});
it('errors when escaped property value', () => {
expect(() =>
createGlobalThemeContract({
color: {
red: 'color-red',
blue: "color'blue",
green: 'color-green',
},
}),
).toThrowErrorMatchingInlineSnapshot(
`[Error: Invalid variable name for "color.blue": color'blue]`,
);
});
it('errors when property value starts with a number', () => {
expect(() =>
createGlobalThemeContract({
color: {
red: 'color-red',
blue: 'color-blue',
green: '123-color-green',
},
}),
).toThrowErrorMatchingInlineSnapshot(
`[Error: Invalid variable name for "color.green": 123-color-green]`,
);
});
it('errors when invalid map value', () => {
expect(() =>
createGlobalThemeContract(
{
color: {
red: 'color-red',
blue: 'color-blue',
green: 'color-green',
},
},
// @ts-expect-error
() => null,
),
).toThrowErrorMatchingInlineSnapshot(
`[Error: Invalid variable name for "color.red": null]`,
);
});
});
================================================
FILE: packages/css/src/vars.ts
================================================
import type { AtRule } from 'csstype';
import {
get,
walkObject,
type Contract,
type MapLeafNodes,
type CSSVarFunction,
} from '@vanilla-extract/private';
import cssesc from 'cssesc';
import type { Tokens, NullableTokens, ThemeVars } from './types';
import { validateContract } from './validateContract';
import { getFileScope } from './fileScope';
import { generateIdentifier } from './identifier';
import type { PropertySyntax } from './types';
import { appendCss } from './adapter';
type VarDeclaration =
| {
syntax: '*';
inherits: boolean;
initialValue?: string;
}
| {
syntax: Exclude | Array;
inherits: boolean;
initialValue: string;
};
const buildPropertyRule = ({
syntax,
inherits,
initialValue,
}: VarDeclaration): AtRule.Property => ({
syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
inherits: inherits ? 'true' : 'false',
...(initialValue != null ? { initialValue } : {}),
});
export function createVar(debugId?: string): CSSVarFunction;
export function createVar(
declaration: VarDeclaration,
debugId?: string,
): CSSVarFunction;
export function createVar(
debugIdOrDeclaration?: string | VarDeclaration,
debugId?: string,
): CSSVarFunction {
const cssVarName = cssesc(
generateIdentifier({
debugId:
typeof debugIdOrDeclaration === 'string'
? debugIdOrDeclaration
: debugId,
debugFileName: false,
}),
{ isIdentifier: true },
);
if (debugIdOrDeclaration && typeof debugIdOrDeclaration === 'object') {
appendCss(
{
type: 'property',
name: `--${cssVarName}`,
rule: buildPropertyRule(debugIdOrDeclaration),
},
getFileScope(),
);
}
return `var(--${cssVarName})` as const;
}
export function createGlobalVar(name: string): CSSVarFunction;
export function createGlobalVar(
name: string,
declaration: VarDeclaration,
): CSSVarFunction;
export function createGlobalVar(
name: string,
declaration?: VarDeclaration,
): CSSVarFunction {
if (declaration && typeof declaration === 'object') {
appendCss(
{
type: 'property',
name: `--${name}`,
rule: buildPropertyRule(declaration),
},
getFileScope(),
);
}
return `var(--${name})`;
}
export function assertVarName(
value: unknown,
): asserts value is `var(--${string})` {
if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
throw new Error(`Invalid variable name: ${value}`);
}
}
export function fallbackVar(
...values: [string, ...Array]
): CSSVarFunction {
let finalValue = '';
values.reverse().forEach((value) => {
if (finalValue === '') {
finalValue = String(value);
} else {
assertVarName(value);
finalValue = value.replace(/\)$/, `, ${finalValue})`);
}
});
return finalValue as CSSVarFunction;
}
export function assignVars(
varContract: VarContract,
tokens: MapLeafNodes,
): Record {
const varSetters: { [cssVarName: string]: string } = {};
const { valid, diffString } = validateContract(varContract, tokens);
if (!valid) {
throw new Error(`Tokens don't match contract.\n${diffString}`);
}
walkObject(tokens, (value, path) => {
varSetters[get(varContract, path)] = String(value);
});
return varSetters;
}
export function createThemeContract(
tokens: ThemeTokens,
): ThemeVars {
return walkObject(tokens, (_value, path) => {
return createVar(path.join('-'));
});
}
export function createGlobalThemeContract(
tokens: ThemeTokens,
): ThemeVars;
export function createGlobalThemeContract(
tokens: ThemeTokens,
mapFn: (value: string | null, path: Array) => string,
): ThemeVars;
export function createGlobalThemeContract(
tokens: Tokens | NullableTokens,
mapFn?: (value: string | null, path: Array) => string,
) {
return walkObject(tokens, (value, path) => {
const rawVarName =
typeof mapFn === 'function'
? mapFn(value as string | null, path)
: (value as string);
const varName =
typeof rawVarName === 'string' ? rawVarName.replace(/^--/, '') : null;
if (
typeof varName !== 'string' ||
varName !== cssesc(varName, { isIdentifier: true })
) {
throw new Error(
`Invalid variable name for "${path.join('.')}": ${varName}`,
);
}
return `var(--${varName})`;
});
}
================================================
FILE: packages/css/src/viewTransition.ts
================================================
import { generateIdentifier } from './identifier';
// createViewTransition is used for locally scoping CSS view transitions
// For now it is mostly just an alias of generateIdentifier
export const createViewTransition = (debugId?: string): string =>
generateIdentifier(debugId);
================================================
FILE: packages/css/transformCss/package.json
================================================
{
"main": "dist/vanilla-extract-css-transformCss.cjs.js",
"module": "dist/vanilla-extract-css-transformCss.esm.js",
"browser": {
"./dist/vanilla-extract-css-transformCss.cjs.js": "./dist/vanilla-extract-css-transformCss.browser.cjs.js",
"./dist/vanilla-extract-css-transformCss.esm.js": "./dist/vanilla-extract-css-transformCss.browser.esm.js"
},
"sideEffects": false,
"exports": {
"./package.json": "./package.json",
".": {
"browser": {
"module": "./dist/vanilla-extract-css-transformCss.browser.esm.js",
"default": "./dist/vanilla-extract-css-transformCss.browser.cjs.js"
},
"module": "./dist/vanilla-extract-css-transformCss.esm.js",
"default": "./dist/vanilla-extract-css-transformCss.cjs.js"
}
}
}
================================================
FILE: packages/css/vanilla.virtual.css
================================================
/*
This is a noop file for extracted CSS source to point to.
Some loaders, like Webpack and Turbopack, require a file to exist on disk for virtual source files.
For turbopack specifically, this reference file must be resolvable from any context where css is imported
even if the next plugin itself isn't available (for example, in a monorepo).
*/
================================================
FILE: packages/dynamic/CHANGELOG.md
================================================
# @vanilla-extract/dynamic
## 2.1.5
### Patch Changes
- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert "Improve ESM package entrypoints (#1597)" to fix `Named export not found` error when importing ESM entrypoints
- Updated dependencies [[`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd)]:
- @vanilla-extract/private@1.0.9
## 2.1.4
### Patch Changes
- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path
- Updated dependencies [[`9d16de8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9d16de85b149b531f2e049e8d93bdb862667ff1f), [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e)]:
- @vanilla-extract/private@1.0.8
## 2.1.3
### Patch Changes
- Updated dependencies [[`134117d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/134117d32e25d92edc24c8c863d757294d7b5df8)]:
- @vanilla-extract/private@1.0.7
## 2.1.2
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/private@1.0.6
## 2.1.1
### Patch Changes
- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/private@1.0.5
## 2.1.0
### Minor Changes
- [#1175](https://github.com/vanilla-extract-css/vanilla-extract/pull/1175) [`ca854f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca854f51d5068fb1105a44b3d9af2852d4b61839) Thanks [@youngkyo0504](https://github.com/youngkyo0504)! - `assignInlineVars` now accepts `null` and `undefined` values
Variables with a value of `null` or `undefined` will be omitted from the resulting inline style.
**NOTE:** This only applies to the case where a theme contract is not provided.
```tsx
import { assignInlineVars } from '@vanilla-extract/dynamic';
import {
container,
brandColor,
textColor
} from './styles.css.ts';
// If `tone` is `undefined`, the following inline style becomes:
// { '--brandColor__8uideo0': 'pink' }
const MyComponent = ({ tone }: { tone?: critical }) => (
);
```
- [#1175](https://github.com/vanilla-extract-css/vanilla-extract/pull/1175) [`ca854f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca854f51d5068fb1105a44b3d9af2852d4b61839) Thanks [@youngkyo0504](https://github.com/youngkyo0504)! - `setElementVars` now accepts `null` and `undefined` values
Variables with a value of `null` or `undefined` will not be assigned a value.
**NOTE:** This only applies to the case where a theme contract is not provided.
```ts
import { setElementVars } from '@vanilla-extract/dynamic';
import { brandColor, textColor } from './styles.css.ts';
const el = document.getElementById('myElement');
setElementVars(el, {
[brandColor]: 'pink',
[textColor]: null
});
```
## 2.0.3
### Patch Changes
- [#854](https://github.com/vanilla-extract-css/vanilla-extract/pull/854) [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e) Thanks [@mrm007](https://github.com/mrm007)! - Bundle TypeScript declaration files (`.d.ts`) when building packages
## 2.0.2
### Patch Changes
- [#520](https://github.com/vanilla-extract-css/vanilla-extract/pull/520) [`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Transpile code to meet [esmodules target](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)
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`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/private@1.0.3
## 2.0.1
### Patch Changes
- [#508](https://github.com/vanilla-extract-css/vanilla-extract/pull/508) [`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `exports` field to `package.json` so nested package paths can be imported in a Node.js ESM context
## 2.0.0
### Major Changes
- [#276](https://github.com/vanilla-extract-css/vanilla-extract/pull/276) [`4bcbd6f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4bcbd6f4ac0170a09553ce8d44ca84361782cce5) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `assignInlineVars` and `setElementVars` functions
**assignInlineVars**
Assigns CSS Variables as inline styles.
```tsx
// app.tsx
import { assignInlineVars } from '@vanilla-extract/dynamic';
import { vars } from './vars.css.ts';
const MyComponent = () => (
);
```
You can also assign collections of variables by passing a theme contract as the first argument. All variables must be assigned or it’s a type error.
```tsx
// app.tsx
import { assignInlineVars } from '@vanilla-extract/dynamic';
import { vars } from './vars.css.ts';
const MyComponent = () => (
);
```
Even though this function returns an object of inline styles, its `toString` method returns a valid `style` attribute value so that it can be used in string templates.
```tsx
// app.ts
import { assignInlineVars } from '@vanilla-extract/dynamic';
import { vars } from './vars.css.ts';
document.write(`
`);
```
**setElementVars**
Sets CSS Variables on a DOM element.
```tsx
// app.ts
import { setElementVars } from '@vanilla-extract/dynamic';
import { vars } from './styles.css.ts';
const el = document.getElementById('myElement');
setElementVars(el, {
[vars.colors.brand]: 'pink',
[vars.colors.accent]: 'green'
});
```
You can also set collections of variables by passing a theme contract as the second argument. All variables must be set or it’s a type error.
```tsx
// app.ts
import { setElementVars } from '@vanilla-extract/dynamic';
import { vars } from './styles.css.ts';
const el = document.getElementById('myElement');
setElementVars(el, vars.colors, {
brand: 'pink',
accent: 'green'
});
```
**BREAKING CHANGE**
These functions replace `createInlineTheme`, `setElementTheme` and `setElementVar`.
`assignInlineVars` works as a drop-in replacement for `createInlineTheme`.
```diff
-createInlineTheme(vars, { brandColor: 'red' });
+assignInlineVars(vars, { brandColor: 'red' });
```
`setElementVars` works as a drop-in replacement for `setElementTheme`.
```diff
-setElementTheme(el, vars, { brandColor: 'red' });
+setElementVars(el, vars, { brandColor: 'red' });
```
You can replicate the functionality of `setElementVar` by passing an object with dynamic keys to `setElementVars`. This now makes it easy to support setting multiple vars at once.
```diff
-setElementVar(el, vars.brandColor, 'red');
+setElementVars(el, {
+ [vars.brandColor]: 'red'
+});
```
## 1.0.0
### Major Changes
- [#171](https://github.com/vanilla-extract-css/vanilla-extract/pull/171) [`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1
### Patch Changes
- Updated dependencies [[`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869)]:
- @vanilla-extract/private@1.0.0
================================================
FILE: packages/dynamic/package.json
================================================
{
"name": "@vanilla-extract/dynamic",
"version": "2.1.5",
"description": "Zero-runtime Stylesheets-in-TypeScript",
"sideEffects": false,
"main": "dist/vanilla-extract-dynamic.cjs.js",
"module": "dist/vanilla-extract-dynamic.esm.js",
"types": "dist/vanilla-extract-dynamic.cjs.d.ts",
"exports": {
"./package.json": "./package.json",
".": {
"types": "./dist/vanilla-extract-dynamic.cjs.d.ts",
"module": "./dist/vanilla-extract-dynamic.esm.js",
"default": "./dist/vanilla-extract-dynamic.cjs.js"
}
},
"files": [
"/dist"
],
"repository": {
"type": "git",
"url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
"directory": "packages/dynamic"
},
"author": "SEEK",
"license": "MIT",
"dependencies": {
"@vanilla-extract/private": "workspace:^"
},
"devDependencies": {
"@vanilla-extract/css": "workspace:^"
}
}
================================================
FILE: packages/dynamic/src/assignInlineVars.css.ts
================================================
import { createThemeContract } from '@vanilla-extract/css';
export const vars = createThemeContract({
foo: { bar: null },
baz: { qux: null },
});
================================================
FILE: packages/dynamic/src/assignInlineVars.test.ts
================================================
import { describe, expect, it } from 'vitest';
import { assignInlineVars } from './';
import { vars } from './assignInlineVars.css.ts';
describe('assignInlineVars', () => {
describe('basic assignment', () => {
const style = assignInlineVars({
[vars.foo.bar]: '1',
[vars.baz.qux]: '2',
'--global-var-1': '3',
'--global-var-2': '4',
'--global-var-3': undefined,
'--global-var-4': null,
});
it('assigns vars', () => {
expect(style).toMatchInlineSnapshot(`
{
"--baz-qux__17tpfwq1": "2",
"--foo-bar__17tpfwq0": "1",
"--global-var-1": "3",
"--global-var-2": "4",
}
`);
});
it('converts to valid inline styles when calling toString', () => {
expect(style.toString()).toMatchInlineSnapshot(
`"--foo-bar__17tpfwq0:1;--baz-qux__17tpfwq1:2;--global-var-1:3;--global-var-2:4"`,
);
});
});
describe('contract assignment', () => {
const style = assignInlineVars(vars, {
foo: { bar: '1' },
baz: { qux: '2' },
});
it('assigns contract vars', () => {
expect(style).toMatchInlineSnapshot(`
{
"--baz-qux__17tpfwq1": "2",
"--foo-bar__17tpfwq0": "1",
}
`);
});
it('converts to valid inline styles when calling toString', () => {
expect(style.toString()).toMatchInlineSnapshot(
`"--foo-bar__17tpfwq0:1;--baz-qux__17tpfwq1:2"`,
);
});
});
});
================================================
FILE: packages/dynamic/src/assignInlineVars.ts
================================================
import {
walkObject,
get,
getVarName,
type Contract,
type MapLeafNodes,
} from '@vanilla-extract/private';
type Styles = { [cssVarName: string]: string };
export function assignInlineVars(
vars: Record,
): Styles;
export function assignInlineVars(
contract: ThemeContract,
tokens: MapLeafNodes,
): Styles;
export function assignInlineVars(varsOrContract: any, tokens?: any) {
const styles: Styles = {};
if (typeof tokens === 'object') {
const contract = varsOrContract;
walkObject(tokens, (value, path) => {
if (value == null) {
return;
}
const varName = get(contract, path);
styles[getVarName(varName)] = String(value);
});
} else {
const vars = varsOrContract;
for (const varName in vars) {
const value = vars[varName];
if (value == null) {
continue;
}
styles[getVarName(varName)] = value;
}
}
Object.defineProperty(styles, 'toString', {
value: function () {
return Object.keys(this)
.map((key) => `${key}:${this[key]}`)
.join(';');
},
writable: false,
});
return styles;
}
================================================
FILE: packages/dynamic/src/index.ts
================================================
export { assignInlineVars } from './assignInlineVars';
export { setElementVars } from './setElementVars';
================================================
FILE: packages/dynamic/src/setElementVars.test.ts
================================================
import { describe, expect, it } from 'vitest';
/**
* @vitest-environment jsdom
*/
import { setElementVars } from './';
import { vars } from './assignInlineVars.css.ts';
describe('setElementVars', () => {
it('assigns vars', () => {
const el = document.body.appendChild(document.createElement('div'));
setElementVars(el, {
[vars.foo.bar]: '1',
[vars.baz.qux]: '2',
'--global-var-1': '3',
'--global-var-2': '4',
'--global-var-3': undefined,
'--global-var-4': null,
});
// Can't query CSS vars directly as jsdom doesn't support it
expect(el.getAttribute('style')).toMatchInlineSnapshot(
`"--foo-bar__17tpfwq0: 1; --baz-qux__17tpfwq1: 2; --global-var-1: 3; --global-var-2: 4;"`,
);
});
it('assigns contract vars', () => {
const el = document.body.appendChild(document.createElement('div'));
setElementVars(el, vars, {
foo: { bar: '1' },
baz: { qux: '2' },
});
// Can't query CSS vars directly as jsdom doesn't support it
expect(el.getAttribute('style')).toMatchInlineSnapshot(
`"--foo-bar__17tpfwq0: 1; --baz-qux__17tpfwq1: 2;"`,
);
});
});
================================================
FILE: packages/dynamic/src/setElementVars.ts
================================================
import {
get,
walkObject,
getVarName,
type Contract,
type MapLeafNodes,
} from '@vanilla-extract/private';
function setVar(element: HTMLElement, variable: string, value: string) {
element.style.setProperty(getVarName(variable), value);
}
export function setElementVars(
element: HTMLElement,
vars: Record,
): void;
export function setElementVars(
element: HTMLElement,
contract: ThemeContract,
tokens: MapLeafNodes,
): void;
export function setElementVars(
element: HTMLElement,
varsOrContract: any,
tokens?: any,
): void {
if (typeof tokens === 'object') {
const contract = varsOrContract;
walkObject(tokens, (value, path) => {
if (value == null) {
return;
}
setVar(element, get(contract, path), String(value));
});
} else {
const vars = varsOrContract;
for (const varName in vars) {
const value = vars[varName];
if (value == null) {
continue;
}
setVar(element, varName, vars[varName]);
}
}
}
================================================
FILE: packages/dynamic/src/setElementVarts.css.ts
================================================
import { createThemeContract } from '@vanilla-extract/css';
export const vars = createThemeContract({
foo: { bar: null },
baz: { qux: null },
});
================================================
FILE: packages/esbuild-plugin/CHANGELOG.md
================================================
# @vanilla-extract/esbuild-plugin
## 2.3.22
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@8.0.8
## 2.3.21
### Patch Changes
- Updated dependencies [[`a440470`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a440470b9912aab705ae32cd5248ff6479535704)]:
- @vanilla-extract/integration@8.0.7
## 2.3.20
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@8.0.6
## 2.3.19
### Patch Changes
- Updated dependencies [[`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1)]:
- @vanilla-extract/integration@8.0.5
## 2.3.18
### Patch Changes
- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert "Improve ESM package entrypoints (#1597)" to fix `Named export not found` error when importing ESM entrypoints
- Updated dependencies []:
- @vanilla-extract/integration@8.0.4
## 2.3.17
### Patch Changes
- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path
- Updated dependencies []:
- @vanilla-extract/integration@8.0.3
## 2.3.16
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@8.0.2
## 2.3.15
### Patch Changes
- Updated dependencies [[`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483)]:
- @vanilla-extract/integration@8.0.1
## 2.3.14
### Patch Changes
- Updated dependencies [[`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3), [`ec0b024`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ec0b024fd19c133c233445f9e860626d104f9d97), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3)]:
- @vanilla-extract/integration@8.0.0
## 2.3.13
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@7.1.12
## 2.3.12
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@7.1.11
## 2.3.11
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@7.1.10
## 2.3.10
### Patch Changes
- Updated dependencies [[`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047)]:
- @vanilla-extract/integration@7.1.9
## 2.3.9
### Patch Changes
- Updated dependencies [[`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b), [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/integration@7.1.8
## 2.3.8
### Patch Changes
- Updated dependencies [[`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e)]:
- @vanilla-extract/integration@7.1.7
## 2.3.7
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@7.1.6
## 2.3.6
### Patch Changes
- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/integration@7.1.5
## 2.3.5
### Patch Changes
- Updated dependencies [[`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14)]:
- @vanilla-extract/integration@7.0.0
## 2.3.4
### Patch Changes
- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Update dependencies
- Updated dependencies [[`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a), [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a)]:
- @vanilla-extract/integration@6.4.0
## 2.3.3
### Patch Changes
- [#1291](https://github.com/vanilla-extract-css/vanilla-extract/pull/1291) [`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1) Thanks [@mrm007](https://github.com/mrm007)! - Update dependency `@vanilla-extract/integration`
- [#1254](https://github.com/vanilla-extract-css/vanilla-extract/pull/1254) [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0) Thanks [@EvgenNoskov](https://github.com/EvgenNoskov)! - Allow hyphens in class names when using a custom identifier
## 2.3.2
### Patch Changes
- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14
- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e), [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:
- @vanilla-extract/integration@6.2.5
## 2.3.1
### Patch Changes
- [#1232](https://github.com/vanilla-extract-css/vanilla-extract/pull/1232) [`ca68a90`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca68a9091111cf137071fb43a658952d9aaba71d) Thanks [@mrm007](https://github.com/mrm007)! - Make `esbuild` an optional peer dependency
## 2.3.0
### Minor Changes
- [#1160](https://github.com/vanilla-extract-css/vanilla-extract/pull/1160) [`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180) Thanks [@SombreroElGringo](https://github.com/SombreroElGringo)! - Users can now provide a custom identifier hashing function
## 2.2.2
### Patch Changes
- [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Bump esbuild to v0.17.6
- Updated dependencies [[`45d3b86`](https://github.com/vanilla-extract-css/vanilla-extract/commit/45d3b86960027cdfa81989f8e2036a6768cc1e1d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/integration@6.2.0
## 2.2.1
### Patch Changes
- [#973](https://github.com/vanilla-extract-css/vanilla-extract/pull/973) [`cc60aa8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cc60aa81bbb51e5b6bd3d0241ad68f3deb3b1b9a) Thanks [@cliffordfajardo](https://github.com/cliffordfajardo)! - Upgrade esbuild `^0.11.16` to `^0.16.3`
- Updated dependencies [[`eea3c7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/eea3c7d1595cd881e68cfbb279c641dc2fdd9101), [`cc60aa8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cc60aa81bbb51e5b6bd3d0241ad68f3deb3b1b9a)]:
- @vanilla-extract/integration@6.0.2
## 2.2.0
### Minor Changes
- [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add automatic debug IDs
Automatic debug IDs allow your styles and other identifiers (e.g. CSS Vars, keyframes, etc) to have names that more closely reflect your source code when in development. This makes it easier to understand how the CSS output links to your source code.
```ts
// styles.css.ts
// redBox ~= 'styles_redBox_asdfgj'
const redBox = style({
background: 'red'
});
```
### Patch Changes
- Updated dependencies [[`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0)]:
- @vanilla-extract/integration@6.0.0
## 2.1.0
### Minor Changes
- [#668](https://github.com/vanilla-extract-css/vanilla-extract/pull/668) [`e373b51`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e373b51bfa8401e0746596adafbda350c9fad4c3) Thanks [@AndrewLeedham](https://github.com/AndrewLeedham)! - Add esbuild configurations to vite/esbuild/rollup plugins
### Patch Changes
- Updated dependencies [[`e373b51`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e373b51bfa8401e0746596adafbda350c9fad4c3)]:
- @vanilla-extract/integration@5.0.0
## 2.0.5
### Patch Changes
- [#673](https://github.com/vanilla-extract-css/vanilla-extract/pull/673) [`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix issue where `.css.ts` files with the same file path from other packages could have identifier collisions
- Updated dependencies [[`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140)]:
- @vanilla-extract/integration@4.0.1
## 2.0.4
### Patch Changes
- [#647](https://github.com/vanilla-extract-css/vanilla-extract/pull/647) [`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Allow CSS url imports to be resolved
- Updated dependencies [[`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636)]:
- @vanilla-extract/integration@4.0.0
## 2.0.3
### Patch Changes
- [#621](https://github.com/vanilla-extract-css/vanilla-extract/pull/621) [`bec1cd8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bec1cd88d78071a995edc76a5c626f361fafcda9) Thanks [@nayaabkhan](https://github.com/nayaabkhan)! - Improve build performance when creating large CSS files
- Updated dependencies [[`bec1cd8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bec1cd88d78071a995edc76a5c626f361fafcda9), [`e1550da`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1550dac59011c8161317f5f0b792a0dd520bbd4), [`e1550da`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1550dac59011c8161317f5f0b792a0dd520bbd4)]:
- @vanilla-extract/integration@3.0.0
## 2.0.2
### Patch Changes
- [#543](https://github.com/vanilla-extract-css/vanilla-extract/pull/543) [`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure code is compatible with node 12
- Updated dependencies [[`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013)]:
- @vanilla-extract/integration@2.0.1
## 2.0.1
### Patch Changes
- Updated dependencies [[`64791f3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64791f39c7090eeb301796b15218f51d43532e69)]:
- @vanilla-extract/integration@2.0.0
## 2.0.0
### Major Changes
- [#323](https://github.com/vanilla-extract-css/vanilla-extract/pull/323) [`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275) Thanks [@mattcompiles](https://github.com/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`
```js
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](https://esbuild.github.io/api/#minify).
### Patch Changes
- Updated dependencies [[`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275)]:
- @vanilla-extract/integration@1.2.0
## 1.2.0
### Minor Changes
- [#259](https://github.com/vanilla-extract-css/vanilla-extract/pull/259) [`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a) Thanks [@markdalgleish](https://github.com/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.
```ts
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'
});
```
### Patch Changes
- Updated dependencies [[`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a)]:
- @vanilla-extract/integration@1.1.0
## 1.1.0
### Minor Changes
- [#183](https://github.com/vanilla-extract-css/vanilla-extract/pull/183) [`6721228`](https://github.com/vanilla-extract-css/vanilla-extract/commit/672122828f763193c9086706ba969caa6c564761) Thanks [@Brendan-csel](https://github.com/Brendan-csel)! - Add `processCss` plugin option to allow further processing of CSS while bundling.
**Example for postcss with autoprefixer:**
```js
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 */
}
);
return result.css;
}
require('esbuild')
.build({
entryPoints: ['app.ts'],
bundle: true,
plugins: [
vanillaExtractPlugin({
processCss
})
],
outfile: 'out.js'
})
.catch(() => process.exit(1));
```
## 1.0.0
### Major Changes
- [#171](https://github.com/vanilla-extract-css/vanilla-extract/pull/171) [`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1
### Patch Changes
- Updated dependencies [[`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869)]:
- @vanilla-extract/integration@1.0.0
## 0.2.2
### Patch Changes
- [#134](https://github.com/vanilla-extract-css/vanilla-extract/pull/134) [`b99dd0a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b99dd0a2d6ce171b4776aa11d0ab2c7e1559ddae) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Move shared logic to integration package
## 0.2.1
### Patch Changes
- [#68](https://github.com/vanilla-extract-css/vanilla-extract/pull/68) [`0cfd17d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0cfd17d89b3bb6ad4ae4f5bb05dce9015a33840e) Thanks [@jahredhope](https://github.com/jahredhope)! - Fix errors occurring when using TypeScript in .css.ts files
## 0.2.0
### Minor Changes
- [#53](https://github.com/vanilla-extract-css/vanilla-extract/pull/53) [`58e4f8a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/58e4f8aa6a2c56c5f26408539756529705a598b8) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Support exporting functions from `.css.ts` files via recipes
### Patch Changes
- Updated dependencies [[`48c4a78`](https://github.com/vanilla-extract-css/vanilla-extract/commit/48c4a7866a8361de712b89b06abb380bf4709656), [`2d98bcc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2d98bccb40603585cf9eab70ff0afc52c33f803d)]:
- @vanilla-extract/css@0.4.0
## 0.1.2
### Patch Changes
- Updated dependencies [[`156b491`](https://github.com/vanilla-extract-css/vanilla-extract/commit/156b49182367bf233564eae7fd3ea9d3f50fd68a), [`ae9864c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ae9864c727c2edd0d415b77f738a3c959c98fca6), [`756d9b0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/756d9b0d0305e8b8a63f0ca1ebe635ab320a5f5b)]:
- @vanilla-extract/css@0.3.0
## 0.1.1
### Patch Changes
- [#30](https://github.com/vanilla-extract-css/vanilla-extract/pull/30) [`b4591d5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b4591d568796ac7d79a588d0e7ad453dc45532f8) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix hash context information not being applied
This change makes it so all files with a valid CSS file extension (e.g. `.css.ts`) get hash context information (internally referred to as `filescope`) applied. This fixes some situations where the "New styles cannot be registered dynamically after initial boot" error would occur incorrectly.
## 0.1.0
### Minor Changes
- [#20](https://github.com/vanilla-extract-css/vanilla-extract/pull/20) [`3311914`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3311914d92406cda5d5bb71ee72075501f868bd5) Thanks [@mattcompiles](https://github.com/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.
* [#20](https://github.com/vanilla-extract-css/vanilla-extract/pull/20) [`3311914`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3311914d92406cda5d5bb71ee72075501f868bd5) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Remove `projectRoot` option in favor of `package.json` resolution
### Patch Changes
- Updated dependencies [[`3311914`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3311914d92406cda5d5bb71ee72075501f868bd5), [`c4bedd5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c4bedd571f0c21291b58e050589b4db9465c0460)]:
- @vanilla-extract/css@0.2.0
## 0.0.2
### Patch Changes
- [#16](https://github.com/vanilla-extract-css/vanilla-extract/pull/16) [`ebb3edc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ebb3edc5a9048559410e5fbbadf82a9de799bb09) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Trigger rebuild for CSS file dependencies
================================================
FILE: packages/esbuild-plugin/package.json
================================================
{
"name": "@vanilla-extract/esbuild-plugin",
"version": "2.3.22",
"description": "Zero-runtime Stylesheets-in-TypeScript",
"main": "dist/vanilla-extract-esbuild-plugin.cjs.js",
"module": "dist/vanilla-extract-esbuild-plugin.esm.js",
"types": "dist/vanilla-extract-esbuild-plugin.cjs.d.ts",
"files": [
"/dist"
],
"repository": {
"type": "git",
"url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
"directory": "packages/esbuild-plugin"
},
"author": "SEEK",
"license": "MIT",
"dependencies": {
"@vanilla-extract/integration": "workspace:^"
},
"peerDependencies": {
"esbuild": ">=0.17.6"
},
"peerDependenciesMeta": {
"esbuild": {
"optional": true
}
},
"devDependencies": {
"esbuild": "~0.27.0"
}
}
================================================
FILE: packages/esbuild-plugin/src/index.ts
================================================
import { dirname, join } from 'path';
import {
cssFileFilter,
virtualCssFileFilter,
processVanillaFile,
getSourceFromVirtualCssFile,
compile,
vanillaExtractTransformPlugin,
type IdentifierOption,
type CompileOptions,
} from '@vanilla-extract/integration';
import type { Plugin } from 'esbuild';
const vanillaCssNamespace = 'vanilla-extract-css-ns';
interface VanillaExtractPluginOptions {
outputCss?: boolean;
/**
* @deprecated Use `esbuildOptions.external` instead.
*/
externals?: Array;
runtime?: boolean;
processCss?: (css: string) => Promise;
identifiers?: IdentifierOption;
esbuildOptions?: CompileOptions['esbuildOptions'];
}
export function vanillaExtractPlugin({
outputCss,
externals = [],
runtime = false,
processCss,
identifiers,
esbuildOptions,
}: VanillaExtractPluginOptions = {}): Plugin {
if (runtime) {
// If using runtime CSS then just apply fileScopes and debug IDs to code
return vanillaExtractTransformPlugin({ identOption: identifiers });
}
return {
name: 'vanilla-extract',
setup(build) {
build.onResolve({ filter: virtualCssFileFilter }, (args) => {
return {
path: args.path,
namespace: vanillaCssNamespace,
};
});
build.onLoad(
{ filter: /.*/, namespace: vanillaCssNamespace },
async ({ path }) => {
let { source, fileName } = await getSourceFromVirtualCssFile(path);
if (typeof processCss === 'function') {
source = await processCss(source);
}
const rootDir = build.initialOptions.absWorkingDir ?? process.cwd();
const resolveDir = dirname(join(rootDir, fileName));
return {
contents: source,
loader: 'css',
resolveDir,
};
},
);
build.onLoad({ filter: cssFileFilter }, async ({ path }) => {
const combinedEsbuildOptions = { ...esbuildOptions };
const identOption =
identifiers ?? (build.initialOptions.minify ? 'short' : 'debug');
// To avoid a breaking change this combines the `external` option from
// esbuildOptions with the pre-existing externals option.
if (externals) {
if (combinedEsbuildOptions.external) {
combinedEsbuildOptions.external.push(...externals);
} else {
combinedEsbuildOptions.external = externals;
}
}
const { source, watchFiles } = await compile({
filePath: path,
cwd: build.initialOptions.absWorkingDir,
esbuildOptions: combinedEsbuildOptions,
identOption,
});
const contents = await processVanillaFile({
source,
filePath: path,
outputCss,
identOption,
});
return {
contents,
loader: 'js',
watchFiles,
};
});
},
};
}
================================================
FILE: packages/esbuild-plugin-next/CHANGELOG.md
================================================
# @vanilla-extract/esbuild-plugin-next
## 0.0.10
### Patch Changes
- Updated dependencies [[`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047)]:
- @vanilla-extract/integration@7.1.9
## 0.0.9
### Patch Changes
- Updated dependencies [[`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b), [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/integration@7.1.8
## 0.0.8
### Patch Changes
- Updated dependencies [[`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e)]:
- @vanilla-extract/integration@7.1.7
## 0.0.7
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@7.1.6
## 0.0.6
### Patch Changes
- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/integration@7.1.5
## 0.0.5
### Patch Changes
- [#1309](https://github.com/vanilla-extract-css/vanilla-extract/pull/1309) [`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14) Thanks [@mrm007](https://github.com/mrm007)! - Correctly resolve module paths when using Vite plugins that affect module resolution, such as [`vite-tsconfig-paths`](https://github.com/aleclarson/vite-tsconfig-paths)
- Updated dependencies [[`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14)]:
- @vanilla-extract/integration@7.0.0
## 0.0.4
### Patch Changes
- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Update dependencies
- Updated dependencies [[`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a), [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a)]:
- @vanilla-extract/integration@6.4.0
## 0.0.3
### Patch Changes
- [#1291](https://github.com/vanilla-extract-css/vanilla-extract/pull/1291) [`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1) Thanks [@mrm007](https://github.com/mrm007)! - Update dependency `@vanilla-extract/integration`
## 0.0.2
### Patch Changes
- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14
- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e), [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:
- @vanilla-extract/integration@6.2.5
## 0.0.1
### Patch Changes
- [#1232](https://github.com/vanilla-extract-css/vanilla-extract/pull/1232) [`ca68a90`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca68a9091111cf137071fb43a658952d9aaba71d) Thanks [@mrm007](https://github.com/mrm007)! - Make `esbuild` an optional peer dependency
================================================
FILE: packages/esbuild-plugin-next/package.json
================================================
{
"private": true,
"name": "@vanilla-extract/esbuild-plugin-next",
"version": "0.0.10",
"description": "Zero-runtime Stylesheets-in-TypeScript",
"main": "dist/vanilla-extract-esbuild-plugin-next.cjs.js",
"module": "dist/vanilla-extract-esbuild-plugin-next.esm.js",
"types": "dist/vanilla-extract-esbuild-plugin-next.cjs.d.ts",
"files": [
"/dist"
],
"repository": {
"type": "git",
"url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
"directory": "packages/esbuild-plugin-next"
},
"author": "SEEK",
"license": "MIT",
"dependencies": {
"@vanilla-extract/compiler": "workspace:^",
"@vanilla-extract/integration": "workspace:^"
},
"peerDependencies": {
"esbuild": ">=0.17.6"
},
"peerDependenciesMeta": {
"esbuild": {
"optional": true
}
},
"devDependencies": {
"esbuild": "~0.27.0"
}
}
================================================
FILE: packages/esbuild-plugin-next/src/index.ts
================================================
import { dirname } from 'path';
import {
type CreateCompilerOptions,
createCompiler,
} from '@vanilla-extract/compiler';
import {
cssFileFilter,
vanillaExtractTransformPlugin,
type IdentifierOption,
} from '@vanilla-extract/integration';
import type { Plugin } from 'esbuild';
const vanillaCssNamespace = 'vanilla-extract-css-ns';
interface VanillaExtractPluginOptions {
outputCss?: boolean;
runtime?: boolean;
processCss?: (css: string) => Promise;
identifiers?: IdentifierOption;
compilerVitePlugins?: CreateCompilerOptions['vitePlugins'];
}
export function vanillaExtractPlugin({
outputCss = true,
runtime = false,
processCss,
identifiers: identOption,
compilerVitePlugins: vitePlugins,
}: VanillaExtractPluginOptions = {}): Plugin {
if (runtime) {
// If using runtime CSS then just apply fileScopes and debug IDs to code
return vanillaExtractTransformPlugin({ identOption });
}
return {
name: 'vanilla-extract',
async setup(build) {
const root = build.initialOptions.absWorkingDir || process.cwd();
const identifiers =
identOption || (build.initialOptions.minify ? 'short' : 'debug');
const compiler = createCompiler({ root, identifiers, vitePlugins });
build.onDispose(async () => {
await compiler.close();
});
build.onResolve({ filter: /\.vanilla\.css/ }, (args) => {
return {
path: args.path,
namespace: vanillaCssNamespace,
};
});
build.onLoad(
{ filter: /.*/, namespace: vanillaCssNamespace },
async ({ path }) => {
const [vanillaModulePath] = path.split('.vanilla.css');
let { css, filePath } = compiler.getCssForFile(vanillaModulePath);
if (typeof processCss === 'function') {
css = await processCss(css);
}
return {
contents: css,
loader: 'css',
resolveDir: dirname(filePath),
};
},
);
build.onLoad({ filter: cssFileFilter }, async ({ path }) => {
const { source, watchFiles } = await compiler.processVanillaFile(path, {
outputCss,
});
return {
contents: source,
loader: 'js',
watchFiles: Array.from(watchFiles),
};
});
},
};
}
================================================
FILE: packages/integration/CHANGELOG.md
================================================
# @vanilla-extract/integration
## 8.0.9
### Patch Changes
- [#1585](https://github.com/vanilla-extract-css/vanilla-extract/pull/1585) [`c34e69a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c34e69a918b55e02ce8106a193b10dcfce933437) Thanks [@sashank-gogula-glean](https://github.com/sashank-gogula-glean)! - Fixed a race condition in `processVanillaFile` that could cause missing classnames during CSS serialization
- Updated dependencies [[`9b1bfd0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9b1bfd068a61a042ff0276a901edf4e44f6c8cea)]:
- @vanilla-extract/css@1.19.1
## 8.0.8
### Patch Changes
- Updated dependencies [[`1a63a60`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1a63a600b7a707f9317ce5f6607998eba4eb9c99)]:
- @vanilla-extract/css@1.19.0
## 8.0.7
### Patch Changes
- [#1648](https://github.com/vanilla-extract-css/vanilla-extract/pull/1648) [`a440470`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a440470b9912aab705ae32cd5248ff6479535704) Thanks [@sallustfire](https://github.com/sallustfire)! - `serializeCss|deserializeCss`: Use `base64url` encoding instead of `base64` to avoid errors in virtual file paths
- Updated dependencies [[`0b2c09e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0b2c09e0fec1bee0e996f1920a106daab471178a), [`c6047fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c6047fbe3f5e55a45780aa3dffd478a7743b8b3a), [`8b49b35`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b49b354d4364ce6e0db5e8ba16c92ca3e6b9cea)]:
- @vanilla-extract/css@1.18.0
## 8.0.6
### Patch Changes
- Updated dependencies [[`11a7c66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/11a7c668683d0c3e324d4337676e807680a895bd)]:
- @vanilla-extract/css@1.17.5
## 8.0.5
### Patch Changes
- [#1653](https://github.com/vanilla-extract-css/vanilla-extract/pull/1653) [`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1) Thanks [@askoufis](https://github.com/askoufis)! - Update `esbuild` dependency range to include `^0.26.0` and `^0.27.0`
## 8.0.4
### Patch Changes
- Updated dependencies [[`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd)]:
- @vanilla-extract/babel-plugin-debug-ids@1.2.2
- @vanilla-extract/css@1.17.4
## 8.0.3
### Patch Changes
- Updated dependencies [[`f0533be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f0533be939e6835ae961e3dd10b764c0c052ee75), [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e)]:
- @vanilla-extract/css@1.17.3
- @vanilla-extract/babel-plugin-debug-ids@1.2.1
## 8.0.2
### Patch Changes
- Updated dependencies [[`134117d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/134117d32e25d92edc24c8c863d757294d7b5df8), [`c66be53`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c66be53d600802b2922da1d6034e2a5ff3fbbcae)]:
- @vanilla-extract/css@1.17.2
## 8.0.1
### Patch Changes
- [#1545](https://github.com/vanilla-extract-css/vanilla-extract/pull/1545) [`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483) Thanks [@askoufis](https://github.com/askoufis)! - Extend `esbuild` dependency range to include `0.25.x`
## 8.0.0
### Major Changes
- [#1536](https://github.com/vanilla-extract-css/vanilla-extract/pull/1536) [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3) Thanks [@askoufis](https://github.com/askoufis)! - Remove `createCompiler` function and `Compiler` and `CreateCompilerOptions` types
BREAKING CHANGE: These APIs have been moved to the new `@vanilla-extract/compiler` package
### Minor Changes
- [#1536](https://github.com/vanilla-extract-css/vanilla-extract/pull/1536) [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3) Thanks [@askoufis](https://github.com/askoufis)! - Export `serializeVanillaModule` function
### Patch Changes
- [#1530](https://github.com/vanilla-extract-css/vanilla-extract/pull/1530) [`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8) Thanks [@askoufis](https://github.com/askoufis)! - Extend `esbuild` dependency range to include `0.24.x`
- [#1535](https://github.com/vanilla-extract-css/vanilla-extract/pull/1535) [`ec0b024`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ec0b024fd19c133c233445f9e860626d104f9d97) Thanks [@askoufis](https://github.com/askoufis)! - Fixes an error that sometimes occurred when loading a page via the astro dev server
- Updated dependencies [[`c432ff3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c432ff33a8aead2c94fa6a4fcc9fcb1d7990427d)]:
- @vanilla-extract/css@1.17.1
## 7.1.12
### Patch Changes
- Updated dependencies [[`fd673f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd673f658da3b0019d19a0c7d6d9208d1685ff5b), [`fd673f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd673f658da3b0019d19a0c7d6d9208d1685ff5b), [`4abfc0b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4abfc0b47c675f9a7bfdb4c3316b1c62d2b8e558), [`fd673f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd673f658da3b0019d19a0c7d6d9208d1685ff5b)]:
- @vanilla-extract/babel-plugin-debug-ids@1.2.0
- @vanilla-extract/css@1.17.0
## 7.1.11
### Patch Changes
- Updated dependencies [[`103ce57`](https://github.com/vanilla-extract-css/vanilla-extract/commit/103ce57c98bf632a56fab1d71ae44039a77f5291)]:
- @vanilla-extract/css@1.16.1
## 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
- [#1431](https://github.com/vanilla-extract-css/vanilla-extract/pull/1431) [`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047) Thanks [@otaviomad](https://github.com/otaviomad)! - Fixes a bug in the `vite-node` compiler resulting in incorrectly ordered class compositions in certain cases
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
## 7.1.8
### Patch Changes
- [#1461](https://github.com/vanilla-extract-css/vanilla-extract/pull/1461) [`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b) Thanks [@askoufis](https://github.com/askoufis)! - Widen `esbuild` dependency range to include `~0.22.0` and `~0.23.0`
- [#1463](https://github.com/vanilla-extract-css/vanilla-extract/pull/1463) [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a) Thanks [@askoufis](https://github.com/askoufis)! - Export types with `export { type T }` syntax
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
## 7.1.7
### Patch Changes
- [#1436](https://github.com/vanilla-extract-css/vanilla-extract/pull/1436) [`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e) Thanks [@SimenB](https://github.com/SimenB)! - Extend `esbuild` dependency range to include `~0.20.0` and `~0.21.0`
## 7.1.6
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
## 7.1.5
### Patch Changes
- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/babel-plugin-debug-ids@1.0.6
- @vanilla-extract/css@1.15.2
## 7.1.4
### Patch Changes
- [#1406](https://github.com/vanilla-extract-css/vanilla-extract/pull/1406) [`5e06ada9309c46b20d318051f80121886da4ff29`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5e06ada9309c46b20d318051f80121886da4ff29) Thanks [@askoufis](https://github.com/askoufis)! - `addFileScope`: Fixes a bug where non-template strings that contained a newline where being mangled
- [#1406](https://github.com/vanilla-extract-css/vanilla-extract/pull/1406) [`5e06ada9309c46b20d318051f80121886da4ff29`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5e06ada9309c46b20d318051f80121886da4ff29) Thanks [@askoufis](https://github.com/askoufis)! - Bump `dedent` dependency to `^1.5.3`
## 7.1.3
### Patch Changes
- [#1388](https://github.com/vanilla-extract-css/vanilla-extract/pull/1388) [`606660618dc5efa6c529f77cebf9d2b8dc379dbd`](https://github.com/vanilla-extract-css/vanilla-extract/commit/606660618dc5efa6c529f77cebf9d2b8dc379dbd) Thanks [@askoufis](https://github.com/askoufis)! - Remove `lodash` dependency
- [#1386](https://github.com/vanilla-extract-css/vanilla-extract/pull/1386) [`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb) Thanks [@askoufis](https://github.com/askoufis)! - Replace `outdent` dependency with `dedent`
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 7.1.2
### Patch Changes
- [#1374](https://github.com/vanilla-extract-css/vanilla-extract/pull/1374) [`c8aefe0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c8aefe0c5fb6d8b8b82dd0f05ae837e7e2f03a9f) Thanks [@askoufis](https://github.com/askoufis)! - Update `@vanilla-extract/css` dependency
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 7.1.1
### Patch Changes
- [#1319](https://github.com/vanilla-extract-css/vanilla-extract/pull/1319) [`6f7f738`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6f7f7382495582759cececa421ef83142935772b) Thanks [@joeldavuk](https://github.com/joeldavuk)! - Update Babel dependencies to address https://github.com/advisories/GHSA-67hx-6x53-jw92
- Updated dependencies [[`6f7f738`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6f7f7382495582759cececa421ef83142935772b)]:
- @vanilla-extract/babel-plugin-debug-ids@1.0.5
## 7.1.0
### Minor Changes
- [#1314](https://github.com/vanilla-extract-css/vanilla-extract/pull/1314) [`e8a6850`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e8a6850ea360ede0ed4385421e41c069008772f2) Thanks [@mrm007](https://github.com/mrm007)! - A Vite config object can be passed to the vite-node compiler via the `viteConfig` option
`viteResolve` and `vitePlugins` options are deprecated and will be removed in a future version.
## 7.0.0
### Major Changes
- [#1309](https://github.com/vanilla-extract-css/vanilla-extract/pull/1309) [`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14) Thanks [@mrm007](https://github.com/mrm007)! - Use absolute paths internally to make sure Vite resolves modules correctly
This change only affects integrations that use the vite-node compiler, which is currently the esbuild (next) and Vite plugins
## 6.5.0
### Minor Changes
- [#1304](https://github.com/vanilla-extract-css/vanilla-extract/pull/1304) [`545bf82`](https://github.com/vanilla-extract-css/vanilla-extract/commit/545bf82f127598ac72265164c72e1a1aad558491) Thanks [@fukumasuya](https://github.com/fukumasuya)! - Add a `viteResolve` option to the vite-node compiler
This allows integrations to provide a Vite `resolve` config to the vite-node compiler, which will be used for resolving imports. These options include [`resolve.alias`], [`resolve.dedupe`], [`resolve.conditions`], [`resolve.mainFields`], [`resolve.extensions`], and others.
[`resolve.alias`]: https://vitejs.dev/config/shared-options.html#resolve-alias
[`resolve.dedupe`]: https://vitejs.dev/config/shared-options.html#resolve-dedupe
[`resolve.conditions`]: https://vitejs.dev/config/shared-options.html#resolve-conditions
[`resolve.mainFields`]: https://vitejs.dev/config/shared-options.html#resolve-mainfields
[`resolve.extensions`]: https://vitejs.dev/config/shared-options.html#resolve-extensions
## 6.4.0
### Minor Changes
- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Export a `normalizePath` function that converts path separators to forward slashes
**Example usage**
```ts
import { normalizePath } from '@vanilla-extract/integration';
normalizePath('foo\\bar'); // 'foo/bar'
normalizePath('foo/bar'); // 'foo/bar'
```
### Patch Changes
- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Update dependencies
## 6.3.0
### Minor Changes
- [#1273](https://github.com/vanilla-extract-css/vanilla-extract/pull/1273) [`959c646`](https://github.com/vanilla-extract-css/vanilla-extract/commit/959c646ad6154ef0f8e357660319c7049e8b0459) Thanks [@lars-berger](https://github.com/lars-berger)! - Allow `conditions` option to be passed through to esbuild
### Patch Changes
- [#1252](https://github.com/vanilla-extract-css/vanilla-extract/pull/1252) [`5bc98a4`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5bc98a4af30a339336ab4ef7c387d3e809586a83) Thanks [@Ethan-PageUp](https://github.com/Ethan-PageUp)! - Unpin esbuild and broaden the version range
- [#1243](https://github.com/vanilla-extract-css/vanilla-extract/pull/1243) [`1566f92`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1566f9238078a3cfefec9ae5023b56aba02875d4) Thanks [@askoufis](https://github.com/askoufis)! - Experimental `vite-node` compiler: Skip transforming CSS for files that won't generate any CSS
## 6.2.5
### Patch Changes
- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14
- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Upgrade Vite and vite-node
- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:
- @vanilla-extract/babel-plugin-debug-ids@1.0.4
## 6.2.4
### Patch Changes
- [#1238](https://github.com/vanilla-extract-css/vanilla-extract/pull/1238) [`fd5d9fc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5d9fc389b84d7de92ec86d89305185d6c4cfd4) Thanks [@askoufis](https://github.com/askoufis)! - Disable config file resolution in experimental `vite-node` compiler
## 6.2.3
### Patch Changes
- [#1195](https://github.com/vanilla-extract-css/vanilla-extract/pull/1195) [`c446b5e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c446b5e95ee4e64f7af0da484d2dda81a7f6a522) Thanks [@HelloWorld017](https://github.com/HelloWorld017)! - Ensure userland babel config can not affect integration transforms
- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/css@1.14.0
## 6.2.2
### Patch Changes
- [#1167](https://github.com/vanilla-extract-css/vanilla-extract/pull/1167) [`53fd2a6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/53fd2a6a3387a47745387f792d723deaf37d84a2) Thanks [@askoufis](https://github.com/askoufis)! - Bump `eval` to `0.1.8`
## 6.2.1
### Patch Changes
- [#1036](https://github.com/vanilla-extract-css/vanilla-extract/pull/1036) [`7e876b6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7e876b6f114e700c91734d79579863b83147231e) Thanks [@askoufis](https://github.com/askoufis)! - Sort serialized module exports
Fixes a Vanilla module serialization bug that sometimes resulted in variables being used before they were declared
## 6.2.0
### Minor Changes
- [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `createCompiler` function for creating a compiler instance that can be re-used between builds. This is a low-level function intended for use by bundler plugins and, as such, is currently undocumented. Note that in order to use the new compiler you must also update `@vanilla-extract/css` to v1.10.0.
* [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add support for `onBeginFileScope` adapter lifecycle hook
### Patch Changes
- [#1024](https://github.com/vanilla-extract-css/vanilla-extract/pull/1024) [`45d3b86`](https://github.com/vanilla-extract-css/vanilla-extract/commit/45d3b86960027cdfa81989f8e2036a6768cc1e1d) Thanks [@huw](https://github.com/huw)! - Don’t throw when failing to add debug objects to an empty file
* [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Bump esbuild to v0.17.6
* Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/css@1.10.0
## 6.1.2
### Patch Changes
- [#1031](https://github.com/vanilla-extract-css/vanilla-extract/pull/1031) [`316658f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/316658fc29341286fc14287eeeed44a36545b0c7) Thanks [@mrm007](https://github.com/mrm007)! - Add `.css.cjs` extension to the Vanilla Extract file filter
## 6.1.1
### Patch Changes
- [#996](https://github.com/vanilla-extract-css/vanilla-extract/pull/996) [`bd6ed30`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bd6ed30e0301d77ab21152e6d4a708e8ff491b74) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve Vanilla module serialization by allowing shared variables between exports
- Updated dependencies [[`8a1751c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8a1751c8fcbeaa0cfb8d894a8050535372516dd4)]:
- @vanilla-extract/babel-plugin-debug-ids@1.0.2
## 6.1.0
### Minor Changes
- [#926](https://github.com/vanilla-extract-css/vanilla-extract/pull/926) [`7074969`](https://github.com/vanilla-extract-css/vanilla-extract/commit/70749697eb281086913ba7a2ec170a375832ed1c) Thanks [@ericmatthys](https://github.com/ericmatthys)! - Allow tsconfig option to be passed through to esbuild
### Patch Changes
- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:
- @vanilla-extract/css@1.9.4
## 6.0.3
### Patch Changes
- [#970](https://github.com/vanilla-extract-css/vanilla-extract/pull/970) [`16b9a71`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16b9a71e57cd2accf7a58d2bc92dd03cd33813b6) Thanks [@roginfarrer](https://github.com/roginfarrer)! - Updated addFileScope to work with CommonJS files
## 6.0.2
### Patch Changes
- [#956](https://github.com/vanilla-extract-css/vanilla-extract/pull/956) [`eea3c7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/eea3c7d1595cd881e68cfbb279c641dc2fdd9101) Thanks [@mrm007](https://github.com/mrm007)! - Ensure support for new TypeScript language features by bumping the minimum required Babel dependency versions.
* [#973](https://github.com/vanilla-extract-css/vanilla-extract/pull/973) [`cc60aa8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cc60aa81bbb51e5b6bd3d0241ad68f3deb3b1b9a) Thanks [@cliffordfajardo](https://github.com/cliffordfajardo)! - Upgrade esbuild `^0.11.16` to `^0.16.3`
* Updated dependencies [[`eea3c7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/eea3c7d1595cd881e68cfbb279c641dc2fdd9101), [`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:
- @vanilla-extract/babel-plugin-debug-ids@1.0.1
- @vanilla-extract/css@1.9.3
## 6.0.1
### Patch Changes
- [#869](https://github.com/vanilla-extract-css/vanilla-extract/pull/869) [`2d08761`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2d08761598668c0e7066837ccb0be7b4d5637701) Thanks [@mrm007](https://github.com/mrm007)! - Use correct async Babel transform method in integration transform
- Updated dependencies [[`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39)]:
- @vanilla-extract/css@1.9.2
## 6.0.0
### Major Changes
- [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - `vanillaExtractFilescopePlugin` has been renamed to `vanillaExtractTransformPlugin`
* [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - `compile` now expects a valid `identOption` parameter
### Minor Changes
- [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `transform` and `transformSync` functions
The transform APIs can be used to append filescopes and automatic debug IDs to `.css.ts` files.
## 5.0.1
### Patch Changes
- [#801](https://github.com/vanilla-extract-css/vanilla-extract/pull/801) [`bb48520`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bb485203f85e01272e44fc26df78581f3b8b4da0) Thanks [@mrm007](https://github.com/mrm007)! - Omit [`Symbol.toStringTag`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) when serializing module exports.
## 5.0.0
### Major Changes
- [#668](https://github.com/vanilla-extract-css/vanilla-extract/pull/668) [`e373b51`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e373b51bfa8401e0746596adafbda350c9fad4c3) Thanks [@AndrewLeedham](https://github.com/AndrewLeedham)! - Add esbuild configurations to vite/esbuild/rollup plugins
### Patch Changes
- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:
- @vanilla-extract/css@1.7.2
## 4.0.1
### Patch Changes
- [#673](https://github.com/vanilla-extract-css/vanilla-extract/pull/673) [`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix issue where `.css.ts` files with the same file path from other packages could have identifier collisions
## 4.0.0
### Major Changes
- [#647](https://github.com/vanilla-extract-css/vanilla-extract/pull/647) [`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Update `addFileScope` to always update and only use file names
## 3.0.1
### Patch Changes
- [#639](https://github.com/vanilla-extract-css/vanilla-extract/pull/639) [`7b9ddfc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7b9ddfc30dacc66db11253f9d1862e7ba46b88ec) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Fix "\_\_webpack_require\_\_ is not defined" error
## 3.0.0
### Major Changes
- [#623](https://github.com/vanilla-extract-css/vanilla-extract/pull/623) [`e1550da`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1550dac59011c8161317f5f0b792a0dd520bbd4) Thanks [@mattcompiles](https://github.com/mattcompiles)! - BREAKING CHANGE
`getSourceFromVirtualCssFile` is now async.
* [#623](https://github.com/vanilla-extract-css/vanilla-extract/pull/623) [`e1550da`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1550dac59011c8161317f5f0b792a0dd520bbd4) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `serializeCss` and `deserializeCss` utilities.
BREAKING CHANGE
Remove `base64Source` from `serializeVirtualCssPath`. Use the new `serializeCss` and `deserializeCss` functions if required.
### Patch Changes
- [#621](https://github.com/vanilla-extract-css/vanilla-extract/pull/621) [`bec1cd8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bec1cd88d78071a995edc76a5c626f361fafcda9) Thanks [@nayaabkhan](https://github.com/nayaabkhan)! - Improve build performance when creating large CSS files
## 2.0.2
### Patch Changes
- [#609](https://github.com/vanilla-extract-css/vanilla-extract/pull/609) [`02f2a23`](https://github.com/vanilla-extract-css/vanilla-extract/commit/02f2a236ac0b9ce1feeac4f840eb0759e8ca1b6f) Thanks [@xnuk](https://github.com/xnuk)! - Remove unused `chalk` dep
## 2.0.1
### Patch Changes
- [#543](https://github.com/vanilla-extract-css/vanilla-extract/pull/543) [`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure code is compatible with node 12
## 2.0.0
### Major Changes
- [#517](https://github.com/vanilla-extract-css/vanilla-extract/pull/517) [`64791f3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64791f39c7090eeb301796b15218f51d43532e69) Thanks [@benjervis](https://github.com/benjervis)! - processVanillaFile is now async
### Patch Changes
- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/css@1.6.8
## 1.4.3
### Patch Changes
- [#409](https://github.com/vanilla-extract-css/vanilla-extract/pull/409) [`a9c5cb7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0) Thanks [@benjervis](https://github.com/benjervis)! - Export the fileScope functions.
`stringifyFileScope` and `parseFileScope` are now exported to be used in other packages.
- Updated dependencies [[`a9c5cb7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0)]:
- @vanilla-extract/css@1.6.2
## 1.4.2
### Patch Changes
- [#393](https://github.com/vanilla-extract-css/vanilla-extract/pull/393) [`2f379f1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2f379f118c2a2fe6dc08a1cc15a395dbc0f17ece) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix compilation errors in Vite 2.6
## 1.4.1
### Patch Changes
- [#389](https://github.com/vanilla-extract-css/vanilla-extract/pull/389) [`23d2757`](https://github.com/vanilla-extract-css/vanilla-extract/commit/23d275794d38f01049b824e3e000fb1bb2411717) Thanks [@aulneau](https://github.com/aulneau)! - This update adds `mjs` to the file `*.css.*` regex, enabling better support for ESM packages/files.
## 1.4.0
### Minor Changes
- [#348](https://github.com/vanilla-extract-css/vanilla-extract/pull/348) [`c6cd1f2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c6cd1f2eee982474c213f43fc23ee38b7a8c5e42) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `addFunctionSerializer` function
This also marks `addRecipe` as deprecated.
### Patch Changes
- Updated dependencies [[`c6cd1f2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c6cd1f2eee982474c213f43fc23ee38b7a8c5e42)]:
- @vanilla-extract/css@1.5.0
## 1.3.0
### Minor Changes
- [#341](https://github.com/vanilla-extract-css/vanilla-extract/pull/341) [`0b743e7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0b743e744447616f8daf0c6b88beff8ffef8d41b) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `addFileScope` API
### Patch Changes
- [#343](https://github.com/vanilla-extract-css/vanilla-extract/pull/343) [`50bae14`](https://github.com/vanilla-extract-css/vanilla-extract/commit/50bae14bf38c8a971ad1727cb8e827c86da06772) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Cleanup adapter after processing styles
- Updated dependencies [[`50bae14`](https://github.com/vanilla-extract-css/vanilla-extract/commit/50bae14bf38c8a971ad1727cb8e827c86da06772)]:
- @vanilla-extract/css@1.4.1
## 1.2.0
### Minor Changes
- [#323](https://github.com/vanilla-extract-css/vanilla-extract/pull/323) [`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Support configurable identifier types
### Patch Changes
- Updated dependencies [[`26832f1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/26832f162e75b72f83dba0c230295a5dfed683aa), [`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275)]:
- @vanilla-extract/css@1.3.0
## 1.1.0
### Minor Changes
- [#259](https://github.com/vanilla-extract-css/vanilla-extract/pull/259) [`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a) Thanks [@markdalgleish](https://github.com/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.
```ts
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'
});
```
### Patch Changes
- Updated dependencies [[`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a)]:
- @vanilla-extract/css@1.2.0
## 1.0.1
### Patch Changes
- [#176](https://github.com/vanilla-extract-css/vanilla-extract/pull/176) [`cbfe0de`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cbfe0def098dcf820fb710388cdc82b48436bdca) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Continue searching for package.json if one is found with no name
## 1.0.0
### Major Changes
- [#171](https://github.com/vanilla-extract-css/vanilla-extract/pull/171) [`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1
### Patch Changes
- Updated dependencies [[`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869)]:
- @vanilla-extract/css@1.0.0
## 0.1.4
### Patch Changes
- [#110](https://github.com/vanilla-extract-css/vanilla-extract/pull/110) [`e41529e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e41529e50efe22e1429e3b60f6df83e299dea6c0) Thanks [@mxmul](https://github.com/mxmul)! - Add `fileScope` to `serializeVirtualCssPath` option
## 0.1.3
### Patch Changes
- [#136](https://github.com/vanilla-extract-css/vanilla-extract/pull/136) [`2247cdc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2247cdc55c04cdaa54cce1f69361da9617179a6b) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix serialization of booleans
## 0.1.2
### Patch Changes
- [#133](https://github.com/vanilla-extract-css/vanilla-extract/pull/133) [`a50de75`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a50de7505849a317d76713d225514050a38e23e2) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve Windows support
Normalize all file paths to POSIX format. This fixes incorrect file paths on Windows and ensures consistent hashes across all operating systems.
- Updated dependencies [[`ed76e45`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ed76e450038cb7cbaf12a511fda9e2a3a6d21b96), [`4f92126`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4f92126c92d853f02e73ffadfed424b594e41166)]:
- @vanilla-extract/css@0.5.0
## 0.1.1
### Patch Changes
- [#126](https://github.com/vanilla-extract-css/vanilla-extract/pull/126) [`400ece7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/400ece75e1d2b385c2b76a80e8a6872710d3e2f9) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Normalize virtual CSS file paths for Windows
================================================
FILE: packages/integration/README.md
================================================
# @vanilla-extract/integration
This package is not intended for public consumption.
================================================
FILE: packages/integration/package.json
================================================
{
"name": "@vanilla-extract/integration",
"version": "8.0.9",
"description": "Zero-runtime Stylesheets-in-TypeScript",
"main": "dist/vanilla-extract-integration.cjs.js",
"types": "dist/vanilla-extract-integration.cjs.d.ts",
"files": [
"/dist"
],
"repository": {
"type": "git",
"url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
"directory": "packages/integration"
},
"author": "SEEK",
"license": "MIT",
"dependencies": {
"@babel/core": "^7.23.9",
"@babel/plugin-syntax-typescript": "^7.23.3",
"@vanilla-extract/babel-plugin-debug-ids": "workspace:^",
"@vanilla-extract/css": "workspace:^",
"dedent": "^1.5.3",
"esbuild": "npm:esbuild@>=0.17.6 <0.28.0",
"eval": "0.1.8",
"find-up": "^5.0.0",
"javascript-stringify": "^2.0.1",
"mlly": "^1.4.2"
},
"devDependencies": {
"@types/babel__core": "^7.20.5"
}
}
================================================
FILE: packages/integration/src/addFileScope.test.ts
================================================
import { describe, expect, test } from 'vitest';
import dedent from 'dedent';
import { sep, posix, win32 } from 'path';
import { addFileScope, normalizePath } from './addFileScope';
const raw = String.raw;
// remove quotes around the snapshot
expect.addSnapshotSerializer({
test: (val) => typeof val === 'string',
print: (val) => (val as string).trim(),
});
describe('ESM', () => {
test('should add missing fileScope', () => {
const source = dedent`
import {style} from '@vanilla-extract/css';
export const myStyle = style({});
`;
expect(
addFileScope({
source,
rootPath: '/the-root',
filePath: '/the-root/app/app.css.ts',
packageName: 'my-package',
}),
).toMatchInlineSnapshot(`
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
setFileScope("app/app.css.ts", "my-package");
import {style} from '@vanilla-extract/css';
export const myStyle = style({});
endFileScope();
`);
});
test('should add global adapter setup when "globalAdapterIdentifier" is provided', () => {
const source = dedent`
import {style} from '@vanilla-extract/css';
export const myStyle = style({});
`;
expect(
addFileScope({
source,
rootPath: '/the-root',
filePath: '/the-root/app/app.css.ts',
packageName: 'my-package',
globalAdapterIdentifier: 'MY_GLOBAL_ADAPTER',
}),
).toMatchInlineSnapshot(`
import * as __vanilla_css_adapter__ from "@vanilla-extract/css/adapter";
__vanilla_css_adapter__.setAdapter(MY_GLOBAL_ADAPTER);
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
setFileScope("app/app.css.ts", "my-package");
import {style} from '@vanilla-extract/css';
export const myStyle = style({});
endFileScope();
__vanilla_css_adapter__.removeAdapter();
`);
});
test('should update existing fileScope', () => {
const source = dedent`
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
setFileScope("some-weird-file", "some-weird-package");
import {style} from '@vanilla-extract/css';
export const myStyle = style({});
endFileScope();
`;
expect(
addFileScope({
source,
rootPath: '/the-root',
filePath: '/the-root/app/app.css.ts',
packageName: 'my-package',
}),
).toMatchInlineSnapshot(`
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
setFileScope("app/app.css.ts", "my-package");
import {style} from '@vanilla-extract/css';
export const myStyle = style({});
endFileScope();
`);
});
test('should update existing fileScope with newlines', () => {
const source = dedent`
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
setFileScope(
"some-weird-file",
"some-weird-package"
);
import {style} from '@vanilla-extract/css';
export const myStyle = style({});
endFileScope();
`;
expect(
addFileScope({
source,
rootPath: '/the-root',
filePath: '/the-root/app/app.css.ts',
packageName: 'my-package',
}),
).toMatchInlineSnapshot(`
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
setFileScope("app/app.css.ts", "my-package");
import {style} from '@vanilla-extract/css';
export const myStyle = style({});
endFileScope();
`);
});
test('should handle namespaced filescope calls', () => {
const source = dedent`
import * as vanillaFileScope from "@vanilla-extract/css/fileScope";
vanillaFileScope.setFileScope("some-weird-file");
import {style} from '@vanilla-extract/css';
export const myStyle = style({});
vanillaFileScope.endFileScope();
`;
expect(
addFileScope({
source,
rootPath: '/the-root',
filePath: '/the-root/app/app.css.ts',
packageName: 'my-package',
}),
).toMatchInlineSnapshot(`
import * as vanillaFileScope from "@vanilla-extract/css/fileScope";
vanillaFileScope.setFileScope("app/app.css.ts", "my-package");
import {style} from '@vanilla-extract/css';
export const myStyle = style({});
vanillaFileScope.endFileScope();
`);
});
test('should preserve non-template strings that contain newline characters', () => {
const source = `export const multiLineString = "\\nfoo\\n";`;
expect(
addFileScope({
source,
rootPath: '/the-root',
filePath: '/the-root/app/app.css.ts',
packageName: 'my-package',
}),
).toMatchInlineSnapshot(`
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
setFileScope("app/app.css.ts", "my-package");
export const multiLineString = "\\nfoo\\n";
endFileScope();
`);
});
});
describe('CJS', () => {
test('should add missing fileScope', () => {
const source = dedent`
const _css = require('@vanilla-extract/css');
var myStyle = _css.style({});
exports.myStyle = myStyle;
`;
expect(
addFileScope({
source,
rootPath: '/the-root',
filePath: '/the-root/app/app.css.ts',
packageName: 'my-package',
}),
).toMatchInlineSnapshot(`
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
__vanilla_filescope__.setFileScope("app/app.css.ts", "my-package");
const _css = require('@vanilla-extract/css');
var myStyle = _css.style({});
exports.myStyle = myStyle;
__vanilla_filescope__.endFileScope();
`);
});
test('should add global adapter setup when "globalAdapterIdentifier" is provided', () => {
const source = dedent`
const _css = require('@vanilla-extract/css');
var myStyle = _css.style({});
exports.myStyle = myStyle;
`;
expect(
addFileScope({
source,
rootPath: '/the-root',
filePath: '/the-root/app/app.css.ts',
packageName: 'my-package',
globalAdapterIdentifier: 'MY_GLOBAL_ADAPTER',
}),
).toMatchInlineSnapshot(`
const __vanilla_css_adapter__ = require("@vanilla-extract/css/adapter");
__vanilla_css_adapter__.setAdapter(MY_GLOBAL_ADAPTER);
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
__vanilla_filescope__.setFileScope("app/app.css.ts", "my-package");
const _css = require('@vanilla-extract/css');
var myStyle = _css.style({});
exports.myStyle = myStyle;
__vanilla_filescope__.endFileScope();
__vanilla_css_adapter__.removeAdapter();
`);
});
test('should update existing fileScope', () => {
const source = dedent`
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
__vanilla_filescope__.setFileScope("some-weird-file", "some-weird-package");
const _css = require('@vanilla-extract/css');
var myStyle = _css.style({});
exports.myStyle = myStyle;
__vanilla_filescope__.endFileScope();
`;
expect(
addFileScope({
source,
rootPath: '/the-root',
filePath: '/the-root/app/app.css.ts',
packageName: 'my-package',
}),
).toMatchInlineSnapshot(`
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
__vanilla_filescope__.setFileScope("app/app.css.ts", "my-package");
const _css = require('@vanilla-extract/css');
var myStyle = _css.style({});
exports.myStyle = myStyle;
__vanilla_filescope__.endFileScope();
`);
});
test('should update existing fileScope with newlines', () => {
const source = dedent`
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
__vanilla_filescope__.setFileScope(
"some-weird-file",
"some-weird-package"
);
const _css = require('@vanilla-extract/css');
const myStyle = _css.style({});
exports.myStyle = myStyle;
__vanilla_filescope__.endFileScope();
`;
expect(
addFileScope({
source,
rootPath: '/the-root',
filePath: '/the-root/app/app.css.ts',
packageName: 'my-package',
}),
).toMatchInlineSnapshot(`
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
__vanilla_filescope__.setFileScope("app/app.css.ts", "my-package");
const _css = require('@vanilla-extract/css');
const myStyle = _css.style({});
exports.myStyle = myStyle;
__vanilla_filescope__.endFileScope();
`);
});
test('should preserve non-template strings that contain newline characters', () => {
const source = `exports.multiLineString = "\\nfoo\\n";`;
expect(
addFileScope({
source,
rootPath: '/the-root',
filePath: '/the-root/app/app.css.ts',
packageName: 'my-package',
}),
).toMatchInlineSnapshot(`
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
__vanilla_filescope__.setFileScope("app/app.css.ts", "my-package");
exports.multiLineString = "\\nfoo\\n";
__vanilla_filescope__.endFileScope();
`);
});
});
test('platform-specific relative path', () => {
const { rootPath, filePath } = {
[posix.sep]: {
rootPath: '/the-root',
filePath: '/the-root/app/app.css.ts',
},
[win32.sep]: {
rootPath: raw`D:\the-root`,
filePath: raw`D:\the-root\app\app.css.ts`,
},
}[sep];
const source = dedent`
import { style } from '@vanilla-extract/css';
export const myStyle = style({});
`;
// The snapshot should be the same for either platform
expect(
addFileScope({
source,
rootPath,
filePath,
packageName: 'my-package',
}),
).toMatchInlineSnapshot(`
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
setFileScope("app/app.css.ts", "my-package");
import { style } from '@vanilla-extract/css';
export const myStyle = style({});
endFileScope();
`);
});
test('normalizePath()', () => {
expect(normalizePath(raw`foo\bar`)).toMatchInlineSnapshot(`foo/bar`);
expect(normalizePath(raw`foo/bar`)).toMatchInlineSnapshot(`foo/bar`);
});
================================================
FILE: packages/integration/src/addFileScope.ts
================================================
import { posix, relative, win32 } from 'path';
import { detectSyntax } from 'mlly';
import dedent from 'dedent';
// Inlined from @rollup/pluginutils
// https://github.com/rollup/plugins/blob/33174f956304ab4aad4bbaba656f627c31679dc5/packages/pluginutils/src/normalizePath.ts#L5-L7
export const normalizePath = (filename: string): string =>
filename.split(win32.sep).join(posix.sep);
interface AddFileScopeParams {
source: string;
filePath: string;
rootPath: string;
packageName: string;
globalAdapterIdentifier?: string;
}
export function addFileScope({
source,
filePath,
rootPath,
packageName,
globalAdapterIdentifier,
}: AddFileScopeParams): string {
// Encode windows file paths as posix
const normalizedPath = normalizePath(relative(rootPath, filePath));
const { hasESM, isMixed } = detectSyntax(source);
if (source.includes('@vanilla-extract/css/fileScope')) {
source = source.replace(
/setFileScope\(((\n|.)*?)\)/,
`setFileScope("${normalizedPath}", "${packageName}")`,
);
} else {
if (hasESM && !isMixed) {
source = dedent(`
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
setFileScope("${normalizedPath}", "${packageName}");
${source}
endFileScope();
`);
} else {
source = dedent(`
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
__vanilla_filescope__.setFileScope("${normalizedPath}", "${packageName}");
${source}
__vanilla_filescope__.endFileScope();
`);
}
}
if (globalAdapterIdentifier) {
const adapterImport =
hasESM && !isMixed
? 'import * as __vanilla_css_adapter__ from "@vanilla-extract/css/adapter";'
: 'const __vanilla_css_adapter__ = require("@vanilla-extract/css/adapter");';
source = dedent(`
${adapterImport}
__vanilla_css_adapter__.setAdapter(${globalAdapterIdentifier});
${source}
__vanilla_css_adapter__.removeAdapter();
`);
}
return source;
}
================================================
FILE: packages/integration/src/compile.ts
================================================
import { dirname, join } from 'path';
import { promises as fs } from 'fs';
import {
build as esbuild,
type Plugin,
type BuildOptions as EsbuildOptions,
} from 'esbuild';
import type { IdentifierOption } from './types';
import { cssFileFilter } from './filters';
import { transform } from './transform';
import { getPackageInfo } from './packageInfo';
interface VanillaExtractTransformPluginParams {
identOption?: IdentifierOption;
}
export const vanillaExtractTransformPlugin = ({
identOption,
}: VanillaExtractTransformPluginParams): Plugin => ({
name: 'vanilla-extract-filescope',
setup(build) {
const packageInfo = getPackageInfo(build.initialOptions.absWorkingDir);
build.onLoad({ filter: cssFileFilter }, async ({ path }) => {
const originalSource = await fs.readFile(path, 'utf-8');
const source = await transform({
source: originalSource,
filePath: path,
rootPath: build.initialOptions.absWorkingDir!,
packageName: packageInfo.name,
identOption:
identOption ?? (build.initialOptions.minify ? 'short' : 'debug'),
});
return {
contents: source,
loader: path.match(/\.(ts|tsx)$/i) ? 'ts' : undefined,
resolveDir: dirname(path),
};
});
},
});
export interface CompileOptions {
filePath: string;
identOption: IdentifierOption;
cwd?: string;
esbuildOptions?: Pick<
EsbuildOptions,
'plugins' | 'external' | 'define' | 'loader' | 'tsconfig' | 'conditions'
>;
}
export async function compile({
filePath,
identOption,
cwd = process.cwd(),
esbuildOptions,
}: CompileOptions): Promise<{
source: string;
watchFiles: string[];
}> {
const result = await esbuild({
entryPoints: [filePath],
metafile: true,
bundle: true,
external: ['@vanilla-extract', ...(esbuildOptions?.external ?? [])],
platform: 'node',
write: false,
plugins: [
vanillaExtractTransformPlugin({ identOption }),
...(esbuildOptions?.plugins ?? []),
],
absWorkingDir: cwd,
loader: esbuildOptions?.loader,
define: esbuildOptions?.define,
tsconfig: esbuildOptions?.tsconfig,
conditions: esbuildOptions?.conditions,
});
const { outputFiles, metafile } = result;
if (!outputFiles || outputFiles.length !== 1) {
throw new Error('Invalid child compilation');
}
return {
source: outputFiles[0].text,
watchFiles: Object.keys(metafile?.inputs || {}).map((filePath) =>
join(cwd, filePath),
),
};
}
================================================
FILE: packages/integration/src/filters.ts
================================================
// Vite adds a "?used" to CSS files it detects, this isn't relevant for
// .css.ts files but it's added anyway so we need to allow for it in the file match
export const cssFileFilter: RegExp = /\.css\.(js|cjs|mjs|jsx|ts|tsx)(\?used)?$/;
export const virtualCssFileFilter: RegExp = /\.vanilla\.css\?source=.*$/;
================================================
FILE: packages/integration/src/hash.ts
================================================
import crypto from 'crypto';
export const hash = (value: string): string =>
crypto.createHash('md5').update(value).digest('hex');
================================================
FILE: packages/integration/src/index.ts
================================================
export {
processVanillaFile,
parseFileScope,
stringifyFileScope,
serializeVanillaModule,
} from './processVanillaFile';
export { getSourceFromVirtualCssFile } from './virtualFile';
export { getPackageInfo, type PackageInfo } from './packageInfo';
export {
compile,
vanillaExtractTransformPlugin,
type CompileOptions,
} from './compile';
export { hash } from './hash';
export { addFileScope, normalizePath } from './addFileScope';
export { serializeCss, deserializeCss } from './serialize';
export { transformSync, transform } from './transform';
export { cssFileFilter, virtualCssFileFilter } from './filters';
export type { IdentifierOption } from './types';
================================================
FILE: packages/integration/src/packageInfo.ts
================================================
import path from 'path';
import findUp from 'find-up';
export interface PackageInfo {
name: string;
path: string;
dirname: string;
}
function getClosestPackageInfo(directory: string) {
const packageJsonPath = findUp.sync('package.json', {
cwd: directory,
});
if (packageJsonPath) {
const { name } = require(packageJsonPath);
return {
name,
path: packageJsonPath,
dirname: path.dirname(packageJsonPath),
};
}
}
const packageInfoCache = new Map();
export function getPackageInfo(cwd?: string | null): PackageInfo {
const resolvedCwd = cwd ?? process.cwd();
const cachedValue = packageInfoCache.get(resolvedCwd);
if (cachedValue) {
return cachedValue;
}
let packageInfo = getClosestPackageInfo(resolvedCwd);
while (packageInfo && !packageInfo.name) {
packageInfo = getClosestPackageInfo(
path.resolve(packageInfo.dirname, '..'),
);
}
if (!packageInfo || !packageInfo.name) {
throw new Error(
`Couldn't find parent package.json with a name field from '${resolvedCwd}'`,
);
}
packageInfoCache.set(resolvedCwd, packageInfo);
return packageInfo;
}
================================================
FILE: packages/integration/src/processVanillaFile.test.ts
================================================
import { describe, expect, test, vi } from 'vitest';
import { addFunctionSerializer } from '../../css/src/functionSerializer';
import {
processVanillaFile,
serializeVanillaModule,
} from './processVanillaFile';
describe('serializeVanillaModule', () => {
test('with plain object exports', () => {
const value = {
string: 'value',
boolean: true,
number: 42,
array: [420],
object: { hello: 'world' },
};
expect(serializeVanillaModule([], value, null)).toMatchInlineSnapshot(`
"export var string = 'value';
export var boolean = true;
export var number = 42;
export var array = [420];
export var object = {hello:'world'};"
`);
});
// https://rollupjs.org/guide/en/#outputgeneratedcode -- see output.generatedCode.symbols
// https://github.com/vitejs/vite/pull/5018
// https://github.com/vitejs/vite/blob/757a92f1c7c4fa961ed963edd245df77382dfde6/packages/vite/src/node/build.ts#L466-L469
test('with exports generated by Rollup', () => {
const value = Object.freeze(
Object.defineProperty(
{
__proto__: null,
some: 'export',
},
Symbol.toStringTag,
{ value: 'Module' },
),
);
expect(serializeVanillaModule([], value, null)).toMatchInlineSnapshot(
`"export var some = 'export';"`,
);
});
test('with unusedCompositionRegex', () => {
const value = {
compositionOnly:
'features_compositionOnly__1o6ek504 features_mergedStyle__1o6ek500 features_styleWithComposition__1o6ek501',
mergedStyle: 'features_mergedStyle__1o6ek500',
styleCompositionInSelector:
'features_styleCompositionInSelector__1o6ek507 features__1o6ek505 features__1o6ek506',
styleVariantsCompositionInSelector: {
variant:
'features_styleVariantsCompositionInSelector_variant__1o6ek50a features__1o6ek508 features__1o6ek509',
},
styleVariantsWithComposition: {
variant:
'features_styleVariantsWithComposition_variant__1o6ek502 features_mergedStyle__1o6ek500',
},
styleVariantsWithMappedComposition: {
variant:
'features_styleVariantsWithMappedComposition_variant__1o6ek503 features_mergedStyle__1o6ek500',
},
styleWithComposition:
'features_styleWithComposition__1o6ek501 features_mergedStyle__1o6ek500',
};
const exports = serializeVanillaModule(
[],
value,
/(features_compositionOnly__1o6ek504|features_styleCompositionInSelector__1o6ek507|features_styleVariantsCompositionInSelector_variant__1o6ek50a)\s/g,
);
expect(exports).toMatchInlineSnapshot(`
"export var compositionOnly = 'features_mergedStyle__1o6ek500 features_styleWithComposition__1o6ek501';
export var mergedStyle = 'features_mergedStyle__1o6ek500';
export var styleCompositionInSelector = 'features__1o6ek505 features__1o6ek506';
export var styleVariantsCompositionInSelector = {variant:'features__1o6ek508 features__1o6ek509'};
export var styleVariantsWithComposition = {variant:'features_styleVariantsWithComposition_variant__1o6ek502 features_mergedStyle__1o6ek500'};
export var styleVariantsWithMappedComposition = {variant:'features_styleVariantsWithMappedComposition_variant__1o6ek503 features_mergedStyle__1o6ek500'};
export var styleWithComposition = 'features_styleWithComposition__1o6ek501 features_mergedStyle__1o6ek500';"
`);
});
test('should serialize a vanilla module', () => {
expect(
serializeVanillaModule(
['import "./styles.css"'],
{ default: 'some-style', otherStyles: 'some-style other-style' },
null,
),
).toMatchInlineSnapshot(`
"import "./styles.css"
var __default__ = 'some-style';
export default __default__;
export var otherStyles = 'some-style other-style';"
`);
});
test('should re-use exports if possible', () => {
const a = {
style: 'the-style',
};
const b = {
style: 'another-style',
};
const exports = {
a,
default: b,
c: {
a,
b,
},
};
expect(serializeVanillaModule(['import "./styles.css"'], exports, null))
.toMatchInlineSnapshot(`
"import "./styles.css"
export var a = {style:'the-style'};
var __default__ = {style:'another-style'};
export default __default__;
export var c = {a:a,b:__default__};"
`);
});
test('should handle function serialization', () => {
const sprinkles = () => {};
sprinkles.__function_serializer__ = {
importPath: 'my-package',
importName: 'myFunction',
args: ['arg1', 'arg2'],
};
const exports = {
sprinkles,
};
expect(serializeVanillaModule(['import "./styles.css"'], exports, null))
.toMatchInlineSnapshot(`
"import "./styles.css"
import { myFunction as _86bce } from 'my-package';
export var sprinkles = _86bce('arg1','arg2');"
`);
});
test('should handle deprecated __recipe__ function serialization', () => {
const sprinkles = () => {};
// Once support for `__recipe__` is removed, this test can be removed,
// and all other tests that use `__function_serializer__` should be updated
// to use `addFunctionSerializer`
addFunctionSerializer(sprinkles, {
importPath: 'my-package',
importName: 'myFunction',
args: ['arg1', 'arg2'],
});
const exports = {
sprinkles,
};
expect(serializeVanillaModule(['import "./styles.css"'], exports, null))
.toMatchInlineSnapshot(`
"import "./styles.css"
import { myFunction as _86bce } from 'my-package';
export var sprinkles = _86bce('arg1','arg2');"
`);
});
test('should re-use exports in handle serialized function args', () => {
const complexExport = {
my: {
very: {
complex: {
arg: true,
},
},
},
};
const otherComplexExport = {
other: {
complex: [1, 2, 3],
},
};
const sprinkles = () => {};
sprinkles.__function_serializer__ = {
importPath: 'my-package',
importName: 'myFunction',
args: [complexExport, otherComplexExport],
};
const exports = {
default: complexExport,
otherComplexExport,
sprinkles,
};
expect(serializeVanillaModule(['import "./styles.css"'], exports, null))
.toMatchInlineSnapshot(`
"import "./styles.css"
import { myFunction as _86bce } from 'my-package';
var __default__ = {my:{very:{complex:{arg:true}}}};
export default __default__;
export var otherComplexExport = {other:{complex:[1,2,3]}};
export var sprinkles = _86bce(__default__,otherComplexExport);"
`);
});
test('should order exports correctly', () => {
const simpleObjectExport = { hello: 'world' };
const complexExport = {
my: {
very: {
complex: {
arg: simpleObjectExport,
},
},
},
};
const otherComplexExport = {
other: {
complex: [1, 2, 3],
},
};
const someOtherExport = [4, 5, 6];
const reExport = otherComplexExport;
const reReExport = reExport;
const sprinkles = () => {};
sprinkles.__function_serializer__ = {
importPath: 'my-package',
importName: 'myFunction',
args: [complexExport, otherComplexExport, someOtherExport, reReExport],
};
const exports = {
sprinkles,
complexExport,
simpleObjectExport,
reReExport,
otherComplexExport,
default: someOtherExport,
reExport,
};
expect(serializeVanillaModule(['import "./styles.css"'], exports, null))
.toMatchInlineSnapshot(`
"import "./styles.css"
import { myFunction as _86bce } from 'my-package';
export var simpleObjectExport = {hello:'world'};
export var complexExport = {my:{very:{complex:{arg:simpleObjectExport}}}};
var __default__ = [4,5,6];
export default __default__;
export var reExport = {other:{complex:[1,2,3]}};
export var sprinkles = _86bce(complexExport,reExport,__default__,reExport);
export var reReExport = reExport;
export var otherComplexExport = reExport;"
`);
});
});
describe('processVanillaFile', () => {
test('should process vanilla file with correct promise order', async () => {
vi.useFakeTimers();
const serializeVirtualCssPath1 = vi.fn(
({ source }) =>
new Promise((resolve) => {
setTimeout(() => resolve(source), 1);
}),
);
const serializeVirtualCssPath2 = vi.fn(({ source }) =>
Promise.resolve(source),
);
const [result] = await Promise.all([
processVanillaFile({
source: `
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
const { style, globalStyle } = require('@vanilla-extract/css');
__vanilla_filescope__.setFileScope("dependency.css.ts", "test");
exports.x = style({ color: 'blue' });
__vanilla_filescope__.endFileScope();
__vanilla_filescope__.setFileScope("style1.css.ts", "test");
exports.y = style([exports.x]);
globalStyle('body ' + exports.y, { color: 'red' });
__vanilla_filescope__.endFileScope();
`,
filePath: require.resolve('@fixtures/sprinkles'),
serializeVirtualCssPath: serializeVirtualCssPath1,
}),
processVanillaFile({
source: `
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
__vanilla_filescope__.setFileScope("style2.css.ts", "test");
__vanilla_filescope__.endFileScope();
`,
filePath: require.resolve('@fixtures/sprinkles'),
serializeVirtualCssPath: serializeVirtualCssPath2,
}),
vi.runAllTimersAsync(),
]);
expect(result).toMatchInlineSnapshot(`
".dependency__ma8c4x0 {
color: blue;
}
body .style1__emvcy10 {
color: red;
}
export var x = 'dependency__ma8c4x0';
export var y = 'style1__emvcy10 dependency__ma8c4x0';"
`);
vi.useRealTimers();
});
});
================================================
FILE: packages/integration/src/processVanillaFile.ts
================================================
import type { FileScope, Adapter } from '@vanilla-extract/css';
import { transformCss } from '@vanilla-extract/css/transformCss';
import { removeAdapter, setAdapter } from '@vanilla-extract/css/adapter';
import evalCode from 'eval';
import { stringify } from 'javascript-stringify';
import dedent from 'dedent';
import { hash } from './hash';
import { serializeCss } from './serialize';
import type { IdentifierOption } from './types';
const originalNodeEnv = process.env.NODE_ENV;
// Copied from https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore/blob/51f83bd3db728fd7ee177de1ffc253fdb99c537f/README.md#_isplainobject
function isPlainObject(value: unknown) {
if (typeof value !== 'object' || value === null) {
return false;
}
if (Object.prototype.toString.call(value) !== '[object Object]') {
return false;
}
const prototype = Object.getPrototypeOf(value);
if (prototype === null) {
return true;
}
const constructor =
Object.prototype.hasOwnProperty.call(prototype, 'constructor') &&
prototype.constructor;
return (
typeof constructor === 'function' &&
constructor instanceof constructor &&
Function.prototype.call(constructor) === Function.prototype.call(value)
);
}
export function stringifyFileScope({
packageName,
filePath,
}: FileScope): string {
return packageName ? `${filePath}$$$${packageName}` : filePath;
}
export function parseFileScope(serialisedFileScope: string): FileScope {
const [filePath, packageName] = serialisedFileScope.split('$$$');
return {
filePath,
packageName,
};
}
interface ProcessVanillaFileOptions {
source: string;
filePath: string;
outputCss?: boolean;
identOption?: IdentifierOption;
serializeVirtualCssPath?: (file: {
fileName: string;
fileScope: FileScope;
source: string;
}) => string | Promise;
}
export async function processVanillaFile({
source,
filePath,
outputCss = true,
identOption = process.env.NODE_ENV === 'production' ? 'short' : 'debug',
serializeVirtualCssPath,
}: ProcessVanillaFileOptions): Promise {
type Css = Parameters[0];
type Composition = Parameters[0];
const cssByFileScope = new Map>();
const localClassNames = new Set();
const composedClassLists: Array = [];
const usedCompositions = new Set();
const cssAdapter: Adapter = {
appendCss: (css, fileScope) => {
if (outputCss) {
const serialisedFileScope = stringifyFileScope(fileScope);
const fileScopeCss = cssByFileScope.get(serialisedFileScope) ?? [];
fileScopeCss.push(css);
cssByFileScope.set(serialisedFileScope, fileScopeCss);
}
},
registerClassName: (className) => {
localClassNames.add(className);
},
registerComposition: (composedClassList) => {
composedClassLists.push(composedClassList);
},
markCompositionUsed: (identifier) => {
usedCompositions.add(identifier);
},
onEndFileScope: () => {},
getIdentOption: () => identOption,
};
const currentNodeEnv = process.env.NODE_ENV;
// Vite sometimes modifies NODE_ENV which causes different versions (e.g. dev/prod) of vanilla packages to be loaded
// This can cause CSS to be bound to the wrong instance, resulting in no CSS output
// To get around this we set the NODE_ENV back to the original value ONLY during eval
process.env.NODE_ENV = originalNodeEnv;
const adapterBoundSource = `
const { setAdapter, removeAdapter } = require('@vanilla-extract/css/adapter');
setAdapter(__adapter__);
${source}
// Backwards compat with older versions of @vanilla-extract/css
if (removeAdapter) {
removeAdapter();
}
`;
const evalResult = evalCode(
adapterBoundSource,
filePath,
{ console, process, __adapter__: cssAdapter },
true,
) as Record;
process.env.NODE_ENV = currentNodeEnv;
const cssImports = [];
for (const [serialisedFileScope, fileScopeCss] of cssByFileScope) {
const fileScope = parseFileScope(serialisedFileScope);
setAdapter(cssAdapter);
const css = transformCss({
localClassNames: Array.from(localClassNames),
composedClassLists,
cssObjs: fileScopeCss,
}).join('\n');
removeAdapter();
const fileName = `${fileScope.filePath}.vanilla.css`;
let virtualCssFilePath: string;
if (serializeVirtualCssPath) {
const serializedResult = serializeVirtualCssPath({
fileName,
fileScope,
source: css,
});
if (typeof serializedResult === 'string') {
virtualCssFilePath = serializedResult;
} else {
virtualCssFilePath = await serializedResult;
}
} else {
const serializedCss = await serializeCss(css);
virtualCssFilePath = `import '${fileName}?source=${serializedCss}';`;
}
cssImports.push(virtualCssFilePath);
}
const unusedCompositions = composedClassLists
.filter(({ identifier }) => !usedCompositions.has(identifier))
.map(({ identifier }) => identifier);
const unusedCompositionRegex =
unusedCompositions.length > 0
? RegExp(`(${unusedCompositions.join('|')})\\s`, 'g')
: null;
return serializeVanillaModule(cssImports, evalResult, unusedCompositionRegex);
}
function stringifyExports(
functionSerializationImports: Set,
value: any,
unusedCompositionRegex: RegExp | null,
key: string,
exportLookup: Map,
exportDependencyGraph: DependencyGraph,
): any {
return stringify(
value,
(value, _indent, next) => {
const valueType = typeof value;
if (
valueType === 'boolean' ||
valueType === 'number' ||
valueType === 'undefined' ||
value === null
) {
return next(value);
}
if (Array.isArray(value) || isPlainObject(value)) {
const reusedExport = exportLookup.get(value);
if (reusedExport && reusedExport !== key) {
exportDependencyGraph.addDependency(key, reusedExport);
return reusedExport;
}
return next(value);
}
if (Symbol.toStringTag in Object(value)) {
const { [Symbol.toStringTag]: _tag, ...valueWithoutTag } = value;
return next(valueWithoutTag);
}
if (valueType === 'string') {
return next(
unusedCompositionRegex
? value.replace(unusedCompositionRegex, '')
: value,
);
}
if (
valueType === 'function' &&
(value.__function_serializer__ || value.__recipe__)
) {
const { importPath, importName, args } =
value.__function_serializer__ || value.__recipe__;
if (
typeof importPath !== 'string' ||
typeof importName !== 'string' ||
!Array.isArray(args)
) {
throw new Error('Invalid function serialization params');
}
try {
const hashedImportName = `_${hash(`${importName}${importPath}`).slice(
0,
5,
)}`;
functionSerializationImports.add(
`import { ${importName} as ${hashedImportName} } from '${importPath}';`,
);
return `${hashedImportName}(${args
.map((arg) =>
stringifyExports(
functionSerializationImports,
arg,
unusedCompositionRegex,
key,
exportLookup,
exportDependencyGraph,
),
)
.join(',')})`;
} catch (err) {
console.error(err);
throw new Error('Invalid function serialization params', {
cause: err,
});
}
}
throw new Error(dedent`
Invalid exports.
You can only export plain objects, arrays, strings, numbers and null/undefined.
`);
},
0,
{
references: true, // Allow circular references
maxDepth: Infinity,
maxValues: Infinity,
},
);
}
const defaultExportName = '__default__';
class DependencyGraph {
graph: Map>;
public constructor() {
this.graph = new Map();
}
/**
* Creates a "depends on" relationship between `key` and `dependency`
*/
public addDependency(key: string, dependency: string) {
const dependencies = this.graph.get(key);
if (dependencies) {
dependencies.add(dependency);
} else {
this.graph.set(key, new Set([dependency]));
}
}
/**
* Whether or not `key` depends on `dependency`
*/
public dependsOn(key: string, dependency: string): boolean {
const dependencies = this.graph.get(key);
if (dependencies) {
if (dependencies?.has(dependency)) {
return true;
}
for (const [dep] of dependencies.entries()) {
if (this.dependsOn(dep, dependency)) {
return true;
}
}
}
return false;
}
}
export function serializeVanillaModule(
cssImports: Array,
exports: Record,
unusedCompositionRegex: RegExp | null,
): string {
const functionSerializationImports = new Set();
const exportLookup = new Map(
Object.entries(exports).map(([key, value]) => [
value,
key === 'default' ? defaultExportName : key,
]),
);
const exportDependencyGraph = new DependencyGraph();
const moduleExports = Object.entries(exports).map(([key, value]) => {
const serializedExport = stringifyExports(
functionSerializationImports,
value,
unusedCompositionRegex,
key === 'default' ? defaultExportName : key,
exportLookup,
exportDependencyGraph,
);
if (key === 'default') {
return [
defaultExportName,
[
`var ${defaultExportName} = ${serializedExport};`,
`export default ${defaultExportName};`,
].join('\n'),
];
}
return [key, `export var ${key} = ${serializedExport};`];
});
const sortedModuleExports = moduleExports
.sort(([key1], [key2]) => {
if (exportDependencyGraph.dependsOn(key1, key2)) {
return 1;
}
if (exportDependencyGraph.dependsOn(key2, key1)) {
return -1;
}
return 0;
})
.map(([, s]) => s);
const outputCode = [
...cssImports,
...functionSerializationImports,
...sortedModuleExports,
];
return outputCode.join('\n');
}
================================================
FILE: packages/integration/src/serialize.ts
================================================
import { gzip, gunzip } from 'zlib';
import { promisify } from 'util';
const zip = promisify(gzip);
const unzip = promisify(gunzip);
// The byte threshold for applying compression, below which compressing would out-weigh its value.
const compressionThreshold = 1000;
const compressionFlag = '#';
export async function serializeCss(source: string): Promise {
if (source.length > compressionThreshold) {
const compressedSource = await zip(source);
return compressionFlag + compressedSource.toString('base64url');
}
return Buffer.from(source, 'utf-8').toString('base64url');
}
export async function deserializeCss(source: string): Promise {
if (source.indexOf(compressionFlag) > -1) {
const decompressedSource = await unzip(
Buffer.from(source.replace(compressionFlag, ''), 'base64url'),
);
return decompressedSource.toString('utf-8');
}
return Buffer.from(source, 'base64url').toString('utf-8');
}
================================================
FILE: packages/integration/src/transform.ts
================================================
import * as babel from '@babel/core';
import vanillaBabelPlugin from '@vanilla-extract/babel-plugin-debug-ids';
// @ts-expect-error
import typescriptSyntax from '@babel/plugin-syntax-typescript';
import { addFileScope } from './addFileScope';
import type { IdentifierOption } from './types';
interface TransformParams {
source: string;
filePath: string;
rootPath: string;
packageName: string;
identOption: IdentifierOption;
globalAdapterIdentifier?: string;
}
export const transformSync = ({
source,
filePath,
rootPath,
packageName,
identOption,
}: TransformParams): string => {
let code = source;
if (identOption === 'debug') {
const result = babel.transformSync(source, {
filename: filePath,
cwd: rootPath,
plugins: [vanillaBabelPlugin, typescriptSyntax],
configFile: false,
babelrc: false,
});
if (!result || result.code == null) {
throw new Error('Error adding debug IDs');
}
code = result.code;
}
return addFileScope({
source: code,
filePath,
rootPath,
packageName,
});
};
export const transform = async ({
source,
filePath,
rootPath,
packageName,
identOption,
globalAdapterIdentifier,
}: TransformParams): Promise => {
let code = source;
if (identOption === 'debug') {
const result = await babel.transformAsync(source, {
filename: filePath,
cwd: rootPath,
plugins: [vanillaBabelPlugin, typescriptSyntax],
configFile: false,
babelrc: false,
});
if (!result || result.code == null) {
throw new Error('Error adding debug IDs');
}
code = result.code;
}
return addFileScope({
source: code,
filePath,
rootPath,
packageName,
globalAdapterIdentifier,
});
};
================================================
FILE: packages/integration/src/types.ts
================================================
import type { Adapter } from '@vanilla-extract/css';
export type IdentifierOption = ReturnType;
================================================
FILE: packages/integration/src/virtualFile.ts
================================================
import { deserializeCss } from './serialize';
export async function getSourceFromVirtualCssFile(id: string): Promise<{
fileName: string;
source: string;
}> {
const match = id.match(/^(?.*)\?source=(?.*)$/);
if (!match || !match.groups) {
throw new Error('No source in vanilla CSS file');
}
const source = await deserializeCss(match.groups.source);
return {
fileName: match.groups.fileName,
source,
};
}
================================================
FILE: packages/jest-transform/CHANGELOG.md
================================================
# @vanilla-extract/jest-transform
## 1.1.21
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@8.0.8
## 1.1.20
### Patch Changes
- Updated dependencies [[`a440470`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a440470b9912aab705ae32cd5248ff6479535704)]:
- @vanilla-extract/integration@8.0.7
## 1.1.19
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@8.0.6
## 1.1.18
### Patch Changes
- [#1653](https://github.com/vanilla-extract-css/vanilla-extract/pull/1653) [`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1) Thanks [@askoufis](https://github.com/askoufis)! - Update `esbuild` dependency range to include `^0.26.0` and `^0.27.0`
- Updated dependencies [[`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1)]:
- @vanilla-extract/integration@8.0.5
## 1.1.17
### Patch Changes
- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert "Improve ESM package entrypoints (#1597)" to fix `Named export not found` error when importing ESM entrypoints
- Updated dependencies []:
- @vanilla-extract/integration@8.0.4
## 1.1.16
### Patch Changes
- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path
- Updated dependencies []:
- @vanilla-extract/integration@8.0.3
## 1.1.15
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@8.0.2
## 1.1.14
### Patch Changes
- [#1545](https://github.com/vanilla-extract-css/vanilla-extract/pull/1545) [`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483) Thanks [@askoufis](https://github.com/askoufis)! - Extend `esbuild` dependency range to include `0.25.x`
- Updated dependencies [[`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483)]:
- @vanilla-extract/integration@8.0.1
## 1.1.13
### Patch Changes
- [#1530](https://github.com/vanilla-extract-css/vanilla-extract/pull/1530) [`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8) Thanks [@askoufis](https://github.com/askoufis)! - Extend `esbuild` dependency range to include `0.24.x`
- Updated dependencies [[`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3), [`ec0b024`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ec0b024fd19c133c233445f9e860626d104f9d97), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3)]:
- @vanilla-extract/integration@8.0.0
## 1.1.12
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@7.1.12
## 1.1.11
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@7.1.11
## 1.1.10
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@7.1.10
## 1.1.9
### Patch Changes
- Updated dependencies [[`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047)]:
- @vanilla-extract/integration@7.1.9
## 1.1.8
### Patch Changes
- [#1461](https://github.com/vanilla-extract-css/vanilla-extract/pull/1461) [`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b) Thanks [@askoufis](https://github.com/askoufis)! - Widen `esbuild` dependency range to include `~0.22.0` and `~0.23.0`
- Updated dependencies [[`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b), [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/integration@7.1.8
## 1.1.7
### Patch Changes
- [#1436](https://github.com/vanilla-extract-css/vanilla-extract/pull/1436) [`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e) Thanks [@SimenB](https://github.com/SimenB)! - Extend `esbuild` dependency range to include `~0.20.0` and `~0.21.0`
- Updated dependencies [[`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e)]:
- @vanilla-extract/integration@7.1.7
## 1.1.6
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/integration@7.1.6
## 1.1.5
### Patch Changes
- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/integration@7.1.5
## 1.1.4
### Patch Changes
- Updated dependencies [[`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14)]:
- @vanilla-extract/integration@7.0.0
## 1.1.3
### Patch Changes
- [#1252](https://github.com/vanilla-extract-css/vanilla-extract/pull/1252) [`5bc98a4`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5bc98a4af30a339336ab4ef7c387d3e809586a83) Thanks [@Ethan-PageUp](https://github.com/Ethan-PageUp)! - Unpin esbuild and broaden the version range
- Updated dependencies [[`959c646`](https://github.com/vanilla-extract-css/vanilla-extract/commit/959c646ad6154ef0f8e357660319c7049e8b0459), [`5bc98a4`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5bc98a4af30a339336ab4ef7c387d3e809586a83), [`1566f92`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1566f9238078a3cfefec9ae5023b56aba02875d4)]:
- @vanilla-extract/integration@6.3.0
## 1.1.2
### Patch Changes
- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14
- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e), [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:
- @vanilla-extract/integration@6.2.5
## 1.1.1
### Patch Changes
- [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Bump esbuild to v0.17.6
- Updated dependencies [[`45d3b86`](https://github.com/vanilla-extract-css/vanilla-extract/commit/45d3b86960027cdfa81989f8e2036a6768cc1e1d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/integration@6.2.0
## 1.1.0
### Minor Changes
- [#982](https://github.com/vanilla-extract-css/vanilla-extract/pull/982) [`a9fd1c3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9fd1c3fd950d33343eb28c6224b7f263a7ad20b) Thanks [@roginfarrer](https://github.com/roginfarrer)! - If a regular CSS file is sent through to the transform, return a module that exports the filename.
## 1.0.2
### Patch Changes
- [#973](https://github.com/vanilla-extract-css/vanilla-extract/pull/973) [`cc60aa8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cc60aa81bbb51e5b6bd3d0241ad68f3deb3b1b9a) Thanks [@cliffordfajardo](https://github.com/cliffordfajardo)! - Upgrade esbuild `^0.11.16` to `^0.16.3`
- Updated dependencies [[`eea3c7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/eea3c7d1595cd881e68cfbb279c641dc2fdd9101), [`cc60aa8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cc60aa81bbb51e5b6bd3d0241ad68f3deb3b1b9a)]:
- @vanilla-extract/integration@6.0.2
## 1.0.1
### Patch Changes
- Updated dependencies [[`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0)]:
- @vanilla-extract/integration@6.0.0
================================================
FILE: packages/jest-transform/package.json
================================================
{
"name": "@vanilla-extract/jest-transform",
"version": "1.1.21",
"description": "Jest transformer for vanilla-extract",
"main": "dist/vanilla-extract-jest-transform.cjs.js",
"module": "dist/vanilla-extract-jest-transform.esm.js",
"types": "dist/vanilla-extract-jest-transform.cjs.d.ts",
"preconstruct": {
"entrypoints": [
"index.ts"
]
},
"files": [
"/dist"
],
"repository": {
"type": "git",
"url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
"directory": "packages/jest-transform"
},
"author": "SEEK",
"license": "MIT",
"dependencies": {
"@vanilla-extract/integration": "workspace:^",
"esbuild": "npm:esbuild@>=0.17.6 <0.28.0"
},
"devDependencies": {
"@jest/transform": "^29.0.3"
}
}
================================================
FILE: packages/jest-transform/src/index.ts
================================================
import path from 'path';
import type { Transformer } from '@jest/transform';
import {
transformSync,
getPackageInfo,
cssFileFilter,
} from '@vanilla-extract/integration';
import * as esbuild from 'esbuild';
const vanillaTransformer: Transformer = {
canInstrument: false,
process(source, filePath, options) {
if (!cssFileFilter.test(filePath)) {
// If the file that passes through to the transformer is not a VE file,
// then it's likely a vanilla .css file (because Jest can't differentiate
// between them)
return {
code: `module.exports = ${JSON.stringify(path.basename(filePath))};`,
};
}
const { name: packageName } = getPackageInfo(options.config.rootDir);
const code = transformSync({
source,
filePath,
rootPath: options.config.rootDir,
packageName: packageName,
identOption: 'debug',
});
const result = esbuild.transformSync(code, {
format: options.supportsStaticESM ? 'esm' : 'cjs',
target: 'es2018',
loader: 'ts',
});
return result;
},
};
export default vanillaTransformer;
================================================
FILE: packages/next-plugin/CHANGELOG.md
================================================
# @vanilla-extract/next-plugin
## 2.5.1
### Patch Changes
- [#1692](https://github.com/vanilla-extract-css/vanilla-extract/pull/1692) [`495bc90`](https://github.com/vanilla-extract-css/vanilla-extract/commit/495bc902e19b69aa3ebd52ab94072e8535183708) Thanks [@askoufis](https://github.com/askoufis)! - Update turbopack plugin dep to fix bad release
## 2.5.0
### Minor Changes
- [#1639](https://github.com/vanilla-extract-css/vanilla-extract/pull/1639) [`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1) Thanks [@RJWadley](https://github.com/RJWadley)! - Add experimental Turbopack support for Next.js >= 16.0.0
See [the Next.js docs](https://vanilla-extract.style/documentation/integrations/next/#unstable_turbopack) for more info.
Ensure you are on the latest version of `@vanilla-extract/css` before attempting to use Turbopack.
### Patch Changes
- Updated dependencies [[`1a63a60`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1a63a600b7a707f9317ce5f6607998eba4eb9c99)]:
- @vanilla-extract/turbopack-plugin@0.1.0
- @vanilla-extract/webpack-plugin@2.3.26
## 2.4.17
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.25
## 2.4.16
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.24
## 2.4.15
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.23
## 2.4.14
### Patch Changes
- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert "Improve ESM package entrypoints (#1597)" to fix `Named export not found` error when importing ESM entrypoints
- Updated dependencies [[`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd)]:
- @vanilla-extract/webpack-plugin@2.3.22
## 2.4.13
### Patch Changes
- [#1602](https://github.com/vanilla-extract-css/vanilla-extract/pull/1602) [`7a78ebe`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7a78ebeaad015d072664206cdbe59642399b405b) Thanks [@Pnlvfx](https://github.com/Pnlvfx)! - Fix `require is not defined` error in ESM bundles by calling `createRequire`
- Updated dependencies [[`7a78ebe`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7a78ebeaad015d072664206cdbe59642399b405b)]:
- @vanilla-extract/webpack-plugin@2.3.21
## 2.4.12
### Patch Changes
- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path
- Updated dependencies [[`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e)]:
- @vanilla-extract/webpack-plugin@2.3.20
## 2.4.11
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.19
## 2.4.10
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.18
## 2.4.9
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.17
## 2.4.8
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.16
## 2.4.7
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.15
## 2.4.6
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.14
## 2.4.5
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.13
## 2.4.4
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.12
## 2.4.3
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.11
## 2.4.2
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.10
## 2.4.1
### Patch Changes
- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/webpack-plugin@2.3.9
## 2.4.0
### Minor Changes
- [#1365](https://github.com/vanilla-extract-css/vanilla-extract/pull/1365) [`ed67731`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ed67731efe19c319a4ed5015e00b8a19a4116dd1) Thanks [@renrizzolo](https://github.com/renrizzolo)! - Pages router: use next-style-loader in dev, output css in ssr
## 2.3.7
### Patch Changes
- [#1333](https://github.com/vanilla-extract-css/vanilla-extract/pull/1333) [`6ac9f66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6ac9f667cdfde0050e40cf5eaf8ae03078f5d26d) Thanks [@askoufis](https://github.com/askoufis)! - Use a more accurate regex for detecting [webpack template strings] in paths
We now use a modified version of the regex from the webpack source code to detect template strings in paths.
As long as the path isn't already escaped, we should detect it.
[webpack template strings]: https://webpack.js.org/configuration/output/#template-strings
- Updated dependencies [[`6ac9f66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6ac9f667cdfde0050e40cf5eaf8ae03078f5d26d)]:
- @vanilla-extract/webpack-plugin@2.3.7
## 2.3.6
### Patch Changes
- [#1247](https://github.com/vanilla-extract-css/vanilla-extract/pull/1247) [`f0c3be9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f0c3be99ca437fb1f61ecde58fdf58cccc3256bb) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug that was causing style compilation to fail on paths containing [webpack template strings] such as `[id]` or [Next.js dynamic routes] such as `[slug]`.
[webpack template strings]: https://webpack.js.org/configuration/output/#template-strings
[next.js dynamic routes]: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
- Updated dependencies [[`f0c3be9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f0c3be99ca437fb1f61ecde58fdf58cccc3256bb)]:
- @vanilla-extract/webpack-plugin@2.3.5
## 2.3.5
### Patch Changes
- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Update dependencies
- Updated dependencies [[`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a)]:
- @vanilla-extract/webpack-plugin@2.3.4
## 2.3.4
### Patch Changes
- [#1291](https://github.com/vanilla-extract-css/vanilla-extract/pull/1291) [`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1) Thanks [@mrm007](https://github.com/mrm007)! - Update dependency `@vanilla-extract/integration`
- [#1254](https://github.com/vanilla-extract-css/vanilla-extract/pull/1254) [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0) Thanks [@EvgenNoskov](https://github.com/EvgenNoskov)! - Allow hyphens in class names when using a custom identifier
- Updated dependencies [[`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1), [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/webpack-plugin@2.3.3
## 2.3.3
### Patch Changes
- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14
- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:
- @vanilla-extract/webpack-plugin@2.3.2
## 2.3.2
### Patch Changes
- [#1193](https://github.com/vanilla-extract-css/vanilla-extract/pull/1193) [`a22dd4d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a22dd4da82e4338b8f13fdf66827f6e061ff2038) Thanks [@syfxlin](https://github.com/syfxlin)! - Fixes Next.js 13.5.x CSS output on Windows when using React Server Components
## 2.3.1
### Patch Changes
- [#1180](https://github.com/vanilla-extract-css/vanilla-extract/pull/1180) [`89224fe`](https://github.com/vanilla-extract-css/vanilla-extract/commit/89224fe9d68d984f818ec3d4496952e4e919a241) Thanks [@syfxlin](https://github.com/syfxlin)! - Fixes Next.js 13 CSS output on Windows when using React Server Components
- Updated dependencies [[`89224fe`](https://github.com/vanilla-extract-css/vanilla-extract/commit/89224fe9d68d984f818ec3d4496952e4e919a241)]:
- @vanilla-extract/webpack-plugin@2.3.1
## 2.3.0
### Minor Changes
- [#1160](https://github.com/vanilla-extract-css/vanilla-extract/pull/1160) [`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180) Thanks [@SombreroElGringo](https://github.com/SombreroElGringo)! - Users can now provide a custom identifier hashing function
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/webpack-plugin@2.3.0
## 2.2.2
### Patch Changes
- [#1155](https://github.com/vanilla-extract-css/vanilla-extract/pull/1155) [`1cb537b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1cb537b04b5733d5d3a697c6f355c44465c9c468) Thanks [@GeeWizWow](https://github.com/GeeWizWow)! - Fix URL statements not not respecting Next's setup for resolving assets
## 2.2.1
### Patch Changes
- [#1148](https://github.com/vanilla-extract-css/vanilla-extract/pull/1148) [`b279bb5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b279bb5fc4902abb68319f44948e0f66d60125b6) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix error when intializing plugin
## 2.2.0
### Minor Changes
- [#1105](https://github.com/vanilla-extract-css/vanilla-extract/pull/1105) [`9541d79`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9541d79722b9e0488422ee116a31567c0ac192d6) Thanks [@SukkaW](https://github.com/SukkaW)! - Fix #1101. Correctly handle Next.js configuration.
## 2.1.3
### Patch Changes
- [#1099](https://github.com/vanilla-extract-css/vanilla-extract/pull/1099) [`0d1c17a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0d1c17a3ffa0212466370a9c0840774e73793f3a) Thanks [@shuding](https://github.com/shuding)! - Use the resolved Next.js config in `next-plugin`
## 2.1.2
### Patch Changes
- [#1060](https://github.com/vanilla-extract-css/vanilla-extract/pull/1060) [`71f1dc5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/71f1dc50d01fab62087f86d1ed1ee9025913f328) Thanks [@SuttonJack](https://github.com/SuttonJack)! - Prepare next-plugin for Next 13 App Dir support
* [#912](https://github.com/vanilla-extract-css/vanilla-extract/pull/912) [`9cefba8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cefba8aff8321b85f3349ab622fec6e344d8f0a) Thanks [@nix6839](https://github.com/nix6839)! - Add types to Nextjs plugin configuration
## 2.1.1
### Patch Changes
- [#852](https://github.com/vanilla-extract-css/vanilla-extract/pull/852) [`dfc6405`](https://github.com/vanilla-extract-css/vanilla-extract/commit/dfc640593b5c627364c5423c3110b048f51844e4) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix `Cannot find module *.css.ts.vanilla.css` issue
Previously, CSS was being output on both the client and server builds. This fix ensure CSS is only output on the client build.
## 2.1.0
### Minor Changes
- [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Remove requirement for `@vanilla-extract/babel-plugin`
Previously, to get automatic debug IDs you needed to use Babel with the `@vanilla-extract/babel-plugin` in your config. As this is no longer the case, the `@vanilla-extract/babel-plugin` should be removed completely from your project.
### Patch Changes
- Updated dependencies [[`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0)]:
- @vanilla-extract/webpack-plugin@2.2.0
## 2.0.2
### Patch Changes
- [#645](https://github.com/vanilla-extract-css/vanilla-extract/pull/645) [`5ebca75`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5ebca758d18e7d55d0c079c00178cb14e936ac2e) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Bump `@vanilla-extract/integration` dep
- Updated dependencies [[`5ebca75`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5ebca758d18e7d55d0c079c00178cb14e936ac2e)]:
- @vanilla-extract/webpack-plugin@2.1.7
## 2.0.1
### Patch Changes
- [#543](https://github.com/vanilla-extract-css/vanilla-extract/pull/543) [`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure code is compatible with node 12
- Updated dependencies [[`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013)]:
- @vanilla-extract/webpack-plugin@2.1.5
## 2.0.0
### Major Changes
- [#537](https://github.com/vanilla-extract-css/vanilla-extract/pull/537) [`014f551`](https://github.com/vanilla-extract-css/vanilla-extract/commit/014f551a16a5a42fbe46d2489f4157249d9cab1d) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Bump minimum version of Next to 12.0.5.
## 1.0.1
### Patch Changes
- [#443](https://github.com/vanilla-extract-css/vanilla-extract/pull/443) [`18363ee`](https://github.com/vanilla-extract-css/vanilla-extract/commit/18363ee319bf498ed97b068414f13f5383c41405) Thanks [@swudged](https://github.com/swudged)! - Support Next.js v12
================================================
FILE: packages/next-plugin/package.json
================================================
{
"name": "@vanilla-extract/next-plugin",
"version": "2.5.1",
"description": "Zero-runtime Stylesheets-in-TypeScript",
"main": "dist/vanilla-extract-next-plugin.cjs.js",
"module": "dist/vanilla-extract-next-plugin.esm.js",
"types": "dist/vanilla-extract-next-plugin.cjs.d.ts",
"preconstruct": {
"entrypoints": [
"index.ts"
]
},
"files": [
"/dist"
],
"repository": {
"type": "git",
"url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
"directory": "packages/next-plugin"
},
"author": "SEEK",
"license": "MIT",
"dependencies": {
"@vanilla-extract/turbopack-plugin": "workspace:^",
"@vanilla-extract/webpack-plugin": "workspace:^",
"semver": "^7.6.3"
},
"peerDependencies": {
"next": ">=12.1.7"
},
"devDependencies": {
"@types/semver": "^7.7.1",
"next": "12.3.4",
"webpack": "^5.90.0"
}
}
================================================
FILE: packages/next-plugin/src/index.ts
================================================
// @ts-expect-error
import browserslist from 'next/dist/compiled/browserslist';
import NextMiniCssExtractPluginDefault from 'next/dist/build/webpack/plugins/mini-css-extract-plugin';
import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin/next';
import { findPagesDir } from 'next/dist/lib/find-pages-dir';
import { lazyPostCSS } from 'next/dist/build/webpack/config/blocks/css';
import { cssFileResolve } from 'next/dist/build/webpack/config/blocks/css/loaders/file-resolve';
import type webpack from 'webpack';
import type {
NextConfig,
WebpackConfigContext,
} from 'next/dist/server/config-shared';
import { createRequire } from 'node:module';
import * as path from 'node:path';
import type { TurboLoaderOptions } from '@vanilla-extract/turbopack-plugin';
import semver from 'semver';
const require = createRequire(import.meta.url);
type PluginOptions = ConstructorParameters[0] & {
unstable_turbopack?: {
glob?: string[];
/**
* controls whether we attempt to configure turbopack
* auto: enable only when Next >= 16.0.0
* on: force enable regardless of detected Next version
* off: never configure turbopack, webpack only
*/
mode?: 'auto' | 'on' | 'off';
};
};
const NextMiniCssExtractPlugin = NextMiniCssExtractPluginDefault as any;
// Adopted from https://github.com/vercel/next.js/blob/1f1632979c78b3edfe59fd85d8cce62efcdee688/packages/next/build/webpack-config.ts#L60-L72
function getSupportedBrowsers(dir: string, isDevelopment: boolean) {
try {
return browserslist.loadConfig({
path: dir,
env: isDevelopment ? 'development' : 'production',
});
} catch {
return undefined;
}
}
// Adopt from Next.js' getGlobalCssLoader
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
const getVanillaExtractCssLoaders = (
options: WebpackConfigContext,
assetPrefix: string,
hasAppDir: boolean,
) => {
const loaders: webpack.RuleSetUseItem[] = [];
// Adopt from Next.js' getClientStyleLoader
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3
if (!options.isServer) {
// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L16
// Keep next-style-loader for development mode in `pages/`
if (options.dev && !hasAppDir) {
loaders.push({
loader: 'next-style-loader',
options: {
insert: function (element: Node) {
// By default, style-loader injects CSS into the bottom
// of . This causes ordering problems between dev
// and prod. To fix this, we render a tag as
// an anchor for the styles to be placed before. These
// styles will be applied _before_