Support @layer (#955)

vanilla-extract-css · Mar 28, 2023 · ece5fc3 · ece5fc3
1 parent f247339
commit ece5fc3
Show file tree

Hide file tree

Showing 46 changed files with 1,576 additions and 141 deletions.
diff --git a/.changeset/gorgeous-laws-search.md b/.changeset/gorgeous-laws-search.md
@@ -0,0 +1,31 @@
+---
+'@vanilla-extract/css': minor
+---
+
+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
diff --git a/fixtures/layers/index.html b/fixtures/layers/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Layers</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/index.ts"></script>
+  </body>
+</html>
diff --git a/fixtures/layers/package.json b/fixtures/layers/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@fixtures/layers",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "author": "SEEK",
+  "private": true,
+  "dependencies": {
+    "@vanilla-extract/css": "1.10.0"
+  }
+}
diff --git a/fixtures/layers/src/index.ts b/fixtures/layers/src/index.ts
@@ -0,0 +1,20 @@
+import { link, pink } from './styles.css';
+
+const html = String.raw;
+
+document.body.innerHTML = html`
+  <main>
+    <p>
+      <a href="#">This link</a> should be <b>red</b> on mobile, green on
+      desktop.
+    </p>
+    <p>
+      <a href="#" class=${link}>This link with class of <code>link</code></a>
+      should be <b>blue</b> on mobile, green on desktop.
+    </p>
+    <p>
+      <a href="#" class=${pink}>This link with class of <code>pink</code></a>
+      should be <b>pink</b> on mobile, green on desktop.
+    </p>
+  </main>
+`;
diff --git a/fixtures/layers/src/styles.css.ts b/fixtures/layers/src/styles.css.ts
@@ -0,0 +1,56 @@
+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);
diff --git a/fixtures/themed/src/shared.css.ts b/fixtures/themed/src/shared.css.ts
@@ -7,3 +7,8 @@ export const shadow: string = style({
 globalStyle('body', {
   backgroundColor: 'skyblue',
 });
+
+// make the screenshot less flaky in CI
+globalStyle('body, button', {
+  lineHeight: '16px',
+});