@master/css 2.0.0-alpha.50 → 2.0.0-alpha.52

package/esm/rules/word-spacing.js

@@ -0,0 +1,6 @@
+import { MasterCSSRule } from '../rule';
+export default class default_1 extends MasterCSSRule {
+    static id = 'WordSpacing';
+    static propName = 'word-spacing';
+    static unit = 'em';
+}

package/esm/rules/writing-mode.js

@@ -0,0 +1,6 @@
+import { MasterCSSRule } from '../rule';
+export default class default_1 extends MasterCSSRule {
+    static id = 'WritingMode';
+    static matches = /^writing:./;
+    static propName = 'writing-mode';
+}

package/esm/rules/x.js

@@ -0,0 +1,6 @@
+import { MasterCSSRule } from '../rule';
+export default class default_1 extends MasterCSSRule {
+    static id = 'X';
+    static propName = 'x';
+    static unit = '';
+}

package/esm/rules/y.js

@@ -0,0 +1,6 @@
+import { MasterCSSRule } from '../rule';
+export default class default_1 extends MasterCSSRule {
+    static id = 'Y';
+    static propName = 'y';
+    static unit = '';
+}

package/esm/rules/z-index.js

@@ -0,0 +1,7 @@
+import { MasterCSSRule } from '../rule';
+export default class default_1 extends MasterCSSRule {
+    static id = 'ZIndex';
+    static matches = /^z:./;
+    static propName = 'z-index';
+    static unit = '';
+}

package/esm/utils/concat-arrays.js

@@ -0,0 +1,7 @@
+export function concatArrays(originVal, newVal) {
+    if (Array.isArray(originVal) && Array.isArray(newVal)) {
+        // concat logic
+        return originVal.concat(newVal);
+    }
+    return newVal; // always return newVal as fallback!!
+}

package/esm/utils/get-border-props.js

@@ -0,0 +1,43 @@
+const BORDER_DASH = 'border-';
+export function getBorderProps(name, declaration, suffix = '') {
+    if (suffix) {
+        suffix = '-' + suffix;
+    }
+    const direction = /^b(order)?-?(.)?/.exec(name)[2];
+    const BORDER_LEFT = BORDER_DASH + 'left' + suffix;
+    const BORDER_RIGHT = BORDER_DASH + 'right' + suffix;
+    const BORDER_TOP = BORDER_DASH + 'top' + suffix;
+    const BORDER_BOTTOM = BORDER_DASH + 'bottom' + suffix;
+    switch (direction) {
+        case 'x':
+            return {
+                [BORDER_LEFT]: declaration,
+                [BORDER_RIGHT]: declaration
+            };
+        case 'y':
+            return {
+                [BORDER_TOP]: declaration,
+                [BORDER_BOTTOM]: declaration
+            };
+        case 'l':
+            return {
+                [BORDER_LEFT]: declaration
+            };
+        case 'r':
+            return {
+                [BORDER_RIGHT]: declaration
+            };
+        case 't':
+            return {
+                [BORDER_TOP]: declaration
+            };
+        case 'b':
+            return {
+                [BORDER_BOTTOM]: declaration
+            };
+        default:
+            return {
+                ['border' + suffix]: declaration
+            };
+    }
+}

package/esm/utils/get-css-property-text.js

@@ -0,0 +1,7 @@
+export function getCssPropertyText(name, property) {
+    return (name ? name + ':' : '')
+        + (property.unit
+            ? property.value + property.unit
+            : property.value)
+        + (property.important ? '!important' : '');
+}

package/esm/utils/get-type.js

@@ -0,0 +1,9 @@
+/**
+ * Returns the object type of the given payload
+ *
+ * @param {*} payload
+ * @returns {string}
+ */
+export function getType(payload) {
+    return Object.prototype.toString.call(payload).slice(8, -1);
+}

package/esm/utils/hex-to-rgb.js

@@ -0,0 +1,7 @@
+export function hexToRgb(hex) {
+    if (hex.startsWith('#')) {
+        hex = hex.slice(1);
+    }
+    const aRgbHex = hex.match(/.{1,2}/g);
+    return [parseInt(aRgbHex[0], 16), parseInt(aRgbHex[1], 16), parseInt(aRgbHex[2], 16)];
+}

package/esm/utils/is-plain-object.js

@@ -0,0 +1,12 @@
+import { getType } from './get-type';
+/**
+ * Returns whether the payload is a plain JavaScript object (excluding special classes or objects with other prototypes)
+ *
+ * @param {*} payload
+ * @returns {payload is PlainObject}
+ */
+export function isPlainObject(payload) {
+    if (getType(payload) !== 'Object')
+        return false;
+    return payload.constructor === Object && Object.getPrototypeOf(payload) === Object.prototype;
+}

package/esm/utils/is-symbol.js

@@ -0,0 +1,10 @@
+import { getType } from './get-type';
+/**
+ * Returns whether the payload is a Symbol
+ *
+ * @param {*} payload
+ * @returns {payload is symbol}
+ */
+export function isSymbol(payload) {
+    return getType(payload) === 'Symbol';
+}

