Skip to content

Commit ece5fc3

Browse files
mrm007mrm007
authored
Support @layer (#955)
1 parent f247339 commit ece5fc3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1576
-141
lines changed

‎.changeset/gorgeous-laws-search.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
'@vanilla-extract/css': minor
3+
---
4+
5+
Add support for [cascade layers, i.e. `@layer`][cascade layers].
6+
7+
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.
8+
9+
```tsx
10+
// layers.css.ts
11+
import { layer } from '@vanilla-extract/css';
12+
13+
export const reset = layer('reset');
14+
export const framework = layer('framework');
15+
export const typography = layer('typography');
16+
17+
// typography.css.ts
18+
import { style } from '@vanilla-extract/css';
19+
import { typography } from './layers.css';
20+
21+
export const standard = style({
22+
'@layer': {
23+
[typography]: {
24+
fontSize: '1rem'
25+
}
26+
}
27+
});
28+
```
29+
[cascade layers]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
30+
[layer]: https://vanilla-extract.style/documentation/api/layer
31+
[globalLayer]: https://vanilla-extract.style/documentation/global-api/global-layer

‎fixtures/layers/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Layers</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="./src/index.ts"></script>
11+
</body>
12+
</html>

‎fixtures/layers/package.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "@fixtures/layers",
3+
"version": "0.0.1",
4+
"main": "src/index.ts",
5+
"author": "SEEK",
6+
"private": true,
7+
"dependencies": {
8+
"@vanilla-extract/css": "1.10.0"
9+
}
10+
}

‎fixtures/layers/src/index.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { link, pink } from './styles.css';
2+
3+
const html = String.raw;
4+
5+
document.body.innerHTML = html`
6+
<main>
7+
<p>
8+
<a href="#">This link</a> should be <b>red</b> on mobile, green on
9+
desktop.
10+
</p>
11+
<p>
12+
<a href="#" class=${link}>This link with class of <code>link</code></a>
13+
should be <b>blue</b> on mobile, green on desktop.
14+
</p>
15+
<p>
16+
<a href="#" class=${pink}>This link with class of <code>pink</code></a>
17+
should be <b>pink</b> on mobile, green on desktop.
18+
</p>
19+
</main>
20+
`;

‎fixtures/layers/src/styles.css.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { style, globalStyle, layer, globalLayer } from '@vanilla-extract/css';
2+
3+
/*
4+
The resulting layer order:
5+
1. lib
6+
2. base
7+
3. typography (when above 600px)
8+
4. utilities
9+
5. typography (when below 600px)
10+
11+
This will make links red/blue/pink when below 600px and green when above 600px.
12+
*/
13+
14+
const typography = 'typography'; // this layer is defined conditionally
15+
16+
const lib = globalLayer('lib');
17+
const base = layer({ parent: lib });
18+
19+
globalStyle('a', {
20+
'@media': {
21+
'screen and (min-width: 600px)': {
22+
'@layer': {
23+
[typography]: {
24+
color: 'green', // styles *all* links
25+
fontSize: '1.5rem',
26+
},
27+
},
28+
},
29+
},
30+
'@layer': {
31+
[base]: {
32+
fontWeight: 800,
33+
color: 'red',
34+
},
35+
},
36+
});
37+
38+
export const link = style({
39+
'@layer': {
40+
[base]: {
41+
color: 'blue',
42+
},
43+
},
44+
});
45+
46+
const utilities = layer({ parent: lib });
47+
48+
export const pink = style({
49+
'@layer': {
50+
[utilities]: {
51+
color: 'hotpink', // styles *all* .pink's
52+
},
53+
},
54+
});
55+
56+
globalLayer(typography);

‎fixtures/themed/src/shared.css.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,8 @@ export const shadow: string = style({
77
globalStyle('body', {
88
backgroundColor: 'skyblue',
99
});
10+
11+
// make the screenshot less flaky in CI
12+
globalStyle('body, button', {
13+
lineHeight: '16px',
14+
});

0 commit comments

Comments
 (0)