@barocss/kit 0.0.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.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 BaroCSS (easylogic)
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,366 @@
1
+ # @barocss/kit
2
+
3
+ [![npm version](https://img.shields.io/npm/v/@barocss/kit.svg)](https://www.npmjs.com/package/@barocss/kit)
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
+ [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
6
+
7
+ **CSS Engine** - Core parsing and generation engine
8
+
9
+ @barocss/kit is the core CSS engine that parses Tailwind CSS syntax and generates CSS. It provides the fundamental parsing, AST processing, and CSS generation capabilities used by BaroCSS runtimes.
10
+
11
+ ## ✨ Key Features
12
+
13
+ - **🚀 JIT Parsing** - Parse Tailwind syntax and generate CSS instantly
14
+ - **🔍 AST Processing** - Advanced Abstract Syntax Tree manipulation
15
+ - **⚡ Incremental Parsing** - Efficient parsing with caching
16
+ - **🎯 Tailwind Compatible** - Full Tailwind CSS syntax support
17
+ - **🌐 Universal** - Works in browsers, Node.js, and any JavaScript environment
18
+ - **🎨 Complete Utility Support** - Layout, spacing, colors, typography, and more
19
+ - **📱 Responsive & Interactive** - All variants work out of the box
20
+ - **🧠 Smart Caching** - Caching system for performance optimization
21
+
22
+ ## 🚀 Quick Start
23
+
24
+ ### NPM Installation
25
+
26
+ ```bash
27
+ # npm
28
+ npm install @barocss/kit
29
+
30
+ # pnpm
31
+ pnpm add @barocss/kit
32
+
33
+ # yarn
34
+ yarn add @barocss/kit
35
+ ```
36
+
37
+ ### Basic Usage
38
+
39
+ ```typescript
40
+ import { parseClassToAst, generateCss, createContext } from '@barocss/kit';
41
+
42
+ // Create context with theme
43
+ const ctx = createContext({
44
+ theme: {
45
+ colors: {
46
+ blue: { 500: '#3b82f6' },
47
+ white: '#ffffff'
48
+ },
49
+ spacing: {
50
+ 4: '1rem',
51
+ 8: '2rem'
52
+ }
53
+ }
54
+ });
55
+
56
+ // Parse and generate CSS
57
+ const ast = parseClassToAst('bg-blue-500 text-white p-4', ctx);
58
+ const css = generateCss('bg-blue-500 text-white p-4', ctx);
59
+
60
+ console.log(css);
61
+ // Output: .bg-blue-500 { background-color: #3b82f6; }
62
+ // .text-white { color: #ffffff; }
63
+ // .p-4 { padding: 1rem; }
64
+ ```
65
+
66
+ ## 🎯 How It Works
67
+
68
+ @barocss/kit provides the core parsing and generation engine:
69
+
70
+ 1. **Class Parsing** - Analyzes Tailwind syntax into AST nodes
71
+ 2. **AST Processing** - Manipulates and optimizes the Abstract Syntax Tree
72
+ 3. **CSS Generation** - Converts AST nodes into CSS rules
73
+ 4. **Context Management** - Handles theme, configuration, and caching
74
+
75
+ ```typescript
76
+ import { parseClassToAst, generateCss, createContext } from '@barocss/kit';
77
+
78
+ // Parse class names into AST
79
+ const ast = parseClassToAst('bg-blue-500 hover:bg-blue-600', ctx);
80
+
81
+ // Generate CSS from AST or class names
82
+ const css = generateCss('bg-blue-500 hover:bg-blue-600', ctx);
83
+
84
+ // Result:
85
+ // .bg-blue-500 { background-color: #3b82f6; }
86
+ // .hover\:bg-blue-600:hover { background-color: #2563eb; }
87
+ ```
88
+
89
+ ## 🛠️ Usage Examples
90
+
91
+ ### Basic CSS Generation
92
+
93
+ ```typescript
94
+ import { generateCss, createContext } from '@barocss/kit';
95
+
96
+ const ctx = createContext({
97
+ theme: {
98
+ colors: { red: { 500: '#ef4444' } },
99
+ spacing: { 4: '1rem' }
100
+ }
101
+ });
102
+
103
+ const css = generateCss('bg-red-500 text-white p-4', ctx);
104
+ console.log(css);
105
+ ```
106
+
107
+ ### AST Processing
108
+
109
+ ```typescript
110
+ import { parseClassToAst, optimizeAst, astToCss } from '@barocss/kit';
111
+
112
+ // Parse to AST
113
+ const ast = parseClassToAst('bg-blue-500 hover:bg-blue-600 p-4', ctx);
114
+
115
+ // Optimize AST
116
+ const optimizedAst = optimizeAst(ast);
117
+
118
+ // Convert to CSS
119
+ const css = astToCss(optimizedAst);
120
+ ```
121
+
122
+ ### Incremental Parsing
123
+
124
+ ```typescript
125
+ import { IncrementalParser, createContext } from '@barocss/kit';
126
+
127
+ const ctx = createContext();
128
+ const parser = new IncrementalParser(ctx);
129
+
130
+ // Process classes incrementally
131
+ const result = parser.processClass('bg-blue-500');
132
+ const result2 = parser.processClass('text-white');
133
+ ```
134
+
135
+ ### Custom Theme
136
+
137
+ ```typescript
138
+ import { createContext } from '@barocss/kit';
139
+
140
+ const ctx = createContext({
141
+ theme: {
142
+ extend: {
143
+ colors: {
144
+ 'brand': {
145
+ 50: '#f0f9ff',
146
+ 500: '#0ea5e9',
147
+ 900: '#0c4a6e',
148
+ }
149
+ }
150
+ }
151
+ }
152
+ });
153
+ ```
154
+
155
+ ## 🔧 Configuration
156
+
157
+ ### Context Configuration
158
+
159
+ ```typescript
160
+ import { createContext } from '@barocss/kit';
161
+
162
+ const ctx = createContext({
163
+ theme: {
164
+ extend: {
165
+ colors: {
166
+ 'brand': {
167
+ 50: '#f0f9ff',
168
+ 500: '#0ea5e9',
169
+ 900: '#0c4a6e',
170
+ }
171
+ },
172
+ spacing: {
173
+ '18': '4.5rem',
174
+ '88': '22rem',
175
+ }
176
+ }
177
+ },
178
+ darkMode: 'class', // or 'media'
179
+ cssVarPrefix: '--baro-'
180
+ });
181
+ ```
182
+
183
+ ### Theme Functions
184
+
185
+ ```typescript
186
+ const ctx = createContext({
187
+ theme: {
188
+ spacing: (theme) => ({
189
+ ...theme('spacing'),
190
+ '18': '4.5rem',
191
+ '88': '22rem',
192
+ })
193
+ }
194
+ });
195
+ ```
196
+
197
+ ## 🌐 API Reference
198
+
199
+ ### Core Functions
200
+
201
+ ```typescript
202
+ // Parse class to AST
203
+ parseClassToAst(className: string, ctx: Context): AstNode[]
204
+
205
+ // Generate CSS from class names
206
+ generateCss(classList: string, ctx: Context): string
207
+
208
+ // Generate CSS from AST
209
+ astToCss(ast: AstNode[]): string
210
+
211
+ // Optimize AST
212
+ optimizeAst(ast: AstNode[]): AstNode[]
213
+
214
+ // Create context
215
+ createContext(config?: Config): Context
216
+ ```
217
+
218
+ ### Incremental Parser
219
+
220
+ ```typescript
221
+ import { IncrementalParser } from '@barocss/kit';
222
+
223
+ const parser = new IncrementalParser(ctx);
224
+
225
+ // Process single class
226
+ const result = parser.processClass('bg-blue-500');
227
+
228
+ // Process multiple classes
229
+ const results = parser.processClasses(['bg-blue-500', 'text-white']);
230
+
231
+ // Get statistics
232
+ const stats = parser.getStats();
233
+ ```
234
+
235
+ ## 📱 Supported Utilities
236
+
237
+ BaroCSS supports **most Tailwind CSS utilities**:
238
+
239
+ ### Layout
240
+ - `container`, `columns`, `break-after`, `break-before`
241
+ - `block`, `inline-block`, `inline`, `flex`, `inline-flex`
242
+ - `grid`, `inline-grid`, `contents`, `hidden`
243
+
244
+ ### Flexbox & Grid
245
+ - `flex`, `grid`, `order`, `gap`
246
+ - `justify-start`, `justify-center`, `justify-end`
247
+ - `items-start`, `items-center`, `items-end`
248
+
249
+ ### Spacing
250
+ - `p-4`, `m-2`, `space-x-4`, `space-y-2`
251
+ - `px-6`, `py-3`, `pt-2`, `pb-4`
252
+
253
+ ### Sizing
254
+ - `w-full`, `h-screen`, `min-h-screen`, `max-w-md`
255
+ - `w-1/2`, `h-16`, `min-w-0`, `max-h-96`
256
+
257
+ ### Typography
258
+ - `text-sm`, `font-bold`, `leading-relaxed`
259
+ - `text-center`, `text-left`, `text-right`
260
+ - `uppercase`, `lowercase`, `capitalize`
261
+
262
+ ### Backgrounds
263
+ - `bg-blue-500`, `bg-gradient-to-r`, `bg-[url(...)]`
264
+ - `bg-opacity-50`, `bg-blend-multiply`
265
+
266
+ ### Borders
267
+ - `border-2`, `rounded-lg`, `border-blue-500`
268
+ - `border-opacity-25`, `border-dashed`
269
+
270
+ ### Effects
271
+ - `shadow-lg`, `opacity-50`, `blur-sm`
272
+ - `backdrop-blur`, `backdrop-filter`
273
+
274
+ ### Transitions & Transforms
275
+ - `transition-all`, `duration-300`, `ease-in-out`
276
+ - `rotate-45`, `scale-110`, `translate-x-4`
277
+
278
+ ### Interactivity
279
+ - `hover:bg-blue-600`, `focus:ring-2`, `active:scale-95`
280
+ - `group`, `peer`, `group-hover:`, `peer-focus:`
281
+
282
+ ## 🚀 Performance Features
283
+
284
+ - **JIT Generation** - Only generates CSS you actually use
285
+ - **Smart Caching** - Avoids regenerating existing styles
286
+ - **Efficient Parsing** - Fast class name processing
287
+ - **Tree Shaking** - Removes unused utilities automatically
288
+ - **Optimized Output** - Generates efficient CSS
289
+
290
+ ## 🔌 Extending the Engine
291
+
292
+ ### Custom Utilities
293
+
294
+ ```typescript
295
+ import { staticUtility, functionalUtility } from '@barocss/kit';
296
+
297
+ // Static utility
298
+ staticUtility('custom-shadow', [
299
+ decl('box-shadow', '0 4px 6px -1px rgba(0, 0, 0, 0.1)')
300
+ ]);
301
+
302
+ // Functional utility
303
+ functionalUtility({
304
+ name: 'custom-spacing',
305
+ prop: 'margin',
306
+ themeKey: 'spacing',
307
+ supportsArbitrary: true,
308
+ handle: (value) => [decl('margin', value)]
309
+ });
310
+ ```
311
+
312
+ ### Custom Modifiers
313
+
314
+ ```typescript
315
+ import { staticModifier, functionalModifier } from '@barocss/kit';
316
+
317
+ // Static modifier
318
+ staticModifier('custom-hover', ['&:hover']);
319
+
320
+ // Functional modifier
321
+ functionalModifier(
322
+ (mod: string) => /^custom-/.test(mod),
323
+ ({ selector, mod }) => ({
324
+ selector: `&[data-custom="${mod.replace('custom-', '')}"]`
325
+ })
326
+ );
327
+ ```
328
+
329
+ ## 🤝 Contributing
330
+
331
+ We welcome contributions! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
332
+
333
+ ### Development
334
+
335
+ ```bash
336
+ # Clone repository
337
+ git clone https://github.com/easylogic/barocss.git
338
+ cd barocss
339
+
340
+ # Install dependencies
341
+ pnpm install
342
+
343
+ # Start development server
344
+ pnpm dev
345
+
346
+ # Run tests
347
+ pnpm test
348
+
349
+ # Build packages
350
+ pnpm build
351
+ ```
352
+
353
+ ## 📄 License
354
+
355
+ This project is licensed under the MIT License - see the [LICENSE](../../LICENSE) file for details.
356
+
357
+ ## 🙏 Acknowledgments
358
+
359
+ - **Tailwind CSS** - For the amazing utility-first approach and JIT inspiration
360
+ - **UnoCSS** - For ideas around on-demand, utility-first generation at runtime
361
+
362
+ ---
363
+
364
+ **@barocss/kit** - Core CSS parsing and generation engine.
365
+
366
+ *Parse Tailwind syntax. Generate CSS. Build amazing things.* ✨
@@ -0,0 +1,7 @@
1
+ export declare const defaultTheme: UserTheme;
2
+
3
+ declare interface UserTheme {
4
+ [key: string]: unknown;
5
+ }
6
+
7
+ export { }