@cube-dev/ui-kit 0.69.3 → 0.71.0

package/es/tasty/parser/parser.js

@@ -0,0 +1,104 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.71.0
+ * Released under the MIT license.
+ */
+
+import { classify } from './classify';
+import { Lru } from './lru';
+import { scan } from './tokenizer';
+import { Bucket, finalizeGroup, makeEmptyDetails, } from './types';
+export class StyleParser {
+    opts;
+    cache;
+    constructor(opts = {}) {
+        this.opts = opts;
+        this.cache = new Lru(this.opts.cacheSize ?? 1000);
+    }
+    /* ---------------- Public API ---------------- */
+    process(src) {
+        const key = String(src);
+        const hit = this.cache.get(key);
+        if (hit)
+            return hit;
+        // strip comments & lower-case once
+        const stripped = src
+            .replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//g, '')
+            .toLowerCase();
+        const groups = [];
+        let current = makeEmptyDetails();
+        const pushToken = (bucket, processed) => {
+            if (!processed)
+                return;
+            // If the previous token was a url(...) value, merge this token into it so that
+            // background layer segments like "url(img) no-repeat center/cover" are kept
+            // as a single value entry.
+            const mergeIntoPrevUrl = () => {
+                const lastIdx = current.values.length - 1;
+                current.values[lastIdx] += ` ${processed}`;
+                const lastAllIdx = current.all.length - 1;
+                current.all[lastAllIdx] += ` ${processed}`;
+            };
+            const prevIsUrlValue = current.values.length > 0 &&
+                current.values[current.values.length - 1].startsWith('url(');
+            if (prevIsUrlValue) {
+                // Extend the existing url(...) value regardless of current bucket.
+                mergeIntoPrevUrl();
+                // Additionally, for non-value buckets we need to remove their own storage.
+                // So early return.
+                return;
+            }
+            switch (bucket) {
+                case Bucket.Color:
+                    current.colors.push(processed);
+                    break;
+                case Bucket.Value:
+                    current.values.push(processed);
+                    break;
+                case Bucket.Mod:
+                    current.mods.push(processed);
+                    break;
+            }
+            current.all.push(processed);
+        };
+        const endGroup = () => {
+            finalizeGroup(current);
+            groups.push(current);
+            current = makeEmptyDetails();
+        };
+        scan(stripped, (tok, isComma, prevChar) => {
+            if (tok) {
+                const { bucket, processed } = classify(tok, this.opts, (sub) => this.process(sub));
+                pushToken(bucket, processed);
+            }
+            if (isComma)
+                endGroup();
+        });
+        // push final group if not already
+        if (current.all.length || !groups.length)
+            endGroup();
+        const output = groups.map((g) => g.output).join(', ');
+        const result = { output, groups };
+        Object.freeze(result);
+        this.cache.set(key, result);
+        return result;
+    }
+    setFuncs(funcs) {
+        this.opts.funcs = funcs;
+        this.cache.clear();
+    }
+    setUnits(units) {
+        this.opts.units = units;
+        this.cache.clear();
+    }
+    updateOptions(patch) {
+        Object.assign(this.opts, patch);
+        if (patch.cacheSize)
+            this.cache = new Lru(patch.cacheSize);
+        else
+            this.cache.clear();
+    }
+}
+
+        

package/es/tasty/parser/tokenizer.js

@@ -0,0 +1,73 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.71.0
+ * Released under the MIT license.
+ */
+
+export function scan(src, cb) {
+    let depth = 0;
+    let inUrl = false;
+    let inQuote = 0;
+    let start = 0;
+    let i = 0;
+    const flush = (isComma) => {
+        if (start < i) {
+            const prevChar = start > 0 ? src[start - 1] : null;
+            cb(src.slice(start, i), isComma, prevChar);
+        }
+        else if (isComma) {
+            cb('', true, null); // empty token followed by comma => group break.
+        }
+        start = i + 1;
+    };
+    for (; i < src.length; i++) {
+        const ch = src[i];
+        // quote mode
+        if (inQuote) {
+            if (ch === inQuote && src[i - 1] !== '\\')
+                inQuote = 0;
+            continue;
+        }
+        if (ch === '"' || ch === "'") {
+            inQuote = ch;
+            continue;
+        }
+        // paren & url tracking (not inside quotes)
+        if (ch === '(') {
+            // detect url(
+            if (!depth) {
+                const maybe = src.slice(Math.max(0, i - 3), i + 1);
+                if (maybe === 'url(')
+                    inUrl = true;
+            }
+            depth++;
+            continue;
+        }
+        if (ch === ')') {
+            depth = Math.max(0, depth - 1);
+            if (inUrl && depth === 0)
+                inUrl = false;
+            continue;
+        }
+        if (inUrl)
+            continue; // inside url(...) treat everything as part of token
+        if (!depth) {
+            if (ch === ',') {
+                flush(true);
+                continue;
+            }
+            if (ch === ' ' ||
+                ch === '\n' ||
+                ch === '\t' ||
+                ch === '\r' ||
+                ch === '\f') {
+                flush(false);
+                continue;
+            }
+        }
+    }
+    flush(false); // tail
+}
+
+        

