Skip to content

Commit 5386559

Browse files
committed
chore: wip
1 parent d3bd93a commit 5386559

File tree

16 files changed

+242
-105
lines changed

16 files changed

+242
-105
lines changed

README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,13 @@ bunx headwind init
4848
This creates a `headwind.config.ts` file:
4949

5050
```typescript
51-
import type { HeadwindConfig } from 'headwind'
51+
import type { HeadwindOptions } from 'headwind'
5252

5353
export default {
5454
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
5555
output: './dist/headwind.css',
5656
minify: false,
57-
} satisfies Partial<HeadwindConfig>
57+
} satisfies HeadwindOptions
5858
```
5959

6060
2. **Add utility classes to your HTML**:
@@ -114,7 +114,7 @@ headwind --help # Show help
114114
Headwind supports extensive configuration options:
115115

116116
```typescript
117-
import type { HeadwindConfig } from 'headwind'
117+
import type { HeadwindOptions } from 'headwind'
118118

119119
export default {
120120
// Content sources to scan for utility classes
@@ -173,7 +173,7 @@ export default {
173173

174174
// Presets
175175
presets: [],
176-
} satisfies Partial<HeadwindConfig>
176+
} satisfies HeadwindOptions
177177
```
178178

179179
For more configuration options, see the [Configuration Guide](https://headwind.stacksjs.org/config).

docs/advanced/custom-rules.md

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ While Headwind includes comprehensive built-in utilities, you can add custom rul
1616
Define custom rules in your configuration:
1717

1818
```typescript
19-
import type { HeadwindConfig } from 'headwind'
19+
import type { HeadwindOptions } from 'headwind'
2020

2121
const config = {
2222
rules: [
@@ -36,7 +36,7 @@ const config = {
3636
}),
3737
],
3838
],
39-
} satisfies Partial<HeadwindConfig>
39+
} satisfies HeadwindOptions
4040

4141
export default config
4242
```
@@ -97,6 +97,7 @@ const config = {
9797
```
9898

9999
Usage:
100+
100101
```html
101102
<div class="glass">Glassmorphism effect</div>
102103
```
@@ -117,6 +118,7 @@ const config = {
117118
```
118119

119120
Usage:
121+
120122
```html
121123
<div class="aspect-16/9">16:9 aspect ratio</div>
122124
<div class="aspect-4/3">4:3 aspect ratio</div>
@@ -150,6 +152,7 @@ const config = {
150152
```
151153

152154
Usage:
155+
153156
```html
154157
<span class="brand-primary">Primary brand color</span>
155158
<span class="brand-secondary">Secondary brand color</span>
@@ -183,6 +186,7 @@ const config = {
183186
```
184187

185188
Usage:
189+
186190
```html
187191
<div class="grid grid-areas-header">
188192
<header class="grid-area-[header]">Header</header>
@@ -213,6 +217,7 @@ const config = {
213217
```
214218

215219
Usage:
220+
216221
```html
217222
<div class="animate-delay-500 animate-duration-1000">
218223
Delayed animation
@@ -279,7 +284,7 @@ const config = {
279284
Access theme values in custom rules:
280285

281286
```typescript
282-
import type { HeadwindConfig } from 'headwind'
287+
import type { HeadwindOptions } from 'headwind'
283288

284289
const config = {
285290
theme: {
@@ -307,7 +312,7 @@ const config = {
307312
},
308313
],
309314
],
310-
} satisfies Partial<HeadwindConfig>
315+
} satisfies HeadwindOptions
311316
```
312317

313318
### Vendor Prefixes
@@ -420,6 +425,7 @@ const config = {
420425
```
421426

