@codeleap/styles 4.2.1 → 4.2.2

package/dist/lib/StyleCache.js

@@ -1,4 +1,29 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyleCache = void 0;
 var Cacher_1 = require("./Cacher");
@@ -31,7 +56,13 @@ var StyleCache = /** @class */ (function () {
     StyleCache.prototype.keyFor = function (type, keyData) {
         var _a;
         var cache = this[type];
-        var values = [this.baseKey, keyData];
+        var withFunctionsHash = Object.values(keyData).map(function (value) {
+            if (typeof value === 'function') {
+                return value.toString();
+            }
+            return value;
+        });
+        var values = __spreadArray([this.baseKey], __read(withFunctionsHash), false);
         var cacheKey = (0, hashKey_1.hashKey)(values);
         var cachedValue = minifier_1.minifier.decompress((_a = cache.cache[cacheKey]) !== null && _a !== void 0 ? _a : null);
         return {

package/dist/lib/StyleRegistry.d.ts

@@ -1,9 +1,10 @@
-import { AnyRecord, AnyStyledComponent, ICSS, ITheme, StyleProp, VariantStyleSheet } from '../types';
+import { AnyRecord, AnyStyledComponent, ICSS, ITheme, StyleAggregator, StyleProp, VariantStyleSheet } from '../types';
 import { MultiplierFunction } from './spacing';
 import { StateStorage } from 'zustand/middleware';
 export declare class CodeleapStyleRegistry {
     stylesheets: Record<string, VariantStyleSheet>;
     commonVariants: Record<string, ICSS | MultiplierFunction>;
+    aggregators: Record<string, StyleAggregator>;
     components: Record<string, AnyStyledComponent>;
     private theme;
     private styleCache;
@@ -33,7 +34,7 @@ export declare class CodeleapStyleRegistry {
     getCompositionStyle(componentName: string, composition: Record<string, any>, style: any): any;
     styleFor<T = unknown>(componentName: string, componentStyle: StyleProp<T>, mergeWithDefaultStyle?: boolean): T;
     registerCommonVariants(): void;
-    registerVariants(componentName: string, variants: VariantStyleSheet): void;
+    registerVariants<Composition extends string = any>(componentName: string, variants: VariantStyleSheet, aggregator?: StyleAggregator<Composition>): void;
     registerComponent(component: AnyStyledComponent): void;
     /**
       * These should be overwritten by the end-user to support

package/dist/lib/StyleRegistry.js

@@ -63,6 +63,7 @@ var CodeleapStyleRegistry = /** @class */ (function () {
         var _a, _b, _c, _d, _e;
         this.stylesheets = {};
         this.commonVariants = {};
+        this.aggregators = {};
         this.components = {};
         this.styleCache = new StyleCache_1.StyleCache(storage);
         this.theme = themeStore_1.themeStore.getState();
@@ -118,7 +119,8 @@ var CodeleapStyleRegistry = /** @class */ (function () {
         var rootElement = this.getRegisteredComponent(componentName).rootElement;
         var component = _component !== null && _component !== void 0 ? _component : rootElement;
         var stylesheet = minifier_1.minifier.decompress(this.stylesheets[componentName]);
-        var cache = this.styleCache.keyFor('variants', { componentName: componentName, component: component, stylesheet: stylesheet, variants: variants });
+        var aggregator = this.aggregators[componentName];
+        var cache = this.styleCache.keyFor('variants', { componentName: componentName, component: component, stylesheet: stylesheet, variants: variants, aggregator: aggregator });
         if (!!cache.value) {
             return cache.value;
         }
@@ -142,6 +144,9 @@ var CodeleapStyleRegistry = /** @class */ (function () {
             return _this.computeCommonVariantStyle(componentName, variant, component);
         }).filter(function (variantStyle) { return !!variantStyle; });
         var variantStyle = (0, deepmerge_1.default)({ all: true }).apply(void 0, __spreadArray([], __read(variantStyles), false));
+        if (!!aggregator) {
+            variantStyle = aggregator(theme, variantStyle);
+        }
         this.styleCache.cacheFor('variants', cache.key, variantStyle);
         return variantStyle;
     };
@@ -389,23 +394,31 @@ var CodeleapStyleRegistry = /** @class */ (function () {
                     if (typeof s === 'string') {
                         variants.push(s);
                     }
-                    if (typeof s === 'object') {
+                    var isObj = typeof s === 'object';
+                    if (variants.length > 0 && (idx === filteredStyle.length - 1 || isObj)) {
+                        var computedVariantStyle = this.computeVariantStyle(componentName, variants);
+                        styles.push(computedVariantStyle);
+                        variants = [];
+                    }
+                    if (isObj) {
                         var _h = this.isCompositionStyle(registeredComponent, s), isComposition = _h.isComposition, composition = _h.composition;
-                        if (isComposition) {
+                        var _j = this.isResponsiveStyle(s), isResponsive = _j.isResponsive, responsiveStyleKey = _j.responsiveStyleKey;
+                        if (Array.isArray(s)) {
+                            var styleComposition = this.styleFor(componentName, s, false);
+                            styles.push(styleComposition);
+                        }
+                        else if (isComposition) {
                             var compositionStyles = this.getCompositionStyle(componentName, composition, s);
                             styles.push.apply(styles, __spreadArray([], __read(compositionStyles), false));
                         }
-                        var _j = this.isResponsiveStyle(s), isResponsive = _j.isResponsive, responsiveStyleKey = _j.responsiveStyleKey;
-                        if (isResponsive) {
+                        else if (isResponsive) {
                             var responsiveStyles = this.getResponsiveStyle(componentName, responsiveStyleKey, s);
                             styles.push(responsiveStyles);
                             delete s[responsiveStyleKey];
                         }
-                        styles.push((_d = {}, _d[rootElement] = s, _d));
-                    }
-                    if (idx === filteredStyle.length - 1 && variants.length > 0) {
-                        var computedVariantStyle = this.computeVariantStyle(componentName, variants);
-                        styles.push(computedVariantStyle);
+                        else {
+                            styles.push((_d = {}, _d[rootElement] = s, _d));
+                        }
                     }
                     idx++;
                 }
@@ -430,10 +443,11 @@ var CodeleapStyleRegistry = /** @class */ (function () {
         var commonVariants = (0, deepmerge_1.default)({ all: true })(defaultVariants_1.defaultVariants, appVariants, dynamicVariants_1.dynamicVariants, spacingVariants, insetVariants);
         this.commonVariants = commonVariants;
     };
-    CodeleapStyleRegistry.prototype.registerVariants = function (componentName, variants) {
+    CodeleapStyleRegistry.prototype.registerVariants = function (componentName, variants, aggregator) {
         if (this.stylesheets[componentName]) {
             throw new Error("Variants for ".concat(componentName, " already registered"));
         }
+        this.aggregators[componentName] = aggregator;
         this.stylesheets[componentName] = minifier_1.minifier.compress(variants);
     };
     CodeleapStyleRegistry.prototype.registerComponent = function (component) {

package/dist/types/style.d.ts

@@ -1,13 +1,14 @@
 import { DynamicVariants } from '../lib/dynamicVariants';
 import { DefaultVariants } from '../lib/defaultVariants';
-import { AnyRecord, IAppVariants, IBreakpoints, ICSS, IEffects } from './core';
+import { AnyRecord, IAppVariants, IBreakpoints, ICSS, IEffects, ITheme } from './core';
 import { Multiplier, Spacing } from './spacing';
 type Inset = `top:${Multiplier}` | `bottom:${Multiplier}` | `left:${Multiplier}` | `right:${Multiplier}`;
 export type CommonVariants = Spacing | Inset | DynamicVariants | keyof DefaultVariants | keyof IAppVariants | `effect:${keyof IEffects}`;
 type StyleAtom<Composition = AnyRecord, Variants = string, HasBreakpoints = string, HasComposition = string> = ICSS | Variants | CommonVariants | boolean | null | '' | (HasBreakpoints extends string ? {
     'breakpoints': Partial<Record<keyof IBreakpoints, StyleAtom<Composition, Variants, boolean, string> | StyleAtom<Composition, Variants, boolean, string>[]>>;
-} : null) | (HasComposition extends string ? Partial<Record<keyof Composition, StyleAtom<AnyRecord, Variants, boolean, boolean> | StyleAtom<AnyRecord, Variants, boolean, boolean>[]>> : null);
+} : null) | (HasComposition extends string ? Partial<Record<keyof Composition, StyleAtom<AnyRecord, Variants, boolean, boolean> | StyleAtom<AnyRecord, Variants, boolean, boolean>[]>> : null) | StyleAtom<Composition, Variants, string, string>[];
 export type StyleProp<Composition = AnyRecord, Variants = string> = StyleAtom<Composition, Variants> | StyleAtom<Composition, Variants>[];
 export type VariantStyleSheet = Record<string, any>;
 export type StyledProp<T extends string> = StyleProp<Record<T, ICSS>>;
+export type StyleAggregator<T extends string = any> = (theme: ITheme, style: Record<T, ICSS>) => Record<T, ICSS>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "UNLICENSED",
@@ -10,7 +10,7 @@
     "directory": "packages/styles"
   },
   "devDependencies": {
-    "@codeleap/config": "4.2.1",
+    "@codeleap/config": "4.2.2",
     "ts-node-dev": "1.1.8"
   },
   "scripts": {

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "UNLICENSED",

package/src/lib/StyleCache.ts

@@ -9,11 +9,15 @@ export class StyleCache {
   baseKey: string
 
   styles = new Cache('styles')
+
   compositions = new Cache('compositions')
+
   responsive = new Cache('responsive')
 
   variants: Cache
+
   common: Cache
+
   components: Cache
 
   constructor(storage: StateStorage) {
@@ -44,7 +48,15 @@ export class StyleCache {
   keyFor(type: CacheType, keyData: Array<any> | any) {
     const cache = this[type]
 
-    const values = [this.baseKey, keyData]
+    const withFunctionsHash = Object.values(keyData).map((value) => {
+      if (typeof value === 'function') {
+        return value.toString()
+      }
+
+      return value
+    })
+
+    const values = [this.baseKey, ...withFunctionsHash]
 
     const cacheKey = hashKey(values)
     const cachedValue = minifier.decompress(cache.cache[cacheKey] ?? null)

package/src/lib/StyleRegistry.ts

@@ -1,5 +1,5 @@
 /* eslint-disable dot-notation */
-import { AnyRecord, AnyStyledComponent, ICSS, ITheme, StyleProp, VariantStyleSheet } from '../types'
+import { AnyRecord, AnyStyledComponent, ICSS, ITheme, StyleAggregator, StyleProp, VariantStyleSheet } from '../types'
 import { ThemeStore, themeStore } from './themeStore'
 import deepmerge from '@fastify/deepmerge'
 import { MultiplierFunction } from './spacing'
@@ -15,6 +15,8 @@ export class CodeleapStyleRegistry {
 
   commonVariants: Record<string, ICSS | MultiplierFunction> = {}
 
+  aggregators: Record<string, StyleAggregator> = {}
+
   components: Record<string, AnyStyledComponent> = {}
 
   private theme: ThemeStore
@@ -91,8 +93,9 @@ export class CodeleapStyleRegistry {
     const component = _component ?? rootElement
 
     const stylesheet = minifier.decompress(this.stylesheets[componentName])
+    const aggregator = this.aggregators[componentName]
 
-    const cache = this.styleCache.keyFor('variants', { componentName, component, stylesheet, variants })
+    const cache = this.styleCache.keyFor('variants', { componentName, component, stylesheet, variants, aggregator })
 
     if (!!cache.value) {
       return cache.value
@@ -102,6 +105,7 @@ export class CodeleapStyleRegistry {
 
     const variantStyles = variants.map((variant) => {
       if (!!stylesheet[variant]) {
+
         return stylesheet[variant]
       }
 
@@ -122,7 +126,11 @@ export class CodeleapStyleRegistry {
       return this.computeCommonVariantStyle(componentName, variant, component)
     }).filter(variantStyle => !!variantStyle)
 
-    const variantStyle = deepmerge({ all: true })(...variantStyles)
+    let variantStyle = deepmerge({ all: true })(...variantStyles)
+
+    if (!!aggregator) {
+      variantStyle = aggregator(theme, variantStyle)
+    }
 
     this.styleCache.cacheFor('variants', cache.key, variantStyle)
 
@@ -402,40 +410,50 @@ export class CodeleapStyleRegistry {
     if (isStyleArray) {
       const filteredStyle = (style as Array<any>)?.filter(s => !!s)
 
-      const variants: string[] = []
+      let variants: string[] = []
       const styles: ICSS[] = [defaultStyle]
       let idx = 0
 
       for (const s of filteredStyle) {
+
         if (typeof s === 'string') {
+
           variants.push(s)
         }
 
-        if (typeof s === 'object') {
-          const { isComposition, composition } = this.isCompositionStyle(registeredComponent, s)
+        const isObj = typeof s === 'object'
 
-          if (isComposition) {
-            const compositionStyles = this.getCompositionStyle(componentName, composition, s)
+        if (variants.length > 0 && (idx === filteredStyle.length - 1 || isObj)) {
+          const computedVariantStyle = this.computeVariantStyle(componentName, variants)
 
-            styles.push(...compositionStyles)
-          }
+          styles.push(computedVariantStyle)
 
+          variants = []
+        }
+
+        if (isObj) {
+          const { isComposition, composition } = this.isCompositionStyle(registeredComponent, s)
           const { isResponsive, responsiveStyleKey } = this.isResponsiveStyle(s)
 
-          if (isResponsive) {
+          if (Array.isArray(s)) {
+            const styleComposition = this.styleFor(componentName, s, false)
+
+            styles.push(styleComposition)
+          } else if (isComposition) {
+            const compositionStyles = this.getCompositionStyle(componentName, composition, s)
+
+            styles.push(...compositionStyles)
+          } else if (isResponsive) {
             const responsiveStyles = this.getResponsiveStyle(componentName, responsiveStyleKey, s)
 
             styles.push(responsiveStyles)
 
             delete s[responsiveStyleKey]
-          }
+          } else {
 
-          styles.push({ [rootElement]: s })
-        }
+            styles.push({ [rootElement]: s })
+          }
 
-        if (idx === filteredStyle.length - 1 && variants.length > 0) {
-          const computedVariantStyle = this.computeVariantStyle(componentName, variants)
-          styles.push(computedVariantStyle)
         }
 
         idx++
@@ -467,10 +485,11 @@ export class CodeleapStyleRegistry {
     this.commonVariants = commonVariants
   }
 
-  registerVariants(componentName: string, variants: VariantStyleSheet) {
+  registerVariants<Composition extends string = any>(componentName: string, variants: VariantStyleSheet, aggregator?: StyleAggregator<Composition>) {
     if (this.stylesheets[componentName]) {
       throw new Error(`Variants for ${componentName} already registered`)
     }
+    this.aggregators[componentName] = aggregator
 
     this.stylesheets[componentName] = minifier.compress(variants)
   }
@@ -507,7 +526,7 @@ export class CodeleapStyleRegistry {
     if (Array.isArray(style)) {
       copiedStyle = [...style]
     } else if (typeof style == 'object') {
-      copiedStyle = {...style}
+      copiedStyle = { ...style }
     } else {
       copiedStyle = style
     }

package/src/types/style.ts

@@ -1,7 +1,7 @@
 import { DynamicVariants } from '../lib/dynamicVariants'
 import { Queries } from '../lib/mediaQuery'
 import { DefaultVariants } from '../lib/defaultVariants'
-import { AnyRecord, IAppVariants, IBreakpoints, ICSS, IEffects } from './core'
+import { AnyRecord, IAppVariants, IBreakpoints, ICSS, IEffects, ITheme } from './core'
 import { Multiplier, Spacing } from './spacing'
 
 type Inset =
@@ -25,11 +25,23 @@ type StyleAtom<Composition = AnyRecord, Variants = string, HasBreakpoints = stri
   boolean |
   null |
   '' |
-  // (HasBreakpoints extends string ? `${keyof IBreakpoints}:${CommonVariants}` : null) |
+
   (HasBreakpoints extends string ? {
-    'breakpoints': Partial<Record<keyof IBreakpoints, StyleAtom<Composition, Variants, boolean, string> | StyleAtom<Composition, Variants, boolean, string>[]>>
+    'breakpoints': Partial<
+      Record<keyof IBreakpoints,
+        StyleAtom<Composition, Variants, boolean, string> |
+        StyleAtom<Composition, Variants, boolean, string>[]>
+      >
   } : null) |
-  (HasComposition extends string ? Partial<Record<keyof Composition, StyleAtom<AnyRecord, Variants, boolean, boolean> | StyleAtom<AnyRecord, Variants, boolean, boolean>[]>> : null)
+  (HasComposition extends string ?
+      Partial<Record<
+        keyof Composition,
+        StyleAtom<AnyRecord, Variants, boolean, boolean> |
+        StyleAtom<AnyRecord, Variants, boolean, boolean>[]
+      >>
+      : null
+  )
+  | StyleAtom<Composition, Variants, string, string>[]
 
 export type StyleProp<
   Composition = AnyRecord,
@@ -39,3 +51,5 @@ export type StyleProp<
 export type VariantStyleSheet = Record<string, any>
 
 export type StyledProp<T extends string> = StyleProp<Record<T, ICSS>>
+
+export type StyleAggregator<T extends string = any> = (theme: ITheme, style: Record< T, ICSS>) => Record< T, ICSS>