@stacksjs/ts-css 0.1.4 → 0.3.2

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 (56) hide show
  1. package/ENGINE.md +677 -0
  2. package/PLUGIN.md +217 -0
  3. package/dist/bin/cli.js +29 -38
  4. package/dist/bin/cssx.js +405 -0
  5. package/dist/chunk-0h48763m.js +2 -0
  6. package/dist/chunk-br9jax0b.js +2 -0
  7. package/dist/chunk-f9gzb0a5.js +3 -0
  8. package/dist/chunk-genwkevp.js +3 -0
  9. package/dist/chunk-jj3s4ctf.js +62 -0
  10. package/dist/chunk-mz87cw2e.js +2 -0
  11. package/dist/engine/build.d.ts +26 -0
  12. package/dist/engine/color-modifier.d.ts +8 -0
  13. package/dist/engine/config.d.ts +5 -0
  14. package/dist/engine/format.d.ts +20 -0
  15. package/dist/engine/generator.d.ts +14 -0
  16. package/dist/engine/index.d.ts +13 -0
  17. package/dist/engine/index.js +653 -0
  18. package/dist/engine/parser.d.ts +68 -0
  19. package/dist/engine/plugin.d.ts +22 -0
  20. package/dist/engine/preflight-forms.d.ts +6 -0
  21. package/dist/engine/preflight.d.ts +3 -0
  22. package/dist/engine/rules-advanced.d.ts +27 -0
  23. package/dist/engine/rules-effects.d.ts +35 -0
  24. package/dist/engine/rules-forms.d.ts +8 -0
  25. package/dist/engine/rules-grid.d.ts +13 -0
  26. package/dist/engine/rules-icons.d.ts +2 -0
  27. package/dist/engine/rules-interactivity.d.ts +41 -0
  28. package/dist/engine/rules-layout.d.ts +28 -0
  29. package/dist/engine/rules-transforms.d.ts +35 -0
  30. package/dist/engine/rules-typography.d.ts +47 -0
  31. package/dist/engine/rules.d.ts +56 -0
  32. package/dist/engine/scanner.d.ts +16 -0
  33. package/dist/engine/style/api.d.ts +95 -0
  34. package/dist/engine/style/collect.d.ts +10 -0
  35. package/dist/engine/style/evaluate.d.ts +11 -0
  36. package/dist/engine/style/hash.d.ts +15 -0
  37. package/dist/engine/style/index.d.ts +56 -0
  38. package/dist/engine/style/plugin.d.ts +27 -0
  39. package/dist/engine/style/priority.d.ts +12 -0
  40. package/dist/engine/style/registry.d.ts +56 -0
  41. package/dist/engine/style/types.d.ts +54 -0
  42. package/dist/engine/style/value.d.ts +15 -0
  43. package/dist/engine/transformer-compile-class.d.ts +34 -0
  44. package/dist/engine/types.d.ts +156 -0
  45. package/dist/index.js +1 -60
  46. package/dist/optimize/index.js +1 -1
  47. package/dist/parse/index.js +1 -1
  48. package/dist/parse/list.d.ts +1 -1
  49. package/dist/select/index.js +1 -1
  50. package/dist/what/index.js +1 -1
  51. package/package.json +35 -19
  52. package/dist/chunk-1kmkypmr.js +0 -3
  53. package/dist/chunk-2wsah70r.js +0 -2
  54. package/dist/chunk-9ep6bwwb.js +0 -2
  55. package/dist/chunk-edwg811g.js +0 -2
  56. package/dist/chunk-thy3p95k.js +0 -3
