@cwcss/crosswind 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/PLUGIN.md +235 -0
  2. package/benchmark/framework-comparison.bench.ts +850 -0
  3. package/bin/cli.ts +365 -0
  4. package/bin/crosswind +0 -0
  5. package/bin/headwind +0 -0
  6. package/build.ts +8 -0
  7. package/crosswind.config.ts +9 -0
  8. package/example/comprehensive.html +70 -0
  9. package/example/index.html +21 -0
  10. package/example/output.css +236 -0
  11. package/examples/plugin/README.md +112 -0
  12. package/examples/plugin/build.ts +32 -0
  13. package/examples/plugin/src/index.html +34 -0
  14. package/examples/plugin/src/index.ts +7 -0
  15. package/headwind +2 -0
  16. package/package.json +92 -0
  17. package/src/build.ts +101 -0
  18. package/src/config.ts +529 -0
  19. package/src/generator.ts +2173 -0
  20. package/src/index.ts +10 -0
  21. package/src/parser.ts +1471 -0
  22. package/src/plugin.ts +118 -0
  23. package/src/preflight-forms.ts +229 -0
  24. package/src/preflight.ts +388 -0
  25. package/src/rules-advanced.ts +477 -0
  26. package/src/rules-effects.ts +457 -0
  27. package/src/rules-forms.ts +103 -0
  28. package/src/rules-grid.ts +241 -0
  29. package/src/rules-interactivity.ts +525 -0
  30. package/src/rules-layout.ts +385 -0
  31. package/src/rules-transforms.ts +412 -0
  32. package/src/rules-typography.ts +486 -0
  33. package/src/rules.ts +805 -0
  34. package/src/scanner.ts +84 -0
  35. package/src/transformer-compile-class.ts +275 -0
  36. package/src/types.ts +197 -0
  37. package/test/advanced-features.test.ts +911 -0
  38. package/test/arbitrary.test.ts +396 -0
  39. package/test/attributify.test.ts +592 -0
  40. package/test/bracket-syntax.test.ts +1133 -0
  41. package/test/build.test.ts +99 -0
  42. package/test/colors.test.ts +934 -0
  43. package/test/flexbox.test.ts +669 -0
  44. package/test/generator.test.ts +597 -0
  45. package/test/grid.test.ts +584 -0
  46. package/test/layout.test.ts +404 -0
  47. package/test/modifiers.test.ts +417 -0
  48. package/test/parser.test.ts +564 -0
  49. package/test/performance-regression.test.ts +376 -0
  50. package/test/performance.test.ts +568 -0
  51. package/test/plugin.test.ts +160 -0
  52. package/test/scanner.test.ts +94 -0
  53. package/test/sizing.test.ts +481 -0
  54. package/test/spacing.test.ts +394 -0
  55. package/test/transformer-compile-class.test.ts +287 -0
  56. package/test/transforms.test.ts +448 -0
  57. package/test/typography.test.ts +632 -0
  58. package/test/variants-form-states.test.ts +225 -0
  59. package/test/variants-group-peer.test.ts +66 -0
  60. package/test/variants-media.test.ts +213 -0
  61. package/test/variants-positional.test.ts +58 -0
  62. package/test/variants-pseudo-elements.test.ts +47 -0
  63. package/test/variants-state.test.ts +62 -0
  64. package/tsconfig.json +18 -0
