chore: wip

Author: chrisbbreuer

bun.lock

@@ -3,6 +3,9 @@
   "workspaces": {
     "": {
       "name": "headwind",
+      "dependencies": {
+        "jiti": "^2.6.1",
+      },
       "devDependencies": {
         "@stacksjs/bumpx": "^0.1.84",
         "@stacksjs/docs": "^0.70.23",
@@ -1279,7 +1282,7 @@
 
     "jake": ["[email protected]", "", { "dependencies": { "async": "^3.2.3", "chalk": "^4.0.2", "filelist": "^1.0.4", "minimatch": "^3.1.2" }, "bin": { "jake": "bin/cli.js" } }, "sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA=="],
 
-    "jiti": ["jiti@1.21.7", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="],
+    "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
 
     "js-tokens": ["[email protected]", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
@@ -2241,6 +2244,8 @@
 
     "toml-eslint-parser/eslint-visitor-keys": ["[email protected]", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
 
+    "unconfig/jiti": ["[email protected]", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="],
+
     "unplugin-icons/@antfu/install-pkg": ["@antfu/[email protected]", "", { "dependencies": { "package-manager-detector": "^0.2.8", "tinyexec": "^0.3.2" } }, "sha512-xvX6P/lo1B3ej0OsaErAjqgFYzYVcJpamjLAFLYh9vRJngBrMoUG7aVnrGTeqM7yxbyTD5p3F2+0/QUEh8Vzhw=="],
 
     "unplugin-icons/local-pkg": ["[email protected]", "", { "dependencies": { "mlly": "^1.7.3", "pkg-types": "^1.3.0" } }, "sha512-bbgPw/wmroJsil/GgL4qjDzs5YLTBMQ99weRsok1XCDccQeehbHA/I1oRvk2NPtr7KGZgT/Y5tPRnAtMqeG2Kg=="],

docs/advanced/custom-rules.md

@@ -31,7 +31,7 @@ const config = {
     // Dynamic rule with pattern matching
     [
       /^custom-(\w+)$/,
-      (match) => ({
+      match => ({
         'custom-property': match[1],
       }),
     ],
@@ -47,7 +47,7 @@ Each custom rule is a tuple:
 
 ```typescript
 type CustomRule = [
-  RegExp,  // Pattern to match
+  RegExp, // Pattern to match
   (match: RegExpMatchArray) => Record<string, string> | undefined
 ]
 ```
@@ -108,7 +108,7 @@ const config = {
   rules: [
     [
       /^aspect-(\d+)\/(\d+)$/,
-      (match) => ({
+      match => ({
         'aspect-ratio': `${match[1]} / ${match[2]}`,
       }),
     ],
@@ -137,10 +137,11 @@ const config = {
         }
 
         const color = colors[match[1]]
-        if (!color) return undefined
+        if (!color)
+          return undefined
 
         return {
-          'color': color,
+          color,
         }
       },
     ],
@@ -169,7 +170,8 @@ const config = {
         }
 
         const template = templates[match[1]]
-        if (!template) return undefined
+        if (!template)
+          return undefined
 
         return {
           'grid-template-areas': template,
@@ -196,13 +198,13 @@ const config = {
   rules: [
     [
       /^animate-delay-(\d+)$/,
-      (match) => ({
+      match => ({
         'animation-delay': `${match[1]}ms`,
       }),
     ],
     [
       /^animate-duration-(\d+)$/,
-      (match) => ({
+      match => ({
         'animation-duration': `${match[1]}ms`,
       }),
     ],
@@ -228,7 +230,7 @@ const config = {
   rules: [
     [
       /^truncate-(\d+)$/,
-      (match) => ({
+      match => ({
         'overflow': 'hidden',
         'text-overflow': 'ellipsis',
         'white-space': 'nowrap',
@@ -296,10 +298,11 @@ const config = {
         const spacingKey = match[1]
         const spacing = config.theme.spacing[spacingKey]
 
-        if (!spacing) return undefined
+        if (!spacing)
+          return undefined
 
         return {
-          'gap': spacing,
+          gap: spacing,
         }
       },
     ],
@@ -337,7 +340,7 @@ const config = {
   rules: [
     [
       /^stack-(\d+)$/,
-      (match) => ({
+      match => ({
         '> * + *': {
           'margin-top': `${match[1] * 0.25}rem`,
         },
@@ -404,7 +407,8 @@ const config = {
         const fromColor = colors[from]
         const toColor = colors[to]
 
-        if (!fromColor || !toColor) return undefined
+        if (!fromColor || !toColor)
+          return undefined
 
         return {
           'background-image': `linear-gradient(to right, ${fromColor}, ${toColor})`,
@@ -438,7 +442,8 @@ const config = {
         }
 
         const size = sizes[match[1]]
-        if (!size) return undefined
+        if (!size)
+          return undefined
 
         return {
           'font-size': size,
@@ -455,12 +460,12 @@ const config = {
 
 ✅ **Good:**
 ```typescript
-/^my-utility-(\d+)$/  // Specific pattern
+/^my-utility-(\d+)$/ // Specific pattern
 ```
 
 ❌ **Avoid:**
 ```typescript
-/^my-/  // Too broad, might conflict
+/^my-/ // Too broad, might conflict
 ```
 
 ### 2. Validate Input
@@ -498,7 +503,7 @@ const config = {
         const validSizes = ['sm', 'md', 'lg']
 
         if (!validSizes.includes(match[1])) {
-          return undefined  // Don't generate CSS
+          return undefined // Don't generate CSS
         }
 
         return { /* ... */ }
@@ -517,7 +522,7 @@ const config = {
     // Usage: aspect-16/9, aspect-4/3
     [
       /^aspect-(\d+)\/(\d+)$/,
-      (match) => ({
+      match => ({
         'aspect-ratio': `${match[1]} / ${match[2]}`,
       }),
     ],
@@ -565,10 +570,12 @@ Custom rules have minimal performance impact:
 2. **Avoid complex logic:**
    ```typescript
    // ✅ Simple check
-   if (value === 'sm') return { /* ... */ }
+   if (value === 'sm')
+     return { /* ... */ }
 
    // ❌ Complex computation
-   if (expensiveFunction(value)) return { /* ... */ }
+   if (expensiveFunction(value))
+     return { /* ... */ }
    ```
 
 3. **Cache computed values:**
@@ -600,7 +607,7 @@ Custom rules have minimal performance impact:
 1. Pattern is correct:
    ```typescript
    // Test pattern
-   /^my-utility-(\d+)$/.test('my-utility-10')  // true
+   /^my-utility-(\d+)$/.test('my-utility-10') // true
    ```
 
 2. Class name matches exactly:

docs/advanced/frameworks.md

@@ -273,10 +273,9 @@ const sizeClasses = {
 
 <template>
   <button
-    :class="[
-      'rounded font-semibold transition-colors',
+    class="rounded font-semibold transition-colors" :class="[
       variantClasses[variant],
-      sizeClasses[size]
+      sizeClasses[size],
     ]"
   >
     <slot />
@@ -663,7 +662,7 @@ const config = {
 
 ```javascript
 // webpack.config.js
-const { spawn } = require('child_process')
+const { spawn } = require('node:child_process')
 
 module.exports = {
   // ... webpack config
@@ -684,7 +683,7 @@ module.exports = {
 
 ```javascript
 // rollup.config.js
-import { spawn } from 'child_process'
+import { spawn } from 'node:child_process'
 
 function headwind() {
   return {
@@ -706,9 +705,9 @@ export default {
 ### esbuild
 
 ```javascript
+import { spawn } from 'node:child_process'
 // build.js
 import * as esbuild from 'esbuild'
-import { spawn } from 'child_process'
 
 // Build CSS first
 await new Promise((resolve) => {

docs/advanced/presets.md

@@ -9,20 +9,20 @@ A preset is a configuration object that can include theme customization, shortcu
 ```typescript
 // Before: Duplicate configuration in each project
 // project-a/headwind.config.ts
+// After: Share configuration via preset
+import { companyPreset } from '@company/headwind-preset'
+
 const config = {
   theme: { colors: { primary: '#3b82f6' } },
-  shortcuts: { 'btn': 'px-4 py-2 rounded' },
+  shortcuts: { btn: 'px-4 py-2 rounded' },
 }
 
 // project-b/headwind.config.ts
 const config = {
   theme: { colors: { primary: '#3b82f6' } },
-  shortcuts: { 'btn': 'px-4 py-2 rounded' },
+  shortcuts: { btn: 'px-4 py-2 rounded' },
 }
 
-// After: Share configuration via preset
-import { companyPreset } from '@company/headwind-preset'
-
 const config = {
   presets: [companyPreset],
 }
@@ -115,9 +115,9 @@ import { utilitiesPreset } from './presets/utilities'
 
 const config = {
   presets: [
-    basePreset,       // Applied first
+    basePreset, // Applied first
     componentsPreset, // Applied second, overrides base
-    utilitiesPreset,  // Applied last, overrides both
+    utilitiesPreset, // Applied last, overrides both
   ],
 }
 ```
@@ -313,14 +313,14 @@ export const utilitiesPreset: Preset = {
       (match) => {
         const direction = match[1]
         const directions: Record<string, string> = {
-          't': 'to top',
-          'r': 'to right',
-          'b': 'to bottom',
-          'l': 'to left',
-          'tr': 'to top right',
-          'br': 'to bottom right',
-          'bl': 'to bottom left',
-          'tl': 'to top left',
+          t: 'to top',
+          r: 'to right',
+          b: 'to bottom',
+          l: 'to left',
+          tr: 'to top right',
+          br: 'to bottom right',
+          bl: 'to bottom left',
+          tl: 'to top left',
         }
         return {
           'background-image': `linear-gradient(${directions[direction] || 'to right'}, var(--tw-gradient-stops))`,
@@ -356,10 +356,10 @@ export const reactPreset: Preset = {
 
   variants: {
     // Enable all variants for React components
-    hover: true,
-    focus: true,
-    active: true,
-    disabled: true,
+    'hover': true,
+    'focus': true,
+    'active': true,
+    'disabled': true,
     'focus-visible': true,
     'focus-within': true,
   },
@@ -497,7 +497,7 @@ const config = {
 ### Preset with Custom Preflight
 
 ```typescript
-import type { Preset, Preflight } from 'headwind'
+import type { Preflight, Preset } from 'headwind'
 
 const customPreflight: Preflight = {
   getCSS: () => `
@@ -617,13 +617,13 @@ Use semantic versioning for published presets:
 Create multiple focused presets rather than one monolithic preset:
 
 ```typescript
-// ✅ Good - focused presets
-import { themePreset } from './presets/theme'
 import { componentPreset } from './presets/components'
-import { utilityPreset } from './presets/utilities'
-
 // ❌ Avoid - everything in one preset
 import { everythingPreset } from './presets/everything'
+// ✅ Good - focused presets
+import { themePreset } from './presets/theme'
+
+import { utilityPreset } from './presets/utilities'
 ```
 
 ### 5. Provide Examples
@@ -635,7 +635,7 @@ Include usage examples with your preset:
 export const examplePreset: Preset = {
   name: 'example',
   shortcuts: {
-    'btn': 'px-4 py-2 rounded',
+    btn: 'px-4 py-2 rounded',
   },
 }
 
@@ -682,8 +682,8 @@ const exampleConfig = {
 ```typescript
 const config = {
   presets: [
-    generalPreset,    // Base configuration
-    specificPreset,   // More specific overrides
+    generalPreset, // Base configuration
+    specificPreset, // More specific overrides
   ],
 }
 ```