package/esm/utils/merge.js

@@ -0,0 +1,58 @@
+import { concatArrays } from './concat-arrays';
+import { isPlainObject } from './is-plain-object';
+import { isSymbol } from './is-symbol';
+function assignProp(carry, key, newVal, originalObject) {
+    const propType = {}.propertyIsEnumerable.call(originalObject, key)
+        ? 'enumerable'
+        : 'nonenumerable';
+    if (propType === 'enumerable')
+        carry[key] = newVal;
+    if (propType === 'nonenumerable') {
+        Object.defineProperty(carry, key, {
+            value: newVal,
+            enumerable: false,
+            writable: true,
+            configurable: true,
+        });
+    }
+}
+function mergeRecursively(origin, newComer, compareFn) {
+    // always return newComer if its not an object
+    if (!isPlainObject(newComer))
+        return newComer;
+    // define newObject to merge all values upon
+    let newObject = {};
+    if (isPlainObject(origin)) {
+        const props = Object.getOwnPropertyNames(origin);
+        const symbols = Object.getOwnPropertySymbols(origin);
+        newObject = [...props, ...symbols].reduce((carry, key) => {
+            const targetVal = origin[key];
+            if ((!isSymbol(key) && !Object.getOwnPropertyNames(newComer).includes(key)) ||
+                (isSymbol(key) && !Object.getOwnPropertySymbols(newComer).includes(key))) {
+                assignProp(carry, key, targetVal, origin);
+            }
+            return carry;
+        }, {});
+    }
+    // newObject has all properties that newComer hasn't
+    const props = Object.getOwnPropertyNames(newComer);
+    const symbols = Object.getOwnPropertySymbols(newComer);
+    const result = [...props, ...symbols].reduce((carry, key) => {
+        // re-define the origin and newComer as targetVal and newVal
+        let newVal = newComer[key];
+        const targetVal = isPlainObject(origin) ? origin[key] : undefined;
+        // When newVal is an object do the merge recursively
+        if (targetVal !== undefined && isPlainObject(newVal)) {
+            newVal = mergeRecursively(targetVal, newVal, compareFn);
+        }
+        const propToAssign = compareFn ? compareFn(targetVal, newVal, key) : newVal;
+        assignProp(carry, key, propToAssign, newComer);
+        return carry;
+    }, newObject);
+    return result;
+}
+export function mergeAndConcat(object, ...otherObjects) {
+    return otherObjects.reduce((result, newComer) => {
+        return mergeRecursively(result, newComer, concatArrays);
+    }, object);
+}

package/esm/utils/normalize-css-calc-text.js

@@ -0,0 +1,55 @@
+/**
+ * 將 calc( 正規化
+ * https://aoyue.notion.site/css-calc-2f37632c5cf749949cc060f0f2111443
+ */
+export function normalizeCssCalcText(value) {
+    const isOperator = (char) => char === '+' || char === '-' || char === '*' || char === '/';
+    let newValue = '', type, current = '', endWithBracket = false;
+    function clear() {
+        type = null;
+        current = '';
+    }
+    for (let i = 0; i < value.length; i++) {
+        const char = value[i];
+        if (char === '(' || char === ')') {
+            endWithBracket = char === ')';
+            newValue += current + char;
+            clear();
+        }
+        else if (char === ',') {
+            newValue += current + char + ' ';
+            clear();
+        }
+        else {
+            switch (type) {
+                // 字串
+                case 1:
+                    break;
+                // 數字
+                case 2:
+                    if (isOperator(char)) {
+                        newValue += current + ' ' + char + ' ';
+                        clear();
+                        continue;
+                    }
+                    break;
+                default:
+                    if (endWithBracket) {
+                        current += ' ';
+                    }
+                    if (!isNaN(+char)) {
+                        type = 2;
+                    }
+                    else if (!isOperator(char)) {
+                        type = 1;
+                    }
+                    break;
+            }
+            current += char;
+        }
+    }
+    if (current) {
+        newValue += current;
+    }
+    return newValue;
+}

package/esm/utils/parse-value-unit.d.ts

@@ -0,0 +1,2 @@
+import { MasterCSSConfig } from 'src/interfaces/config';
+export declare function parseValueUnit(value: string, getUnit: (method: string) => string, { rootSize }: MasterCSSConfig): string;

package/esm/utils/parse-value-unit.js

