@master/css 2.0.0-beta.17 → 2.0.0-beta.170

package/dist/config/rules.d.ts

@@ -1,3 +1,278 @@
-import FontWeight from '../rules/font-weight';
-declare const DefaultRules: (typeof FontWeight)[];
-export default DefaultRules;
+import { RuleConfig } from '../rule';
+declare const defaultRules: {
+    readonly group: RuleConfig;
+    readonly variable: RuleConfig;
+    readonly fontSize: RuleConfig;
+    readonly fontWeight: RuleConfig;
+    readonly fontFamily: RuleConfig;
+    readonly fontSmoothing: RuleConfig;
+    readonly fontStyle: RuleConfig;
+    readonly fontVariantNumeric: RuleConfig;
+    readonly fontFeatureSettings: RuleConfig;
+    readonly font: RuleConfig;
+    readonly color: RuleConfig;
+    readonly marginLeft: RuleConfig;
+    readonly marginRight: RuleConfig;
+    readonly marginTop: RuleConfig;
+    readonly marginBottom: RuleConfig;
+    readonly marginX: RuleConfig;
+    readonly marginY: RuleConfig;
+    readonly margin: RuleConfig;
+    readonly paddingLeft: RuleConfig;
+    readonly paddingRight: RuleConfig;
+    readonly paddingTop: RuleConfig;
+    readonly paddingBottom: RuleConfig;
+    readonly paddingX: RuleConfig;
+    readonly paddingY: RuleConfig;
+    readonly padding: RuleConfig;
+    readonly flexBasis: RuleConfig;
+    readonly flexWrap: RuleConfig;
+    readonly flexGrow: RuleConfig;
+    readonly flexShrink: RuleConfig;
+    readonly flexDirection: RuleConfig;
+    readonly flex: RuleConfig;
+    readonly display: RuleConfig;
+    readonly width: RuleConfig;
+    readonly height: RuleConfig;
+    readonly minWidth: RuleConfig;
+    readonly minHeight: RuleConfig;
+    readonly box: RuleConfig;
+    readonly minBox: RuleConfig;
+    readonly maxBox: RuleConfig;
+    readonly contain: RuleConfig;
+    readonly content: RuleConfig;
+    readonly counterIncrement: RuleConfig;
+    readonly counterReset: RuleConfig;
+    readonly letterSpacing: RuleConfig;
+    readonly lineHeight: RuleConfig;
+    readonly objectFit: RuleConfig;
+    readonly objectPosition: RuleConfig;
+    readonly textAlign: RuleConfig;
+    readonly textDecorationColor: RuleConfig;
+    readonly textDecorationStyle: RuleConfig;
+    readonly textDecorationThickness: RuleConfig;
+    readonly textDecorationLine: RuleConfig;
+    readonly textDecoration: RuleConfig;
+    readonly textUnderlineOffset: RuleConfig;
+    readonly textOverflow: RuleConfig;
+    readonly textOrientation: RuleConfig;
+    readonly textTransform: RuleConfig;
+    readonly textRendering: RuleConfig;
+    readonly textIndent: RuleConfig;
+    readonly verticalAlign: RuleConfig;
+    readonly columns: RuleConfig;
+    readonly whiteSpace: RuleConfig;
+    readonly top: RuleConfig;
+    readonly bottom: RuleConfig;
+    readonly left: RuleConfig;
+    readonly right: RuleConfig;
+    readonly inset: RuleConfig;
+    readonly lines: RuleConfig;
+    readonly maxHeight: RuleConfig;
+    readonly maxWidth: RuleConfig;
+    readonly boxSizing: RuleConfig;
+    readonly opacity: RuleConfig;
+    readonly visibility: RuleConfig;
+    readonly clear: RuleConfig;
+    readonly float: RuleConfig;
+    readonly isolation: RuleConfig;
+    readonly overflowX: RuleConfig;
+    readonly overflowY: RuleConfig;
+    readonly overflow: RuleConfig;
+    readonly overscrollBehaviorX: RuleConfig;
+    readonly overscrollBehaviorY: RuleConfig;
+    readonly overscrollBehavior: RuleConfig;
+    readonly zIndex: RuleConfig;
+    readonly position: RuleConfig;
+    readonly cursor: RuleConfig;
+    readonly pointerEvents: RuleConfig;
+    readonly resize: RuleConfig;
+    readonly touchAction: RuleConfig;
+    readonly wordBreak: RuleConfig;
+    readonly wordSpacing: RuleConfig;
+    readonly userDrag: RuleConfig;
+    readonly userSelect: RuleConfig;
+    readonly textShadow: RuleConfig;
+    readonly textSize: RuleConfig;
+    readonly textFillColor: RuleConfig;
+    readonly textStrokeWidth: RuleConfig;
+    readonly textStrokeColor: RuleConfig;
+    readonly textStroke: RuleConfig;
+    readonly boxShadow: RuleConfig;
+    readonly tableLayout: RuleConfig;
+    readonly transformBox: RuleConfig;
+    readonly transformStyle: RuleConfig;
+    readonly transformOrigin: RuleConfig;
+    readonly transform: RuleConfig;
+    readonly transitionProperty: RuleConfig;
+    readonly transitionTimingFunction: RuleConfig;
+    readonly transitionDuration: RuleConfig;
+    readonly transitionDelay: RuleConfig;
+    readonly transition: RuleConfig;
+    readonly animationDelay: RuleConfig;
+    readonly animationDirection: RuleConfig;
+    readonly animationDuration: RuleConfig;
+    readonly animationFillMode: RuleConfig;
+    readonly animationIterationCount: RuleConfig;
+    readonly animationName: RuleConfig;
+    readonly animationPlayState: RuleConfig;
+    readonly animationTimingFunction: RuleConfig;
+    readonly animation: RuleConfig;
+    readonly borderCollapse: RuleConfig;
+    readonly borderSpacing: RuleConfig;
+    readonly borderTopColor: RuleConfig;
+    readonly borderBottomColor: RuleConfig;
+    readonly borderLeftColor: RuleConfig;
+    readonly borderRightColor: RuleConfig;
+    readonly borderXColor: RuleConfig;
+    readonly borderYColor: RuleConfig;
+    readonly borderColor: RuleConfig;
+    readonly borderTopLeftRadius: RuleConfig;
+    readonly borderTopRightRadius: RuleConfig;
+    readonly borderBottomLeftRadius: RuleConfig;
+    readonly borderBottomRightRadius: RuleConfig;
+    readonly borderTopRadius: RuleConfig;
+    readonly borderBottomRadius: RuleConfig;
+    readonly borderLeftRadius: RuleConfig;
+    readonly borderRightRadius: RuleConfig;
+    readonly borderRadius: RuleConfig;
+    readonly borderTopStyle: RuleConfig;
+    readonly borderBottomStyle: RuleConfig;
+    readonly borderLeftStyle: RuleConfig;
+    readonly borderRightStyle: RuleConfig;
+    readonly borderXStyle: RuleConfig;
+    readonly borderYStyle: RuleConfig;
+    readonly borderStyle: RuleConfig;
+    readonly borderTopWidth: RuleConfig;
+    readonly borderBottomWidth: RuleConfig;
+    readonly borderLeftWidth: RuleConfig;
+    readonly borderRightWidth: RuleConfig;
+    readonly borderXWidth: RuleConfig;
+    readonly borderYWidth: RuleConfig;
+    readonly borderWidth: RuleConfig;
+    readonly borderImageOutset: RuleConfig;
+    readonly borderImageRepeat: RuleConfig;
+    readonly borderImageSlice: RuleConfig;
+    readonly borderImageSource: RuleConfig;
+    readonly borderImageWidth: RuleConfig;
+    readonly borderImage: RuleConfig;
+    readonly borderTop: RuleConfig;
+    readonly borderBottom: RuleConfig;
+    readonly borderLeft: RuleConfig;
+    readonly borderRight: RuleConfig;
+    readonly borderX: RuleConfig;
+    readonly borderY: RuleConfig;
+    readonly border: RuleConfig;
+    readonly backgroundAttachment: RuleConfig;
+    readonly backgroundBlendMode: RuleConfig;
+    readonly backgroundColor: RuleConfig;
+    readonly backgroundClip: RuleConfig;
+    readonly backgroundOrigin: RuleConfig;
+    readonly backgroundPosition: RuleConfig;
+    readonly backgroundRepeat: RuleConfig;
+    readonly backgroundSize: RuleConfig;
+    readonly backgroundImage: RuleConfig;
+    readonly background: RuleConfig;
+    readonly mixBlendMode: RuleConfig;
+    readonly backdropFilter: RuleConfig;
+    readonly filter: RuleConfig;
+    readonly fill: RuleConfig;
+    readonly strokeDasharray: RuleConfig;
+    readonly strokeDashoffset: RuleConfig;
+    readonly strokeWidth: RuleConfig;
+    readonly stroke: RuleConfig;
+    readonly x: RuleConfig;
+    readonly y: RuleConfig;
+    readonly cx: RuleConfig;
+    readonly cy: RuleConfig;
+    readonly rx: RuleConfig;
+    readonly ry: RuleConfig;
+    readonly gridColumnStart: RuleConfig;
+    readonly gridColumnEnd: RuleConfig;
+    readonly gridColumn: RuleConfig;
+    readonly gridColumns: RuleConfig;
+    readonly gridRowStart: RuleConfig;
+    readonly gridRowEnd: RuleConfig;
+    readonly gridRow: RuleConfig;
+    readonly gridRows: RuleConfig;
+    readonly gridAutoColumns: RuleConfig;
+    readonly gridAutoFlow: RuleConfig;
+    readonly gridAutoRows: RuleConfig;
+    readonly gridTemplateAreas: RuleConfig;
+    readonly gridTemplateColumns: RuleConfig;
+    readonly gridTemplateRows: RuleConfig;
+    readonly gridTemplate: RuleConfig;
+    readonly gridArea: RuleConfig;
+    readonly grid: RuleConfig;
+    readonly columnGap: RuleConfig;
+    readonly rowGap: RuleConfig;
+    readonly gap: RuleConfig;
+    readonly order: RuleConfig;
+    readonly breakInside: RuleConfig;
+    readonly breakBefore: RuleConfig;
+    readonly breakAfter: RuleConfig;
+    readonly boxDecorationBreak: RuleConfig;
+    readonly aspectRatio: RuleConfig;
+    readonly columnSpan: RuleConfig;
+    readonly alignContent: RuleConfig;
+    readonly alignItems: RuleConfig;
+    readonly alignSelf: RuleConfig;
+    readonly justifyContent: RuleConfig;
+    readonly justifyItems: RuleConfig;
+    readonly justifySelf: RuleConfig;
+    readonly placeContent: RuleConfig;
+    readonly placeItems: RuleConfig;
+    readonly placeSelf: RuleConfig;
+    readonly listStylePosition: RuleConfig;
+    readonly listStyleType: RuleConfig;
+    readonly listStyleImage: RuleConfig;
+    readonly listStyle: RuleConfig;
+    readonly outlineColor: RuleConfig;
+    readonly outlineOffset: RuleConfig;
+    readonly outlineStyle: RuleConfig;
+    readonly outlineWidth: RuleConfig;
+    readonly outline: RuleConfig;
+    readonly accentColor: RuleConfig;
+    readonly appearance: RuleConfig;
+    readonly caretColor: RuleConfig;
+    readonly scrollBehavior: RuleConfig;
+    readonly scrollMarginLeft: RuleConfig;
+    readonly scrollMarginRight: RuleConfig;
+    readonly scrollMarginTop: RuleConfig;
+    readonly scrollMarginBottom: RuleConfig;
+    readonly scrollMarginX: RuleConfig;
+    readonly scrollMarginY: RuleConfig;
+    readonly scrollMargin: RuleConfig;
+    readonly scrollPaddingLeft: RuleConfig;
+    readonly scrollPaddingRight: RuleConfig;
+    readonly scrollPaddingTop: RuleConfig;
+    readonly scrollPaddingBottom: RuleConfig;
+    readonly scrollPaddingX: RuleConfig;
+    readonly scrollPaddingY: RuleConfig;
+    readonly scrollPadding: RuleConfig;
+    readonly scrollSnapAlign: RuleConfig;
+    readonly scrollSnapStop: RuleConfig;
+    readonly scrollSnapType: RuleConfig;
+    readonly willChange: RuleConfig;
+    readonly writingMode: RuleConfig;
+    readonly direction: RuleConfig;
+    readonly shapeOutside: RuleConfig;
+    readonly shapeMargin: RuleConfig;
+    readonly shapeImageThreshold: RuleConfig;
+    readonly clipPath: RuleConfig;
+    readonly quotes: RuleConfig;
+    readonly maskImage: {
+        readonly native: true;
+        readonly declare: (value: any, unit: any) => {
+            'mask-image': any;
+            '-webkit-mask-image': any;
+        };
+    };
+};
+declare const rules: Rules;
+export default rules;
+export type Rules = {
+    [key in keyof typeof defaultRules]?: RuleConfig;
+} & {
+    [key: string]: RuleConfig;
+};

