@master/css 2.0.0-beta.16 → 2.0.0-beta.161

package/dist/config/rules.d.ts

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

package/dist/config/scope.d.ts

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

package/dist/config/selectors.d.ts

@@ -1,4 +1,4 @@
-declare const defaultSelectors: {
+export declare const selectors: {
     '::scrollbar': string;
     '::scrollbar-button': string;
     '::scrollbar-thumb': string;
@@ -16,4 +16,3 @@ declare const defaultSelectors: {
     ':odd': string;
     ':nth(': string;
 };
-export default defaultSelectors;

package/dist/config/semantics.d.ts

@@ -1,45 +1,145 @@
-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;
+export declare const semantics: {
+    square: {
+        'aspect-ratio': string;
+    };
+    video: {
+        'aspect-ratio': string;
+    };
+    rounded: {
+        'border-radius': string;
+    };
+    round: {
+        'border-radius': string;
+    };
+    hidden: {
+        display: string;
+    };
+    hide: {
+        display: string;
+    };
+    block: {
+        display: string;
+    };
+    table: {
+        display: string;
+    };
+    flex: {
+        display: string;
+    };
+    grid: {
+        display: string;
+    };
+    contents: {
+        display: string;
+    };
+    inline: {
+        display: string;
+    };
+    'inline-block': {
+        display: string;
+    };
+    'inline-flex': {
+        display: string;
+    };
+    'inline-grid': {
+        display: string;
+    };
+    'inline-table': {
+        display: string;
+    };
+    'table-cell': {
+        display: string;
+    };
+    'table-caption': {
+        display: string;
+    };
+    'flow-root': {
+        display: string;
+    };
+    'list-item': {
+        display: string;
+    };
+    'table-row': {
+        display: string;
+    };
+    'table-column': {
+        display: string;
+    };
+    'table-row-group': {
+        display: string;
+    };
+    'table-column-group': {
+        display: string;
+    };
+    'table-header-group': {
+        display: string;
+    };
+    'table-footer-group': {
+        display: string;
+    };
+    italic: {
+        'font-style': string;
+    };
+    oblique: {
+        'font-style': string;
+    };
+    isolate: {
+        isolation: string;
+    };
+    overflowed: {
+        overflow: string;
+    };
+    untouchable: {
+        'pointer-events': string;
+    };
+    static: {
+        position: string;
+    };
+    fixed: {
+        position: string;
+    };
+    abs: {
+        position: string;
+    };
+    rel: {
+        position: string;
+    };
+    sticky: {
+        position: string;
+    };
+    uppercase: {
+        'text-transform': string;
+    };
+    lowercase: {
+        'text-transform': string;
+    };
+    capitalize: {
+        'text-transform': string;
+    };
+    visible: {
+        visibility: string;
+    };
+    invisible: {
+        visibility: string;
+    };
+    vw: {
+        width: string;
+    };
+    vh: {
+        height: string;
+    };
+    'max-vw': {
+        'max-width': string;
+    };
+    'max-vh': {
+        'max-height': string;
+    };
+    'min-vw': {
+        'min-width': string;
+    };
+    'min-vh': {
+        'min-height': string;
+    };
     'center-content': {
         'justify-content': string;
         'align-items': string;
@@ -78,5 +178,9 @@ declare const defaultSemantics: {
         'overflow-wrap': string;
         overflow: string;
     };
+    'gradient-text': {
+        '-webkit-text-fill-color': string;
+        '-webkit-background-clip': string;
+        'background-clip': string;
+    };
 };
-export default defaultSemantics;

package/dist/config/themeDriver.d.ts

@@ -0,0 +1 @@
+export declare const themeDriver = "class";

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    breakpoints: {},\n    mediaQueries: {},\n    keyframes: {},\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    breakpoints: {},\n    mediaQueries: {},\n    keyframes: {},\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    breakpoints: {},\n    mediaQueries: {},\n    keyframes: {},\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,92 @@
+import { Rule, RuleMeta, RuleNative } from './rule';
+import type { Config } 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>;
+    breakpoints: Record<string, number>;
+    mediaQueries: Record<string, string>;
+    matches: Record<string, RegExp>;
+    keyframes: Record<string, {
+        native: RuleNative;
+        count: number;
+    }>;
+}
+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;
+    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;
+}
+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;

package/dist/functions/render-html.d.ts

@@ -0,0 +1,8 @@
+import { Config } from '../config';
+/**
+ * Renders the page-required and sorted CSS text from HTML and injected it back into HTML
+ * @param html
+ * @param config
+ * @returns html text
+ */
+export default function renderHTML(html: string, config?: Config): string;