@master/css 2.0.0-beta.18 → 2.0.0-beta.181

package/dist/config/index.d.ts

@@ -1,27 +1,89 @@
-import MasterCSSRule from '../rule';
-import MasterCSS from '../css';
-declare const defaultConfig: MasterCSSConfig;
-export default defaultConfig;
-export interface MasterCSSConfig {
-    classes?: Record<string, string>;
-    colors?: Record<string, string | Record<string, string>>;
-    breakpoints?: Record<string, number>;
-    mediaQueries?: Record<string, string>;
-    selectors?: Record<string, string | string[]>;
-    semantics?: Record<string, string | Record<string, string | number>>;
-    values?: Record<string, Record<string, string | number>>;
-    Rules?: typeof MasterCSSRule[];
-    themes?: Record<string, {
-        classes?: Record<string, string>;
-        colors?: Record<string, string | Record<string, string>>;
-    }> | string[];
-    rootSize?: number;
-    validateRule?: (rule: MasterCSSRule, css?: MasterCSS) => boolean;
-    scheme?: {
-        preference?: string;
-        storage?: {
-            sync?: boolean;
-            key?: string;
-        };
+import viewports from './viewports';
+import colors from './colors';
+import selectors from './selectors';
+import semantics from './semantics';
+import animations from './animations';
+import rules from './rules';
+import functions from './functions';
+import fonts from './fonts';
+import { CSSDeclarations } from '../types/css-declarations';
+import type { Rule } from '../rule';
+import type { MasterCSS } from '../core';
+import { CoreLayer, Layer } from '../layer';
+declare const config: Config;
+export { config, viewports, colors, selectors, semantics, rules, fonts, functions, animations };
+type ExtendedValues = {
+    [key: string]: string | number | ExtendedValues;
+};
+export interface RuleConfig {
+    id?: string;
+    match?: RegExp | [string, string[]?];
+    _resolvedMatch?: RegExp;
+    order?: number;
+    separators?: string[];
+    colored?: boolean;
+    numeric?: boolean;
+    unit?: any;
+    native?: boolean;
+    _semantic?: boolean;
+    _declarations?: CSSDeclarations;
+    _propName?: string;
+    layer?: Layer | CoreLayer;
+    values?: Config['values'];
+    analyze?(this: Rule, className: string): [valueToken: string, prefixToken?: string];
+    transform?(this: Rule, value: string): string;
+    declare?(this: Rule, value: string, unit: string): CSSDeclarations;
+    delete?(this: Rule, className: string): void;
+    create?(this: Rule, className: string): void;
+    insert?(this: Rule): void;
+}
+export interface Config {
+    extends?: (Config | {
+        config: Config;
+    })[];
+    classes?: {
+        [key: string]: string | Config['classes'];
+    };
+    colors?: {
+        [key: string]: string | Config['colors'];
+    };
+    viewports?: {
+        [key: string]: number | Config['viewports'];
+    };
+    mediaQueries?: {
+        [key: string]: string | Config['mediaQueries'];
     };
+    selectors?: {
+        [key: string]: string | string[] | Config['selectors'];
+    };
+    semantics?: {
+        [key in keyof typeof semantics]?: CSSDeclarations;
+    } & {
+        [key: string]: CSSDeclarations;
+    };
+    values?: ExtendedValues | ((this: MasterCSS, resolvedValues: Record<string, Record<string, string | number>>) => ExtendedValues);
+    fonts?: {
+        [key: string]: string | string[];
+    } | ((css: MasterCSS) => Config['fonts']);
+    rules?: {
+        [key in keyof typeof rules]?: RuleConfig;
+    } & {
+        [key: string]: RuleConfig;
+    };
+    rootSize?: number;
+    scope?: string;
+    important?: boolean;
+    override?: boolean;
+    functions?: Record<string, {
+        unit?: string;
+        name?: string;
+        colored?: boolean;
+        transform?(this: Rule, value: string): string;
+    }>;
+    animations?: Record<string, {
+        [key in 'from' | 'to']?: CSSDeclarations;
+    } & {
+        [key: string]: CSSDeclarations;
+    }>;
+    themeDriver?: 'class' | 'media' | 'host';
 }

package/dist/config/rules.d.ts

@@ -1,3 +1,268 @@
-import FontWeight from '../rules/font-weight';
-declare const DefaultRules: (typeof FontWeight)[];
-export default DefaultRules;
+import { RuleConfig } from './';
+declare const rules: {
+    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;
+    order: RuleConfig;
+    flexBasis: RuleConfig;
+    flexWrap: RuleConfig;
+    flexGrow: RuleConfig;
+    flexShrink: RuleConfig;
+    flexDirection: RuleConfig;
+    flex: RuleConfig;
+    display: RuleConfig;
+    width: RuleConfig;
+    Height: RuleConfig;
+    minWidth: RuleConfig;
+    minHeight: RuleConfig;
+    box: RuleConfig;
+    minBox: RuleConfig;
+    maxBox: RuleConfig;
+    boxSizing: RuleConfig;
+    boxDecorationBreak: 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;
+    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;
+    gradient: 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;
+    grid: RuleConfig;
+    columnGap: RuleConfig;
+    rowGap: RuleConfig;
+    gap: RuleConfig;
+    layer: RuleConfig;
+    breakInside: RuleConfig;
+    breakBefore: RuleConfig;
+    breakAfter: 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;
+};
+export default rules;

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/{breakpoints.d.ts → viewports.d.ts}

@@ -1,4 +1,5 @@
-declare const defaultBreakpoints: {
+declare const viewports: {
+    '4xs': number;
     '3xs': number;
     '2xs': number;
     xs: number;
@@ -10,4 +11,4 @@ declare const defaultBreakpoints: {
     '3xl': number;
     '4xl': number;
 };
-export default defaultBreakpoints;
+export default 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    rules: {},\n    values: {},\n    semantics: {},\n    viewports: {},\n    mediaQueries: {},\n    animations: {},\n    selectors: {},\n    functions: {}\n}\n";