@master/css 2.0.0-alpha.6 → 2.0.0-alpha.60

package/esm/fill-color-scale.d.ts

@@ -0,0 +1 @@
+export declare function fillColorScale(data: any): any;

package/esm/fill-color-scale.js

@@ -0,0 +1,59 @@
+import { hexToRgb } from './utils/hex-to-rgb';
+import { rgbToHex } from './utils/rgb-to-hex';
+export function fillColorScale(data) {
+    if (typeof data === 'string') {
+        data = { '': data };
+    }
+    const hasMainRgb = '' in data;
+    let isLevelMore100 = false;
+    for (const level in data) {
+        if (level && +level >= 100) {
+            isLevelMore100 = true;
+            break;
+        }
+    }
+    if (!isLevelMore100 && (!hasMainRgb || Object.keys(data).length > 1)) {
+        let startLevel = 0, startRgb = '0' in data
+            ? hexToRgb(data[0])
+            : [0, 0, 0], endLevel, endRgb;
+        const newLevels = [];
+        const generateColor = () => {
+            const levelDiff = endLevel - startLevel;
+            const rgbDiff = endRgb.map((color, i) => (color - startRgb[i]) / levelDiff);
+            for (const eachNewLevel of newLevels) {
+                const currentLevelDiff = eachNewLevel - startLevel;
+                const newRgb = startRgb.map((color, i) => Math.round(color + rgbDiff[i] * currentLevelDiff));
+                data[eachNewLevel] = '#' + rgbToHex.call(this, ...newRgb);
+            }
+        };
+        for (let i = 1; i < 100; i++) {
+            if (i in data) {
+                if (newLevels.length) {
+                    endLevel = i;
+                    endRgb = hexToRgb(data[i]);
+                    generateColor();
+                    newLevels.length = 0;
+                    startRgb = endRgb;
+                }
+                else {
+                    startRgb = hexToRgb(data[i]);
+                }
+                startLevel = i;
+            }
+            else {
+                newLevels.push(i);
+            }
+        }
+        if (newLevels.length) {
+            endLevel = 100;
+            endRgb = '100' in data
+                ? hexToRgb(data[100])
+                : [255, 255, 255];
+            generateColor();
+        }
+    }
+    if (!hasMainRgb) {
+        data[''] = data[isLevelMore100 ? '500' : '50'];
+    }
+    return data;
+}

package/esm/index.d.ts

@@ -0,0 +1,18 @@
+export { default } from './css';
+export { MasterCSSRule } from './rule';
+export { init } from './init';
+export { configure } from './configure';
+export { fillColorScale } from './fill-color-scale';
+export { render } from './render';
+export { renderFromHTML } from './render-from-html';
+export { renderIntoHTML } from './render-into-html';
+export { defaultConfig } from './config';
+export { defaultBreakpoints } from './config/breakpoints';
+export { defaultColors } from './config/colors';
+export { defaultRootSize } from './config/root-size';
+export { defaultSelectors } from './config/selectors';
+export { defaultSemantics } from './config/semantics';
+export { defaultThemes } from './config/themes';
+export { defaultValues } from './config/values';
+export { DefaultRules } from './config/rules';
+export { extend } from './utils/extend';

package/esm/index.js

@@ -0,0 +1,18 @@
+export { default } from './css';
+export { MasterCSSRule } from './rule';
+export { init } from './init';
+export { configure } from './configure';
+export { fillColorScale } from './fill-color-scale';
+export { render } from './render';
+export { renderFromHTML } from './render-from-html';
+export { renderIntoHTML } from './render-into-html';
+export { defaultConfig } from './config';
+export { defaultBreakpoints } from './config/breakpoints';
+export { defaultColors } from './config/colors';
+export { defaultRootSize } from './config/root-size';
+export { defaultSelectors } from './config/selectors';
+export { defaultSemantics } from './config/semantics';
+export { defaultThemes } from './config/themes';
+export { defaultValues } from './config/values';
+export { DefaultRules } from './config/rules';
+export { extend } from './utils/extend';

package/esm/init.d.ts

@@ -0,0 +1,3 @@
+import MasterCSS from './css';
+import { MasterCSSConfig } from './interfaces/config';
+export declare function init(config?: MasterCSSConfig): MasterCSS;

package/esm/init.js

@@ -0,0 +1,12 @@
+import MasterCSS from './css';
+export function init(config) {
+    if (typeof window !== 'undefined') {
+        const css = new MasterCSS(config, document.head);
+        MasterCSS.root = css;
+        css.observe(document.documentElement);
+        return css;
+    }
+    else {
+        return new MasterCSS(config);
+    }
+}

package/esm/interfaces/config.d.ts