package/es/tasty/parser/types.js

@@ -0,0 +1,27 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.71.0
+ * Released under the MIT license.
+ */
+
+export var Bucket;
+(function (Bucket) {
+    Bucket[Bucket["Color"] = 0] = "Color";
+    Bucket[Bucket["Value"] = 1] = "Value";
+    Bucket[Bucket["Mod"] = 2] = "Mod";
+})(Bucket || (Bucket = {}));
+export const makeEmptyDetails = () => ({
+    output: '',
+    mods: [],
+    values: [],
+    colors: [],
+    all: [],
+});
+export const finalizeGroup = (d) => {
+    // Join processed pieces already stored in `all` with single spaces.
+    d.output = d.all.join(' ');
+    return d;
+};
+
+        

package/es/tasty/providers/BreakpointsProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/align.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/border.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -28,7 +28,9 @@ export function borderStyle({ border }) {
         return;
     if (border === true)
         border = '1bw';
-    const { values, mods, colors } = parseStyle(String(border));
+    const processed = parseStyle(String(border));
+    const { values, mods, colors } = processed.groups[0] ??
+        { values: [], mods: [], colors: [] };
     const directions = filterMods(mods, DIRECTIONS);
     const typeMods = filterMods(mods, BORDER_STYLES);
     const value = values[0] || 'var(--border-width)';

package/es/tasty/styles/boxShadow.combinator.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/color.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/createStyle.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ export function createStyle(styleName, cssStyle, converter) {
             let styleValue = styleMap[styleName];
             if (styleValue == null || styleValue === false)
                 return;
-            const finalCssStyle = cssStyle || toSnakeCase(styleName).replace(/^@/, '--');
+            const finalCssStyle = cssStyle || toSnakeCase(styleName).replace(/^[@$]/, '--');
             // convert non-string values
             if (converter && typeof styleValue !== 'string') {
                 styleValue = converter(styleValue);
@@ -56,8 +56,8 @@ export function createStyle(styleName, cssStyle, converter) {
                     [finalCssStyle]: color,
                 };
             }
-            const { value } = parseStyle(styleValue, 1);
-            return { [finalCssStyle]: value };
+            const processed = parseStyle(styleValue);
+            return { [finalCssStyle]: processed.output };
         };
         styleHandler.__lookupStyles = [styleName];
         CACHE[key] = styleHandlerCacheWrapper(styleHandler);

package/es/tasty/styles/dimension.js

@@ -1,36 +1,24 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
-import { parseStyle, transferMods } from '../utils/styles';
+import { parseStyle } from '../utils/styles';
 const DEFAULT_MIN_SIZE = 'var(--gap)';
 const DEFAULT_MAX_SIZE = '100%';
-function isSizingSupport(val) {
-    return typeof CSS !== 'undefined' && typeof CSS?.supports === 'function'
-        ? CSS.supports('height', val)
-        : false;
-}
-const STRETCH = 'stretch';
-const FILL_AVAILABLE = 'fill-available';
-const WEBKIT_FILL_AVAILABLE = '-webkit-fill-available';
-const MOZ_FILL_AVAILABLE = '-moz-fill-available';
-const STRETCH_SIZE = isSizingSupport(STRETCH)
-    ? STRETCH
-    : isSizingSupport(FILL_AVAILABLE)
-        ? FILL_AVAILABLE
-        : isSizingSupport(WEBKIT_FILL_AVAILABLE)
-            ? WEBKIT_FILL_AVAILABLE
-            : isSizingSupport(MOZ_FILL_AVAILABLE)
-                ? MOZ_FILL_AVAILABLE
-                : null;
-const INTRINSIC_MODS = ['max-content', 'min-content', 'fit-content', 'stretch'];
 export function dimensionStyle(name) {
     const minStyle = `min-${name}`;
     const maxStyle = `max-${name}`;
     return (val) => {
+        if (val === true) {
+            return {
+                [name]: 'auto',
+                [minStyle]: 'initial',
+                [maxStyle]: 'initial',
+            };
+        }
         if (!val)
             return '';
         if (typeof val === 'number') {
@@ -42,13 +30,8 @@ export function dimensionStyle(name) {
             [minStyle]: 'initial',
             [maxStyle]: 'initial',
         };
-        const { mods, values } = parseStyle(val);
-        transferMods(INTRINSIC_MODS, mods, values);
-        values.forEach((v, i) => {
-            if (v === 'stretch') {
-                values[i] = STRETCH_SIZE || (name === 'height' ? '100vh' : '100vw');
-            }
-        });
+        const processed = parseStyle(val);
+        const { mods, values } = processed.groups[0] ?? { mods: [], values: [] };
         let flag = false;
         for (let mod of mods) {
             switch (mod) {
@@ -78,6 +61,14 @@ export function dimensionStyle(name) {
                 styles[name] = values[0] || 'auto';
             }
         }
+        if (styles[name] === 'stretch') {
+            if (name === 'width') {
+                styles[name] = ['stretch', '-webkit-fill-available', '-moz-available'];
+            }
+            else {
+                styles[name] = 'auto';
+            }
+        }
         return styles;
     };
 }

package/es/tasty/styles/display.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/fade.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -15,7 +15,8 @@ const DIRECTION_MAP = {
 export function fadeStyle({ fade }) {
     if (!fade)
         return '';
-    let { values, mods } = parseStyle(fade);
+    const processed = parseStyle(fade);
+    let { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
     let directions = filterMods(mods, DIRECTIONS);
     if (!values.length) {
         values = ['var(--fade-width)'];

package/es/tasty/styles/fill.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -9,9 +9,8 @@ import { parseStyle } from '../utils/styles';
 export function fillStyle({ fill }) {
     if (!fill)
         return '';
-    if (fill.startsWith('#')) {
-        fill = parseStyle(fill).colors[0] || fill;
-    }
+    const processed = parseStyle(fill);
+    fill = processed.groups[0]?.colors[0] || fill;
     const match = fill.match(/var\(--(.+?)-color/);
     let name = '';
     if (match) {

package/es/tasty/styles/flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/font.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/fontStyle.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/gap.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -24,7 +24,8 @@ export function gapStyle({ display = 'block', flow, gap, }) {
     if (!isGrid && flow == null) {
         flow = isFlex ? 'row' : 'column';
     }
-    const { values } = parseStyle(gap);
+    const processed = parseStyle(gap);
+    const { values } = processed.groups[0] ?? { values: [] };
     gap = values.join(' ');
     if (isGrid || isFlex) {
         return { gap };

package/es/tasty/styles/groupRadius.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -15,7 +15,8 @@ export function groupRadiusAttr({ groupRadius, flow }) {
         return '';
     if (groupRadius === true)
         groupRadius = '1r';
-    const { values, mods } = parseStyle(groupRadius);
+    const processed = parseStyle(groupRadius);
+    const { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
     flow = flow || 'row';
     const reverse = mods.includes('reverse');
     let value = values[0];

package/es/tasty/styles/height.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/inset.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -14,7 +14,8 @@ export function insetStyle({ inset }) {
         return '';
     if (inset === true)
         inset = '0 0 0 0';
-    let { values, mods } = parseStyle(inset);
+    const processed = parseStyle(inset);
+    let { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
     let directions = filterMods(mods, DIRECTIONS);
     if (!values.length) {
         values = ['0'];

package/es/tasty/styles/justify.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/list.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/margin.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -14,7 +14,8 @@ export function marginStyle({ margin, marginBlock, marginInline, marginTop, marg
         return '';
     if (margin === true)
         margin = '1x';
-    let { values, mods } = parseStyle(margin);
+    const processed = parseStyle(margin);
+    let { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
     let directions = filterMods(mods, DIRECTIONS);
     if (!values.length) {
         values = ['var(--gap)'];

package/es/tasty/styles/marginBlock.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -14,7 +14,8 @@ export function marginBlockStyle({ marginBlock: margin, marginTop, marginBottom,
         return '';
     if (margin === true)
         margin = '1x';
-    let { values } = parseStyle(margin);
+    const processed = parseStyle(margin);
+    let { values } = processed.groups[0] ?? { values: [] };
     if (!values.length) {
         values = ['var(--gap)'];
     }

package/es/tasty/styles/marginInline.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -14,7 +14,8 @@ export function marginInlineStyle({ marginInline: margin, marginLeft, marginRigh
         return '';
     if (margin === true)
         margin = '1x';
-    let { values } = parseStyle(margin);
+    const processed = parseStyle(margin);
+    let { values } = processed.groups[0] ?? { values: [] };
     if (!values.length) {
         values = ['var(--gap)'];
     }

package/es/tasty/styles/outline.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -28,7 +28,8 @@ export function outlineStyle({ outline }) {
         return;
     if (outline === true)
         outline = '1ow';
-    const { values, mods, colors } = parseStyle(String(outline));
+    const processed = parseStyle(String(outline));
+    const { values, mods, colors } = processed.groups[0] ?? { values: [], mods: [], colors: [] };
     const typeMods = filterMods(mods, BORDER_STYLES);
     const value = values[0] || 'var(--outline-width)';
     const type = typeMods[0] || 'solid';

package/es/tasty/styles/padding.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -22,7 +22,8 @@ export function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop,
         return '';
     if (padding === true)
         padding = '1x';
-    let { values, mods } = parseStyle(padding);
+    const processed = parseStyle(padding);
+    let { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
     let directions = filterMods(mods, DIRECTIONS);
     if (!values.length) {
         values = ['var(--gap)'];

package/es/tasty/styles/paddingBlock.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.3
+ * @cube-dev/ui-kit v0.71.0
  * Released under the MIT license.
  */
 
@@ -14,7 +14,8 @@ export function paddingBlockStyle({ paddingBlock: padding, paddingTop, paddingBo
         return '';
     if (padding === true)
         padding = '1x';
-    let { values } = parseStyle(padding);
+    const processed = parseStyle(padding);
+    let { values } = processed.groups[0] ?? { values: [] };
     if (!values.length) {
         values = ['var(--gap)'];
     }