Skip to content

Commit 23c1356

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent 7cbee34 commit 23c1356

12 files changed

Lines changed: 1509 additions & 125 deletions

‎packages/headwind/src/config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { loadConfig } from 'bunfig'
33
import { tailwindPreflight } from './preflight'
44

55
export const defaultConfig: HeadwindConfig = {
6-
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
6+
content: ['./src/**/*.{html,js,ts,jsx,tsx,stx}'],
77
output: './dist/headwind.css',
88
minify: true,
99
watch: false,
@@ -39,6 +39,7 @@ export const defaultConfig: HeadwindConfig = {
3939
},
4040
spacing: {
4141
0: '0',
42+
px: '1px',
4243
1: '0.25rem',
4344
2: '0.5rem',
4445
3: '0.75rem',

‎packages/headwind/src/parser.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,26 @@ export function parseClass(className: string): ParsedClass {
3333
const utility = parts[parts.length - 1]
3434
const variants = parts.slice(0, -1)
3535

36-
// Check for full utility names that should not be split (display utilities)
36+
// Check for full utility names that should not be split
3737
const fullUtilityNames = [
38+
// Display utilities
3839
'inline-block',
3940
'inline-flex',
4041
'inline-grid',
42+
// Flex utilities without values
43+
'flex-row',
44+
'flex-row-reverse',
45+
'flex-col',
46+
'flex-col-reverse',
47+
'flex-wrap',
48+
'flex-wrap-reverse',
49+
'flex-nowrap',
50+
'flex-1',
51+
'flex-auto',
52+
'flex-initial',
53+
'flex-none',
54+
'flex-grow',
55+
'flex-shrink',
4156
]
4257
if (fullUtilityNames.includes(utility)) {
4358
return {
@@ -123,6 +138,8 @@ export function parseClass(className: string): ParsedClass {
123138
'hue-rotate',
124139
'drop-shadow',
125140
'mask-clip',
141+
'flex-grow',
142+
'flex-shrink',
126143
'mask-composite',
127144
'mask-image',
128145
'mask-mode',

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import type { UtilityRule } from './rules'
33
// Advanced utilities
44

55
// Min/Max sizing
6-
export const minMaxSizingRule: UtilityRule = (parsed) => {
6+
export const minMaxSizingRule: UtilityRule = (parsed, config) => {
77
const minMaxMap: Record<string, string> = {
88
0: '0',
99
full: '100%',
1010
min: 'min-content',
1111
max: 'max-content',
1212
fit: 'fit-content',
13+
none: 'none',
1314
xs: '20rem',
1415
sm: '24rem',
1516
md: '28rem',
@@ -25,18 +26,22 @@ export const minMaxSizingRule: UtilityRule = (parsed) => {
2526
}
2627

2728
if (parsed.utility === 'min-w' && parsed.value) {
28-
return { 'min-width': minMaxMap[parsed.value] || parsed.value }
29+
const value = config.theme.spacing[parsed.value] || minMaxMap[parsed.value] || parsed.value
30+
return { 'min-width': value }
2931
}
3032
if (parsed.utility === 'max-w' && parsed.value) {
31-
return { 'max-width': minMaxMap[parsed.value] || parsed.value }
33+
const value = config.theme.spacing[parsed.value] || minMaxMap[parsed.value] || parsed.value
34+
return { 'max-width': value }
3235
}
3336
if (parsed.utility === 'min-h' && parsed.value) {
3437
const hMap = { ...minMaxMap, screen: '100vh' }
35-
return { 'min-height': hMap[parsed.value] || parsed.value }
38+
const value = config.theme.spacing[parsed.value] || hMap[parsed.value] || parsed.value
39+
return { 'min-height': value }
3640
}
3741
if (parsed.utility === 'max-h' && parsed.value) {
3842
const hMap = { ...minMaxMap, screen: '100vh' }
39-
return { 'max-height': hMap[parsed.value] || parsed.value }
43+
const value = config.theme.spacing[parsed.value] || hMap[parsed.value] || parsed.value
44+
return { 'max-height': value }
4045
}
4146
}
4247

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

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

55
// Background utilities
66
export const backgroundAttachmentRule: UtilityRule = (parsed) => {
7-
const values: Record<string, string> = {
8-
'bg-fixed': 'fixed',
9-
'bg-local': 'local',
10-
'bg-scroll': 'scroll',
7+
if (parsed.utility === 'bg' && parsed.value) {
8+
const values: Record<string, string> = {
9+
'fixed': 'fixed',
10+
'local': 'local',
11+
'scroll': 'scroll',
12+
}
13+
return values[parsed.value] ? { 'background-attachment': values[parsed.value] } : undefined
1114
}
12-
return values[parsed.raw] ? { 'background-attachment': values[parsed.raw] } : undefined
15+
return undefined
1316
}
1417

1518
export const backgroundClipRule: UtilityRule = (parsed) => {
16-
const values: Record<string, string> = {
17-
'bg-clip-border': 'border-box',
18-
'bg-clip-padding': 'padding-box',
19-
'bg-clip-content': 'content-box',
20-
'bg-clip-text': 'text',
19+
if (parsed.utility === 'bg' && parsed.value && parsed.value.startsWith('clip-')) {
20+
const val = parsed.value.replace('clip-', '')
21+
const values: Record<string, string> = {
22+
'border': 'border-box',
23+
'padding': 'padding-box',
24+
'content': 'content-box',
25+
'text': 'text',
26+
}
27+
return values[val] ? { 'background-clip': values[val] } : undefined
2128
}
22-
return values[parsed.raw] ? { 'background-clip': values[parsed.raw] } : undefined
29+
return undefined
2330
}
2431

2532
export const backgroundImageRule: UtilityRule = (parsed) => {
@@ -87,15 +94,18 @@ export const backgroundSizeRule: UtilityRule = (parsed) => {
8794

8895
// Border utilities
8996
export const borderStyleRule: UtilityRule = (parsed) => {
90-
const styles: Record<string, string> = {
91-
'border-solid': 'solid',
92-
'border-dashed': 'dashed',
93-
'border-dotted': 'dotted',
94-
'border-double': 'double',
95-
'border-hidden': 'hidden',
96-
'border-none': 'none',
97+
if (parsed.utility === 'border' && parsed.value) {
98+
const styles: Record<string, string> = {
99+
'solid': 'solid',
100+
'dashed': 'dashed',
101+
'dotted': 'dotted',
102+
'double': 'double',
103+
'hidden': 'hidden',
104+
'none': 'none',
105+
}
106+
return styles[parsed.value] ? { 'border-style': styles[parsed.value] } : undefined
97107
}
98-
return styles[parsed.raw] ? { 'border-style': styles[parsed.raw] } : undefined
108+
return undefined
99109
}
100110

101111
export const outlineRule: UtilityRule = (parsed, config) => {
@@ -112,15 +122,17 @@ export const outlineRule: UtilityRule = (parsed, config) => {
112122
}
113123

114124
// Outline styles
115-
const outlineStyles: Record<string, string> = {
116-
'outline-none': 'none',
117-
'outline-solid': 'solid',
118-
'outline-dashed': 'dashed',
119-
'outline-dotted': 'dotted',
120-
'outline-double': 'double',
121-
}
122-
if (parsed.raw.startsWith('outline-') && outlineStyles[parsed.raw]) {
123-
return { 'outline-style': outlineStyles[parsed.raw] }
125+
if (parsed.utility === 'outline' && parsed.value) {
126+
const outlineStyles: Record<string, string> = {
127+
'none': 'none',
128+
'solid': 'solid',
129+
'dashed': 'dashed',
130+
'dotted': 'dotted',
131+
'double': 'double',
132+
}
133+
if (outlineStyles[parsed.value]) {
134+
return { 'outline-style': outlineStyles[parsed.value] }
135+
}
124136
}
125137

126138
if (parsed.utility === 'outline') {

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

Lines changed: 47 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,17 @@ export const gridRowRule: UtilityRule = (parsed) => {
8989
}
9090

9191
export const gridAutoFlowRule: UtilityRule = (parsed) => {
92-
const flows: Record<string, string> = {
93-
'grid-flow-row': 'row',
94-
'grid-flow-col': 'column',
95-
'grid-flow-dense': 'dense',
96-
'grid-flow-row-dense': 'row dense',
97-
'grid-flow-col-dense': 'column dense',
98-
}
99-
return flows[parsed.raw] ? { 'grid-auto-flow': flows[parsed.raw] } : undefined
92+
if (parsed.utility === 'grid-flow' && parsed.value) {
93+
const flows: Record<string, string> = {
94+
'row': 'row',
95+
'col': 'column',
96+
'dense': 'dense',
97+
'row-dense': 'row dense',
98+
'col-dense': 'column dense',
99+
}
100+
return flows[parsed.value] ? { 'grid-auto-flow': flows[parsed.value] } : undefined
101+
}
102+
return undefined
100103
}
101104

102105
export const gridAutoColumnsRule: UtilityRule = (parsed) => {
@@ -136,37 +139,49 @@ export const gapRule: UtilityRule = (parsed, config) => {
136139
}
137140

138141
export const placeContentRule: UtilityRule = (parsed) => {
139-
const values: Record<string, string> = {
140-
'place-content-center': 'center',
141-
'place-content-start': 'start',
142-
'place-content-end': 'end',
143-
'place-content-between': 'space-between',
144-
'place-content-around': 'space-around',
145-
'place-content-evenly': 'space-evenly',
146-
'place-content-stretch': 'stretch',
147-
}
148-
return values[parsed.raw] ? { 'place-content': values[parsed.raw] } : undefined
142+
if (parsed.utility === 'place' && parsed.value && parsed.value.startsWith('content-')) {
143+
const val = parsed.value.replace('content-', '')
144+
const values: Record<string, string> = {
145+
'center': 'center',
146+
'start': 'start',
147+
'end': 'end',
148+
'between': 'space-between',
149+
'around': 'space-around',
150+
'evenly': 'space-evenly',
151+
'stretch': 'stretch',
152+
}
153+
return values[val] ? { 'place-content': values[val] } : undefined
154+
}
155+
return undefined
149156
}
150157

151158
export const placeItemsRule: UtilityRule = (parsed) => {
152-
const values: Record<string, string> = {
153-
'place-items-start': 'start',
154-
'place-items-end': 'end',
155-
'place-items-center': 'center',
156-
'place-items-stretch': 'stretch',
159+
if (parsed.utility === 'place' && parsed.value && parsed.value.startsWith('items-')) {
160+
const val = parsed.value.replace('items-', '')
161+
const values: Record<string, string> = {
162+
'start': 'start',
163+
'end': 'end',
164+
'center': 'center',
165+
'stretch': 'stretch',
166+
}
167+
return values[val] ? { 'place-items': values[val] } : undefined
157168
}
158-
return values[parsed.raw] ? { 'place-items': values[parsed.raw] } : undefined
169+
return undefined
159170
}
160171

161172
export const placeSelfRule: UtilityRule = (parsed) => {
162-
const values: Record<string, string> = {
163-
'place-self-auto': 'auto',
164-
'place-self-start': 'start',
165-
'place-self-end': 'end',
166-
'place-self-center': 'center',
167-
'place-self-stretch': 'stretch',
168-
}
169-
return values[parsed.raw] ? { 'place-self': values[parsed.raw] } : undefined
173+
if (parsed.utility === 'place' && parsed.value && parsed.value.startsWith('self-')) {
174+
const val = parsed.value.replace('self-', '')
175+
const values: Record<string, string> = {
176+
'auto': 'auto',
177+
'start': 'start',
178+
'end': 'end',
179+
'center': 'center',
180+
'stretch': 'stretch',
181+
}
182+
return values[val] ? { 'place-self': values[val] } : undefined
183+
}
184+
return undefined
170185
}
171186

172187
export const gridRules: UtilityRule[] = [

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,14 @@ export const borderSpacingRule: UtilityRule = (parsed, config) => {
9292
}
9393

9494
export const tableLayoutRule: UtilityRule = (parsed) => {
95-
const values: Record<string, string> = {
96-
'table-auto': 'auto',
97-
'table-fixed': 'fixed',
95+
if (parsed.utility === 'table' && parsed.value) {
96+
const values: Record<string, string> = {
97+
'auto': 'auto',
98+
'fixed': 'fixed',
99+
}
100+
return values[parsed.value] ? { 'table-layout': values[parsed.value] } : undefined
98101
}
99-
return values[parsed.raw] ? { 'table-layout': values[parsed.raw] } : undefined
102+
return undefined
100103
}
101104

102105
export const captionSideRule: UtilityRule = (parsed) => {

0 commit comments

Comments
 (0)