422427
Usage:
428+
423429
```html
424430
<div class="gradient-blue-to-purple">
425431
Blue to purple gradient
@@ -459,11 +465,13 @@ const config = {
459465
### 1. Use Specific Patterns
460466

461467
**Good:**
468+
462469
```typescript
463470
/^my-utility-(\d+)$/ // Specific pattern
464471
```
465472

466473
**Avoid:**
474+
467475
```typescript
468476
/^my-/ // Too broad, might conflict
469477
```
@@ -559,6 +567,7 @@ Custom rules have minimal performance impact:
559567
### Optimization Tips
560568

561569
1. **Use specific patterns:**
570+
562571
```typescript
563572
// ✅ Fast
564573
/^my-utility-(\d+)$/
@@ -568,6 +577,7 @@ Custom rules have minimal performance impact:
568577
```
569578

570579
2. **Avoid complex logic:**
580+
571581
```typescript
572582
// ✅ Simple check
573583
if (value === 'sm')
@@ -579,6 +589,7 @@ Custom rules have minimal performance impact:
579589
```
580590

581591
3. **Cache computed values:**
592+
582593
```typescript
583594
const computedValues = new Map()
584595

@@ -605,18 +616,21 @@ Custom rules have minimal performance impact:
605616
**Check:**
606617

607618
1. Pattern is correct:
619+
608620
```typescript
609621
// Test pattern
610622
/^my-utility-(\d+)$/.test('my-utility-10') // true
611623
```
612624

613625
2. Class name matches exactly:
626+
614627
```html
615628
<div class="my-utility-10">✅ Matches</div>
616629
<div class="my-utility-abc">❌ No match</div>
617630
```
618631

619632
3. Handler returns valid object:
633+
620634
```typescript
621635
(match) => {
622636
console.log('Match:', match)

docs/advanced/frameworks.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@ bunx headwind init
2222

2323
```typescript
2424
// headwind.config.ts
25-
import type { HeadwindConfig } from 'headwind'
25+
import type { HeadwindOptions } from 'headwind'
2626

2727
const config = {
2828
content: ['./src/**/*.{js,jsx,ts,tsx}'],
2929
output: './src/headwind.css',
3030
minify: process.env.NODE_ENV === 'production',
31-
} satisfies Partial<HeadwindConfig>
31+
} satisfies HeadwindOptions
3232

3333
export default config
3434
```
@@ -871,20 +871,23 @@ Use class directives:
871871
### CSS Not Updating
872872

873873
**Solution:** Ensure watch mode is running:
874+
874875
```bash
875876
headwind watch
876877
```
877878

878879
### Classes Not Found
879880

880881
**Solution:** Check content paths include all files:
882+
881883
```typescript
882884
content: ['./src/**/*.{js,jsx,ts,tsx}']
883885
```
884886

885887
### Build Failing in CI
886888

887889
**Solution:** Run Headwind build before framework build:
890+
888891
```yaml
889892
- run: bun run headwind build --minify
890893
- run: bun run build

docs/advanced/presets.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,14 +92,14 @@ export const minimalPreset: Preset = {
9292

9393
```typescript
9494
// headwind.config.ts
95-
import type { HeadwindConfig } from 'headwind'
95+
import type { HeadwindOptions } from 'headwind'
9696
import { minimalPreset } from './presets/minimal'
9797

9898
const config = {
9999
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
100100
output: './dist/headwind.css',
101101
presets: [minimalPreset],
102-
} satisfies Partial<HeadwindConfig>
102+
} satisfies HeadwindOptions
103103

104104
export default config
105105
```
@@ -654,18 +654,21 @@ const exampleConfig = {
654654
**Check:**
655655

656656
1. Preset is imported correctly:
657+
657658
```typescript
658659
import { myPreset } from './presets/my-preset'
659660
```
660661

661662
2. Preset is added to config:
663+
662664
```typescript
663665
const config = {
664666
presets: [myPreset], //
665667
}
666668
```
667669

668670
3. Preset has correct structure:
671+
669672
```typescript
670673
const preset: Preset = {
671674
name: 'my-preset', // Required

0 commit comments

Comments
 (0)