css-in-js-engine-pb 0.1.0 → 0.1.2

package/dist/StyleBucket.d.ts

@@ -0,0 +1,11 @@
+export declare enum StyleBucket {
+    Reset = 0,
+    Base = 1,
+    Appearance = 2,
+    Size = 3,
+    Shape = 4,
+    State = 5,
+    Focus = 6,
+    User = 7
+}
+//# sourceMappingURL=StyleBucket.d.ts.map

package/dist/StyleBucket.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyleBucket.d.ts","sourceRoot":"","sources":["../src/StyleBucket.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACnB,KAAK,IAAI;IACT,IAAI,IAAI;IACR,UAAU,IAAI;IACd,IAAI,IAAI;IACR,KAAK,IAAI;IACT,KAAK,IAAI;IACT,KAAK,IAAI;IACT,IAAI,IAAI;CACX"}

package/dist/StyleBucket.js

@@ -0,0 +1,11 @@
+export var StyleBucket;
+(function (StyleBucket) {
+    StyleBucket[StyleBucket["Reset"] = 0] = "Reset";
+    StyleBucket[StyleBucket["Base"] = 1] = "Base";
+    StyleBucket[StyleBucket["Appearance"] = 2] = "Appearance";
+    StyleBucket[StyleBucket["Size"] = 3] = "Size";
+    StyleBucket[StyleBucket["Shape"] = 4] = "Shape";
+    StyleBucket[StyleBucket["State"] = 5] = "State";
+    StyleBucket[StyleBucket["Focus"] = 6] = "Focus";
+    StyleBucket[StyleBucket["User"] = 7] = "User";
+})(StyleBucket || (StyleBucket = {}));

package/dist/insertWithBucket.d.ts

@@ -0,0 +1,3 @@
+import { StyleBucket } from './StyleBucket';
+export declare function insertRulesWithBucket(rules: string[], bucket: StyleBucket): void;
+//# sourceMappingURL=insertWithBucket.d.ts.map

package/dist/insertWithBucket.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insertWithBucket.d.ts","sourceRoot":"","sources":["../src/insertWithBucket.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAiB5C,wBAAgB,qBAAqB,CACjC,KAAK,EAAE,MAAM,EAAE,EACf,MAAM,EAAE,WAAW,QAwBtB"}

package/dist/insertWithBucket.js

@@ -0,0 +1,36 @@
+import { insertRulesOnce } from './insertOnce';
+import { StyleBucket } from './StyleBucket';
+const bucketRules = new Map();
+let highestFlushedBucket = -1;
+const ORDER = [
+    StyleBucket.Reset,
+    StyleBucket.Base,
+    StyleBucket.Appearance,
+    StyleBucket.Size,
+    StyleBucket.Shape,
+    StyleBucket.State,
+    StyleBucket.Focus,
+    StyleBucket.User,
+];
+export function insertRulesWithBucket(rules, bucket) {
+    if (!rules.length)
+        return;
+    const existing = bucketRules.get(bucket);
+    if (existing) {
+        existing.push(...rules);
+    }
+    else {
+        bucketRules.set(bucket, [...rules]);
+    }
+    const bucketIndex = ORDER.indexOf(bucket);
+    // Flush all buckets up to this one
+    for (let i = highestFlushedBucket + 1; i <= bucketIndex; i++) {
+        const b = ORDER[i];
+        const r = bucketRules.get(b);
+        if (r && r.length) {
+            insertRulesOnce(r);
+            bucketRules.set(b, []);
+        }
+    }
+    highestFlushedBucket = Math.max(highestFlushedBucket, bucketIndex);
+}

