Skip to content

Commit 8e00c01

Browse files
philipp-spiessphilipp-spiess
committed
Add reference CSS coverage for parser
1 parent 4827c46 commit 8e00c01

File tree

4 files changed

+441
-0
lines changed

4 files changed

+441
-0
lines changed

‎packages/tailwindcss/reference.css‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
/* Tailwind CSS syntax reference: demonstrates all supported directives and functions */
2+
3+
@config "./reference/reference.config.js";
4+
5+
@plugin "./reference/reference.plugin.js" {
6+
enable-grid: true;
7+
card-color: 'white';
8+
accent-scale: 'sky', 'amber';
9+
shadow-depth: 24;
10+
}
11+
12+
@import 'tailwindcss' prefix(tw);
13+
@import 'tailwindcss/utilities' important;
14+
@import 'tailwindcss/theme' theme(static);
15+
@import './reference/reference-import.css' layer(utilities) supports(display: grid);
16+
17+
@reference 'tailwindcss/theme';
18+
@reference './reference/reference-variant.css';
19+
20+
@source "./app/**/*.{js,ts,jsx,tsx}";
21+
@source not "./app/**/__tests__/*";
22+
@source inline("tw:prose tw:underline");
23+
@source not inline("tw:legacy");
24+
25+
@theme reference prefix(tw);
26+
27+
@theme default {
28+
--color-brand: #1d4ed8;
29+
--font-sans: 'Inter', system-ui, sans-serif;
30+
--spacing: 0.25rem;
31+
32+
@keyframes reference-pulse {
33+
from {
34+
opacity: 1;
35+
}
36+
37+
to {
38+
opacity: 0.35;
39+
}
40+
}
41+
}
42+
43+
@theme {
44+
--color-accent: oklch(70% 0.12 220);
45+
--radius-card: 1rem;
46+
--value-sm: 14px;
47+
--modifier-7: 28px;
48+
}
49+
50+
@theme inline {
51+
--shadow-card: 0 25px 50px -12px color-mix(in oklab, var(--color-brand) 25%, transparent);
52+
}
53+
54+
@theme inline prefix(tw) {
55+
--size-icon: 1.25rem;
56+
}
57+
58+
@theme reference inline {
59+
--card-outline: 1px solid color-mix(in oklab, var(--color-brand) 60%, transparent);
60+
}
61+
62+
@theme static {
63+
--ring-brand: var(--color-brand);
64+
65+
@keyframes reference-spin {
66+
from {
67+
transform: rotate(0deg);
68+
}
69+
70+
to {
71+
transform: rotate(360deg);
72+
}
73+
}
74+
}
75+
76+
@media theme(reference) prefix(tw) important {
77+
@theme {
78+
--color-card-foreground: var(--color-accent);
79+
}
80+
}
81+
82+
@media source("./components/**/*.{tsx,jsx}") theme(inline) {
83+
@theme {
84+
--spacing-component: calc(var(--spacing) * 6);
85+
}
86+
}
87+
88+
@tailwind base;
89+
@tailwind components;
90+
@tailwind utilities source("./app/**/*.{html,js,ts,jsx,tsx}");
91+
92+
@layer base {
93+
*, *::before, *::after {
94+
box-sizing: border-box;
95+
}
96+
97+
html {
98+
font-family: theme('fontFamily.sans', var(--font-sans));
99+
}
100+
101+
body {
102+
background-color: --alpha(var(--color-brand) / 7.5%);
103+
color: var(--color-card-foreground, var(--color-accent));
104+
}
105+
}
106+
107+
@layer theme {
108+
@theme {
109+
--layer-spacing-8: calc(var(--spacing) * 8);
110+
}
111+
}
112+
113+
@layer components {
114+
.card {
115+
@apply tw:bg-white tw:text-slate-900 tw:shadow-lg tw:rounded;
116+
padding: --spacing(6);
117+
border-radius: --theme(--radius-card, 0.75rem);
118+
outline: --theme(--card-outline inline, 0 solid transparent);
119+
box-shadow: var(--shadow-card, --theme(--shadow-card, 0 10px 30px rgba(15, 23, 42, 0.15)));
120+
}
121+
122+
.card {
123+
@variant reference-dark {
124+
outline-color: --theme(--ring-brand inline, var(--color-brand));
125+
}
126+
127+
@variant motion-safe {
128+
transition: transform 200ms ease;
129+
}
130+
131+
@variant hover {
132+
transform: translateY(-2px);
133+
}
134+
}
135+
136+
.chip {
137+
display: inline-flex;
138+
align-items: center;
139+
gap: --spacing(2);
140+
font-size: theme('fontSize.sm', 0.875rem);
141+
}
142+
143+
.chip {
144+
@variant hocus {
145+
@apply tw:ring-2 tw:ring-offset-2;
146+
}
147+
}
148+
}
149+
150+
@layer utilities {
151+
@variant hover {
152+
.hover\\:reference-underline {
153+
text-decoration-line: underline;
154+
}
155+
}
156+
157+
.content-auto {
158+
content-visibility: auto;
159+
}
160+
}
161+
162+
@utility card {
163+
--tw-card-shadow: var(--shadow-card);
164+
box-shadow: var(--tw-card-shadow);
165+
}
166+
167+
@utility stack-* {
168+
--stack-gap: calc(var(--spacing) * --value(number));
169+
margin-top: var(--stack-gap);
170+
margin-bottom: var(--stack-gap);
171+
}
172+
173+
@utility aspect-* {
174+
aspect-ratio: --value(ratio);
175+
}
176+
177+
@utility example-* {
178+
--value: --value(--value, [length]);
179+
--modifier: --modifier(--modifier, [length]);
180+
--modifier-with-calc: calc(--modifier(--modifier, [length]) * 2);
181+
--modifier-literals: --modifier('literal', 'literal-2');
182+
}
183+
184+
@utility mask-r-* {
185+
--mask-right: linear-gradient(
186+
to left,
187+
transparent calc(var(--spacing) * --modifier(integer)),
188+
black calc(var(--spacing) * --value(integer))
189+
);
190+
mask-image: var(--mask-right);
191+
}
192+
193+
@custom-variant hocus (&:hover, &:focus);
194+
195+
@custom-variant theme-wrap {
196+
@variant reference-dark {
197+
@slot;
198+
}
199+
}
200+
201+
@variant reference-dark {
202+
&:where([data-theme='reference-dark'] *) {
203+
@slot;
204+
}
205+
}
206+
207+
@variant motion-safe {
208+
@media (prefers-reduced-motion: no-preference) {
209+
@slot;
210+
}
211+
}
212+
213+
@variant hover {
214+
&:hover {
215+
@slot;
216+
}
217+
}
218+
219+
@variant hover {
220+
@variant reference-dark {
221+
.reference-hover-dark {
222+
color: var(--color-brand);
223+
}
224+
}
225+
}
226+
227+
@media (prefers-color-scheme: dark) {
228+
@variant reference-dark {
229+
@page {
230+
margin: 1in;
231+
}
232+
}
233+
}
234+
235+
.badge {
236+
border-radius: var(--radius-card);
237+
padding-inline: --spacing(3);
238+
padding-block: --spacing(1.5);
239+
}
240+
241+
.badge {
242+
@variant reference-dark {
243+
border-color: var(--color-brand);
244+
}
245+
}
246+
247+
.icon {
248+
width: var(--size-icon);
249+
height: var(--size-icon);
250+
}
251+
252+
.icon {
253+
@variant theme-wrap {
254+
color: var(--color-card-foreground, var(--color-brand));
255+
}
256+
}

‎packages/tailwindcss/reference/reference-import.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* Imported stylesheet used by reference.css via @import */
2+
3+
@theme inline {
4+
--imported-gap: 1.5rem;
5+
}
6+
7+
@layer utilities {
8+
.from-import {
9+
display: grid;
10+
gap: var(--imported-gap, 1rem);
11+
}
12+
}

‎packages/tailwindcss/reference/reference-variant.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* Referenced stylesheet providing additional variants and theme tokens */
2+
3+
@theme reference {
4+
--reference-accent: #f97316;
5+
}
6+
7+
@variant data-open {
8+
&[data-open='true'] {
9+
@slot;
10+
}
11+
}
12+
13+
@variant data-open {
14+
@variant hover {
15+
.data-open-hover {
16+
color: var(--reference-accent, currentColor);
17+
}
18+
}
19+
}

0 commit comments

Comments
 (0)