chaincss 2.1.33 → 2.1.35
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/dist/plugins/vite.js +12 -76
- package/package.json +1 -1
- package/src/plugins/vite.ts +15 -94
package/dist/plugins/vite.js
CHANGED
|
@@ -3157,7 +3157,7 @@ function chaincssPlugin(options = {}) {
|
|
|
3157
3157
|
return false;
|
|
3158
3158
|
}
|
|
3159
3159
|
const isUserFile = id.includes("/src/") || id.includes("/components/");
|
|
3160
|
-
const isComponent = /\.(t|j)sx?$/.test(id)
|
|
3160
|
+
const isComponent = /\.(t|j)sx?$/.test(id);
|
|
3161
3161
|
return isUserFile && isComponent;
|
|
3162
3162
|
}
|
|
3163
3163
|
function updateCSS() {
|
|
@@ -3220,10 +3220,7 @@ function chaincssPlugin(options = {}) {
|
|
|
3220
3220
|
return `
|
|
3221
3221
|
// ChainCSS Runtime Bootstrap (No CSS Injection)
|
|
3222
3222
|
import manifest from "virtual:chaincss-manifest";
|
|
3223
|
-
|
|
3224
|
-
const setManifest = (manifest) => {
|
|
3225
|
-
window.__CHAINCSS_MANIFEST__ = manifest?.atomicMap || manifest?.atomicClasses || manifest || {};
|
|
3226
|
-
};
|
|
3223
|
+
import { setManifest } from "chaincss/runtime";
|
|
3227
3224
|
|
|
3228
3225
|
try {
|
|
3229
3226
|
setManifest(manifest);
|
|
@@ -3237,10 +3234,7 @@ const setManifest = (manifest) => {
|
|
|
3237
3234
|
return `
|
|
3238
3235
|
// ChainCSS Runtime Bootstrap
|
|
3239
3236
|
import manifest from "virtual:chaincss-manifest";
|
|
3240
|
-
|
|
3241
|
-
const setManifest = (manifest) => {
|
|
3242
|
-
window.__CHAINCSS_MANIFEST__ = manifest?.atomicMap || manifest?.atomicClasses || manifest || {};
|
|
3243
|
-
};
|
|
3237
|
+
import { setManifest } from "chaincss/runtime";
|
|
3244
3238
|
|
|
3245
3239
|
// Initialize ChainCSS
|
|
3246
3240
|
try {
|
|
@@ -3290,14 +3284,17 @@ const setManifest = (manifest) => {
|
|
|
3290
3284
|
}
|
|
3291
3285
|
`;
|
|
3292
3286
|
}
|
|
3293
|
-
let chainCount = 0;
|
|
3294
|
-
let staticCount = 0;
|
|
3295
|
-
let dynamicCount = 0;
|
|
3296
|
-
let hybridCount = 0;
|
|
3297
|
-
let totalCSSBytes = 0;
|
|
3298
3287
|
return {
|
|
3299
3288
|
name: "chaincss",
|
|
3300
3289
|
enforce: "pre",
|
|
3290
|
+
config(config) {
|
|
3291
|
+
if (!config.optimizeDeps) config.optimizeDeps = {};
|
|
3292
|
+
if (!config.optimizeDeps.exclude) config.optimizeDeps.exclude = [];
|
|
3293
|
+
const exclude = config.optimizeDeps.exclude;
|
|
3294
|
+
if (!exclude.includes("url")) exclude.push("url");
|
|
3295
|
+
if (!exclude.includes("fs")) exclude.push("fs");
|
|
3296
|
+
if (!exclude.includes("path")) exclude.push("path");
|
|
3297
|
+
},
|
|
3301
3298
|
configureServer(_server) {
|
|
3302
3299
|
server = _server;
|
|
3303
3300
|
log("Vite plugin initialized");
|
|
@@ -3342,42 +3339,7 @@ const setManifest = (manifest) => {
|
|
|
3342
3339
|
}
|
|
3343
3340
|
log(`Processing: ${fileName}`);
|
|
3344
3341
|
processedFiles.add(id);
|
|
3345
|
-
const chainMatches = source.match(/chain\(/g);
|
|
3346
|
-
const smartMatches = source.match(/smartChain\(/g);
|
|
3347
|
-
const total = (chainMatches?.length || 0) + (smartMatches?.length || 0);
|
|
3348
|
-
if (total > 0) {
|
|
3349
|
-
chainCount += total;
|
|
3350
|
-
if (smartMatches) {
|
|
3351
|
-
hybridCount += smartMatches.length;
|
|
3352
|
-
staticCount += chainMatches?.length || 0;
|
|
3353
|
-
} else {
|
|
3354
|
-
staticCount += total;
|
|
3355
|
-
}
|
|
3356
|
-
console.log(` \u2514\u2500 Found ${total} chain calls (${chainMatches?.length || 0} static, ${smartMatches?.length || 0} hybrid)`);
|
|
3357
|
-
}
|
|
3358
|
-
if (id.endsWith(".chain.ts") || id.endsWith(".chain.js")) {
|
|
3359
|
-
try {
|
|
3360
|
-
const results = await compiler.compileFile(id);
|
|
3361
|
-
let css2 = "";
|
|
3362
|
-
for (const r of Object.values(results)) {
|
|
3363
|
-
if (r.css) css2 += r.css + "\n";
|
|
3364
|
-
}
|
|
3365
|
-
if (css2.trim()) {
|
|
3366
|
-
generatedCSS += css2;
|
|
3367
|
-
totalCSSBytes += css2.length;
|
|
3368
|
-
if (options.verbose) {
|
|
3369
|
-
console.log(` \u2514\u2500 Extracted ${css2.length} bytes of CSS`);
|
|
3370
|
-
}
|
|
3371
|
-
}
|
|
3372
|
-
} catch (e) {
|
|
3373
|
-
}
|
|
3374
|
-
}
|
|
3375
3342
|
await compiler.compileSource(source, id);
|
|
3376
|
-
const css = compiler.getCombinedCSS();
|
|
3377
|
-
if (css && css.trim()) {
|
|
3378
|
-
const ruleCount = (css.match(/\{/g) || []).length;
|
|
3379
|
-
console.log(` \u2514\u2500 Extracted ${ruleCount} CSS rules from ${fileName}`);
|
|
3380
|
-
}
|
|
3381
3343
|
updateCSS();
|
|
3382
3344
|
updateManifest();
|
|
3383
3345
|
if (server && options.hmr !== false) {
|
|
@@ -3387,13 +3349,6 @@ const setManifest = (manifest) => {
|
|
|
3387
3349
|
if (isEntryFile && !source.includes("virtual:chaincss.css")) {
|
|
3388
3350
|
const bootstrapCode = generateBootstrapCode(generatedCSS);
|
|
3389
3351
|
log(`Bootstrapping entry file: ${fileName} (${generatedCSS.length} bytes)`);
|
|
3390
|
-
if (chainCount > 0) {
|
|
3391
|
-
console.log("");
|
|
3392
|
-
console.log("\u26D3\uFE0F ChainCSS \u2014 Ready");
|
|
3393
|
-
console.log(` \u{1F4DD} ${chainCount} chain() calls detected`);
|
|
3394
|
-
console.log(" \u{1F500} Auto-split active \u2014 open browser console for split report");
|
|
3395
|
-
console.log("");
|
|
3396
|
-
}
|
|
3397
3352
|
return {
|
|
3398
3353
|
code: `${bootstrapCode}
|
|
3399
3354
|
${source}`,
|
|
@@ -3437,28 +3392,9 @@ ${source}`,
|
|
|
3437
3392
|
generatedCSS = "";
|
|
3438
3393
|
generatedManifest = {};
|
|
3439
3394
|
compiler.clearCSS();
|
|
3440
|
-
chainCount = 0;
|
|
3441
|
-
staticCount = 0;
|
|
3442
|
-
dynamicCount = 0;
|
|
3443
|
-
hybridCount = 0;
|
|
3444
|
-
totalCSSBytes = 0;
|
|
3445
3395
|
},
|
|
3446
|
-
|
|
3447
|
-
if (generatedCSS.trim() && options.cssOutput) {
|
|
3448
|
-
const fs8 = await import("fs");
|
|
3449
|
-
const outputPath = path6.resolve(process.cwd(), options.cssOutput);
|
|
3450
|
-
fs8.writeFileSync(outputPath, generatedCSS, "utf8");
|
|
3451
|
-
console.log(` \u{1F4C1} CSS written to ${options.cssOutput} (${generatedCSS.length} bytes)`);
|
|
3452
|
-
}
|
|
3396
|
+
buildEnd() {
|
|
3453
3397
|
const finalCSS = updateCSS();
|
|
3454
|
-
const stats = compiler.getStats();
|
|
3455
|
-
console.log("");
|
|
3456
|
-
console.log("[ChainCSS] \u2705 Build complete");
|
|
3457
|
-
console.log(` \u{1F4E6} Static CSS: ${finalCSS.length} bytes`);
|
|
3458
|
-
console.log(` \u26A1 Runtime JS: minimal (dynamic properties only)`);
|
|
3459
|
-
console.log(` \u{1F9E9} Total styles: ${stats.totalStyles || 0} processed`);
|
|
3460
|
-
console.log(` \u{1F4BE} Atomic savings: ${stats.savings || "0%"}`);
|
|
3461
|
-
console.log("");
|
|
3462
3398
|
log(`Build complete - Final CSS: ${finalCSS.length} bytes`);
|
|
3463
3399
|
if (options.cssOutput) {
|
|
3464
3400
|
try {
|
package/package.json
CHANGED
package/src/plugins/vite.ts
CHANGED
|
@@ -76,7 +76,7 @@ export default function chaincssPlugin(options: ChainCSSPluginOptions = {}): Plu
|
|
|
76
76
|
|
|
77
77
|
// Default: process source files
|
|
78
78
|
const isUserFile = id.includes('/src/') || id.includes('/components/');
|
|
79
|
-
const isComponent = /\.(t|j)sx?$/.test(id)
|
|
79
|
+
const isComponent = /\.(t|j)sx?$/.test(id);
|
|
80
80
|
|
|
81
81
|
return isUserFile && isComponent;
|
|
82
82
|
}
|
|
@@ -155,10 +155,7 @@ export default function chaincssPlugin(options: ChainCSSPluginOptions = {}): Plu
|
|
|
155
155
|
return `
|
|
156
156
|
// ChainCSS Runtime Bootstrap (No CSS Injection)
|
|
157
157
|
import manifest from "virtual:chaincss-manifest";
|
|
158
|
-
|
|
159
|
-
const setManifest = (manifest) => {
|
|
160
|
-
window.__CHAINCSS_MANIFEST__ = manifest?.atomicMap || manifest?.atomicClasses || manifest || {};
|
|
161
|
-
};
|
|
158
|
+
import { setManifest } from "chaincss/runtime";
|
|
162
159
|
|
|
163
160
|
try {
|
|
164
161
|
setManifest(manifest);
|
|
@@ -178,10 +175,7 @@ const setManifest = (manifest) => {
|
|
|
178
175
|
return `
|
|
179
176
|
// ChainCSS Runtime Bootstrap
|
|
180
177
|
import manifest from "virtual:chaincss-manifest";
|
|
181
|
-
|
|
182
|
-
const setManifest = (manifest) => {
|
|
183
|
-
window.__CHAINCSS_MANIFEST__ = manifest?.atomicMap || manifest?.atomicClasses || manifest || {};
|
|
184
|
-
};
|
|
178
|
+
import { setManifest } from "chaincss/runtime";
|
|
185
179
|
|
|
186
180
|
// Initialize ChainCSS
|
|
187
181
|
try {
|
|
@@ -232,22 +226,24 @@ const setManifest = (manifest) => {
|
|
|
232
226
|
`;
|
|
233
227
|
}
|
|
234
228
|
|
|
235
|
-
let chainCount = 0;
|
|
236
|
-
let staticCount = 0;
|
|
237
|
-
let dynamicCount = 0;
|
|
238
|
-
let hybridCount = 0;
|
|
239
|
-
let totalCSSBytes = 0;
|
|
240
|
-
|
|
241
229
|
return {
|
|
242
230
|
name: 'chaincss',
|
|
243
231
|
enforce: 'pre' as const,
|
|
244
232
|
|
|
233
|
+
config(config) {
|
|
234
|
+
// Prevent Vite from trying to optimize Node.js built-ins
|
|
235
|
+
if (!config.optimizeDeps) config.optimizeDeps = {};
|
|
236
|
+
if (!config.optimizeDeps.exclude) config.optimizeDeps.exclude = [];
|
|
237
|
+
const exclude = config.optimizeDeps.exclude as string[];
|
|
238
|
+
if (!exclude.includes('url')) exclude.push('url');
|
|
239
|
+
if (!exclude.includes('fs')) exclude.push('fs');
|
|
240
|
+
if (!exclude.includes('path')) exclude.push('path');
|
|
241
|
+
},
|
|
242
|
+
|
|
245
243
|
configureServer(_server: ViteDevServer) {
|
|
246
244
|
server = _server;
|
|
247
245
|
log('Vite plugin initialized');
|
|
248
246
|
|
|
249
|
-
// Stats shown in transform hook after processing
|
|
250
|
-
|
|
251
247
|
// Watch for config changes
|
|
252
248
|
_server.watcher.on('change', (filePath) => {
|
|
253
249
|
if (filePath.includes('chaincss.config')) {
|
|
@@ -300,53 +296,9 @@ const setManifest = (manifest) => {
|
|
|
300
296
|
log(`Processing: ${fileName}`);
|
|
301
297
|
processedFiles.add(id);
|
|
302
298
|
|
|
303
|
-
//
|
|
304
|
-
const chainMatches = source.match(/chain\(/g);
|
|
305
|
-
const smartMatches = source.match(/smartChain\(/g);
|
|
306
|
-
const total = (chainMatches?.length || 0) + (smartMatches?.length || 0);
|
|
307
|
-
|
|
308
|
-
if (total > 0) {
|
|
309
|
-
chainCount += total;
|
|
310
|
-
// Estimate static vs dynamic (smartChain is hybrid, chain is static)
|
|
311
|
-
if (smartMatches) {
|
|
312
|
-
hybridCount += smartMatches.length;
|
|
313
|
-
staticCount += (chainMatches?.length || 0);
|
|
314
|
-
} else {
|
|
315
|
-
staticCount += total;
|
|
316
|
-
}
|
|
317
|
-
console.log(` └─ Found ${total} chain calls (${chainMatches?.length || 0} static, ${smartMatches?.length || 0} hybrid)`);
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
// Compile .chain.ts files to CSS
|
|
321
|
-
if (id.endsWith('.chain.ts') || id.endsWith('.chain.js')) {
|
|
322
|
-
try {
|
|
323
|
-
const results = await compiler.compileFile(id);
|
|
324
|
-
let css = '';
|
|
325
|
-
for (const r of Object.values(results)) {
|
|
326
|
-
if (r.css) css += r.css + '\n';
|
|
327
|
-
}
|
|
328
|
-
if (css.trim()) {
|
|
329
|
-
generatedCSS += css;
|
|
330
|
-
totalCSSBytes += css.length;
|
|
331
|
-
if (options.verbose) {
|
|
332
|
-
console.log(` └─ Extracted ${css.length} bytes of CSS`);
|
|
333
|
-
}
|
|
334
|
-
}
|
|
335
|
-
} catch (e) {
|
|
336
|
-
// Not a compilable chain file
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
// Also detect chain() calls in JSX/TSX for stats
|
|
299
|
+
// Compile the source
|
|
341
300
|
await compiler.compileSource(source, id);
|
|
342
301
|
|
|
343
|
-
// Show what was found
|
|
344
|
-
const css = compiler.getCombinedCSS();
|
|
345
|
-
if (css && css.trim()) {
|
|
346
|
-
const ruleCount = (css.match(/\{/g) || []).length;
|
|
347
|
-
console.log(` └─ Extracted ${ruleCount} CSS rules from ${fileName}`);
|
|
348
|
-
}
|
|
349
|
-
|
|
350
302
|
// Update stored data
|
|
351
303
|
updateCSS();
|
|
352
304
|
updateManifest();
|
|
@@ -363,15 +315,6 @@ const setManifest = (manifest) => {
|
|
|
363
315
|
const bootstrapCode = generateBootstrapCode(generatedCSS);
|
|
364
316
|
log(`Bootstrapping entry file: ${fileName} (${generatedCSS.length} bytes)`);
|
|
365
317
|
|
|
366
|
-
// Show stats after processing all files
|
|
367
|
-
if (chainCount > 0) {
|
|
368
|
-
console.log('');
|
|
369
|
-
console.log('⛓️ ChainCSS — Ready');
|
|
370
|
-
console.log(` 📝 ${chainCount} chain() calls detected`);
|
|
371
|
-
console.log(' 🔀 Auto-split active — open browser console for split report');
|
|
372
|
-
console.log('');
|
|
373
|
-
}
|
|
374
|
-
|
|
375
318
|
return {
|
|
376
319
|
code: `${bootstrapCode}\n${source}`,
|
|
377
320
|
map: null
|
|
@@ -429,32 +372,10 @@ const setManifest = (manifest) => {
|
|
|
429
372
|
generatedCSS = '';
|
|
430
373
|
generatedManifest = {};
|
|
431
374
|
compiler.clearCSS();
|
|
432
|
-
chainCount = 0;
|
|
433
|
-
staticCount = 0;
|
|
434
|
-
dynamicCount = 0;
|
|
435
|
-
hybridCount = 0;
|
|
436
|
-
totalCSSBytes = 0;
|
|
437
375
|
},
|
|
438
376
|
|
|
439
|
-
|
|
440
|
-
// Write CSS to file if we have any
|
|
441
|
-
if (generatedCSS.trim() && options.cssOutput) {
|
|
442
|
-
const fs = await import('fs');
|
|
443
|
-
const outputPath = path.resolve(process.cwd(), options.cssOutput);
|
|
444
|
-
fs.writeFileSync(outputPath, generatedCSS, 'utf8');
|
|
445
|
-
console.log(` 📁 CSS written to ${options.cssOutput} (${generatedCSS.length} bytes)`);
|
|
446
|
-
}
|
|
447
|
-
|
|
377
|
+
buildEnd() {
|
|
448
378
|
const finalCSS = updateCSS();
|
|
449
|
-
const stats = compiler.getStats();
|
|
450
|
-
|
|
451
|
-
console.log('');
|
|
452
|
-
console.log('[ChainCSS] ✅ Build complete');
|
|
453
|
-
console.log(` 📦 Static CSS: ${finalCSS.length} bytes`);
|
|
454
|
-
console.log(` ⚡ Runtime JS: minimal (dynamic properties only)`);
|
|
455
|
-
console.log(` 🧩 Total styles: ${stats.totalStyles || 0} processed`);
|
|
456
|
-
console.log(` 💾 Atomic savings: ${stats.savings || '0%'}`);
|
|
457
|
-
console.log('');
|
|
458
379
|
log(`Build complete - Final CSS: ${finalCSS.length} bytes`);
|
|
459
380
|
|
|
460
381
|
// Write CSS to file if output specified
|