@master/css 2.0.0-beta.99 → 2.0.0-rc.1

package/dist/rule.d.ts

@@ -1,70 +1,116 @@
-import MasterCSS from './css';
-import type { Config } from './config';
-export default class Rule {
+import type { MasterCSS, Variable } from './core';
+import { Layer } from './layer';
+import { PropertiesHyphen } from 'csstype';
+export declare class Rule {
     readonly className: string;
-    readonly matching: RuleMatching;
     css: MasterCSS;
-    readonly prefix: string;
-    readonly symbol: string;
-    readonly token: string;
-    readonly prefixSelectors: string[];
-    readonly vendorSuffixSelectors: Record<string, string[]>;
-    readonly important: boolean;
-    readonly media: MediaQuery;
     readonly at: Record<string, string>;
-    readonly direction: string;
-    readonly theme: string;
-    readonly unitToken: string;
-    readonly hasWhere: boolean;
     readonly priority: number;
-    readonly natives: {
-        unit: string;
-        value: string | Record<string, string | number>;
-        text: string;
-        theme: string;
-        cssRule?: CSSRule;
-    }[];
-    static id: string;
-    static matches: string;
-    static colorStarts: string;
-    static symbol: string;
-    static unit: string;
-    static colorful: boolean;
-    static get prop(): string;
-    static match(name: string, matches: RegExp, colorThemesMap: Record<string, Record<string, string>>, colorNames: string[]): RuleMatching;
-    constructor(className: string, matching: RuleMatching, css: MasterCSS);
+    readonly natives: NativeRule[];
+    readonly order: number;
+    readonly layer: Layer;
+    readonly stateToken: string;
+    readonly declarations?: PropertiesHyphen;
+    animationNames?: string[];
+    variableNames?: string[];
+    constructor(className: string, RegisteredRule: RegisteredRule, css: MasterCSS);
+    resolveValue: (valueComponents: ValueComponent[], unit: string, bypassVariableNames: string[], bypassParsing: boolean) => string;
     get text(): string;
+    parseValue: (currentValueComponents: ValueComponent[], i: number, value: string, unit: string, endSymbol: string, parentFunctionName?: string, bypassParsing?: boolean, bypassVariableNames?: string[]) => number;
+    parseValueComponent(token: string | number, unit?: any): StringValueComponent | NumericValueComponent;
 }
-export default interface Rule {
-    readonly order?: number;
-    analyzeToken(token: string, values: Record<string, string | number>, globalValues: Record<string, string | number>): [string, Array<string | {
-        value: string;
-    }>, string];
-    parseValue(value: string, config: Config): string;
-    get(declaration: Declaration): Record<string, any>;
-    getThemeProps(declaration: Declaration, css: MasterCSS): Record<string, Record<string, string>>;
+export type ValueComponent = StringValueComponent | NumericValueComponent | FunctionValueComponent | VariableValueComponent | SeparatorValueComponent;
+export interface StringValueComponent {
+    text?: string;
+    token?: string;
+    type: 'string';
+    value: string;
 }
-export interface MediaFeatureRule {
+export interface NumericValueComponent {
+    text?: string;
+    token?: string;
+    type: 'number';
+    value: number;
+    unit?: string;
+}
+export interface FunctionValueComponent {
+    text?: string;
+    token?: string;
+    type: 'function';
+    name: string;
+    symbol: string;
+    children: ValueComponent[];
+    bypassTransform?: boolean;
+}
+export interface VariableValueComponent {
+    text?: string;
+    token?: string;
+    type: 'variable';
+    name: string;
+    alpha?: string;
+    fallback?: string;
+    variable?: Variable;
+}
+export interface SeparatorValueComponent {
+    text?: string;
+    type: 'separator';
+    value: string;
+}
+export interface Rule extends RegisteredRule {
+    colored: boolean;
+    prefix: string;
     token: string;
+    vendorPrefixSelectors: Record<string, string[]>;
+    vendorSuffixSelectors: Record<string, string[]>;
+    important: boolean;
+    media: MediaQuery;
+    direction: string;
+    theme: string;
+    unitToken: string;
+    hasWhere: boolean;
+    valueComponents: Array<ValueComponent>;
+}
+export interface RegisteredRule {
+    id: string;
+    match?: RegExp;
+    variables?: any;
+    order: number;
+    definition: RuleDefinition;
+}
+export interface RuleDefinition {
+    layer?: Layer;
+    match?: RegExp | [string, string[]?];
+    variables?: string[];
+    separators?: string[];
+    shorthand?: string;
+    colored?: boolean;
+    numeric?: boolean;
+    unit?: any;
+    native?: boolean;
+    declarations?: PropertiesHyphen;
+    analyze?: (this: Rule, className: string) => [valueToken: string, prefixToken?: string];
+    transformValue?(this: Rule, value: string): string;
+    transformValueComponents?(this: Rule, valueComponents: ValueComponent[]): ValueComponent[];
+    declare?(this: Rule, value: string, valueComponents: ValueComponent[]): PropertiesHyphen;
+    delete?(this: Rule, className: string): void;
+    create?(this: Rule, className: string): void;
+    insert?(this: Rule): void;
+}
+export interface NativeRule {
+    text: string;
+    cssRule?: CSSRule;
+}
+export type MediaFeatureComponent = {
+    type: string;
     tokenType?: string;
     operator?: string;
-    value?: number;
-    unit?: string;
-}
+    value: number;
+    unit: string;
+};
 export interface MediaQuery {
     token: string;
-    features?: {
-        [key: string]: MediaFeatureRule;
+    features: {
+        [key: string]: MediaFeatureComponent;
     };
     type?: string;
 }
-export interface Declaration {
-    value: any;
-    unit: string;
-    important: boolean;
-}
-export interface RuleMatching {
-    origin: 'matches' | 'semantics' | 'symbol';
-    value?: [string, string | Record<string, string>];
-    Rule?: typeof Rule;
-}

package/dist/{config/breakpoints.d.ts → tokens/screen-sizes.d.ts}

@@ -1,4 +1,5 @@
-declare const breakpoints: {
+declare const _default: {
+    '4xs': number;
     '3xs': number;
     '2xs': number;
     xs: number;
@@ -10,4 +11,4 @@ declare const breakpoints: {
     '3xl': number;
     '4xl': number;
 };
-export default breakpoints;
+export default _default;

package/dist/types/global.d.ts

@@ -0,0 +1,5 @@
+import type { MasterCSS as _MasterCSS } from '../core';
+declare global {
+    var MasterCSS: typeof _MasterCSS;
+    var masterCSSs: _MasterCSS[];
+}

package/dist/utils/extend-config.d.ts

@@ -0,0 +1,2 @@
+import type { Config } from '../config';
+export declare function extendConfig(...configs: Config[]): Config;

package/dist/utils/flatten-object.d.ts

@@ -0,0 +1 @@
+export declare function flattenObject(obj: Record<string, any>, parentKey?: string): Record<string, any>;

package/dist/utils/hex-to-rgb.d.ts

@@ -1 +1 @@
-export declare function hexToRgb(hex: any): number[];
+export declare function hexToRgb(hex: string): (number | undefined)[];

package/dist/utils/rgb-to-hex.d.ts

@@ -1 +1 @@
-export declare function rgbToHex(r: any, g: any, b: any): any;
+export declare function rgbToHex(r: number, g: number, b: number): string;

package/package.json

@@ -1 +1 @@
-{"name":"@master/css","scripts":{"build":"aron pack --platform=node","dev":"npm run build -- --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"A Virtual CSS language with enhanced syntax ~13KB","author":"Aoyue Design LLC.","funding":"https://docs.master.co/css/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/css"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":["./src/polyfills/css-escape.ts"],"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","browser":"./dist/index.browser.js","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"files":["dist"],"publishConfig":{"access":"public"},"dependencies":{"@master/keyframes.css":"^2.0.0-beta.99","@master/normal.css":"^2.0.0-beta.99"},"devDependencies":{"to-extend":"^1.4.6"},"version":"2.0.0-beta.99"}
+{"name":"@master/css","scripts":{"build":"techor pack --declare --external @master/css-renderer @master/css-extractor","dev":"pnpm run build --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"A markup-driven CSS language with enhanced syntax","author":"Aoyue Design LLC.","funding":"https://css.master.co/docs/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/css"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.bundle.js","jsnext:main":"./dist/index.bundle.mjs","esnext":"./dist/index.bundle.mjs","module":"./dist/index.bundle.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.bundle.js","import":"./dist/index.bundle.mjs","types":"./dist/index.d.ts"}},"bin":{"mcss":"./dist/bin/index.bundle.js","mastercss":"./dist/bin/index.bundle.js"},"files":["dist"],"publishConfig":{"access":"public"},"dependencies":{"@master/normal.css":"^2.0.0-rc.1","@techor/fs":"^2.5.4","@techor/log":"^2.5.4","commander":"^11.0.0"},"devDependencies":{"@techor/extend":"^2.5.4","@techor/pack":"^2.5.4","@types/jest":"^29.5.11","css-shared":"^2.0.0-rc.1","csstype":"^3.1.2","puppeteer":"^21.0.1","vite":"^4.2.1"},"version":"2.0.0-rc.1"}

package/dist/apis/fill-color-scale.d.ts

@@ -1 +0,0 @@
-export default function fillColorScale(data: any): any;

package/dist/apis/render-from-html.d.ts

@@ -1,3 +0,0 @@
-import type { Config } from '../config';
-import '../polyfills/css-escape';
-export default function renderFromHTML(html: string, config?: Config): string;

package/dist/apis/render-into-html.d.ts

@@ -1,3 +0,0 @@
-import type { Config } from '../config';
-import '../polyfills/css-escape';
-export default function renderIntoHTML(html: string, config?: Config): string;

package/dist/apis/render.d.ts

@@ -1,3 +0,0 @@
-import type { Config } from '../config';
-import '../polyfills/css-escape';
-export default function render(classes: string[], config?: Config): string;

package/dist/config/colors.d.ts

@@ -1,25 +0,0 @@
-declare const colors: {
-    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;
-};
-export default colors;

package/dist/config/root-size.d.ts

@@ -1,2 +0,0 @@
-declare const rootSize = 16;
-export default rootSize;

package/dist/config/scheme.d.ts

@@ -1,7 +0,0 @@
-declare const scheme: {
-    storage: {
-        sync: boolean;
-        key: string;
-    };
-};
-export default scheme;

package/dist/config/themes.d.ts

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

package/dist/config/values.d.ts

@@ -1,126 +0,0 @@
-declare const values: {
-    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 values;

package/dist/css.d.ts

@@ -1,96 +0,0 @@
-import type { Config } from './config';
-import Rule, { RuleMatching } from './rule';
-declare const MutationObserver: ObjectConstructor | {
-    new (callback: MutationCallback): MutationObserver;
-    prototype: MutationObserver;
-};
-export declare type Options = {
-    config?: Config;
-    override?: boolean;
-    observe?: boolean;
-};
-export default class MasterCSS extends MutationObserver {
-    #private;
-    options?: Options;
-    static instances: MasterCSS[];
-    static root: MasterCSS;
-    /**
-     * 全部 sheet 根據目前蒐集到的所有 DOM class 重新 create
-     */
-    static refresh(config: Config): void;
-    readonly style: HTMLStyleElement;
-    readonly rules: Rule[];
-    readonly ruleOfClass: Record<string, Rule>;
-    readonly countOfClass: {};
-    readonly host: Element;
-    readonly root: Document | ShadowRoot;
-    readonly ready: boolean;
-    readonly config: Config;
-    semantics: [RegExp, [string, string | Record<string, string>]][];
-    classes: Record<string, string[]>;
-    colorThemesMap: Record<string, Record<string, string>>;
-    colorNames: string[];
-    themeNames: string[];
-    relationThemesMap: Record<string, Record<string, string[]>>;
-    relations: 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>;
-    private schemeMQL;
-    constructor(options?: Options);
-    get storageScheme(): string;
-    set scheme(scheme: string);
-    get scheme(): string;
-    set theme(theme: string);
-    get theme(): string;
-    private removeSchemeListener;
-    private onThemeChange;
-    private cache;
-    observe(root: Document | ShadowRoot, options?: MutationObserverInit): this;
-    disconnect(): void;
-    /**
-     * 比對是否為 Master CSS 的類名語法
-     */
-    match(className: string): RuleMatching;
-    /**
-     * 透過類名 ( 包含 .classes ) 生成 rules[]
-     */
-    create(className: string): Rule[];
-    /**
-     * 根據蒐集到的所有 DOM class 重新 create
-     */
-    refresh(config: Config): void;
-    destroy(): void;
-    /**
-     * 透過類名來刪除對應的 Rules
-     */
-    delete(className: string): void;
-    /**
-    * 依類名插入規則
-     */
-    insert(eachClassName: string): boolean;
-    /**
-    * 加工插入規則
-    * 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
-     */
-    insertRules(rules: Rule[]): void;
-    get text(): string;
-}
-declare global {
-    interface Window {
-        MasterCSS: typeof MasterCSS;
-    }
-}
-export {};

package/dist/index.browser.d.ts

@@ -1 +0,0 @@
-export {};