Skip to content

Commit 57b7141

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent 71a4c5f commit 57b7141

6 files changed

Lines changed: 526 additions & 2 deletions

File tree

‎packages/headwind/bin/bin-name‎

56.8 MB
Binary file not shown.

‎packages/headwind/example/comprehensive.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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>Headwind - Comprehensive Example</title>
7+
</head>
8+
<body>
9+
<!-- Layout Utilities -->
10+
<div class="relative top-4 z-10 aspect-square">
11+
<div class="absolute inset-0 overflow-hidden">Content</div>
12+
</div>
13+
14+
<!-- Grid Utilities -->
15+
<div class="grid grid-cols-3 gap-4">
16+
<div class="col-span-2">Span 2</div>
17+
<div>Cell</div>
18+
</div>
19+
20+
<!-- Typography -->
21+
<div class="uppercase italic underline whitespace-nowrap truncate">
22+
Styled Text
23+
</div>
24+
25+
<!-- Transforms -->
26+
<div class="scale-150 rotate-45 translate-x-4 skew-x-12">
27+
Transformed
28+
</div>
29+
30+
<!-- Transitions -->
31+
<button class="transition-all duration-300 ease-in-out hover:opacity-50">
32+
Animated Button
33+
</button>
34+
35+
<!-- Filters -->
36+
<div class="blur-sm grayscale-100 brightness-150">
37+
Filtered Content
38+
</div>
39+
40+
<!-- Interactivity -->
41+
<div class="cursor-pointer select-none pointer-events-auto resize-both">
42+
Interactive
43+
</div>
44+
45+
<!-- Arbitrary Values -->
46+
<div class="w-[250px] p-[2.5rem] bg-[#ff6b6b]">
47+
Custom Values
48+
</div>
49+
50+
<!-- Important Modifier -->
51+
<div class="!text-white !bg-black !p-8">
52+
Important Styles
53+
</div>
54+
55+
<!-- SVG -->
56+
<svg class="fill-current stroke-current">
57+
<circle cx="50" cy="50" r="40" />
58+
</svg>
59+
60+
<!-- Table -->
61+
<table class="border-collapse table-fixed">
62+
<tr><td>Cell</td></tr>
63+
</table>
64+
65+
<!-- Scroll -->
66+
<div class="scroll-smooth scroll-p-4 snap-y">
67+
Scrollable
68+
</div>
69+
</body>
70+
</html>

‎packages/headwind/example/output.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,4 +76,161 @@
7676

7777
.hover\:bg-blue-600:hover {
7878
background-color: blue-600;
79+
}
80+
81+
.focus\:outline-none:focus {
82+
outline-width: none;
83+
}
84+
85+
.relative {
86+
position: relative;
87+
}
88+
89+
.top-4 {
90+
top: 1rem;
91+
}
92+
93+
.z-10 {
94+
z-index: 10;
95+
}
96+
97+
.aspect-square {
98+
aspect-ratio: 1 / 1;
99+
}
100+
101+
.absolute {
102+
position: absolute;
103+
}
104+
105+
.inset-0 {
106+
top: 0;
107+
right: 0;
108+
bottom: 0;
109+
left: 0;
110+
}
111+
112+
.overflow-hidden {
113+
overflow: hidden;
114+
}
115+
116+
.grid {
117+
display: grid;
118+
}
119+
120+
.grid-cols-3 {
121+
grid-template-columns: repeat(3, minmax(0, 1fr));
122+
}
123+
124+
.gap-4 {
125+
gap: 1rem;
126+
}
127+
128+
.col-span-2 {
129+
grid-column: span 2 / span 2;
130+
}
131+
132+
.uppercase {
133+
text-transform: uppercase;
134+
}
135+
136+
.italic {
137+
font-style: italic;
138+
}
139+
140+
.underline {
141+
text-decoration-line: underline;
142+
}
143+
144+
.whitespace-nowrap {
145+
white-space: nowrap;
146+
}
147+
148+
.truncate {
149+
overflow: hidden;
150+
text-overflow: ellipsis;
151+
white-space: nowrap;
152+
}
153+
154+
.scale-150 {
155+
transform: scale(1.5);
156+
}
157+
158+
.rotate-45 {
159+
transform: rotate(45deg);
160+
}
161+
162+
.translate-x-4 {
163+
transform: translateX(1rem);
164+
}
165+
166+
.skew-x-12 {
167+
transform: skewX(12deg);
168+
}
169+
170+
.transition-all {
171+
transition-property: all;
172+
}
173+
174+
.duration-300 {
175+
transition-duration: 300ms;
176+
}
177+
178+
.ease-in-out {
179+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
180+
}
181+
182+
.hover\:opacity-50:hover {
183+
opacity: 0.5;
184+
}
185+
186+
.blur-sm {
187+
filter: blur(4px);
188+
}
189+
190+
.grayscale-100 {
191+
filter: grayscale(1);
192+
}
193+
194+
.brightness-150 {
195+
filter: brightness(1.5);
196+
}
197+
198+
.cursor-pointer {
199+
cursor: pointer;
200+
}
201+
202+
.select-none {
203+
user-select: none;
204+
}
205+
206+
.pointer-events-auto {
207+
pointer-events: auto;
208+
}
209+
210+
.fill-current {
211+
fill: currentColor;
212+
}
213+
214+
.stroke-current {
215+
stroke: currentColor;
216+
}
217+
218+
.border-collapse {
219+
border-collapse: collapse;
220+
}
221+
222+
.table-fixed {
223+
table-layout: fixed;
224+
}
225+
226+
.scroll-smooth {
227+
scroll-behavior: smooth;
228+
}
229+
230+
.scroll-p-4 {
231+
scroll-padding: 1rem;
232+
}
233+
234+
.snap-y {
235+
scroll-snap-type: y mandatory;
79236
}