@@ -0,0 +1,18 @@
+import MasterCSS from 'src/css';
+import { MasterCSSRule } from 'src/rule';
+export interface MasterCSSConfig {
+    classes?: Record<string, string>;
+    colors?: Record<string, string | Record<string, string>>;
+    breakpoints?: Record<string, number>;
+    mediaQueries?: Record<string, string>;
+    selectors?: Record<string, string | string[]>;
+    semantics?: Record<string, string | Record<string, string | number>>;
+    values?: Record<string, Record<string, string | number>>;
+    Rules?: typeof MasterCSSRule[];
+    themes?: Record<string, {
+        classes?: Record<string, string>;
+        colors?: Record<string, string | Record<string, string>>;
+    }> | string[];
+    rootSize?: number;
+    validateRule?: (rule: MasterCSSRule, css?: MasterCSS) => boolean;
+}

package/esm/interfaces/config.js

@@ -0,0 +1 @@
+export {};

package/esm/interfaces/declaration.d.ts

@@ -0,0 +1,5 @@
+export interface MasterCSSDeclaration {
+    value: string;
+    unit: string;
+    important: boolean;
+}

package/esm/interfaces/declaration.js

@@ -0,0 +1 @@
+export {};

package/esm/interfaces/media-feature-rule.d.ts

@@ -0,0 +1,7 @@
+export interface MasterCSSMediaFeatureRule {
+    token: string;
+    tokenType?: string;
+    operator?: string;
+    value?: number;
+    unit?: string;
+}

package/esm/interfaces/media-feature-rule.js

@@ -0,0 +1 @@
+export {};

package/esm/interfaces/media.d.ts

@@ -0,0 +1,8 @@
+import { MasterCSSMediaFeatureRule } from './media-feature-rule';
+export interface MasterCSSMedia {
+    token: string;
+    features?: {
+        [key: string]: MasterCSSMediaFeatureRule;
+    };
+    type?: string;
+}

package/esm/interfaces/media.js

@@ -0,0 +1 @@
+export {};

package/esm/polyfills/css-escape.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: any;
+export = _exports;

package/esm/polyfills/css-escape.js

@@ -0,0 +1,90 @@
+/*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */
+;
+(function (root, factory) {
+    // https://github.com/umdjs/umd/blob/master/returnExports.js
+    if (typeof exports == 'object') {
+        // For Node.js.
+        module.exports = factory(root);
+    }
+    else if (typeof define == 'function' && define.amd) {
+        // For AMD. Register as an anonymous module.
+        define([], factory.bind(root, root));
+    }
+    else {
+        // For browser globals (not exposing the function separately).
+        factory(root);
+    }
+}(typeof global != 'undefined' ? global : this, function (root) {
+    if (root.CSS && root.CSS.escape) {
+        return root.CSS.escape;
+    }
+    // https://drafts.csswg.org/cssom/#serialize-an-identifier
+    var cssEscape = function (value) {
+        if (arguments.length == 0) {
+            throw new TypeError('`CSS.escape` requires an argument.');
+        }
+        var string = String(value);
+        var length = string.length;
+        var index = -1;
+        var codeUnit;
+        var result = '';
+        var firstCodeUnit = string.charCodeAt(0);
+        if (
+        // If the character is the first character and is a `-` (U+002D), and
+        // there is no second character, […]
+        length == 1 &&
+            firstCodeUnit == 0x002D) {
+            return '\\' + string;
+        }
+        while (++index < length) {
+            codeUnit = string.charCodeAt(index);
+            // Note: there’s no need to special-case astral symbols, surrogate
+            // pairs, or lone surrogates.
+            // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
+            // (U+FFFD).
+            if (codeUnit == 0x0000) {
+                result += '\uFFFD';
+                continue;
+            }
+            if (
+            // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+            // U+007F, […]
+            (codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
+                // If the character is the first character and is in the range [0-9]
+                // (U+0030 to U+0039), […]
+                (index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+                // If the character is the second character and is in the range [0-9]
+                // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+                (index == 1 &&
+                    codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
+                    firstCodeUnit == 0x002D)) {
+                // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+                result += '\\' + codeUnit.toString(16) + ' ';
+                continue;
+            }
+            // If the character is not handled by one of the above rules and is
+            // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+            // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
+            // U+005A), or [a-z] (U+0061 to U+007A), […]
+            if (codeUnit >= 0x0080 ||
+                codeUnit == 0x002D ||
+                codeUnit == 0x005F ||
+                codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
+                codeUnit >= 0x0041 && codeUnit <= 0x005A ||
+                codeUnit >= 0x0061 && codeUnit <= 0x007A) {
+                // the character itself
+                result += string.charAt(index);
+                continue;
+            }
+            // Otherwise, the escaped character.
+            // https://drafts.csswg.org/cssom/#escape-a-character
+            result += '\\' + string.charAt(index);
+        }
+        return result;
+    };
+    if (!root.CSS) {
+        root.CSS = {};
+    }
+    root.CSS.escape = cssEscape;
+    return cssEscape;
+}));

package/esm/render-from-html.d.ts

@@ -0,0 +1,3 @@
+import MasterCSS from './css';
+import './polyfills/css-escape';
+export declare function renderFromHTML(html: string, css?: MasterCSS): string;

package/esm/render-from-html.js

@@ -0,0 +1,18 @@
+import MasterCSS from './css';
+import './polyfills/css-escape';
+export function renderFromHTML(html, css = new MasterCSS()) {
+    if (!html)
+        return;
+    const regexp = /\sclass="([^"]*)"/gm;
+    let results;
+    while (results = regexp.exec(html)) {
+        const classNames = results[1].replace(/\n/g, '').split(' ').filter(css => css);
+        for (const eachClassName of classNames) {
+            if (!(eachClassName in css.countOfName)) {
+                css.findAndInsert(eachClassName);
+                css.countOfName[eachClassName] = 1;
+            }
+        }
+    }
+    return css.rules.map(eachRule => eachRule.natives.reduce((a, b) => a + b.text, '')).join('');
+}

