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.
@@ -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) || id.endsWith(".chain.ts") || id.endsWith(".chain.js");
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
- // Inline setManifest to avoid pulling in optional framework deps
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
- // Inline setManifest to avoid pulling in optional framework deps
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
- async buildEnd() {
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "chaincss",
3
- "version": "2.1.33",
3
+ "version": "2.1.35",
4
4
  "description": "ChainCSS - The first CSS-in-JS library with true auto-detection mixed mode. Zero runtime by default, dynamic when you need it.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -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) || id.endsWith(".chain.ts") || id.endsWith(".chain.js");
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
- // Inline setManifest to avoid pulling in optional framework deps
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
- // Inline setManifest to avoid pulling in optional framework deps
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
- // Count chain() and smartChain() calls
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
- async buildEnd() {
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