Skip to content

Commit 92a4264

Browse files
chrisbbreuerchrisbbreuer
committed
chore: rename to hw prefix
1 parent 7f4b4e9 commit 92a4264

File tree

5 files changed

+70
-52
lines changed

5 files changed

+70
-52
lines changed

‎packages/headwind/src/preflight-forms.ts‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ select {
3333
padding-left: 0.75rem;
3434
font-size: 1rem;
3535
line-height: 1.5rem;
36-
--tw-shadow: 0 0 #0000;
36+
--hw-shadow: 0 0 #0000;
3737
}
3838
3939
[type='text']:focus,
@@ -52,13 +52,13 @@ textarea:focus,
5252
select:focus {
5353
outline: 2px solid transparent;
5454
outline-offset: 2px;
55-
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
56-
--tw-ring-offset-width: 0px;
57-
--tw-ring-offset-color: #fff;
58-
--tw-ring-color: #2563eb;
59-
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
60-
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
61-
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
55+
--hw-ring-inset: var(--hw-empty,/*!*/ /*!*/);
56+
--hw-ring-offset-width: 0px;
57+
--hw-ring-offset-color: #fff;
58+
--hw-ring-color: #2563eb;
59+
--hw-ring-offset-shadow: var(--hw-ring-inset) 0 0 0 var(--hw-ring-offset-width) var(--hw-ring-offset-color);
60+
--hw-ring-shadow: var(--hw-ring-inset) 0 0 0 calc(1px + var(--hw-ring-offset-width)) var(--hw-ring-color);
61+
box-shadow: var(--hw-ring-offset-shadow), var(--hw-ring-shadow), var(--hw-shadow);
6262
border-color: #2563eb;
6363
}
6464
@@ -129,7 +129,7 @@ select[size]:where([size]:not([size="1"])) {
129129
background-color: #fff;
130130
border-color: #6b7280;
131131
border-width: 1px;
132-
--tw-shadow: 0 0 #0000;
132+
--hw-shadow: 0 0 #0000;
133133
}
134134
135135
[type='checkbox'] {
@@ -144,13 +144,13 @@ select[size]:where([size]:not([size="1"])) {
144144
[type='radio']:focus {
145145
outline: 2px solid transparent;
146146
outline-offset: 2px;
147-
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
148-
--tw-ring-offset-width: 2px;
149-
--tw-ring-offset-color: #fff;
150-
--tw-ring-color: #2563eb;
151-
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
152-
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
153-
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
147+
--hw-ring-inset: var(--hw-empty,/*!*/ /*!*/);
148+
--hw-ring-offset-width: 2px;
149+
--hw-ring-offset-color: #fff;
150+
--hw-ring-color: #2563eb;
151+
--hw-ring-offset-shadow: var(--hw-ring-inset) 0 0 0 var(--hw-ring-offset-width) var(--hw-ring-offset-color);
152+
--hw-ring-shadow: var(--hw-ring-inset) 0 0 0 calc(2px + var(--hw-ring-offset-width)) var(--hw-ring-color);
153+
box-shadow: var(--hw-ring-offset-shadow), var(--hw-ring-shadow), var(--hw-shadow);
154154
}
155155
156156
[type='checkbox']:checked,

‎packages/headwind/src/preflight.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export const tailwindPreflight: Preflight = {
155155
156156
::before,
157157
::after {
158-
--tw-content: '';
158+
--hw-content: '';
159159
}
160160
161161
html,

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

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,27 @@ export const ringRule: UtilityRule = (parsed, config) => {
5050
if (parsed.utility === 'ring') {
5151
// Handle ring-inset
5252
if (parsed.value === 'inset') {
53-
return { '--tw-ring-inset': 'inset' } as Record<string, string>
53+
return { '--hw-ring-inset': 'inset' } as Record<string, string>
5454
}
5555

56+
// Check if this is a ring color (e.g., ring-sky-500)
57+
if (parsed.value) {
58+
const parts = parsed.value.split('-')
59+
if (parts.length >= 2) {
60+
const colorName = parts.slice(0, -1).join('-')
61+
const shade = parts[parts.length - 1]
62+
const colorValue = config.theme.colors[colorName]
63+
if (typeof colorValue === 'object' && colorValue[shade]) {
64+
return { '--hw-ring-color': colorValue[shade] } as Record<string, string>
65+
}
66+
// Also check if it's a direct color value (like custom colors)
67+
if (config.theme.colors[parsed.value]) {
68+
return { '--hw-ring-color': config.theme.colors[parsed.value] } as Record<string, string>
69+
}
70+
}
71+
}
72+
73+
// Handle ring width
5674
const widths: Record<string, string> = {
5775
0: '0',
5876
1: '1px',
@@ -63,9 +81,9 @@ export const ringRule: UtilityRule = (parsed, config) => {
6381
}
6482
const width = parsed.value ? widths[parsed.value] || parsed.value : widths.DEFAULT
6583
return {
66-
'--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
67-
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${width} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
68-
'box-shadow': 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
84+
'--hw-ring-offset-shadow': 'var(--hw-ring-inset) 0 0 0 var(--hw-ring-offset-width) var(--hw-ring-offset-color)',
85+
'--hw-ring-shadow': `var(--hw-ring-inset) 0 0 0 calc(${width} + var(--hw-ring-offset-width)) var(--hw-ring-color)`,
86+
'box-shadow': 'var(--hw-ring-offset-shadow), var(--hw-ring-shadow), var(--hw-shadow, 0 0 #0000)',
6987
} as Record<string, string>
7088
}
7189

@@ -77,7 +95,7 @@ export const ringRule: UtilityRule = (parsed, config) => {
7795
4: '4px',
7896
8: '8px',
7997
}
80-
return { '--tw-ring-offset-width': widths[parsed.value] || parsed.value } as Record<string, string>
98+
return { '--hw-ring-offset-width': widths[parsed.value] || parsed.value } as Record<string, string>
8199
}
82100

83101
if (parsed.utility === 'ring-offset-color' || (parsed.utility === 'ring-offset' && parsed.value)) {
@@ -90,7 +108,7 @@ export const ringRule: UtilityRule = (parsed, config) => {
90108
const shade = parts[parts.length - 1]
91109
const colorValue = config.theme.colors[colorName]
92110
if (typeof colorValue === 'object' && colorValue[shade]) {
93-
return { '--tw-ring-offset-color': colorValue[shade] } as Record<string, string>
111+
return { '--hw-ring-offset-color': colorValue[shade] } as Record<string, string>
94112
}
95113
}
96114
}
@@ -112,9 +130,9 @@ export const spaceRule: UtilityRule = (parsed, config) => {
112130

113131
return {
114132
properties: {
115-
'--tw-space-x-reverse': '0',
116-
'margin-right': `calc(${spacing} * var(--tw-space-x-reverse))`,
117-
'margin-left': `calc(${spacing} * calc(1 - var(--tw-space-x-reverse)))`,
133+
'--hw-space-x-reverse': '0',
134+
'margin-right': `calc(${spacing} * var(--hw-space-x-reverse))`,
135+
'margin-left': `calc(${spacing} * calc(1 - var(--hw-space-x-reverse)))`,
118136
} as Record<string, string>,
119137
childSelector: '> :not([hidden]) ~ :not([hidden])',
120138
}
@@ -133,9 +151,9 @@ export const spaceRule: UtilityRule = (parsed, config) => {
133151

134152
return {
135153
properties: {
136-
'--tw-space-y-reverse': '0',
137-
'margin-top': `calc(${spacing} * calc(1 - var(--tw-space-y-reverse)))`,
138-
'margin-bottom': `calc(${spacing} * var(--tw-space-y-reverse))`,
154+
'--hw-space-y-reverse': '0',
155+
'margin-top': `calc(${spacing} * calc(1 - var(--hw-space-y-reverse)))`,
156+
'margin-bottom': `calc(${spacing} * var(--hw-space-y-reverse))`,
139157
} as Record<string, string>,
140158
childSelector: '> :not([hidden]) ~ :not([hidden])',
141159
}
@@ -192,9 +210,9 @@ export const divideRule: UtilityRule = (parsed, config) => {
192210

193211
return {
194212
properties: {
195-
'--tw-divide-x-reverse': '0',
196-
'border-right-width': `calc(${width} * var(--tw-divide-x-reverse))`,
197-
'border-left-width': `calc(${width} * calc(1 - var(--tw-divide-x-reverse)))`,
213+
'--hw-divide-x-reverse': '0',
214+
'border-right-width': `calc(${width} * var(--hw-divide-x-reverse))`,
215+
'border-left-width': `calc(${width} * calc(1 - var(--hw-divide-x-reverse)))`,
198216
} as Record<string, string>,
199217
childSelector: '> :not([hidden]) ~ :not([hidden])',
200218
}
@@ -212,9 +230,9 @@ export const divideRule: UtilityRule = (parsed, config) => {
212230

213231
return {
214232
properties: {
215-
'--tw-divide-y-reverse': '0',
216-
'border-top-width': `calc(${width} * calc(1 - var(--tw-divide-y-reverse)))`,
217-
'border-bottom-width': `calc(${width} * var(--tw-divide-y-reverse))`,
233+
'--hw-divide-y-reverse': '0',
234+
'border-top-width': `calc(${width} * calc(1 - var(--hw-divide-y-reverse)))`,
235+
'border-bottom-width': `calc(${width} * var(--hw-divide-y-reverse))`,
218236
} as Record<string, string>,
219237
childSelector: '> :not([hidden]) ~ :not([hidden])',
220238
}
@@ -257,24 +275,24 @@ export const gradientStopsRule: UtilityRule = (parsed, config) => {
257275
if (parsed.utility === 'from' && parsed.value) {
258276
const color = getColor(parsed.value)
259277
return {
260-
'--tw-gradient-from': color,
261-
'--tw-gradient-to': 'rgb(255 255 255 / 0)',
262-
'--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)',
278+
'--hw-gradient-from': color,
279+
'--hw-gradient-to': 'rgb(255 255 255 / 0)',
280+
'--hw-gradient-stops': 'var(--hw-gradient-from), var(--hw-gradient-to)',
263281
} as Record<string, string>
264282
}
265283

266284
if (parsed.utility === 'via' && parsed.value) {
267285
const color = getColor(parsed.value)
268286
return {
269-
'--tw-gradient-to': 'rgb(255 255 255 / 0)',
270-
'--tw-gradient-stops': `var(--tw-gradient-from), ${color}, var(--tw-gradient-to)`,
287+
'--hw-gradient-to': 'rgb(255 255 255 / 0)',
288+
'--hw-gradient-stops': `var(--hw-gradient-from), ${color}, var(--hw-gradient-to)`,
271289
} as Record<string, string>
272290
}
273291

274292
if (parsed.utility === 'to' && parsed.value) {
275293
const color = getColor(parsed.value)
276294
return {
277-
'--tw-gradient-to': color,
295+
'--hw-gradient-to': color,
278296
} as Record<string, string>
279297
}
280298
}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,14 @@ export const backgroundClipRule: UtilityRule = (parsed) => {
3232
export const backgroundImageRule: UtilityRule = (parsed) => {
3333
if (parsed.utility === 'bg' && parsed.value) {
3434
const gradients: Record<string, string> = {
35-
'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
36-
'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
37-
'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
38-
'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
39-
'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
40-
'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
41-
'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
42-
'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
35+
'gradient-to-t': 'linear-gradient(to top, var(--hw-gradient-stops))',
36+
'gradient-to-tr': 'linear-gradient(to top right, var(--hw-gradient-stops))',
37+
'gradient-to-r': 'linear-gradient(to right, var(--hw-gradient-stops))',
38+
'gradient-to-br': 'linear-gradient(to bottom right, var(--hw-gradient-stops))',
39+
'gradient-to-b': 'linear-gradient(to bottom, var(--hw-gradient-stops))',
40+
'gradient-to-bl': 'linear-gradient(to bottom left, var(--hw-gradient-stops))',
41+
'gradient-to-l': 'linear-gradient(to left, var(--hw-gradient-stops))',
42+
'gradient-to-tl': 'linear-gradient(to top left, var(--hw-gradient-stops))',
4343
}
4444
if (gradients[parsed.value]) {
4545
return { 'background-image': gradients[parsed.value] } as Record<string, string>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import type { UtilityRule } from './rules'
44

55
export const transformRule: UtilityRule = (parsed) => {
66
const values: Record<string, string> = {
7-
'transform': 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',
8-
'transform-cpu': 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',
9-
'transform-gpu': 'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',
7+
'transform': 'translate(var(--hw-translate-x), var(--hw-translate-y)) rotate(var(--hw-rotate)) skewX(var(--hw-skew-x)) skewY(var(--hw-skew-y)) scaleX(var(--hw-scale-x)) scaleY(var(--hw-scale-y))',
8+
'transform-cpu': 'translate(var(--hw-translate-x), var(--hw-translate-y)) rotate(var(--hw-rotate)) skewX(var(--hw-skew-x)) skewY(var(--hw-skew-y)) scaleX(var(--hw-scale-x)) scaleY(var(--hw-scale-y))',
9+
'transform-gpu': 'translate3d(var(--hw-translate-x), var(--hw-translate-y), 0) rotate(var(--hw-rotate)) skewX(var(--hw-skew-x)) skewY(var(--hw-skew-y)) scaleX(var(--hw-scale-x)) scaleY(var(--hw-scale-y))',
1010
'transform-none': 'none',
1111
}
1212
return values[parsed.raw] ? { transform: values[parsed.raw] } : undefined

0 commit comments

Comments
 (0)