Skip to content

Commit d33aa4a

Browse files
markdalgleishmarkdalgleish
authored
sprinkles: Add support for layers (#1062)
1 parent 2ba0bc5 commit d33aa4a

13 files changed

+836
-614
lines changed

‎.changeset/sprinkles-layers.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
'@vanilla-extract/sprinkles': minor
3+
---
4+
5+
Support assigning properties to layers via `@layer` option on `defineProperties`
6+
7+
**Example usage:**
8+
9+
```ts
10+
// sprinkles.css.ts
11+
import { defineProperties } from '@vanilla-extract/sprinkles';
12+
import { layer } from '@vanilla-extract/css';
13+
14+
export const sprinklesLayer = layer();
15+
16+
const properties = defineProperties({
17+
'@layer': sprinklesLayer,
18+
// etc.
19+
});
20+
```

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const container = style({
2121
containerType: 'size',
2222
});
2323

24-
const responsiveProperties = defineProperties({
24+
const responsiveConditions = {
2525
defaultCondition: 'mobile',
2626
conditions: {
2727
mobile: {},
@@ -40,12 +40,23 @@ const responsiveProperties = defineProperties({
4040
},
4141
},
4242
responsiveArray: ['mobile', 'tablet', 'desktop'],
43+
} as const;
44+
45+
const responsiveProperties = defineProperties({
46+
...responsiveConditions,
4347
properties: {
4448
display: ['flex', 'none', 'block'],
4549
paddingTop: {
4650
small: '10px',
4751
medium: '20px',
4852
},
53+
},
54+
});
55+
56+
const responsiveLayerProperties = defineProperties({
57+
'@layer': 'responsive-layer-name',
58+
...responsiveConditions,
59+
properties: {
4960
background: {
5061
red: {
5162
vars: { [alpha]: '1' },
@@ -71,6 +82,12 @@ const unconditionalProperties = defineProperties({
7182
color: `rgba(255, 0, 0, ${textAlpha})`,
7283
},
7384
},
85+
},
86+
});
87+
88+
const unconditionalLayerProperties = defineProperties({
89+
'@layer': 'unconditional-layer-name',
90+
properties: {
7491
textOpacity: {
7592
1: { vars: { [textAlpha]: '1' } },
7693
0.8: { vars: { [textAlpha]: '0.8' } },
@@ -80,7 +97,9 @@ const unconditionalProperties = defineProperties({
8097

8198
export const sprinkles = createSprinkles(
8299
responsiveProperties,
100+
responsiveLayerProperties,
83101
unconditionalProperties,
102+
unconditionalLayerProperties,
84103
);
85104

86105
export const mapResponsiveValue = createMapValueFn(responsiveProperties);

‎packages/sprinkles/src/index.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ type ShorthandOptions<
4444
};
4545

4646
type UnconditionalAtomicOptions<Properties extends AtomicProperties> = {
47+
'@layer'?: string;
4748
properties: Properties;
4849
};
4950

@@ -288,6 +289,14 @@ export function defineProperties(options: any): any {
288289
};
289290
}
290291

292+
if (options['@layer']) {
293+
styleValue = {
294+
'@layer': {
295+
[options['@layer']]: styleValue,
296+
},
297+
};
298+
}
299+
291300
const className = style(
292301
styleValue,
293302
`${key}_${String(valueName)}_${conditionName}`,
@@ -304,9 +313,17 @@ export function defineProperties(options: any): any {
304313
styles[key].values[valueName].defaultClass = defaultClasses.join(' ');
305314
}
306315
} else {
307-
const styleValue: StyleRule =
316+
let styleValue: StyleRule =
308317
typeof value === 'object' ? value : { [key]: value };
309318

319+
if (options['@layer']) {
320+
styleValue = {
321+
'@layer': {
322+
[options['@layer']]: styleValue,
323+
},
324+
};
325+
}
326+
310327
styles[key].values[valueName] = {
311328
defaultClass: style(styleValue, `${key}_${String(valueName)}`),
312329
};

‎site/docs/packages/sprinkles.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -532,6 +532,26 @@ const responsiveProperties = defineProperties({
532532
});
533533
```
534534

535+
### @layer
536+
537+
Optionally defines a layer to assign styles to for a given set of properties.
538+
539+
> 🚧&nbsp;&nbsp;Ensure your target browsers [support layers].
540+
> Vanilla Extract supports the [layers syntax][layer] but does not polyfill the feature in unsupported browsers.
541+
542+
```ts
543+
// sprinkles.css.ts
544+
import { defineProperties } from '@vanilla-extract/sprinkles';
545+
import { layer } from '@vanilla-extract/css';
546+
547+
export const sprinklesLayer = layer();
548+
549+
const properties = defineProperties({
550+
'@layer': sprinklesLayer
551+
// etc.
552+
});
553+
```
554+
535555
## createSprinkles
536556

537557
Creates a type-safe function for accessing your [defined properties](#defineProperties). You can provide as many collections of properties as you like.
@@ -775,3 +795,5 @@ const e: ResponsiveAlign = { desktop: 'center' };
775795
[styled system]: https://styled-system.com
776796
[support container queries]: https://caniuse.com/css-container-queries
777797
[container query syntax]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
798+
[layer]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
799+
[support layers]: https://caniuse.com/css-cascade-layers

‎tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-esbuild--development.css‎

Lines changed: 84 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@layer responsive-layer-name;
2+
@layer unconditional-layer-name;
13
.styles_container__1j5zl923 {
24
container-name: styles_containerName__1j5zl922;
35
container-type: size;
@@ -17,32 +19,10 @@
1719
.styles_paddingTop_medium_mobile__1j5zl92k {
1820
padding-top: 20px;
1921
}
20-
.styles_background_red_mobile__1j5zl92o {
21-
--alpha__1j5zl920: 1;
22-
background: rgba(255, 0, 0, var(--alpha__1j5zl920));
23-
}
24-
.styles_backgroundOpacity_1_mobile__1j5zl92s {
25-
--alpha__1j5zl920: 1;
26-
}
27-
.styles_backgroundOpacity_0\.1_mobile__1j5zl92w {
28-
--alpha__1j5zl920: 0.1;
29-
}
30-
.styles_backgroundOpacity_0\.2_mobile__1j5zl9210 {
31-
--alpha__1j5zl920: 0.2;
32-
}
33-
.styles_backgroundOpacity_0\.3_mobile__1j5zl9214 {
34-
--alpha__1j5zl920: 0.3;
35-
}
3622
.styles_color_red__1j5zl9218 {
3723
--textAlpha__1j5zl921: 1;
3824
color: rgba(255, 0, 0, var(--textAlpha__1j5zl921));
3925
}
40-
.styles_textOpacity_1__1j5zl9219 {
41-
--textAlpha__1j5zl921: 1;
42-
}
43-
.styles_textOpacity_0\.8__1j5zl921a {
44-
--textAlpha__1j5zl921: 0.8;
45-
}
4626
body {
4727
margin: 0;
4828
}
@@ -66,22 +46,6 @@ body .styles__1j5zl921c {
6646
.styles_paddingTop_medium_tablet__1j5zl92l {
6747
padding-top: 20px;
6848
}
69-
.styles_background_red_tablet__1j5zl92p {
70-
--alpha__1j5zl920: 1;
71-
background: rgba(255, 0, 0, var(--alpha__1j5zl920));
72-
}
73-
.styles_backgroundOpacity_1_tablet__1j5zl92t {
74-
--alpha__1j5zl920: 1;
75-
}
76-
.styles_backgroundOpacity_0\.1_tablet__1j5zl92x {
77-
--alpha__1j5zl920: 0.1;
78-
}
79-
.styles_backgroundOpacity_0\.2_tablet__1j5zl9211 {
80-
--alpha__1j5zl920: 0.2;
81-
}
82-
.styles_backgroundOpacity_0\.3_tablet__1j5zl9215 {
83-
--alpha__1j5zl920: 0.3;
84-
}
8549
}
8650
}
8751
@media screen and (min-width: 1024px) {
@@ -101,22 +65,6 @@ body .styles__1j5zl921c {
10165
.styles_paddingTop_medium_desktop__1j5zl92m {
10266
padding-top: 20px;
10367
}
104-
.styles_background_red_desktop__1j5zl92q {
105-
--alpha__1j5zl920: 1;
106-
background: rgba(255, 0, 0, var(--alpha__1j5zl920));
107-
}
108-
.styles_backgroundOpacity_1_desktop__1j5zl92u {
109-
--alpha__1j5zl920: 1;
110-
}
111-
.styles_backgroundOpacity_0\.1_desktop__1j5zl92y {
112-
--alpha__1j5zl920: 0.1;
113-
}
114-
.styles_backgroundOpacity_0\.2_desktop__1j5zl9212 {
115-
--alpha__1j5zl920: 0.2;
116-
}
117-
.styles_backgroundOpacity_0\.3_desktop__1j5zl9216 {
118-
--alpha__1j5zl920: 0.3;
119-
}
12068
}
12169
@supports not (display: grid) {
12270
[data-dark-mode] .styles_display_flex_darkDesktop__1j5zl927 {
@@ -134,21 +82,89 @@ body .styles__1j5zl921c {
13482
[data-dark-mode] .styles_paddingTop_medium_darkDesktop__1j5zl92n {
13583
padding-top: 20px;
13684
}
137-
[data-dark-mode] .styles_background_red_darkDesktop__1j5zl92r {
138-
--alpha__1j5zl920: 1;
139-
background: rgba(255, 0, 0, var(--alpha__1j5zl920));
140-
}
141-
[data-dark-mode] .styles_backgroundOpacity_1_darkDesktop__1j5zl92v {
142-
--alpha__1j5zl920: 1;
143-
}
144-
[data-dark-mode] .styles_backgroundOpacity_0\.1_darkDesktop__1j5zl92z {
145-
--alpha__1j5zl920: 0.1;
146-
}
147-
[data-dark-mode] .styles_backgroundOpacity_0\.2_darkDesktop__1j5zl9213 {
148-
--alpha__1j5zl920: 0.2;
85+
}
86+
}
87+
@layer responsive-layer-name {
88+
.styles_background_red_mobile__1j5zl92o {
89+
--alpha__1j5zl920: 1;
90+
background: rgba(255, 0, 0, var(--alpha__1j5zl920));
91+
}
92+
.styles_backgroundOpacity_1_mobile__1j5zl92s {
93+
--alpha__1j5zl920: 1;
94+
}
95+
.styles_backgroundOpacity_0\.1_mobile__1j5zl92w {
96+
--alpha__1j5zl920: 0.1;
97+
}
98+
.styles_backgroundOpacity_0\.2_mobile__1j5zl9210 {
99+
--alpha__1j5zl920: 0.2;
100+
}
101+
.styles_backgroundOpacity_0\.3_mobile__1j5zl9214 {
102+
--alpha__1j5zl920: 0.3;
103+
}
104+
@media screen and (min-width: 768px) {
105+
@container styles_containerName__1j5zl922 (min-width: 768px) {
106+
.styles_background_red_tablet__1j5zl92p {
107+
--alpha__1j5zl920: 1;
108+
background: rgba(255, 0, 0, var(--alpha__1j5zl920));
109+
}
110+
.styles_backgroundOpacity_1_tablet__1j5zl92t {
111+
--alpha__1j5zl920: 1;
112+
}
113+
.styles_backgroundOpacity_0\.1_tablet__1j5zl92x {
114+
--alpha__1j5zl920: 0.1;
115+
}
116+
.styles_backgroundOpacity_0\.2_tablet__1j5zl9211 {
117+
--alpha__1j5zl920: 0.2;
118+
}
119+
.styles_backgroundOpacity_0\.3_tablet__1j5zl9215 {
120+
--alpha__1j5zl920: 0.3;
121+
}
149122
}
150-
[data-dark-mode] .styles_backgroundOpacity_0\.3_darkDesktop__1j5zl9217 {
151-
--alpha__1j5zl920: 0.3;
123+
}
124+
@media screen and (min-width: 1024px) {
125+
@container styles_containerName__1j5zl922 (min-width: 1024px) {
126+
.styles_background_red_desktop__1j5zl92q {
127+
--alpha__1j5zl920: 1;
128+
background: rgba(255, 0, 0, var(--alpha__1j5zl920));
129+
}
130+
.styles_backgroundOpacity_1_desktop__1j5zl92u {
131+
--alpha__1j5zl920: 1;
132+
}
133+
.styles_backgroundOpacity_0\.1_desktop__1j5zl92y {
134+
--alpha__1j5zl920: 0.1;
135+
}
136+
.styles_backgroundOpacity_0\.2_desktop__1j5zl9212 {
137+
--alpha__1j5zl920: 0.2;
138+
}
139+
.styles_backgroundOpacity_0\.3_desktop__1j5zl9216 {
140+
--alpha__1j5zl920: 0.3;
141+
}
142+
}
143+
@supports not (display: grid) {
144+
[data-dark-mode] .styles_background_red_darkDesktop__1j5zl92r {
145+
--alpha__1j5zl920: 1;
146+
background: rgba(255, 0, 0, var(--alpha__1j5zl920));
147+
}
148+
[data-dark-mode] .styles_backgroundOpacity_1_darkDesktop__1j5zl92v {
149+
--alpha__1j5zl920: 1;
150+
}
151+
[data-dark-mode] .styles_backgroundOpacity_0\.1_darkDesktop__1j5zl92z {
152+
--alpha__1j5zl920: 0.1;
153+
}
154+
[data-dark-mode] .styles_backgroundOpacity_0\.2_darkDesktop__1j5zl9213 {
155+
--alpha__1j5zl920: 0.2;
156+
}
157+
[data-dark-mode] .styles_backgroundOpacity_0\.3_darkDesktop__1j5zl9217 {
158+
--alpha__1j5zl920: 0.3;
159+
}
152160
}
153161
}
154162
}
163+
@layer unconditional-layer-name {
164+
.styles_textOpacity_1__1j5zl9219 {
165+
--textAlpha__1j5zl921: 1;
166+
}
167+
.styles_textOpacity_0\.8__1j5zl921a {
168+
--textAlpha__1j5zl921: 0.8;
169+
}
170+
}

0 commit comments

Comments
 (0)