@master/css 2.0.0-alpha.9 → 2.0.0-beta.2

package/esm/config/semantics.js

@@ -0,0 +1,83 @@
+const defaultSemantics = {
+    square: 'aspect-ratio:1/1',
+    video: 'aspect-ratio:16/9',
+    rounded: 'border-radius:1e9em',
+    round: 'border-radius:50%',
+    hidden: 'display:none',
+    hide: 'display:none',
+    block: 'display:block',
+    table: 'display:table',
+    flex: 'display:flex',
+    grid: 'display:grid',
+    contents: 'display:contents',
+    inline: 'display:inline',
+    'inline-block': 'display:inline-block',
+    'inline-flex': 'display:inline-flex',
+    'inline-grid': 'display:inline-grid',
+    'inline-table': 'display:inline-table',
+    'table-cell': 'display:table-cell',
+    'table-caption': 'display:table-caption',
+    'flow-root': 'display:flow-root',
+    'list-item': 'display:list-item',
+    'table-row': 'display:table-row',
+    'table-column': 'display:table-column',
+    'table-row-group': 'display:table-row-group',
+    'table-column-group': 'display:table-column-group',
+    'table-header-group': 'display:table-header-group',
+    'table-footer-group': 'display:table-footer-group',
+    italic: 'font-style:italic',
+    oblique: 'font-style:oblique',
+    isolate: 'isolation:isolate',
+    overflow: 'overflow:visible',
+    untouchable: 'pointer-events:none',
+    static: 'position:static',
+    fixed: 'position:fixed',
+    abs: 'position:absolute',
+    rel: 'position:relative',
+    sticky: 'position:sticky',
+    uppercase: 'text-transform:uppercase',
+    lowercase: 'text-transform:lowercase',
+    capitalize: 'text-transform:capitalize',
+    visible: 'visibility:visible',
+    invisible: 'visibility:hidden',
+    'center-content': {
+        'justify-content': 'center',
+        'align-items': 'center',
+    },
+    'sr-only': {
+        'position': 'absolute',
+        'width': '1px',
+        'height': '1px',
+        'padding': '0',
+        'margin': '-1px',
+        'overflow': 'hidden',
+        'clip': 'rect(0,0,0,0)',
+        'white-space': 'nowrap',
+        'border-width': '0'
+    },
+    full: {
+        width: '100%',
+        height: '100%'
+    },
+    center: {
+        left: 0,
+        right: 0,
+        'margin-left': 'auto',
+        'margin-right': 'auto'
+    },
+    middle: {
+        top: 0,
+        bottom: 0,
+        'margin-top': 'auto',
+        'margin-bottom': 'auto'
+    },
+    'break-spaces': {
+        'white-space': 'break-spaces'
+    },
+    'break-word': {
+        'overflow-wrap': 'break-word',
+        overflow: 'hidden'
+    }
+};
+export default defaultSemantics;
+//# sourceMappingURL=semantics.js.map

package/esm/config/semantics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantics.js","sourceRoot":"","sources":["../../../src/config/semantics.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAgB,GAAG;IACrB,MAAM,EAAE,kBAAkB;IAC1B,KAAK,EAAE,mBAAmB;IAC1B,OAAO,EAAE,qBAAqB;IAC9B,KAAK,EAAE,mBAAmB;IAC1B,MAAM,EAAE,cAAc;IACtB,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE,eAAe;IACtB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,kBAAkB;IAC5B,MAAM,EAAE,gBAAgB;IACxB,cAAc,EAAE,sBAAsB;IACtC,aAAa,EAAE,qBAAqB;IACpC,aAAa,EAAE,qBAAqB;IACpC,cAAc,EAAE,sBAAsB;IACtC,YAAY,EAAE,oBAAoB;IAClC,eAAe,EAAE,uBAAuB;IACxC,WAAW,EAAE,mBAAmB;IAChC,WAAW,EAAE,mBAAmB;IAChC,WAAW,EAAE,mBAAmB;IAChC,cAAc,EAAE,sBAAsB;IACtC,iBAAiB,EAAE,yBAAyB;IAC5C,oBAAoB,EAAE,4BAA4B;IAClD,oBAAoB,EAAE,4BAA4B;IAClD,oBAAoB,EAAE,4BAA4B;IAClD,MAAM,EAAE,mBAAmB;IAC3B,OAAO,EAAE,oBAAoB;IAC7B,OAAO,EAAE,mBAAmB;IAC5B,QAAQ,EAAE,kBAAkB;IAC5B,WAAW,EAAE,qBAAqB;IAClC,MAAM,EAAE,iBAAiB;IACzB,KAAK,EAAE,gBAAgB;IACvB,GAAG,EAAE,mBAAmB;IACxB,GAAG,EAAE,mBAAmB;IACxB,MAAM,EAAE,iBAAiB;IACzB,SAAS,EAAE,0BAA0B;IACrC,SAAS,EAAE,0BAA0B;IACrC,UAAU,EAAE,2BAA2B;IACvC,OAAO,EAAE,oBAAoB;IAC7B,SAAS,EAAE,mBAAmB;IAC9B,gBAAgB,EAAE;QACd,iBAAiB,EAAE,QAAQ;QAC3B,aAAa,EAAE,QAAQ;KAC1B;IACD,SAAS,EAAE;QACP,UAAU,EAAE,UAAU;QACtB,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,GAAG;QACd,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,eAAe;QACvB,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,GAAG;KACtB;IACD,IAAI,EAAE;QACF,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACjB;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,aAAa,EAAE,MAAM;QACrB,cAAc,EAAE,MAAM;KACzB;IACD,MAAM,EAAE;QACJ,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,CAAC;QACT,YAAY,EAAE,MAAM;QACpB,eAAe,EAAE,MAAM;KAC1B;IACD,cAAc,EAAE;QACZ,aAAa,EAAE,cAAc;KAChC;IACD,YAAY,EAAE;QACV,eAAe,EAAE,YAAY;QAC7B,QAAQ,EAAE,QAAQ;KACrB;CACJ,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/esm/config/themes.d.ts