package/dist/config/scope.d.ts

@@ -0,0 +1,2 @@
+declare const scope = "";
+export default scope;

package/dist/config/selectors.d.ts

@@ -1,19 +1,5 @@
-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 selectors: Selectors;
+export default selectors;
+export type Selectors = {
+    [key: string]: string | string[] | Selectors;
 };
-export default defaultSelectors;

package/dist/config/semantics.d.ts

@@ -1,82 +1,9 @@
-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;
-    };
+import type { CSSProperties } from '../types/css-properties';
+declare const semantics: Semantics;
+export default semantics;
+type SemanticsBase = CSSProperties | {
+    [key: string]: SemanticsBase;
+};
+export type Semantics = {
+    [key: string]: SemanticsBase;
 };
-export default defaultSemantics;

package/dist/config/theme-driver.d.ts

@@ -0,0 +1,3 @@
+declare const themeDriver = "class";
+export default themeDriver;
+export type ThemeDriver = 'class' | 'media' | 'host';

package/dist/config/values.d.ts

@@ -1,126 +1,3 @@
-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 type Values = {
+    [key: string]: string | number | Values;
 };
-export default defaultValues;

package/dist/config/viewports.d.ts

@@ -0,0 +1,5 @@
+declare const viewports: Viewports;
+export default viewports;
+export type Viewports = {
+    [key: string]: number | Viewports;
+};

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    classes: {},\n    colors: {},\n    themes: {},\n    rules: {},\n    values: {},\n    semantics: {},\n    viewports: {},\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    classes: {},\n    colors: {},\n    themes: {},\n    rules: {},\n    values: {},\n    semantics: {},\n    viewports: {},\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    classes: {},\n    colors: {},\n    themes: {},\n    rules: {},\n    values: {},\n    semantics: {},\n    viewports: {},\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,95 @@
+import { Rule, RuleMeta, RuleNative } from './rule';
+import type { Config, Animations } from './config';
+export interface MasterCSS {
+    readonly style: HTMLStyleElement;
+    readonly host: Element;
+    readonly root: Document | ShadowRoot;
+    semantics: [RegExp, [string, string | Record<string, string>]][];
+    classes: Record<string, string[]>;
+    colorThemesMap: Record<string, Record<string, string>>;
+    colorNames: string[];
+    themeNames: string[];
+    classesBy: Record<string, string[]>;
+    selectors: Record<string, [RegExp, string[]][]>;
+    values: Record<string, Record<string, string | number>>;
+    globalValues: Record<string, string | number>;
+    viewports: Record<string, number>;
+    mediaQueries: Record<string, string>;
+    matches: Record<string, RegExp>;
+    keyframesMap: Record<string, {
+        native: RuleNative;
+        count: number;
+    }>;
+    animations: Animations;
+}
+export declare class MasterCSS {
+    config: Config;
+    static root: MasterCSS;
+    static config: Config;
+    static instances: MasterCSS[];
+    static refresh: (config: Config) => void;
+    readonly rules: Rule[];
+    readonly ruleBy: Record<string, Rule>;
+    readonly countBy: {};
+    readonly observing = false;
+    observer: MutationObserver;
+    private colorByThemeByColorName;
+    constructor(config?: Config);
+    cache(): 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): RuleMeta;
+    /**
+     * Create rules from class syntax
+     * @param syntax class syntax
+     * @returns Rule[]
+     */
+    create(syntax: string): Rule[];
+    /**
+     * 根據蒐集到的所有 DOM class 重新 create
+     */
+    refresh(config: 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;
+}
+declare global {
+    interface Window {
+        MasterCSS: typeof MasterCSS;
+    }
+}

package/dist/functions/extract-classes-from-html.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param html
+ * @returns classes from html
+ */
+export default function extractClassesFromHTML(html: string): string[];

package/dist/functions/generate-from-classes.d.ts

@@ -0,0 +1,8 @@
+import { Config } from '../config';
+/**
+ * Generates the sorted CSS text from classes
+ * @param classes
+ * @param config
+ * @returns joined css text
+ */
+export default function generateFromClasses(classes: string[], config?: Config): string;

package/dist/functions/generate-from-html.d.ts

@@ -0,0 +1,8 @@
+import { Config } from '../config';
+/**
+ * Generates the sorted CSS text from HTML
+ * @param html
+ * @param config
+ * @returns joined css text
+ */
+export default function generateFromHTML(html: string, config?: Config): string;

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;