@master/css 2.0.0-alpha.44 → 2.0.0-alpha.46

package/index.d.ts

@@ -1,9 +1,550 @@
-export { default } from './core';
-export * from './rule';
-export * from './init';
-export * from './render';
-export * from './render-from-html';
-export * from './render-into-html';
-export * from './configure';
-export * from './config';
-export * from './fill-color-scale';
+interface MasterCSSMediaFeatureRule {
+    token: string;
+    tokenType?: string;
+    operator?: string;
+    value?: number;
+    unit?: string;
+}
+
+interface MasterCSSMedia {
+    token: string;
+    features?: {
+        [key: string]: MasterCSSMediaFeatureRule;
+    };
+    type?: string;
+}
+
+interface MasterCSSDeclaration {
+    value: string;
+    unit: string;
+    important: boolean;
+}
+
+interface RuleMatching {
+    origin: 'matches' | 'semantics' | 'symbol';
+    value?: string;
+}
+declare class MasterCSSRule {
+    readonly className: string;
+    readonly matching: RuleMatching;
+    readonly prefix: string;
+    readonly symbol: string;
+    readonly token: string;
+    readonly prefixSelectors: string[];
+    readonly suffixSelectors: 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[]): RuleMatching;
+    constructor(className: string, matching: RuleMatching, css: MasterCSS);
+}
+interface MasterCSSRule {
+    readonly order?: number;
+    parseValue(value: string): string;
+    get(declaration: MasterCSSDeclaration): Record<string, any>;
+    getThemeProps(declaration: MasterCSSDeclaration, css: MasterCSS): Record<string, Record<string, string>>;
+}
+declare global {
+    interface Window {
+        MasterCSSRule: typeof MasterCSSRule;
+    }
+}
+
+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;
+}
+
+declare function init(config?: MasterCSSConfig): MasterCSS;
+
+declare const MutationObserver: ObjectConstructor | {
+    new (callback: MutationCallback): MutationObserver;
+    prototype: MutationObserver;
+};
+declare class MasterCSS extends MutationObserver {
+    config: MasterCSSConfig;
+    container?: Element;
+    static init: typeof init;
+    static defaultConfig: MasterCSSConfig;
+    static instances: MasterCSS[];
+    static root: MasterCSS;
+    /**
+     * 全部 sheet 根據目前蒐集到的所有 DOM class 重新 findAndNew
+     */
+    static refresh(config: MasterCSSConfig): void;
+    readonly style: HTMLStyleElement;
+    readonly rules: MasterCSSRule[];
+    readonly ruleOfName: Record<string, MasterCSSRule>;
+    readonly countOfName: {};
+    private cache;
+    semantics: [RegExp, string][];
+    classes: Record<string, string[]>;
+    colorsThemesMap: Record<string, Record<string, Record<string, string>>>;
+    colorNames: string[];
+    themeNames: string[];
+    relationThemesMap: Record<string, Record<string, string[]>>;
+    relations: Record<string, string[]>;
+    selectors: {
+        single: [RegExp, string][];
+        multiple: [RegExp, string[]][];
+    };
+    constructor(config?: MasterCSSConfig, container?: Element);
+    observe(target: Node, options?: MutationObserverInit): this;
+    disconnect(): void;
+    /**
+     * 尋找匹配的 MasterCSSRule 生成實例
+     */
+    findAndNew(name: string): MasterCSSRule | MasterCSSRule[];
+    /**
+     * 根據目前蒐集到的所有 DOM class 重新 findAndNew
+     */
+    refresh(config: MasterCSSConfig): void;
+    destroy(): void;
+    /**
+     * 1. where
+     * 2. normal
+     * 3. where selectors
+     * 4. normal selectors
+     * 5. media where
+     * 6. media normal
+     * 7. media selectors
+     * 8. media width where
+     * 9. media width
+     * 10. media width selectors
+     */
+    insert(rule: MasterCSSRule): void;
+    delete(className: string): void;
+    findAndInsert(className: string): void;
+}
+declare global {
+    interface Window {
+        MasterCSS: typeof MasterCSS;
+    }
+}
+
+/*! 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 : undefined, 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;
+
+}));
+
+declare function render(classes: string[], css?: MasterCSS): string;
+
+declare function renderFromHTML(html: string, css?: MasterCSS): string;
+
+declare function renderIntoHTML(html: string, css?: MasterCSS): string;
+
+declare function configure(...configurations: MasterCSSConfig[]): MasterCSSConfig;
+
+declare const defaultBreakpoints: {
+    '3xs': number;
+    '2xs': number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+    '4xl': number;
+};
+
+declare const defaultColors: {
+    slate: any;
+    gray: any;
+    brown: any;
+    orange: any;
+    gold: any;
+    yellow: any;
+    grass: any;
+    green: any;
+    beryl: any;
+    teal: any;
+    cyan: any;
+    sky: any;
+    blue: any;
+    indigo: any;
+    violet: any;
+    purple: any;
+    fuchsia: any;
+    pink: any;
+    crimson: any;
+    red: any;
+    black: string;
+    white: string;
+};
+
+declare const defaultRootSize = 16;
+
+declare const defaultSelectors: {
+    '::scrollbar': string;
+    '::scrollbar-button': string;
+    '::scrollbar-thumb': string;
+    '::scrollbar-track': string;
+    '::scrollbar-track-piece': string;
+    '::scrollbar-corner': string;
+    '::slider-thumb': string[];
+    '::slider-runnable-track': string[];
+    '::meter': string;
+    '::resizer': string;
+    '::progress': string;
+    ':first': string;
+    ':last': string;
+    ':even': string;
+    ':odd': string;
+    ':nth(': string;
+};
+
+declare const defaultSemantics: {
+    square: string;
+    video: string;
+    rounded: string;
+    round: string;
+    hidden: string;
+    hide: string;
+    block: string;
+    table: string;
+    flex: string;
+    grid: string;
+    contents: string;
+    inline: string;
+    'inline-block': string;
+    'inline-flex': string;
+    'inline-grid': string;
+    'inline-table': string;
+    'table-cell': string;
+    'table-caption': string;
+    'flow-root': string;
+    'list-item': string;
+    'table-row': string;
+    'table-column': string;
+    'table-row-group': string;
+    'table-column-group': string;
+    'table-header-group': string;
+    'table-footer-group': string;
+    italic: string;
+    oblique: string;
+    isolate: string;
+    overflow: string;
+    untouchable: string;
+    static: string;
+    fixed: string;
+    abs: string;
+    rel: string;
+    sticky: string;
+    uppercase: string;
+    lowercase: string;
+    capitalize: string;
+    visible: string;
+    invisible: string;
+    'center-content': {
+        'justify-content': string;
+        'align-items': string;
+    };
+    'sr-only': {
+        position: string;
+        width: string;
+        height: string;
+        padding: string;
+        margin: string;
+        overflow: string;
+        clip: string;
+        'white-space': string;
+        'border-width': string;
+    };
+    full: {
+        width: string;
+        height: string;
+    };
+    center: {
+        left: number;
+        right: number;
+        'margin-left': string;
+        'margin-right': string;
+    };
+    middle: {
+        top: number;
+        bottom: number;
+        'margin-top': string;
+        'margin-bottom': string;
+    };
+    'break-spaces': {
+        'white-space': string;
+    };
+    'break-word': {
+        'overflow-wrap': string;
+        overflow: string;
+    };
+};
+
+declare const defaultThemes: string[];
+
+declare const defaultValues: {
+    BackgroundClip: {
+        content: string;
+        border: string;
+        padding: string;
+    };
+    BackgroundOrigin: {
+        content: string;
+        border: string;
+        padding: string;
+    };
+    BoxSizing: {
+        content: string;
+        border: string;
+    };
+    ClipPath: {
+        margin: string;
+        fill: string;
+        stroke: string;
+        view: string;
+        content: string;
+        border: string;
+        padding: string;
+    };
+    FlexDirection: {
+        col: any;
+        'col-reverse': string;
+    };
+    FontFamily: {
+        mono: string;
+        sans: string;
+        serif: string;
+    };
+    FontWeight: {
+        thin: number;
+        extralight: number;
+        light: number;
+        regular: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        heavy: number;
+    };
+    GridAutoColumns: {
+        min: string;
+        max: string;
+    };
+    GridAutoRows: {
+        min: string;
+        max: string;
+    };
+    GridTemplateColumns: {
+        min: string;
+        max: string;
+    };
+    GridTemplateRows: {
+        min: string;
+        max: string;
+    };
+    Order: {
+        first: number;
+        last: number;
+    };
+    Position: {
+        abs: string;
+        rel: string;
+    };
+    ShapeOutside: {
+        margin: string;
+        content: string;
+        border: string;
+        padding: string;
+    };
+    TransformBox: {
+        fill: string;
+        stroke: string;
+        view: string;
+        content: string;
+        border: string;
+        padding: string;
+    };
+    Width: {
+        full: string;
+        fit: any;
+        max: any;
+        min: any;
+    };
+    MinWidth: {
+        full: string;
+        fit: any;
+        max: any;
+        min: any;
+    };
+    MinHeight: {
+        full: string;
+        fit: any;
+        max: any;
+        min: any;
+    };
+    MaxWidth: {
+        full: string;
+        fit: any;
+        max: any;
+        min: any;
+    };
+    MaxHeight: {
+        full: string;
+        fit: any;
+        max: any;
+        min: any;
+    };
+    Height: {
+        full: string;
+        fit: any;
+        max: any;
+        min: any;
+    };
+    FlexBasis: {
+        full: string;
+        fit: any;
+        max: any;
+        min: any;
+    };
+};
+
+declare class export_default extends MasterCSSRule {
+    static id: string;
+    static matches: RegExp;
+    static propName: string;
+    static unit: string;
+}
+
+declare const DefaultRules: (typeof export_default)[];
+
+declare const defaultConfig: MasterCSSConfig;
+
+declare function fillColorScale(data: any): any;
+
+export { DefaultRules, MasterCSSRule, RuleMatching, configure, MasterCSS as default, defaultBreakpoints, defaultColors, defaultConfig, defaultRootSize, defaultSelectors, defaultSemantics, defaultThemes, defaultValues, fillColorScale, init, render, renderFromHTML, renderIntoHTML };