package/PLUGIN.md ADDED
@@ -0,0 +1,217 @@
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 @ts-css/core
9
+ ```
10
+
11
+ ## Quick Start**1. Create your HTML file**(`src/template.html`)
12
+
13
+ ```html
14
+ <!DOCTYPE html>
15
+ <html>
16
+ <head>
17
+ <title>My App</title>
18
+ </head>
19
+ <body>
20
+ <div class="flex items-center p-4 bg-blue-500 text-white rounded-lg">
21
+ <h1 class="text-2xl font-bold">Hello Crosswind!</h1>
22
+ </div>
23
+ </body>
24
+ </html>
25
+ ```**2. Import it in your TypeScript**(`src/index.ts`):
26
+
27
+ ```typescript
28
+ import template from './template.html'
29
+
30
+ // The HTML now has Crosswind CSS injected
31
+ document.body.innerHTML = template
32
+ ```**3. Build with the plugin**:
33
+
34
+ ```typescript
35
+ import { plugin } from '@ts-css/core'
36
+
37
+ await Bun.build({
38
+ entrypoints: ['./src/index.ts'],
39
+ outdir: './dist',
40
+ plugins: [plugin()],
41
+ })
42
+ ```The plugin will automatically:
43
+
44
+ - Scan the HTML for utility classes
45
+ - Generate CSS for those classes
46
+ - Inject the CSS into the`<head>`section
47
+
48
+ ## Configuration
49
+
50
+ ### Basic Configuration```typescript
51
+
52
+ import { plugin } from '@ts-css/core'
53
+
54
+ await Bun.build({
55
+ entrypoints: ['./src/index.ts'],
56
+ outdir: './dist',
57
+ plugins: [
58
+ plugin({
59
+ includePreflight: true, // Include CSS reset (default: true)
60
+ }),
61
+ ],
62
+ })
63
+
64
+ ```### Custom Theme```typescript
65
+ import { plugin } from '@ts-css/core'
66
+
67
+ await Bun.build({
68
+ entrypoints: ['./src/index.ts'],
69
+ outdir: './dist',
70
+ plugins: [
71
+ plugin({
72
+ config: {
73
+ minify: true,
74
+ theme: {
75
+ colors: {
76
+ primary: '#3b82f6',
77
+ secondary: '#10b981',
78
+ danger: '#ef4444',
79
+ },
80
+ spacing: {
81
+ 18: '4.5rem',
82
+ 88: '22rem',
83
+ },
84
+ },
85
+ shortcuts: {
86
+ btn: 'px-4 py-2 rounded bg-primary text-white hover:bg-blue-600',
87
+ card: 'p-6 bg-white rounded-lg shadow-md',
88
+ },
89
+ },
90
+ }),
91
+ ],
92
+ })
93
+ ```### Advanced Configuration```typescript
94
+
95
+ import { plugin } from '@ts-css/core'
96
+
97
+ await Bun.build({
98
+ entrypoints: ['./src/index.ts'],
99
+ outdir: './dist',
100
+ plugins: [
101
+ plugin({
102
+ config: {
103
+ minify: true,
104
+ safelist: ['bg-red-500', 'text-green-500'], // Always include these
105
+ blocklist: ['debug-*'], // Never include these
106
+ theme: {
107
+ colors: {
108
+ brand: {
109
+ 50: '#f0f9ff',
110
+ 100: '#e0f2fe',
111
+ 500: '#0ea5e9',
112
+ 900: '#0c4a6e',
113
+ },
114
+ },
115
+ },
116
+ shortcuts: {
117
+ 'btn-primary': 'px-4 py-2 rounded bg-brand-500 text-white hover:bg-brand-600',
118
+ },
119
+ },
120
+ includePreflight: true,
121
+ }),
122
+ ],
123
+ })
124
+
125
+ ```## API Reference
126
+
127
+ ### `plugin(options?)`
128
+
129
+ Creates a Crosswind Bun plugin instance.
130
+
131
+ #### Options
132
+
133
+ -**`config`**(`Partial<TsCssConfig>`) - Custom Crosswind configuration
134
+
135
+ - `minify`- Minify the generated CSS
136
+
137
+ -`theme`- Custom theme (colors, spacing, fonts, etc.)
138
+ -`shortcuts`- Utility class shortcuts
139
+ -`safelist`- Classes to always include
140
+ -`blocklist`- Classes to never include
141
+ -`variants` - Enable/disable variants
142
+
143
+ - And more...
144
+
145
+ -**`includePreflight`**(`boolean`) - Include preflight CSS (default: `true`)
146
+
147
+ ## How It Works
148
+
149
+ 1. The plugin registers an `onLoad`handler for`.html`files
150
+ 2. When Bun encounters an HTML import, the plugin intercepts it
151
+ 3. It extracts all utility classes from the HTML using Crosswind's parser
152
+ 4. It generates CSS for those classes using Crosswind's generator
153
+ 5. The CSS is injected into the`<head>`section
154
+ 6. The processed HTML is returned to the bundle
155
+
156
+ ## Use Cases
157
+
158
+ -**SPAs**: Import HTML templates with automatic CSS generation
159
+ -**Web Components**: Load component templates with scoped styles
160
+ -**Static Sites**: Process HTML pages during build
161
+ -**Email Templates**: Generate inline CSS for email HTML
162
+
163
+ ## Examples
164
+
165
+ See the [examples/plugin](./examples/plugin) directory for a complete working example.
166
+
167
+ ## Comparison with CLI
168
+
169
+ | Feature | Plugin | CLI |
170
+ |---------|--------|-----|
171
+ | Automatic CSS generation | ✅ | ✅ |
172
+ | Watches files | ✅ (via Bun) | ✅ |
173
+ | Injects CSS | ✅ | ❌ |
174
+ | Separate CSS file | ❌ | ✅ |
175
+ | Build integration | ✅ | ❌ |
176
+ | Standalone usage | ❌ | ✅ |
177
+
178
+ ## Performance
179
+
180
+ The plugin is highly performant:
181
+
182
+ - Processes 1000 utilities in ~7ms
183
+ - Minimal overhead in build process
184
+ - Lazy loading - only processes imported HTML files
185
+
186
+ ## TypeScript Support
187
+
188
+ The plugin is fully typed. Import the types:```typescript
189
+ import type { TsCssPluginOptions } from '@ts-css/core'
190
+
191
+ const options: TsCssPluginOptions = {
192
+ config: {
193
+ minify: true,
194
+ },
195
+ }
196
+ ```## Configuration File
197
+
198
+ The plugin also respects`crosswind.config.ts`in your project root:```typescript
199
+ // crosswind.config.ts
200
+ import type { TsCssOptions } from '@ts-css/core'
201
+
202
+ export default {
203
+ minify: true,
204
+ theme: {
205
+ colors: {
206
+ primary: '#3b82f6',
207
+ },
208
+ },
209
+ } satisfies TsCssOptions
210
+
211
+ ```
212
+
213
+ The plugin will merge this config with any options passed to it.
214
+
215
+ ## License
216
+
217
+ MIT