css-in-js-engine-pb 0.2.3 → 0.2.5

package/dist/insertOnce.d.ts

@@ -1,2 +1,2 @@
-export declare function insertRulesOnce(rules: string[]): void;
+export declare function insertRulesOnce(rules: string[], bucket: number): void;
 //# sourceMappingURL=insertOnce.d.ts.map

package/dist/insertOnce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"insertOnce.d.ts","sourceRoot":"","sources":["../src/insertOnce.ts"],"names":[],"mappings":"AAcA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,QAkB9C"}
+{"version":3,"file":"insertOnce.d.ts","sourceRoot":"","sources":["../src/insertOnce.ts"],"names":[],"mappings":"AA4CA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,QAmB9D"}

package/dist/insertOnce.js

@@ -1,20 +1,43 @@
 const insertedRules = new Set();
-let styleEl = null;
-let sheet = null;
-function ensureSheet() {
+const styleElementsByBucket = new Map();
+const sheetsByBucket = new Map();
+const BUCKET_ORDER = [0, 1, 2, 3, 4, 5, 6, 7]; // Reset, Base, Appearance, Size, Shape, State, Focus, User
+function ensureSheetForBucket(bucket) {
+    let sheet = sheetsByBucket.get(bucket);
     if (!sheet) {
-        styleEl = document.createElement('style');
-        document.head.appendChild(styleEl);
+        const styleEl = document.createElement('style');
+        styleEl.setAttribute('data-bucket', String(bucket));
+        // Find the correct insertion point in the DOM
+        // We need to insert this bucket's <style> tag AFTER any lower buckets
+        // but BEFORE any higher buckets
+        const existingBuckets = Array.from(styleElementsByBucket.entries())
+            .sort((a, b) => a[0] - b[0]);
+        let insertBeforeElement = null;
+        for (const [existingBucket, existingElement] of existingBuckets) {
+            if (existingBucket > bucket) {
+                insertBeforeElement = existingElement;
+                break;
+            }
+        }
+        if (insertBeforeElement) {
+            document.head.insertBefore(styleEl, insertBeforeElement);
+        }
+        else {
+            document.head.appendChild(styleEl);
+        }
         sheet = styleEl.sheet;
+        styleElementsByBucket.set(bucket, styleEl);
+        sheetsByBucket.set(bucket, sheet);
+        console.log(`[ensureSheetForBucket] Created new <style> for bucket ${bucket}`);
     }
     return sheet;
 }
-export function insertRulesOnce(rules) {
-    console.log('[insertRulesOnce]', 'called with', rules.length, 'rules');
+export function insertRulesOnce(rules, bucket) {
+    console.log('[insertRulesOnce]', `bucket ${bucket}:`, 'called with', rules.length, 'rules');
     console.log(rules);
     if (rules.length === 0)
         return;
-    const sheet = ensureSheet();
+    const sheet = ensureSheetForBucket(bucket);
     for (const rule of rules) {
         if (insertedRules.has(rule))
             continue;

package/dist/insertWithBucket.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"insertWithBucket.d.ts","sourceRoot":"","sources":["../src/insertWithBucket.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAmC5C,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,WAAW,QAqDzE"}
+{"version":3,"file":"insertWithBucket.d.ts","sourceRoot":"","sources":["../src/insertWithBucket.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAoC5C,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,WAAW,QAgDzE"}

package/dist/insertWithBucket.js

@@ -14,6 +14,7 @@ const ORDER = [
 ];
 const OPTIONAL_BUCKETS = [
     StyleBucket.Base,
+    StyleBucket.Appearance,
     StyleBucket.Size,
     StyleBucket.Shape,
     StyleBucket.State,
@@ -47,8 +48,6 @@ export function insertRulesWithBucket(rules, bucket) {
         console.groupEnd();
         return;
     }
-    // Don’t insert beyond unseen required buckets
-    // (Reset + Appearance are required; Base/Size/Shape/State/Focus/User are optional via pre-seed)
     for (let i = 0; i <= targetIndex; i++) {
         if (!seenBuckets.has(ORDER[i])) {
             console.log(`⛔ blocked at ${bucketName(ORDER[i])} (not seen yet)`);
@@ -56,8 +55,6 @@ export function insertRulesWithBucket(rules, bucket) {
             return;
         }
     }
-    // Insert buckets in order up to targetIndex.
-    // IMPORTANT: we do NOT “flush forever”. We may insert more later.
     for (let i = 0; i <= targetIndex; i++) {
         const b = ORDER[i];
         const r = bucketRules.get(b);
@@ -66,7 +63,7 @@ export function insertRulesWithBucket(rules, bucket) {
             continue;
         }
         console.log(`➡ INSERTING ${r.length} queued rules from ${bucketName(b)}`);
-        insertRulesOnce(r);
+        insertRulesOnce(r, b);
         bucketRules.set(b, []);
         highestInsertedBucketIndex = Math.max(highestInsertedBucketIndex, i);
     }

package/dist/resolveStyleRules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolveStyleRules.d.ts","sourceRoot":"","sources":["../src/resolveStyleRules.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAa,aAAa,EAAE,MAAM,SAAS,CAAC;AAEvE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAyEhD,wBAAgB,yBAAyB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACnE,aAAa,EAAE,aAAa,CAAC,KAAK,CAAC,EACnC,WAAW,CAAC,EAAE,eAAe,GAC9B,aAAa,CAAC,KAAK,CAAC,CAwBtB"}
+{"version":3,"file":"resolveStyleRules.d.ts","sourceRoot":"","sources":["../src/resolveStyleRules.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAa,aAAa,EAAE,MAAM,SAAS,CAAC;AAEvE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAmDhD,wBAAgB,yBAAyB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACnE,aAAa,EAAE,aAAa,CAAC,KAAK,CAAC,EACnC,WAAW,CAAC,EAAE,eAAe,GAC9B,aAAa,CAAC,KAAK,CAAC,CAetB"}

package/dist/resolveStyleRules.js

@@ -1,49 +1,32 @@
 import { camelToKebab, resolveValue } from './utils/css';
 import { AtomicRuleCache } from './atomicCache';
-function buildAtomicClasses(rule, cache, cssRulesOut, atRule, seenDecls = new Set()) {
+function buildAtomicClasses(rule, cache, cssRulesOut, atRule) {
     const classNames = [];
     for (const key in rule) {
         const val = rule[key];
         if (val == null)
             continue;
-        // --- at-rules (@media, @supports, etc.)
         if (key.startsWith('@') && typeof val === 'object') {
-            const nested = buildAtomicClasses(val, cache, cssRulesOut, key, seenDecls);
+            const nested = buildAtomicClasses(val, cache, cssRulesOut, key);
             classNames.push(...nested);
             continue;
         }
-        // --- pseudo selectors (:hover, :active, etc.)
         if (key.startsWith(':') && typeof val === 'object') {
-            const selector = `&${key}`;
             for (const prop in val) {
                 const v = val[prop];
                 if (v == null || typeof v === 'object')
                     continue;
-                const cssProp = camelToKebab(prop);
-                const declKey = `${atRule !== null && atRule !== void 0 ? atRule : ''}|${selector}|${cssProp}`;
-                // 👇 LAST ONE WINS — drop earlier declarations
-                if (seenDecls.has(declKey))
-                    continue;
-                seenDecls.add(declKey);
-                const decl = `${cssProp}:${resolveValue(v)}`;
-                const res = cache.getOrCreate(selector, decl, atRule);
+                const decl = `${camelToKebab(prop)}:${resolveValue(v)}`;
+                const res = cache.getOrCreate(`&${key}`, decl, atRule);
                 classNames.push(res.className);
                 if (res.ruleText)
                     cssRulesOut.push(res.ruleText);
             }
             continue;
         }
-        // --- normal properties
         if (typeof val !== 'object') {
-            const cssProp = camelToKebab(key);
-            const selector = '&';
-            const declKey = `${atRule !== null && atRule !== void 0 ? atRule : ''}|${selector}|${cssProp}`;
-            // 👇 LAST ONE WINS — drop earlier declarations
-            if (seenDecls.has(declKey))
-                continue;
-            seenDecls.add(declKey);
-            const decl = `${cssProp}:${resolveValue(val)}`;
-            const res = cache.getOrCreate(selector, decl, atRule);
+            const decl = `${camelToKebab(key)}:${resolveValue(val)}`;
+            const res = cache.getOrCreate('&', decl, atRule);
             classNames.push(res.className);
             if (res.ruleText)
                 cssRulesOut.push(res.ruleText);
@@ -57,9 +40,7 @@ export function resolveStyleRulesForSlots(stylesBySlots, sharedCache) {
     const classNamesBySlot = {};
     for (const slot in stylesBySlots) {
         const rule = stylesBySlots[slot];
-        // 👇 NEW: fresh seenDecls PER SLOT
-        const seenDecls = new Set();
-        const atomicClasses = buildAtomicClasses(rule !== null && rule !== void 0 ? rule : {}, cache, cssRules, undefined, seenDecls);
+        const atomicClasses = buildAtomicClasses(rule !== null && rule !== void 0 ? rule : {}, cache, cssRules);
         classNamesBySlot[slot] = atomicClasses.join(' ');
     }
     return { classNamesBySlot, cssRules };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-in-js-engine-pb",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "A lightweight atomic CSS-in-JS engine built on the native CSS cascade",
   "license": "MIT",
   "type": "module",