‎packages/headwind/src/parser.ts‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,58 @@ export function parseClass(className: string): ParsedClass {
3333
}
3434
}
3535

36-
// Regular parsing
36+
// Handle compound utilities with specific prefixes
37+
// grid-cols-3, grid-rows-2, translate-x-4, etc.
38+
const compoundPrefixes = [
39+
'grid-cols',
40+
'grid-rows',
41+
'grid-flow',
42+
'auto-cols',
43+
'auto-rows',
44+
'col-start',
45+
'col-end',
46+
'row-start',
47+
'row-end',
48+
'translate-x',
49+
'translate-y',
50+
'scale-x',
51+
'scale-y',
52+
'skew-x',
53+
'skew-y',
54+
'scroll-m',
55+
'scroll-mx',
56+
'scroll-my',
57+
'scroll-mt',
58+
'scroll-mr',
59+
'scroll-mb',
60+
'scroll-ml',
61+
'scroll-p',
62+
'scroll-px',
63+
'scroll-py',
64+
'scroll-pt',
65+
'scroll-pr',
66+
'scroll-pb',
67+
'scroll-pl',
68+
'gap-x',
69+
'gap-y',
70+
'overflow-x',
71+
'overflow-y',
72+
]
73+
74+
for (const prefix of compoundPrefixes) {
75+
if (utility.startsWith(prefix + '-')) {
76+
return {
77+
raw: className,
78+
variants,
79+
utility: prefix,
80+
value: utility.slice(prefix.length + 1),
81+
important,
82+
arbitrary: false,
83+
}
84+
}
85+
}
86+
87+
// Regular parsing - split on last dash
3788
const match = utility.match(/^([a-z-]+?)(?:-(.+))?$/)
3889
if (!match) {
3990
return {

‎packages/headwind/src/rules-interactivity.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,17 @@ import type { UtilityRule } from './rules'
55
// Filter utilities
66
export const filterRule: UtilityRule = (parsed) => {
77
if (parsed.utility === 'blur' && parsed.value) {
8-
return { filter: `blur(${parsed.value}px)` }
8+
const blurMap: Record<string, string> = {
9+
none: '0',
10+
sm: '4px',
11+
DEFAULT: '8px',
12+
md: '12px',
13+
lg: '16px',
14+
xl: '24px',
15+
'2xl': '40px',
16+
'3xl': '64px',
17+
}
18+
return { filter: `blur(${blurMap[parsed.value] || parsed.value})` }
919
}
1020
if (parsed.utility === 'brightness' && parsed.value) {
1121
return { filter: `brightness(${Number(parsed.value) / 100})` }

0 commit comments

Comments
 (0)