package/PLUGIN.md ADDED
@@ -0,0 +1,235 @@
1
+ # Crosswind Bun Plugin
2
+
3
+ A Bun plugin that automatically generates and injects Crosswind CSS into your HTML files during the build process.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ bun add @cwcss/crosswind
9
+ ```
10
+
11
+ ## Quick Start
12
+
13
+ **1. Create your HTML file** (`src/template.html`):
14
+
15
+ ```html
16
+ <!DOCTYPE html>
17
+ <html>
18
+ <head>
19
+ <title>My App</title>
20
+ </head>
21
+ <body>
22
+ <div class="flex items-center p-4 bg-blue-500 text-white rounded-lg">
23
+ <h1 class="text-2xl font-bold">Hello Crosswind!</h1>
24
+ </div>
25
+ </body>
26
+ </html>
27
+ ```
28
+
29
+ **2. Import it in your TypeScript** (`src/index.ts`):
30
+
31
+ ```typescript
32
+ import template from './template.html'
33
+
34
+ // The HTML now has Crosswind CSS injected
35
+ document.body.innerHTML = template
36
+ ```
37
+
38
+ **3. Build with the plugin**:
39
+
40
+ ```typescript
41
+ import { plugin } from '@cwcss/crosswind'
42
+
43
+ await Bun.build({
44
+ entrypoints: ['./src/index.ts'],
45
+ outdir: './dist',
46
+ plugins: [plugin()],
47
+ })
48
+ ```
49
+
50
+ The plugin will automatically:
51
+
52
+ - Scan the HTML for utility classes
53
+ - Generate CSS for those classes
54
+ - Inject the CSS into the `<head>` section
55
+
56
+ ## Configuration
57
+
58
+ ### Basic Configuration
59
+
60
+ ```typescript
61
+ import { plugin } from '@cwcss/crosswind'
62
+
63
+ await Bun.build({
64
+ entrypoints: ['./src/index.ts'],
65
+ outdir: './dist',
66
+ plugins: [
67
+ plugin({
68
+ includePreflight: true, // Include CSS reset (default: true)
69
+ }),
70
+ ],
71
+ })
72
+ ```
73
+
74
+ ### Custom Theme
75
+
76
+ ```typescript
77
+ import { plugin } from '@cwcss/crosswind'
78
+
79
+ await Bun.build({
80
+ entrypoints: ['./src/index.ts'],
81
+ outdir: './dist',
82
+ plugins: [
83
+ plugin({
84
+ config: {
85
+ minify: true,
86
+ theme: {
87
+ colors: {
88
+ primary: '#3b82f6',
89
+ secondary: '#10b981',
90
+ danger: '#ef4444',
91
+ },
92
+ spacing: {
93
+ 18: '4.5rem',
94
+ 88: '22rem',
95
+ },
96
+ },
97
+ shortcuts: {
98
+ btn: 'px-4 py-2 rounded bg-primary text-white hover:bg-blue-600',
99
+ card: 'p-6 bg-white rounded-lg shadow-md',
100
+ },
101
+ },
102
+ }),
103
+ ],
104
+ })
105
+ ```
106
+
107
+ ### Advanced Configuration
108
+
109
+ ```typescript
110
+ import { plugin } from '@cwcss/crosswind'
111
+
112
+ await Bun.build({
113
+ entrypoints: ['./src/index.ts'],
114
+ outdir: './dist',
115
+ plugins: [
116
+ plugin({
117
+ config: {
118
+ minify: true,
119
+ safelist: ['bg-red-500', 'text-green-500'], // Always include these
120
+ blocklist: ['debug-*'], // Never include these
121
+ theme: {
122
+ colors: {
123
+ brand: {
124
+ 50: '#f0f9ff',
125
+ 100: '#e0f2fe',
126
+ 500: '#0ea5e9',
127
+ 900: '#0c4a6e',
128
+ },
129
+ },
130
+ },
131
+ shortcuts: {
132
+ 'btn-primary': 'px-4 py-2 rounded bg-brand-500 text-white hover:bg-brand-600',
133
+ },
134
+ },
135
+ includePreflight: true,
136
+ }),
137
+ ],
138
+ })
139
+ ```
140
+
141
+ ## API Reference
142
+
143
+ ### `plugin(options?)`
144
+
145
+ Creates a Crosswind Bun plugin instance.
146
+
147
+ #### Options
148
+
149
+ - **`config`** (`Partial<CrosswindConfig>`) - Custom Crosswind configuration
150
+ - `minify` - Minify the generated CSS
151
+ - `theme` - Custom theme (colors, spacing, fonts, etc.)
152
+ - `shortcuts` - Utility class shortcuts
153
+ - `safelist` - Classes to always include
154
+ - `blocklist` - Classes to never include
155
+ - `variants` - Enable/disable variants
156
+ - And more...
157
+
158
+ - **`includePreflight`** (`boolean`) - Include preflight CSS (default: `true`)
159
+
160
+ ## How It Works
161
+
162
+ 1. The plugin registers an `onLoad` handler for `.html` files
163
+ 2. When Bun encounters an HTML import, the plugin intercepts it
164
+ 3. It extracts all utility classes from the HTML using Crosswind's parser
165
+ 4. It generates CSS for those classes using Crosswind's generator
166
+ 5. The CSS is injected into the `<head>` section
167
+ 6. The processed HTML is returned to the bundle
168
+
169
+ ## Use Cases
170
+
171
+ - **SPAs**: Import HTML templates with automatic CSS generation
172
+ - **Web Components**: Load component templates with scoped styles
173
+ - **Static Sites**: Process HTML pages during build
174
+ - **Email Templates**: Generate inline CSS for email HTML
175
+
176
+ ## Examples
177
+
178
+ See the [examples/plugin](./examples/plugin) directory for a complete working example.
179
+
180
+ ## Comparison with CLI
181
+
182
+ | Feature | Plugin | CLI |
183
+ |---------|--------|-----|
184
+ | Automatic CSS generation | ✅ | ✅ |
185
+ | Watches files | ✅ (via Bun) | ✅ |
186
+ | Injects CSS | ✅ | ❌ |
187
+ | Separate CSS file | ❌ | ✅ |
188
+ | Build integration | ✅ | ❌ |
189
+ | Standalone usage | ❌ | ✅ |
190
+
191
+ ## Performance
192
+
193
+ The plugin is highly performant:
194
+
195
+ - Processes 1000 utilities in ~7ms
196
+ - Minimal overhead in build process
197
+ - Lazy loading - only processes imported HTML files
198
+
199
+ ## TypeScript Support
200
+
201
+ The plugin is fully typed. Import the types:
202
+
203
+ ```typescript
204
+ import type { CrosswindPluginOptions } from '@cwcss/crosswind'
205
+
206
+ const options: CrosswindPluginOptions = {
207
+ config: {
208
+ minify: true,
209
+ },
210
+ }
211
+ ```
212
+
213
+ ## Configuration File
214
+
215
+ The plugin also respects `crosswind.config.ts` in your project root:
216
+
217
+ ```typescript
218
+ // crosswind.config.ts
219
+ import type { CrosswindOptions } from '@cwcss/crosswind'
220
+
221
+ export default {
222
+ minify: true,
223
+ theme: {
224
+ colors: {
225
+ primary: '#3b82f6',
226
+ },
227
+ },
228
+ } satisfies CrosswindOptions
229
+ ```
230
+
231
+ The plugin will merge this config with any options passed to it.
232
+
233
+ ## License
234
+
235
+ MIT