@master/css 2.0.0-beta.19 → 2.0.0-beta.190

package/dist/config/selectors.d.ts

@@ -1,4 +1,4 @@
-declare const defaultSelectors: {
+declare const selectors: {
     '::scrollbar': string;
     '::scrollbar-button': string;
     '::scrollbar-thumb': string;
@@ -15,5 +15,6 @@ declare const defaultSelectors: {
     ':even': string;
     ':odd': string;
     ':nth(': string;
+    ':only': string;
 };
-export default defaultSelectors;
+export default selectors;

package/dist/config/semantics.d.ts

@@ -1,82 +1,191 @@
-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 semantics: {
+    readonly square: {
+        readonly 'aspect-ratio': "1/1";
+    };
+    readonly video: {
+        readonly 'aspect-ratio': "16/9";
+    };
+    readonly rounded: {
+        readonly 'border-radius': "1e9em";
+    };
+    readonly round: {
+        readonly 'border-radius': "50%";
+    };
+    readonly hidden: {
+        readonly display: "none";
+    };
+    readonly hide: {
+        readonly display: "none";
+    };
+    readonly block: {
+        readonly display: "block";
+    };
+    readonly table: {
+        readonly display: "table";
+    };
+    readonly flex: {
+        readonly display: "flex";
+    };
+    readonly grid: {
+        readonly display: "grid";
+    };
+    readonly contents: {
+        readonly display: "contents";
+    };
+    readonly inline: {
+        readonly display: "inline";
+    };
+    readonly 'inline-block': {
+        readonly display: "inline-block";
+    };
+    readonly 'inline-flex': {
+        readonly display: "inline-flex";
+    };
+    readonly 'inline-grid': {
+        readonly display: "inline-grid";
+    };
+    readonly 'inline-table': {
+        readonly display: "inline-table";
+    };
+    readonly 'table-cell': {
+        readonly display: "table-cell";
+    };
+    readonly 'table-caption': {
+        readonly display: "table-caption";
+    };
+    readonly 'flow-root': {
+        readonly display: "flow-root";
+    };
+    readonly 'list-item': {
+        readonly display: "list-item";
+    };
+    readonly 'table-row': {
+        readonly display: "table-row";
+    };
+    readonly 'table-column': {
+        readonly display: "table-column";
+    };
+    readonly 'table-row-group': {
+        readonly display: "table-row-group";
+    };
+    readonly 'table-column-group': {
+        readonly display: "table-column-group";
+    };
+    readonly 'table-header-group': {
+        readonly display: "table-header-group";
+    };
+    readonly 'table-footer-group': {
+        readonly display: "table-footer-group";
+    };
+    readonly italic: {
+        readonly 'font-style': "italic";
+    };
+    readonly oblique: {
+        readonly 'font-style': "oblique";
+    };
+    readonly isolate: {
+        readonly isolation: "isolate";
+    };
+    readonly overflowed: {
+        readonly overflow: "visible";
+    };
+    readonly untouchable: {
+        readonly 'pointer-events': "none";
+    };
+    readonly static: {
+        readonly position: "static";
+    };
+    readonly fixed: {
+        readonly position: "fixed";
+    };
+    readonly abs: {
+        readonly position: "absolute";
+    };
+    readonly rel: {
+        readonly position: "relative";
+    };
+    readonly sticky: {
+        readonly position: "sticky";
+    };
+    readonly uppercase: {
+        readonly 'text-transform': "uppercase";
+    };
+    readonly lowercase: {
+        readonly 'text-transform': "lowercase";
+    };
+    readonly capitalize: {
+        readonly 'text-transform': "capitalize";
+    };
+    readonly visible: {
+        readonly visibility: "visible";
+    };
+    readonly invisible: {
+        readonly visibility: "hidden";
+    };
+    readonly vw: {
+        readonly width: "100vw";
+    };
+    readonly vh: {
+        readonly height: "100vh";
+    };
+    readonly 'max-vw': {
+        readonly 'max-width': "100vw";
+    };
+    readonly 'max-vh': {
+        readonly 'max-height': "100vh";
+    };
+    readonly 'min-vw': {
+        readonly 'min-width': "100vw";
+    };
+    readonly 'min-vh': {
+        readonly 'min-height': "100vh";
+    };
+    readonly 'center-content': {
+        readonly 'justify-content': "center";
+        readonly 'align-items': "center";
+    };
+    readonly 'sr-only': {
+        readonly position: "absolute";
+        readonly width: "1px";
+        readonly height: "1px";
+        readonly padding: "0";
+        readonly margin: "-1px";
+        readonly overflow: "hidden";
+        readonly clip: "rect(0,0,0,0)";
+        readonly 'white-space': "nowrap";
+        readonly 'border-width': "0";
+    };
+    readonly full: {
+        readonly width: "100%";
+        readonly height: "100%";
+    };
+    readonly center: {
+        readonly left: 0;
+        readonly right: 0;
+        readonly 'margin-left': "auto";
+        readonly 'margin-right': "auto";
+    };
+    readonly middle: {
+        readonly top: 0;
+        readonly bottom: 0;
+        readonly 'margin-top': "auto";
+        readonly 'margin-bottom': "auto";
+    };
+    readonly 'break-spaces': {
+        readonly 'white-space': "break-spaces";
+    };
+    readonly 'break-word': {
+        readonly 'overflow-wrap': "break-word";
+        readonly overflow: "hidden";
+    };
+    readonly 'gradient-text': {
+        readonly '-webkit-text-fill-color': "transparent";
+        readonly '-webkit-background-clip': "text";
+        readonly 'background-clip': "text";
+    };
+    readonly fit: {
+        readonly width: "fit-content";
+        readonly height: "fit-content";
     };
 };
-export default defaultSemantics;
+export default semantics;

package/dist/config/styles.d.ts

@@ -0,0 +1,3 @@
+export type ConfigStyles = {
+    [key: string]: string | ConfigStyles;
+};

package/dist/config/variables.d.ts

@@ -0,0 +1,32 @@
+declare const variables: {
+    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;
+    };
+    section: {
+        '4xs': number;
+        '3xs': number;
+        '2xs': number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        '2xl': number;
+        '3xl': number;
+        '4xl': number;
+    };
+};
+export default variables;

package/dist/constants/config-esm-text.d.ts

@@ -0,0 +1 @@
+export declare const CONFIG_ESM_TEXT = "/** @type {import('@master/css').Config} */\nexport default {\n    styles: {},\n    colors: {},\n    rules: {},\n    variables: {},\n    semantics: {},\n    mediaQueries: {},\n    animations: {},\n    selectors: {},\n    functions: {}\n}\n";

package/dist/constants/config-text.d.ts

@@ -0,0 +1 @@
+export declare const CONFIG_TEXT = "/** @type {import('@master/css').Config} */\nmodule.exports = {\n    styles: {},\n    colors: {},\n    rules: {},\n    variables: {},\n    semantics: {},\n    mediaQueries: {},\n    animations: {},\n    selectors: {},\n    functions: {}\n}\n";

package/dist/constants/config-ts-text.d.ts

@@ -0,0 +1 @@
+export declare const CONFIG_TS_TEXT = "import type { Config } from '@master/css'\n\nexport default {\n    styles: {},\n    colors: {},\n    rules: {},\n    variables: {},\n    semantics: {},\n    mediaQueries: {},\n    animations: {},\n    selectors: {},\n    functions: {}\n} as Config\n";

package/dist/constants/selector-symbols.d.ts

@@ -0,0 +1 @@
+export declare const SELECTOR_SYMBOLS: string[];

package/dist/constants/start-symbol.d.ts

@@ -1,5 +1,6 @@
-export declare const START_SYMBOL: {
+export declare const START_SYMBOLS: {
     '(': string;
     '\'': string;
+    '"': string;
     '{': string;
 };

package/dist/core.d.ts

@@ -0,0 +1,97 @@
+import { Rule, RuleNative } from './rule';
+import type { Config } from './config';
+export interface MasterCSS {
+    readonly style: HTMLStyleElement;
+    readonly host: Element;
+    readonly root: Document | ShadowRoot;
+    styles: Record<string, string[]>;
+    colors: Record<string, Record<string, string>>;
+    colorNames: string[];
+    themeNames: string[];
+    stylesBy: Record<string, string[]>;
+    selectors: Record<string, [RegExp, string[]][]>;
+    fonts: Record<string, string>;
+    variables: Record<string, string | number>;
+    mediaQueries: Record<string, string>;
+    keyframesMap: Record<string, {
+        native: RuleNative;
+        count: number;
+    }>;
+    animations: Config['animations'];
+}
+export declare class MasterCSS {
+    customConfig: Config;
+    static root: MasterCSS;
+    static config: Config;
+    static instances: MasterCSS[];
+    static refresh: (customConfig: Config) => void;
+    readonly rules: Rule[];
+    readonly ruleBy: Record<string, Rule>;
+    readonly countBy: {};
+    readonly observing = false;
+    readonly config: Config;
+    private readonly semanticRuleOptions;
+    private readonly ruleOptions;
+    colorTokenRegExp: RegExp;
+    observer: MutationObserver;
+    private colorByThemeByColorName;
+    constructor(customConfig?: Config);
+    resolve(): void;
+    /**
+     * Observe the DOM for changes and update the running stylesheet. (browser only)
+     * @param targetRoot root element to observe. default: document
+     * @param options mutation observer options
+     * @returns this
+     */
+    observe(targetRoot: Document | ShadowRoot | null, options?: MutationObserverInit): this;
+    disconnect(): void;
+    /**
+     * Match check if Master CSS class syntax
+     * @param syntax class syntax
+     * @returns css text
+     */
+    match(syntax: string): Rule['options'];
+    /**
+     * Create rules from class syntax
+     * @param syntax class syntax
+     * @returns Rule[]
+     */
+    create(syntax: string): Rule[];
+    /**
+     * 根據蒐集到的所有 DOM class 重新 create
+     */
+    refresh(customConfig?: Config): void;
+    destroy(): void;
+    /**
+     * 透過類名來刪除對應的 rules
+     */
+    delete(className: string): void;
+    /**
+    * 依類名插入規則
+     */
+    insert(syntax: string): boolean;
+    /**
+    * 加工插入規則
+    * 1. where
+    * 2. normal
+    * 3. where selectors
+    * 4. normal selectors
+    * 5. media where
+    * 6. media normal
+    * 7. media where selectors
+    * 8. media selectors
+    * 9. media width where
+    * 10. media width
+    * 11. media width where selectors
+    * 12. media width selectors
+    */
+    insertRules(rules: Rule[]): void;
+    get text(): string;
+    private getExtendedConfig;
+    private handleRuleWithAnimationNames;
+}
+declare global {
+    interface Window {
+        MasterCSS: typeof MasterCSS;
+    }
+}

package/dist/functions/init-runtime.d.ts

@@ -0,0 +1,9 @@
+import { MasterCSS } from '../core';
+import type { Config } from '../config';
+/**
+ * Initialize a new MasterCSS instance and observe the target root
+ * @param config master css config
+ * @param targetRoot target root to observe
+ * @returns master css instance
+ */
+export default function initRuntime(config?: Config, targetRoot?: Document | ShadowRoot | null): MasterCSS;

package/dist/functions/reorder-for-readable-classes.d.ts

@@ -0,0 +1,8 @@
+import type { Config } from '../config';
+/**
+ * Sorts classes in a consistent order
+ * @param classes
+ * @param config
+ * @returns consistent classes
+ */
+export default function reorderForReadableClasses(classes: string[], config?: Config): string[];

package/dist/functions/transform-color-with-opacity.d.ts

@@ -0,0 +1 @@
+export declare function transformColorWithOpacity(color: string, opacityStr: string): string;