@melcanz85/chaincss 1.9.3 → 1.9.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.
- package/README.md +12 -44
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,7 +12,6 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
|
|
|
12
12
|
|
|
13
13
|
**Runtime hooks** → Dynamic, prop-based styles when you need them
|
|
14
14
|
|
|
15
|
-
|
|
16
15
|
## Installation
|
|
17
16
|
|
|
18
17
|
```bash
|
|
@@ -28,7 +27,7 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
|
|
|
28
27
|
├── src/
|
|
29
28
|
│ ├── main.jcss # Entry point - imports & compiles
|
|
30
29
|
│ └── *.jcss # Your style definitions
|
|
31
|
-
├── style/ # Generated CSS will be stored
|
|
30
|
+
├── style/ # Generated CSS will be stored here
|
|
32
31
|
├── index.html # Your web page
|
|
33
32
|
└── package.json
|
|
34
33
|
```
|
|
@@ -239,11 +238,6 @@ OR with vanilla nodejs project
|
|
|
239
238
|
**Before (standard CSS):** 4,823 chars
|
|
240
239
|
**After (atomic CSS):** 499 chars → **90% smaller!**
|
|
241
240
|
|
|
242
|
-
### Built-in Security
|
|
243
|
-
|
|
244
|
-
ChainCSS uses **secure VM sandboxing** to safely execute your .jcss files. No eval, no global leaks, no security risks.
|
|
245
|
-
|
|
246
|
-
|
|
247
241
|
## Quick Start Guides
|
|
248
242
|
|
|
249
243
|
### With Node.js (Vanilla)
|
|
@@ -318,64 +312,38 @@ compile({ hello });" > chaincss/main.jcss
|
|
|
318
312
|
|
|
319
313
|
**ChainCSS is the ONLY library that gives you BOTH worlds!**
|
|
320
314
|
|
|
321
|
-
|
|
322
|
-
## Configuration
|
|
323
|
-
|
|
324
|
-
Create chaincss.config.js in your project root:
|
|
325
|
-
|
|
326
|
-
```javascript
|
|
327
|
-
|
|
328
|
-
module.exports = {
|
|
329
|
-
// Atomic CSS optimization
|
|
330
|
-
atomic: {
|
|
331
|
-
enabled: true,
|
|
332
|
-
threshold: 3, // Min usage for atomic conversion
|
|
333
|
-
naming: 'hash' // 'hash' | 'readable' | 'short'
|
|
334
|
-
},
|
|
335
|
-
|
|
336
|
-
// Prefixer options
|
|
337
|
-
prefixer: {
|
|
338
|
-
mode: 'auto', // 'auto' or 'full'
|
|
339
|
-
browsers: ['> 0.5%', 'last 2 versions']
|
|
340
|
-
},
|
|
341
|
-
|
|
342
|
-
// Source maps
|
|
343
|
-
sourceMaps: true
|
|
344
|
-
};
|
|
345
|
-
```
|
|
346
|
-
|
|
347
315
|
## API Reference
|
|
348
316
|
|
|
349
317
|
### Core Functions
|
|
350
318
|
|
|
351
319
|
Function Description
|
|
352
320
|
|
|
353
|
-
|
|
321
|
+
$() Create a new chain builder
|
|
354
322
|
|
|
355
|
-
|
|
323
|
+
.block(selector) End chain and assign selector(s)
|
|
356
324
|
|
|
357
|
-
|
|
325
|
+
compile(styles) Compile style objects to CSS
|
|
358
326
|
|
|
359
|
-
|
|
327
|
+
run(...styles) Process inline styles
|
|
360
328
|
|
|
361
|
-
|
|
329
|
+
get(filename) Import .jcss files
|
|
362
330
|
|
|
363
|
-
|
|
331
|
+
processor(input, output) Build-time processor
|
|
364
332
|
|
|
365
333
|
|
|
366
334
|
### React Hooks
|
|
367
335
|
|
|
368
336
|
Hook Description
|
|
369
337
|
|
|
370
|
-
|
|
338
|
+
useChainStyles(styles, options) Basic styles hook
|
|
371
339
|
|
|
372
|
-
|
|
340
|
+
useDynamicChainStyles(factory, deps) Styles that depend on props/state
|
|
373
341
|
|
|
374
|
-
|
|
342
|
+
useThemeChainStyles(styles, theme) Theme-aware styles
|
|
375
343
|
|
|
376
|
-
|
|
344
|
+
ChainCSSGlobal Global styles component
|
|
377
345
|
|
|
378
|
-
|
|
346
|
+
cx(...classes) Conditional class merging
|
|
379
347
|
|
|
380
348
|
|
|
381
349
|
## Editor Support
|