package/esm/render-into-html.d.ts

@@ -0,0 +1,3 @@
+import MasterCSS from './css';
+import './polyfills/css-escape';
+export declare function renderIntoHTML(html: string, css?: MasterCSS): string;

package/esm/render-into-html.js

@@ -0,0 +1,9 @@
+import MasterCSS from './css';
+import './polyfills/css-escape';
+import { renderFromHTML } from './render-from-html';
+export function renderIntoHTML(html, css = new MasterCSS()) {
+    if (!html)
+        return;
+    return html
+        .replace(/(<head>)/, `$1<style title="master">${renderFromHTML(html, css)}</style>`);
+}

package/esm/render.d.ts

@@ -0,0 +1,3 @@
+import MasterCSS from './css';
+import './polyfills/css-escape';
+export declare function render(classes: string[], css?: MasterCSS): string;

package/esm/render.js

@@ -0,0 +1,13 @@
+import MasterCSS from './css';
+import './polyfills/css-escape';
+export function render(classes, css = new MasterCSS()) {
+    if (!classes?.length)
+        return;
+    for (const eachClassName of classes) {
+        if (!(eachClassName in css.countOfName)) {
+            css.findAndInsert(eachClassName);
+            css.countOfName[eachClassName] = 1;
+        }
+    }
+    return css.rules.map(eachRule => eachRule.natives.reduce((a, b) => a + b.text, '')).join('');
+}

package/esm/rule.d.ts

@@ -0,0 +1,54 @@
+import { MasterCSSMedia } from './interfaces/media';
+import MasterCSS from './css';
+import { MasterCSSDeclaration } from './interfaces/declaration';
+import { MasterCSSConfig } from './interfaces/config';
+export declare const PRIORITY_SELECTORS: string[];
+export interface MasterCSSRuleMatching {
+    origin: 'matches' | 'semantics' | 'symbol';
+    value?: string;
+}
+export declare class MasterCSSRule {
+    readonly className: string;
+    readonly matching: MasterCSSRuleMatching;
+    css: MasterCSS;
+    readonly prefix: string;
+    readonly symbol: string;
+    readonly token: string;
+    readonly prefixSelectors: string[];
+    readonly vendorSuffixSelectors: Record<string, string[]>;
+    readonly important: boolean;
+    readonly media: MasterCSSMedia;
+    readonly at: Record<string, string>;
+    readonly direction: string;
+    readonly themeName: string;
+    readonly unitToken: string;
+    readonly hasWhere: boolean;
+    readonly prioritySelectorIndex: number;
+    readonly natives: {
+        unit: string;
+        value: string | Record<string, string | number>;
+        text: string;
+        themeName: string;
+        cssRule?: CSSRule;
+    }[];
+    static id: string;
+    static propName: string;
+    static matches: RegExp;
+    static colorStarts: string;
+    static symbol: string;
+    static unit: string;
+    static colorful: boolean;
+    static match(name: string, colorNames: string[]): MasterCSSRuleMatching;
+    constructor(className: string, matching: MasterCSSRuleMatching, css: MasterCSS);
+}
+export interface MasterCSSRule {
+    readonly order?: number;
+    parseValue(value: string, config: MasterCSSConfig): string;
+    get(declaration: MasterCSSDeclaration): Record<string, any>;
+    getThemeProps(declaration: MasterCSSDeclaration, css: MasterCSS): Record<string, Record<string, string>>;
+}
+declare global {
+    interface Window {
+        MasterCSSRule: typeof MasterCSSRule;
+    }
+}