@@ -0,0 +1,2 @@
+declare const defaultThemes: string[];
+export default defaultThemes;

package/esm/config/themes.js

@@ -0,0 +1,3 @@
+const defaultThemes = ['dark', 'light'];
+export default defaultThemes;
+//# sourceMappingURL=themes.js.map

package/esm/config/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../src/config/themes.ts"],"names":[],"mappings":"AAAA,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACvC,eAAe,aAAa,CAAA"}

package/esm/config/values.d.ts

@@ -0,0 +1,126 @@
+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: string;
+        '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: string;
+        max: string;
+        min: string;
+    };
+    MinWidth: {
+        full: string;
+        fit: string;
+        max: string;
+        min: string;
+    };
+    MinHeight: {
+        full: string;
+        fit: string;
+        max: string;
+        min: string;
+    };
+    MaxWidth: {
+        full: string;
+        fit: string;
+        max: string;
+        min: string;
+    };
+    MaxHeight: {
+        full: string;
+        fit: string;
+        max: string;
+        min: string;
+    };
+    Height: {
+        full: string;
+        fit: string;
+        max: string;
+        min: string;
+    };
+    FlexBasis: {
+        full: string;
+        fit: string;
+        max: string;
+        min: string;
+    };
+};
+export default defaultValues;

package/esm/config/values.js

@@ -0,0 +1,85 @@
+import defaultBreakpoints from './breakpoints';
+const boxUnderneath = {
+    content: 'content-box',
+    border: 'border-box',
+    padding: 'padding-box'
+};
+const contentExtrema = {
+    min: 'min-content',
+    max: 'max-content'
+};
+const sizingValues = {
+    full: '100%',
+    fit: 'fit-content',
+    max: 'max-content',
+    min: 'min-content',
+};
+for (const key in defaultBreakpoints) {
+    sizingValues[key] = (defaultBreakpoints[key] / 16) + 'rem';
+}
+const defaultValues = {
+    BackgroundClip: boxUnderneath,
+    BackgroundOrigin: boxUnderneath,
+    BoxSizing: {
+        content: 'content-box',
+        border: 'border-box',
+    },
+    ClipPath: {
+        ...boxUnderneath,
+        margin: 'margin-box',
+        fill: 'fill-box',
+        stroke: 'stroke-box',
+        view: 'view-box'
+    },
+    FlexDirection: {
+        col: 'column',
+        'col-reverse': 'column-reverse'
+    },
+    FontFamily: {
+        mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
+        sans: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji',
+        serif: 'ui-serif, Georgia, Cambria, Times New Roman, Times, serif'
+    },
+    FontWeight: {
+        thin: 100,
+        extralight: 200,
+        light: 300,
+        regular: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        heavy: 900
+    },
+    GridAutoColumns: contentExtrema,
+    GridAutoRows: contentExtrema,
+    GridTemplateColumns: contentExtrema,
+    GridTemplateRows: contentExtrema,
+    Order: {
+        first: -999999,
+        last: 999999
+    },
+    Position: {
+        abs: 'absolute',
+        rel: 'relative'
+    },
+    ShapeOutside: {
+        ...boxUnderneath,
+        margin: 'margin-box'
+    },
+    TransformBox: {
+        ...boxUnderneath,
+        fill: 'fill-box',
+        stroke: 'stroke-box',
+        view: 'view-box'
+    },
+    Width: sizingValues,
+    MinWidth: sizingValues,
+    MinHeight: sizingValues,
+    MaxWidth: sizingValues,
+    MaxHeight: sizingValues,
+    Height: sizingValues,
+    FlexBasis: sizingValues
+};
+export default defaultValues;
+//# sourceMappingURL=values.js.map

