@master/css 2.0.0-beta.4 → 2.0.0-beta.41

package/README.md

@@ -1,118 +1,132 @@
-<br><br>
+<br>
 <div align="center">
 
 <p align="center">
-    <img src="https://raw.githubusercontent.com/master-co/package/document/images/logo-and-text.svg" alt="logo" width="142">
+    <img src="https://user-images.githubusercontent.com/33840671/201701649-3bb7d698-abec-4d5f-ac30-ccc4d7bafcd4.svg#gh-dark-mode-only" alt="Master CSS" width="100%">
+    <img src="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg#gh-light-mode-only" alt="Master CSS" width="100%">
 </p>
+<p align="center"><!-- package.description -->A Virtual CSS language with enhanced syntax ~15KB<!----></p>
+
 <p align="center">
-    <b><!-- name -->CSS<!----></b>
+    <a aria-label="NPM Version" href="https://www.npmjs.com/package/@master/css#gh-dark-mode-only">
+        <img alt="NPM Version" src="https://img.shields.io/npm/v/@master/css?color=212022&label=&style=for-the-badge"/>
+    </a>
+    <a aria-label="NPM Version" href="https://www.npmjs.com/package/@master/css#gh-light-mode-only">
+        <img alt="NPM Version" src="https://img.shields.io/npm/v/@master/css?color=f6f7f8&label=&style=for-the-badge"/>
+    </a>
+    <a aria-label="License" href="https://github.com/master-co/css/blob/main/LICENSE#gh-dark-mode-only">
+        <img alt="NPM" src="https://img.shields.io/npm/l/@master/css?color=212022&label=%20&style=for-the-badge">
+    </a>
+    <a aria-label="License" href="https://github.com/master-co/css/blob/main/LICENSE#gh-light-mode-only">
+        <img alt="NPM" src="https://img.shields.io/npm/l/@master/css?color=f6f7f8&label=%20&style=for-the-badge">
+    </a>
+    <a aria-label="NPM Package" href="https://www.jsdelivr.com/package/npm/@master/css#gh-dark-mode-only">
+        <img alt="jsDelivr hits (npm scoped)" src="https://img.shields.io/jsdelivr/npm/hm/@master/css?color=212022&label=%20&logo=jsdelivr&style=for-the-badge">
+    </a>
+    <a aria-label="NPM Package" href="https://www.jsdelivr.com/package/npm/@master/css#gh-light-mode-only">
+        <img alt="jsDelivr hits (npm scoped)" src="https://img.shields.io/jsdelivr/npm/hm/@master/css?color=f6f7f8&label=%20&logo=jsdelivr&style=for-the-badge">
+    </a>
+    <a aria-label="NPM Package" href="https://www.npmjs.com/package/@master/css#gh-dark-mode-only">
+        <img alt="npm" src="https://img.shields.io/npm/dm/@master/css?color=212022&label=%20&logo=npm&style=for-the-badge">
+    </a>
+    <a aria-label="NPM Package" href="https://www.npmjs.com/package/@master/css#gh-light-mode-only">
+        <img alt="npm" src="https://img.shields.io/npm/dm/@master/css?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
+    </a>
+    <a aria-label="Discord Community" href="https://discord.gg/sZNKpAAAw6#gh-dark-mode-only">
+        <img alt="Discord" src="https://img.shields.io/discord/917780624314613760?color=212022&label=%20&logo=discord&style=for-the-badge"/>
+    </a>
+    <a aria-label="Discord Community" href="https://discord.gg/sZNKpAAAw6#gh-light-mode-only">
+        <img alt="Discord" src="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge"/>
+    </a>
+    <a aria-label="Follow @mastercorg" href="https://twitter.com/mastercorg#gh-dark-mode-only">
+        <img alt="Twitter" src="https://img.shields.io/static/v1?label=%20&message=twitter&color=212022&logo=twitter&style=for-the-badge">
+    </a>
+    <a aria-label="Follow @mastercorg" href="https://twitter.com/mastercorg#gh-light-mode-only">
+        <img alt="Twitter" src="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
+    </a>
+    <a aria-label="Circle CI" href="https://circleci.com/gh/master-co/workflows/css/tree/main#gh-dark-mode-only">
+        <img alt="CircleCI" src="https://img.shields.io/circleci/build/gh/master-co/css?color=212022&label=%20&logo=circleci&style=for-the-badge">
+    </a>
+    <a aria-label="Circle CI" href="https://circleci.com/gh/master-co/workflows/css/tree/main#gh-light-mode-only">
+        <img alt="CircleCI" src="https://img.shields.io/circleci/build/gh/master-co/css?color=f6f7f8&label=%20&logo=circleci&style=for-the-badge&&logoColor=000">
+    </a>
 </p>