@@ -0,0 +1,47 @@
+export function parseValueUnit(value, getUnit, { rootSize }) {
+    let result = '';
+    let i = 0;
+    (function analyze(end, method) {
+        let current = '';
+        const unit = method
+            ? getUnit(method)
+            : '';
+        const pushCurrent = () => {
+            if (current) {
+                result += (!unit || Number.isNaN(+current))
+                    ? current
+                    : (+current / (unit === 'rem' ? rootSize : 1)) + unit;
+                current = '';
+            }
+        };
+        for (; i < value.length; i++) {
+            const val = value[i];
+            if (val === end && (end !== '\'' || value[i + 1] === ')')) {
+                pushCurrent();
+                result += val;
+                break;
+            }
+            else if (val === ',' || val === ' ') {
+                pushCurrent();
+                result += val;
+            }
+            else if (!current && val === '\'') {
+                result += val;
+                i++;
+                analyze(val);
+                current = '';
+            }
+            else if (current && val === '(') {
+                result += current + val;
+                i++;
+                analyze(')', current);
+                current = '';
+            }
+            else {
+                current += val;
+            }
+        }
+        pushCurrent();
+    })();
+    return result;
+}

package/esm/utils/parse-value.js

@@ -0,0 +1,84 @@
+import { normalizeCssCalcText } from './normalize-css-calc-text';
+const UNIT_VALUE_PATTERN = /^([+-.]?\d+(\.?\d+)?)(.*)?/;
+const VAR_START = 'var(--';
+export function parseValue(token, defaultUnit, colorsThemesMap, values, rootSize, themes) {
+    let value = values ? values[token] : '';
+    let unit = '';
+    let unitToken = '';
+    let colorMatched = undefined;
+    if (value) {
+        return { value, unit, unitToken };
+    }
+    else if (typeof token === 'number') {
+        value = token;
+        unit = defaultUnit || '';
+    }
+    else {
+        if (colorsThemesMap) {
+            const colorNames = Object.keys(colorsThemesMap);
+            let anyMatched = false;
+            let hasColorName = false;
+            token = token.replace(new RegExp(`(^|,| |\\()(${colorNames.join('|')})(?:-([0-9]+))?(?:\\/(\\.?[0-9]+%?))?(?=(\\)|\\}|,| |$))`, 'gm'), (origin, prefix, colorName, level, opacityStr) => {
+                hasColorName = true;
+                const themeHexColorMap = colorsThemesMap[colorName]?.[level || ''];
+                if (themeHexColorMap) {
+                    let hexColor;
+                    for (const eachTheme of themes) {
+                        if (hexColor = themeHexColorMap[eachTheme])
+                            break;
+                    }
+                    if (hexColor) {
+                        anyMatched = true;
+                        let newValue = hexColor;
+                        if (opacityStr) {
+                            let opacity = opacityStr.endsWith('%')
+                                ? parseFloat(opacityStr) / 100.0
+                                : +opacityStr;
+                            opacity = isNaN(opacity)
+                                ? 1
+                                : Math.min(Math.max(opacity, 0), 1);
+                            newValue += Math.round(opacity * 255).toString(16).toUpperCase().padStart(2, '0');
+                        }
+                        return prefix + newValue;
+                    }
+                }
+                return origin;
+            });
+            if (hasColorName) {
+                colorMatched = anyMatched;
+            }
+        }
+        if (defaultUnit) {
+            const matches = token.match(UNIT_VALUE_PATTERN);
+            // ['0.5deg', '0.5', 'deg', index: 0, input: '0.5deg', groups: undefined]
+            if (matches) {
+                if (token.includes('/')) {
+                    // w:1/2 -> width: 50%
+                    const splits = token.split('/');
+                    return { value: (+splits[0] / +splits[1]) * 100 + '%', unit, unitToken };
+                }
+                else {
+                    value = +matches[1];
+                    unit = unitToken = matches[3] || '';
+                    /**
+                     * 當無單位值且 defaultUnit === 'rem'，
+                     * 將 pxValue / 16 轉為 remValue
+                     */
+                    if (!unit) {
+                        if (defaultUnit === 'rem' || defaultUnit === 'em') {
+                            value = value / rootSize;
+                        }
+                        unit = defaultUnit || '';
+                    }
+                    return { value, unit, unitToken };
+                }
+            }
+        }
+        value = (token.indexOf('calc(') === -1
+            ? token
+            : normalizeCssCalcText(token))
+            .replace(/\$\(((\w|-)+)\)/g, VAR_START + '$1)');
+        ;
+    }
+    return { value, unit, unitToken, colorMatched };
+}

package/esm/utils/rgb-to-hex.js

@@ -0,0 +1,3 @@
+export function rgbToHex(r, g, b) {
+    return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}

package/esm/utils/test-css.js

@@ -0,0 +1,15 @@
+import { render } from '../render';
+export const testCSS = (cls, expected, css) => {
+    expect(render(cls.split(' '), css)).toBe(expected);
+};
+// test class and prop, if expected === undefinded, will use cls as expected value
+// examples:
+// testProp("z-index:1") // equals to testCSS("z-index:1", ".z-index\\:1{z-index:1}")
+// testProp("z-index:1") // equals to testProp("z-index:1", "z-index:1")
+export const testProp = (cls, expected) => {
+    const selector = CSS.escape(cls);
+    if (expected === undefined) {
+        expected = cls;
+    }
+    expect(render(cls.split(' '))).toBe(`.${selector}{${expected}}`);
+};