package/esm/config/values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"values.js","sourceRoot":"","sources":["../../../src/config/values.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,eAAe,CAAA;AAE9C,MAAM,aAAa,GAAG;IAClB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,aAAa;CACzB,CAAA;AAED,MAAM,cAAc,GAAG;IACnB,GAAG,EAAE,aAAa;IAClB,GAAG,EAAE,aAAa;CACrB,CAAA;AAED,MAAM,YAAY,GAAG;IACjB,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,aAAa;IAClB,GAAG,EAAE,aAAa;IAClB,GAAG,EAAE,aAAa;CACrB,CAAA;AACD,KAAK,MAAM,GAAG,IAAI,kBAAkB,EAAE;IAClC,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,GAAG,KAAK,CAAA;CAC7D;AAED,MAAM,aAAa,GAAG;IAClB,cAAc,EAAE,aAAa;IAC7B,gBAAgB,EAAE,aAAa;IAC/B,SAAS,EAAE;QACP,OAAO,EAAE,aAAa;QACtB,MAAM,EAAE,YAAY;KACvB;IACD,QAAQ,EAAE;QACN,GAAG,aAAa;QAChB,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,UAAU;KACnB;IACD,aAAa,EAAE;QACX,GAAG,EAAE,QAAQ;QACb,aAAa,EAAE,gBAAgB;KAClC;IACD,UAAU,EAAE;QACR,IAAI,EAAE,gGAAgG;QACtG,IAAI,EAAE,mMAAmM;QACzM,KAAK,EAAE,2DAA2D;KACrE;IACD,UAAU,EAAE;QACR,IAAI,EAAE,GAAG;QACT,UAAU,EAAE,GAAG;QACf,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,GAAG;QACZ,MAAM,EAAE,GAAG;QACX,QAAQ,EAAE,GAAG;QACb,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,GAAG;QACd,KAAK,EAAE,GAAG;KACb;IACD,eAAe,EAAE,cAAc;IAC/B,YAAY,EAAE,cAAc;IAC5B,mBAAmB,EAAE,cAAc;IACnC,gBAAgB,EAAE,cAAc;IAChC,KAAK,EAAE;QACH,KAAK,EAAE,CAAC,MAAM;QACd,IAAI,EAAE,MAAM;KACf;IACD,QAAQ,EAAE;QACN,GAAG,EAAE,UAAU;QACf,GAAG,EAAE,UAAU;KAClB;IACD,YAAY,EAAE;QACV,GAAG,aAAa;QAChB,MAAM,EAAE,YAAY;KACvB;IACD,YAAY,EAAE;QACV,GAAG,aAAa;QAChB,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,UAAU;KACnB;IACD,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,YAAY;IACvB,MAAM,EAAE,YAAY;IACpB,SAAS,EAAE,YAAY;CAC1B,CAAA;AAED,eAAe,aAAa,CAAA"}

package/esm/constants/start-symbol.js

@@ -0,0 +1,6 @@
+export const START_SYMBOL = {
+    '(': ')',
+    '\'': '\'',
+    '{': '}'
+};
+//# sourceMappingURL=start-symbol.js.map

package/esm/constants/start-symbol.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"start-symbol.js","sourceRoot":"","sources":["../../../src/constants/start-symbol.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG;IACxB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,IAAI;IACV,GAAG,EAAE,GAAG;CACX,CAAA"}

package/esm/css.d.ts

@@ -0,0 +1,77 @@
+import { init } from './apis/init';
+import type { MasterCSSConfig } from './config';
+import { MasterCSSRule } from './rule';
+declare const MutationObserver: ObjectConstructor | {
+    new (callback: MutationCallback): MutationObserver;
+    prototype: MutationObserver;
+};
+export default class MasterCSS extends MutationObserver {
+    #private;
+    config: MasterCSSConfig;
+    root?: Document | ShadowRoot;
+    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 ruleOfClass: Record<string, MasterCSSRule>;
+    readonly countOfClass: {};
+    readonly host: Element;
+    readonly ready: boolean;
+    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: Record<string, [RegExp, string[]][]>;
+    private schemeMQL;
+    constructor(config?: MasterCSSConfig, root?: Document | ShadowRoot);
+    get storageScheme(): string;
+    set scheme(scheme: string);
+    get scheme(): string;
+    set theme(theme: string);
+    get theme(): string;
+    private removeSchemeListener;
+    private onThemeChange;
+    private cache;
+    observe(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;
+    get text(): string;
+}
+declare global {
+    interface Window {
+        MasterCSS: typeof MasterCSS;
+    }
+}
+export {};