-<p align="center"><!-- package.description -->A Virtual CSS language with enhanced syntax. ~13KB<!----></p>
-
-[![MIT License](https://flat.badgen.net/github/license/master-co/css?color=yellow)](https://github.com/master-co/css/blob/main/LICENSE)
-[![Latest Release](https://flat.badgen.net/npm/v/@master/css?icon=npm&label&color=yellow)](https://www.npmjs.com/package/@master/css)
-[![Bundle Size](https://flat.badgen.net/bundlephobia/minzip/@master/css?icon=packagephobia&label&color=yellow)](https://bundlephobia.com/package/@master/css 'gzip bundle size (including dependencies)')
-[![Package Size](https://flat.badgen.net/badgesize/brotli/https://cdn.jsdelivr.net/npm/@master/css?icon=jsdelivr&label&color=yellow)](https://unpkg.com/@master/css 'brotli package size (without dependencies)')
-[![Documentation](https://flat.badgen.net/badge/icon/Documentation?icon=awesome&label&color=yellow)](https://css.master.co)
-[![Github](https://flat.badgen.net/badge/icon/master-co%2Fcss?icon=github&label&color=yellow)](https://github.com/master-co/css)
-[![Discord](https://flat.badgen.net/badge/icon/discord?icon=discord&label&color=yellow)](https://discord.gg/sZNKpAAAw6)
-[![CI](https://flat.badgen.net/github/status/master-co/css/main/ci/circleci?icon=circleci)](https://circleci.com/gh/master-co/workflows/css/tree/main)
 
 </div>
 
-![image](https://raw.githubusercontent.com/master-co/css-language-service/alpha/images/cover.jpg)
-
-- Visit [css.master.co](https://css.master.co) for full documentation.
-- Browse our [discussion community](https://github.com/master-co/css/discussions).
-- Join our [discord channel](https://discord.gg/sZNKpAAAw6).
-- Follow our [twitter](https://twitter.com/mastercorg).
-
-##### On this page
-
-- [Features](#features)
-- [Why Master CSS](#why-master-css)
-- [Quick Start](#quick-start)
-- [Developer Tools](#developer-tools)
-- [Inspiration](#inspiration)
-- [Related](#related)
-
-# Features
-Let's have a quick overview of the **groundbreaking features** of Master CSS:
-
-- 🔥 A whole new **CSS language** instead of utilities/libraries.
-- 🔓 Write CSS properties, functions, selectors and even media queries directly in `class="..."`.
-- 🧠 Automatically generate corresponding CSS rules based on class names.
-- 💖 With enhanced CSS syntax, you can **build UIs with less code**.
-- ⚡️ Directly use **performant JIT in production**. **~13KB**
-- 🧬 [An enhanced and structured CSS syntax](https://docs.master.co/css/syntax-tutorial) for class names.
-- 🌈 [A forerunner to syntax highlighting](https://docs.master.co/css/why-master-css#a-forerunner-to-syntax-highlighting) for class names.
-- ✨ [Hybrid Rendering](https://docs.master.co/css/hybrid-rendering) that allows you to **pre-generate CSS from HTML on the server side**, and then continue to **use JIT on the client side**.
-- ✨ [Group Styles](https://docs.master.co/css/syntax-tutorial#group-styles) that allows you to extract the same selectors and media query styles and make it short.
-- ✨ [Reactive Styles](https://docs.master.co/css/syntax-tutorial#style-an-element-based-on-target-state) that allows you to style an element based on parent/sibling state.
-
-To learn more, check out the [documentation](https://docs.master.co/css/why-master-css).
-
-# [Why Master CSS](https://docs.master.co/css/why-master-css)
-A brief introduction starts by giving you an understanding of **markup-driven CSS**.
-
-😐 Traditional
-```html
-<style>
-    .home-section {
-        background-color: blue;
-        padding: 2rem;
-        text-align: center;
-    }
-
-    .home-section:hover {
-        background-color: red;
-    }
-
-    @media (min-width: 1024px) {
-        .home-section {
-            padding: 3rem;
-        }
-    }
-</style>
-
-<section class="home-section">...</section>
-```
-🤩 Now, refactor it with a whole new CSS language to make it easier. ↓ 86% code
-```html
-<section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>
-```
-To learn more, check out the [Why Master CSS](https://docs.master.co/css/why-master-css) documentation.
-
-# Quick Start
-This is a quick start guide, check out the [full setup guide](https://docs.master.co/css/setup) to integrate with your build tools and frameworks.
-
-```shell
-npm install @master/css
-```
-```js
-import '@master/css';
-```
-or use a CDN
-```html
-<script src="https://cdn.master.co/css"></script>
-```
-Now, start styling HTML with Master CSS. 🎉
-```html
-<h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>
-```
-To learn more, check out the [Syntax tutorial](https://docs.master.co/css/syntax-tutorial) documentation.
-
-# Developer Tools
-- [Master CSS Language Service](https://marketplace.visualstudio.com/items?itemName=masterco.master-css-language-service) - A Visual Studio Code extension for Master CSS. Provides code-completion and syntax highlighting.
-
-# Inspiration
+## Documentation
+
+Visit [css.master.co](https://css.master.co) to view the full documentation.
+
+## Getting Started
+
+Check out the [guides](https://css.master.co/docs/guides) to get started quickly with Master CSS.
+
+## Ecosystem
+
+<table layout="fixed">
+    <tr>
+        <th width="250px" align="left">Master CSS</th>
+        <th width="800px" align="left">Introduction</th>
+        <th width="250px">Changelog</th>
+    </tr>
+    <tr>
+        <th align="left" colspan="3">Packages</th>
+    </tr>
+    <tr>
+        <th align="left"><a href="https://github.com/master-co/css/tree/beta/packages/css">css</a></th>
+        <td>The core engine of the Master CSS language</td>
+        <td><a href="https://github.com/master-co/css/tree/beta/packages/css/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@master/css?color=212022&label=&style=for-the-badge" alt="Release Notes" valign="middle"/></a></td>
+    </tr>
+    <tr>
+        <th align="left"><a href="https://github.com/master-co/css/tree/beta/packages/compiler">css.compiler</a></th>
+        <td>Ahead-of-time compiler for Master CSS</td>
+        <td><a href="https://github.com/master-co/css/tree/beta/packages/compiler/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@master/css.compiler?color=212022&label=&style=for-the-badge" alt="Release Notes" valign="middle"/></a></td>
+    </tr>
+    <tr>
+        <th align="left"><a href="https://github.com/master-co/css/tree/beta/packages/vite">css.vite</a></th>
+        <td>A vite plugin that integrates with the AOT compilation of Master CSS</td>
+        <td><a href="https://github.com/master-co/css/tree/beta/packages/vite/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@master/css.vite?color=212022&label=&style=for-the-badge" alt="Release Notes" valign="middle"/></a></td>
+    </tr>
+    <tr>
+        <th align="left"><a href="https://github.com/master-co/css/tree/beta/packages/webpack">css.webpack</a></th>
+        <td>A webpack plugin that integrates with the AOT compilation of Master CSS</td>
+        <td><a href="https://github.com/master-co/css/tree/beta/packages/webpack/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@master/css.webpack?color=212022&label=&style=for-the-badge" alt="Release Notes" valign="middle"/></a></td>
+    </tr>
+    <tr>
+        <th align="left"><a href="https://github.com/master-co/css/tree/beta/packages/react">css.react</a></th>
+        <td>React hooks for Master CSS</td>
+        <td><a href="https://github.com/master-co/css/tree/beta/packages/react/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@master/css.react?color=212022&label=&style=for-the-badge" alt="Release Notes" valign="middle"/></a></td>
+    </tr>
+    <tr>
+        <th align="left"><a href="https://github.com/master-co/css/tree/beta/packages/normal.css">normal.css</a></th>
+        <td>Normalize browser's styles</td>
+        <td><a href="https://github.com/master-co/css/tree/beta/packages/normal.css/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@master/normal.css?color=212022&label=&style=for-the-badge" alt="Release Notes" valign="middle"/></a></td>
+    </tr>
+    <tr>
+        <th align="left"><a href="https://github.com/master-co/css/tree/beta/packages/keyframes.css">keyframes.css</a></th>
+        <td>Simple and useful CSS keyframes</td>
+        <td><a href="https://github.com/master-co/css/tree/beta/packages/keyframes.css/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@master/keyframes.css?color=212022&label=&style=for-the-badge" alt="Release Notes" valign="middle"/></a></td>
+    </tr>
+    <tr>
+        <th align="left" colspan="3">Related Packages</th>
+    </tr>
+    <tr>
+        <th align="left"><a href="https://github.com/master-co/style-element/tree/beta/packages/react">style-element.react</a></th>
+        <td>Quickly create reusable React elements driven by class names</td>
+        <td><a href="https://github.com/master-co/css/tree/beta/packages/react/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@master/style-element.react?color=212022&label=&style=for-the-badge" alt="Release Notes" valign="middle"/></a></td>
+    </tr>
+    <tr>
+        <th align="left" colspan="3">Extensions</th>
+    </tr>
+    <tr>
+        <th align="left"><a href="https://github.com/master-co/css-language-service">Language Service<br><sub>Visual Studio Code</sub></a></th>
+        <td>Code completion, syntax highlighting, CSS hover preview, inline color decorators</td>
+        <td><a href="https://github.com/master-co/css-language-service/releases"><img src="https://img.shields.io/github/v/release/master-co/css-language-service?color=212022&label=&style=for-the-badge" alt="Release Notes" valign="middle"/></a></td>
+    </tr>
+</table>
+
+## Inspiration
 Some of our core concepts and designs are inspired by these giants.
-- __Language__ - Master is a language, but it was originally inspired by [ACSS](https://acss.io/)'s concept of atomic classes.
-- __Virtual CSS__ - Difference algorithms, virtual models, etc. are inspired by  [Virtual DOM](https://reactjs.org/docs/faq-internals.html).
-
-# Related
-- [@master/css.react](https://github.com/master-co/css.react) - React hooks for Master CSS
-- [@master/css-compiler](https://github.com/master-co/css-compiler) - Compile Master CSS ahead of time with zero-configuration integration with build tools
-- [@master/normal.css](https://github.com/master-co/normal.css) - Normalize browser's styles. ~1KB
-- [@master/keyframes.css](https://github.com/master-co/keyframes.css) - Simple and useful CSS keyframes. ~0.4KB
-- [@master/style-element.react](https://github.com/master-co/style-element.react) - Quickly create styled React elements with conditional class names. ~800B
+- The concept of enhanced syntax is inspired by [SASS](https://sass-lang.com/) and [Typescript](https://www.typescriptlang.org/).
+- The concept of __Virtual CSS__ is inspired by the [Virtual DOM](https://reactjs.org/docs/faq-internals.html).

package/dist/apis/extend.d.ts

@@ -0,0 +1,5 @@
+type ExpandDeep<T> = T extends Record<string | number | symbol, unknown> ? {
+    [K in keyof T]: ExpandDeep<T[K]>;
+} : T extends Array<infer E> ? Array<ExpandDeep<E>> : T;
+export default function extend<T extends Record<string, any>>(object: T, ...otherObjects: any[]): ExpandDeep<any>;
+export {};

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

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

package/dist/{esm/apis → apis}/render-from-html.d.ts

@@ -1,3 +1,3 @@
 import MasterCSS from '../css';
 import '../polyfills/css-escape';
-export declare function renderFromHTML(html: string, css?: MasterCSS): string;
+export default function renderFromHTML(html: string, css?: MasterCSS): string;

package/dist/{esm/apis → apis}/render-into-html.d.ts

@@ -1,3 +1,3 @@
 import MasterCSS from '../css';
 import '../polyfills/css-escape';
-export declare function renderIntoHTML(html: string, css?: MasterCSS): string;
+export default function renderIntoHTML(html: string, css?: MasterCSS): string;

package/dist/{esm/apis → apis}/render.d.ts

@@ -1,3 +1,3 @@
 import MasterCSS from '../css';
 import '../polyfills/css-escape';
-export declare function render(classes: string[], css?: MasterCSS): string;
+export default function render(classes: string[], css?: MasterCSS): string;

package/dist/{esm/config → config}/breakpoints.d.ts

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

package/dist/{esm/config → config}/colors.d.ts

@@ -1,4 +1,4 @@
-declare const defaultColors: {
+declare const colors: {
     slate: any;
     gray: any;
     brown: any;
@@ -22,4 +22,4 @@ declare const defaultColors: {
     black: string;
     white: string;
 };
-export default defaultColors;
+export default colors;

package/dist/config/index.d.ts

@@ -0,0 +1,45 @@
+import Rules from './rules';
+import Rule from '../rule';
+import MasterCSS from '../css';
+declare const config: Config;
+export default config;
+type Colors = {
+    [key: string]: string | Colors;
+};
+type Breakpoints = {
+    [key: string]: number | Breakpoints;
+};
+type Selectors = {
+    [key: string]: string | string[] | Selectors;
+};
+type Semantics = {
+    [key: string]: string | Record<string, string | number | Semantics>;
+};
+type Values = {
+    [key: string]: string | number | Values;
+};
+export interface Config {
+    classes?: Record<string, string>;
+    colors?: Colors;
+    breakpoints?: Breakpoints;
+    mediaQueries?: Record<string, string>;
+    selectors?: Selectors;
+    semantics?: Semantics;
+    values?: {
+        [id in typeof Rules[number]['id']]?: Values;
+    } & Values;
+    Rules?: typeof Rule[];
+    themes?: Record<string, {
+        classes?: Record<string, string>;
+        colors?: Record<string, string | Record<string, string>>;
+    }> | string[];
+    rootSize?: number;
+    validateRule?: (rule: Rule, css?: MasterCSS) => boolean;
+    scheme?: {
+        preference?: string;
+        storage?: {
+            sync?: boolean;
+            key?: string;
+        };
+    };
+}

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

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

package/dist/{esm/config/rules.js → config/rules.d.ts}

@@ -10,6 +10,7 @@ import LetterSpacing from '../rules/letter-spacing';
 import FontSmoothing from '../rules/font-smoothing';
 import FontStyle from '../rules/font-style';
 import FontVariantNumeric from '../rules/font-variant-numeric';
+import FontFeatureSettings from '../rules/font-feature-settings';
 import LineHeight from '../rules/line-height';
 import ObjectFit from '../rules/object-fit';
 import ObjectPosition from '../rules/object-position';
@@ -85,7 +86,7 @@ import GridRows from '../rules/grid-rows';
 import Gap from '../rules/gap';
 import WordSpacing from '../rules/word-spacing';
 import Variable from '../rules/variable';
-import AspectRadio from '../rules/aspect-radio';
+import AspectRatio from '../rules/aspect-ratio';
 import BoxDecorationBreak from '../rules/box-decoration-break';
 import BreakAfter from '../rules/break-after';
 import BreakBefore from '../rules/break-before';
@@ -191,200 +192,6 @@ import BorderImageWidth from '../rules/border-image-width';
 import BorderImage from '../rules/border-image';
 import Group from '../rules/group';
 import CounterIncrement from '../rules/counter-increment';
-const DefaultRules = [
-    Group,
-    Variable,
-    FontSize,
-    FontWeight,
-    FontFamily,
-    FontSmoothing,
-    FontStyle,
-    FontVariantNumeric,
-    Font,
-    Color,
-    Spacing,
-    Margin,
-    Padding,
-    FlexBasis,
-    FlexWrap,
-    FlexGrow,
-    FlexShrink,
-    FlexDirection,
-    Flex,
-    Display,
-    Width,
-    Height,
-    MinWidth,
-    MinHeight,
-    Contain,
-    Content,
-    CounterIncrement,
-    LetterSpacing,
-    LineHeight,
-    ObjectFit,
-    ObjectPosition,
-    TextAlign,
-    TextDecorationColor,
-    TextDecorationStyle,
-    TextDecorationThickness,
-    TextDecorationLine,
-    TextDecoration,
-    TextUnderlineOffset,
-    TextOverflow,
-    TextOrientation,
-    TextTransform,
-    TextRendering,
-    TextIndent,
-    VerticalAlign,
-    Columns,
-    WhiteSpace,
-    Inset,
-    Lines,
-    MaxHeight,
-    MaxWidth,
-    BoxSizing,
-    Opacity,
-    Visibility,
-    Clear,
-    Float,
-    Isolation,
-    Overflow,
-    OverscrollBehavior,
-    ZIndex,
-    Position,
-    Placement,
-    Cursor,
-    PointerEvents,
-    Resize,
-    TouchAction,
-    WordBreak,
-    WordSpacing,
-    UserDrag,
-    UserSelect,
-    TextShadow,
-    TextSize,
-    TextFillColor,
-    TextStrokeWidth,
-    TextStrokeColor,
-    TextStroke,
-    BoxShadow,
-    TableLayout,
-    TransformBox,
-    TransformStyle,
-    TransformOrigin,
-    Transform,
-    TransitionProperty,
-    TransitionTimingFunction,
-    TransitionDuration,
-    TransitionDelay,
-    Transition,
-    AnimationDelay,
-    AnimationDirection,
-    AnimationDuration,
-    AnimationFillMode,
-    AnimationIterationCount,
-    AnimationName,
-    AnimationPlayState,
-    AnimationTimingFunction,
-    Animation,
-    BorderColor,
-    BorderRadius,
-    BorderStyle,
-    BorderWidth,
-    BorderCollapse,
-    BorderSpacing,
-    BorderImageOutset,
-    BorderImageRepeat,
-    BorderImageSlice,
-    BorderImageSource,
-    BorderImageWidth,
-    BorderImage,
-    Border,
-    BackgroundAttachment,
-    BackgroundBlendMode,
-    BackgroundClip,
-    BackgroundColor,
-    BackgroundOrigin,
-    BackgroundPosition,
-    BackgroundRepeat,
-    BackgroundSize,
-    BackgroundImage,
-    Background,
-    MixBlendMode,
-    BackdropFilter,
-    Filter,
-    Fill,
-    StrokeDasharray,
-    StrokeDashoffset,
-    StrokeWidth,
-    Stroke,
-    X,
-    Y,
-    Cx,
-    Cy,
-    Rx,
-    Ry,
-    GridColumnStart,
-    GridColumnEnd,
-    GridColumn,
-    GridColumns,
-    GridRowStart,
-    GridRowEnd,
-    GridRow,
-    GridRows,
-    GridAutoColumns,
-    GridAutoFlow,
-    GridAutoRows,
-    GridTemplateAreas,
-    GridTemplateColumns,
-    GridTemplateRows,
-    GridTemplate,
-    GridArea,
-    Grid,
-    Gap,
-    Order,
-    BreakInside,
-    BreakBefore,
-    BreakAfter,
-    BoxDecorationBreak,
-    AspectRadio,
-    ColumnSpan,
-    AlignContent,
-    AlignItems,
-    AlignSelf,
-    JustifyContent,
-    JustifyItems,
-    JustifySelf,
-    PlaceContent,
-    PlaceItems,
-    PlaceSelf,
-    ListStylePosition,
-    ListStyleType,
-    ListStyleImage,
-    ListStyle,
-    OutlineColor,
-    OutlineOffset,
-    OutlineStyle,
-    OutlineWidth,
-    Outline,
-    AccentColor,
-    Appearance,
-    CaretColor,
-    ScrollBehavior,
-    ScrollMargin,
-    ScrollPadding,
-    ScrollSnapAlign,
-    ScrollSnapStop,
-    ScrollSnapType,
-    WillChange,
-    WritingMode,
-    Direction,
-    ShapeOutside,
-    ShapeMargin,
-    ShapeImageThreshold,
-    ClipPath,
-    Quotes,
-    MaskImage
-];
-export default DefaultRules;
-//# sourceMappingURL=rules.js.map
+import counterReset from '../rules/counter-reset';
+declare const Rules: (typeof FontWeight | typeof FontFamily | typeof FontSize | typeof Spacing | typeof Width | typeof Height | typeof MinWidth | typeof MinHeight | typeof LetterSpacing | typeof FontSmoothing | typeof FontStyle | typeof FontVariantNumeric | typeof FontFeatureSettings | typeof LineHeight | typeof ObjectFit | typeof ObjectPosition | typeof TextAlign | typeof TextDecoration | typeof TextTransform | typeof VerticalAlign | typeof Lines | typeof TransformOrigin | typeof TransformStyle | typeof TransformBox | typeof Transform | typeof Transition | typeof TransitionDelay | typeof TransitionDuration | typeof TransitionProperty | typeof TransitionTimingFunction | typeof MaxHeight | typeof MaxWidth | typeof Display | typeof BoxSizing | typeof Opacity | typeof Visibility | typeof Clear | typeof Float | typeof Isolation | typeof Overflow | typeof OverscrollBehavior | typeof ZIndex | typeof AnimationDelay | typeof AnimationDirection | typeof AnimationFillMode | typeof AnimationIterationCount | typeof AnimationName | typeof AnimationPlayState | typeof AnimationTimingFunction | typeof Animation | typeof BorderColor | typeof BorderRadius | typeof BorderStyle | typeof BorderWidth | typeof Border | typeof BackgroundAttachment | typeof BackgroundBlendMode | typeof BackgroundClip | typeof BackgroundColor | typeof BackgroundOrigin | typeof BackgroundPosition | typeof BackgroundRepeat | typeof BackgroundSize | typeof BackgroundImage | typeof Background | typeof MixBlendMode | typeof Position | typeof Placement | typeof BackdropFilter | typeof Fill | typeof Stroke | typeof StrokeWidth | typeof Filter | typeof Cursor | typeof PointerEvents | typeof Resize | typeof TouchAction | typeof UserDrag | typeof UserSelect | typeof BoxShadow | typeof TextShadow | typeof TextSize | typeof WordBreak | typeof GridColumns | typeof GridRows | typeof Gap | typeof WordSpacing | typeof Variable | typeof AspectRatio | typeof BoxDecorationBreak | typeof BreakAfter | typeof BreakBefore | typeof BreakInside | typeof FlexShrink | typeof FlexDirection | typeof FlexGrow | typeof FlexWrap | typeof FlexBasis | typeof Flex | typeof Order | typeof GridColumn | typeof ColumnSpan | typeof GridRow | typeof Color | typeof AlignContent | typeof AlignItems | typeof AlignSelf | typeof GridAutoColumns | typeof GridAutoFlow | typeof GridAutoRows | typeof JustifyContent | typeof JustifyItems | typeof JustifySelf | typeof PlaceContent | typeof PlaceItems | typeof PlaceSelf | typeof Padding | typeof Margin | typeof TextOverflow | typeof ListStylePosition | typeof ListStyleType | typeof ListStyle | typeof TextDecorationColor | typeof TextDecorationStyle | typeof TextDecorationThickness | typeof TextIndent | typeof Content | typeof OutlineColor | typeof OutlineOffset | typeof OutlineStyle | typeof OutlineWidth | typeof Outline | typeof BorderCollapse | typeof BorderSpacing | typeof TableLayout | typeof AccentColor | typeof Appearance | typeof CaretColor | typeof ScrollBehavior | typeof ScrollMargin | typeof ScrollPadding | typeof ScrollSnapAlign | typeof ScrollSnapStop | typeof ScrollSnapType | typeof WillChange | typeof TextUnderlineOffset | typeof Inset | typeof Columns | typeof WhiteSpace | typeof TextOrientation | typeof WritingMode | typeof Contain | typeof AnimationDuration | typeof TextRendering | typeof Direction | typeof TextDecorationLine | typeof GridColumnStart | typeof ListStyleImage | typeof ShapeOutside | typeof ShapeMargin | typeof ShapeImageThreshold | typeof ClipPath | typeof Grid | typeof Font | typeof Quotes | typeof GridTemplate | typeof GridRowStart | typeof GridTemplateAreas | typeof GridTemplateColumns | typeof GridTemplateRows | typeof GridArea | typeof GridColumnEnd | typeof GridRowEnd | typeof MaskImage | typeof TextFillColor | typeof TextStroke | typeof TextStrokeWidth | typeof TextStrokeColor | typeof StrokeDasharray | typeof StrokeDashoffset | typeof X | typeof Y | typeof Cx | typeof Cy | typeof Rx | typeof Ry | typeof BorderImageOutset | typeof BorderImageRepeat | typeof BorderImageSlice | typeof BorderImageSource | typeof BorderImageWidth | typeof BorderImage | typeof Group | typeof CounterIncrement | typeof counterReset)[];
+export default Rules;

package/dist/config/scheme.d.ts

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

package/dist/{esm/config → config}/selectors.d.ts

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

package/dist/{esm/config → config}/semantics.d.ts

@@ -1,4 +1,4 @@
-declare const defaultSemantics: {
+declare const semantics: {
     square: string;
     video: string;
     rounded: string;
@@ -79,4 +79,4 @@ declare const defaultSemantics: {
         overflow: string;
     };
 };
-export default defaultSemantics;
+export default semantics;

package/dist/config/themes.d.ts

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

package/dist/{esm/config → config}/values.d.ts

@@ -1,4 +1,4 @@
-declare const defaultValues: {
+declare const values: {
     BackgroundClip: {
         content: string;
         border: string;
@@ -123,4 +123,4 @@ declare const defaultValues: {
         min: string;
     };
 };
-export default defaultValues;
+export default values;