package/dist/makeResetStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"makeResetStyles.d.ts","sourceRoot":"","sources":["../src/makeResetStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAgDzC,wBAAgB,eAAe,CAAC,MAAM,EAAE,SAAS,SAGX,MAAM,CAa3C"}
+{"version":3,"file":"makeResetStyles.d.ts","sourceRoot":"","sources":["../src/makeResetStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiDzC,wBAAgB,eAAe,CAAC,MAAM,EAAE,SAAS,SAGX,MAAM,CAc3C"}

package/dist/makeResetStyles.js

@@ -1,6 +1,7 @@
 import { camelToKebab, resolveValue } from './utils/css';
 import { hashString } from './utils/hash';
-import { insertRulesOnce } from './insertOnce';
+import { insertRulesWithBucket } from './insertWithBucket';
+import { StyleBucket } from './StyleBucket';
 const resetCache = new Map();
 function stringifyResetRule(selector, styles, atRule) {
     const rules = [];
@@ -38,7 +39,7 @@ export function makeResetStyles(styles) {
         const className = `r${hashString(signature)}`;
         const selector = `.${className}`;
         const rules = stringifyResetRule(selector, styles);
-        insertRulesOnce(rules);
+        insertRulesWithBucket(rules, StyleBucket.Reset);
         resetCache.set(signature, className);
         return className;
     };

package/dist/makeStaticStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"makeStaticStyles.d.ts","sourceRoot":"","sources":["../src/makeStaticStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAwEzC,wBAAgB,gBAAgB,CAC5B,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,SAMP,IAAI,CAyB1C"}
+{"version":3,"file":"makeStaticStyles.d.ts","sourceRoot":"","sources":["../src/makeStaticStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAyEzC,wBAAgB,gBAAgB,CAC5B,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,SAKP,IAAI,CAyB1C"}

package/dist/makeStaticStyles.js

@@ -1,5 +1,6 @@
 import { camelToKebab, resolveValue } from './utils/css';
-import { insertRulesOnce } from './insertOnce';
+import { insertRulesWithBucket } from './insertWithBucket';
+import { StyleBucket } from './StyleBucket';
 const staticCache = new Set();
 function stringifyStaticRule(selector, styles, atRule) {
     const rules = [];
@@ -46,9 +47,7 @@ function stringifyKeyframes(name, frames) {
     return `@keyframes ${name}{${blocks.join('')}}`;
 }
 export function makeStaticStyles(styles) {
-    const signature = typeof styles === 'string'
-        ? styles
-        : JSON.stringify(styles);
+    const signature = typeof styles === 'string' ? styles : JSON.stringify(styles);
     return function useStaticStyles() {
         if (staticCache.has(signature))
             return;
@@ -65,7 +64,7 @@ export function makeStaticStyles(styles) {
                 }
                 rules.push(...stringifyStaticRule(selector, styles[selector]));
             }
-            insertRulesOnce(rules);
+            insertRulesWithBucket(rules, StyleBucket.Base);
         }
     };
 }

package/dist/makeStyles.d.ts

@@ -1,3 +1,4 @@
 import type { StylesBySlots, ClassNamesBySlot } from './types';
-export declare function makeStyles<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>): () => ClassNamesBySlot<Slots>;
+import { StyleBucket } from './StyleBucket';
+export declare function makeStyles<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>, bucket?: StyleBucket): () => ClassNamesBySlot<Slots>;
 //# sourceMappingURL=makeStyles.d.ts.map

package/dist/makeStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"makeStyles.d.ts","sourceRoot":"","sources":["../src/makeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAK/D,wBAAgB,UAAU,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACpD,aAAa,EAAE,aAAa,CAAC,KAAK,CAAC,SAON,gBAAgB,CAAC,KAAK,CAAC,CAevD"}
+{"version":3,"file":"makeStyles.d.ts","sourceRoot":"","sources":["../src/makeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG/D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,wBAAgB,UAAU,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACpD,aAAa,EAAE,aAAa,CAAC,KAAK,CAAC,EACnC,MAAM,GAAE,WAAoC,SAOf,gBAAgB,CAAC,KAAK,CAAC,CAevD"}

package/dist/makeStyles.js

@@ -1,7 +1,8 @@
 import { resolveStyleRulesForSlots } from './resolveStyleRules';
-import { insertRulesOnce } from './insertOnce';
 import { AtomicRuleCache } from './atomicCache';
-export function makeStyles(stylesBySlots) {
+import { StyleBucket } from './StyleBucket';
+import { insertRulesWithBucket } from './insertWithBucket';
+export function makeStyles(stylesBySlots, bucket = StyleBucket.Appearance) {
     let cachedClassNames = null;
     let inserted = false;
     const atomicCache = new AtomicRuleCache();
@@ -10,7 +11,7 @@ export function makeStyles(stylesBySlots) {
             const { classNamesBySlot, cssRules } = resolveStyleRulesForSlots(stylesBySlots, atomicCache);
             cachedClassNames = classNamesBySlot;
             if (!inserted) {
-                insertRulesOnce(cssRules);
+                insertRulesWithBucket(cssRules, bucket);
                 inserted = true;
             }
         }

package/package.json

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