@master/css 2.0.0-beta.2 → 2.0.0-beta.200

package/README.md

@@ -1,118 +1,122 @@
-<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">
+    <a href="https://css.master.co">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/33840671/201701649-3bb7d698-abec-4d5f-ac30-ccc4d7bafcd4.svg">
+            <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg">
+            <img alt="Master CSS" src="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg" width="100%">
+        </picture>
+    </a>
 </p>
+<p align="center">A markup-driven CSS language with enhanced syntax</p>
+
 <p align="center">
-    <b><!-- name -->CSS<!----></b>
+    <a aria-label="GitHub release (latest by date including pre-releases)" href="https://github.com/master-co/css/releases">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=212022&label=&style=for-the-badge&logo=github&logoColor=fff">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github&logoColor=%23000">
+            <img alt="NPM Version" src="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github">
+        </picture>
+    </a>
+    <a aria-label="NPM Package" href="https://www.npmjs.com/package/@master/css">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dm/@master/css?color=212022&label=%20&logo=npm&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dm/@master/css?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
+            <img alt="NPM package ( download / month )" src="https://img.shields.io/npm/dm/@master/css?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
+        </picture>
+    </a>
+    <a aria-label="JSDelivr" href="https://www.jsdelivr.com/package/npm/@master/css">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/jsdelivr/npm/hm/@master/css?color=212022&label=%20&logo=jsdelivr&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/jsdelivr/npm/hm/@master/css?color=f6f7f8&label=%20&logo=jsdelivr&style=for-the-badge">
+            <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">
+        </picture>
+    </a>
+    <a aria-label="Discord Community" href="https://discord.gg/sZNKpAAAw6">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/discord/917780624314613760?color=212022&label=%20&logo=discord&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge">
+            <img alt="Discord online" src="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge">
+        </picture>
+    </a>
+    <a aria-label="Follow @mastercorg" href="https://twitter.com/mastercorg">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/static/v1?label=%20&message=twitter&color=212022&logo=twitter&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
+            <img alt="Follow @mastercorg" src="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
+        </picture>
+    </a>
+    <a aria-label="Github Actions" href="https://github.com/1aron/repo/actions/workflows/release.yml">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=beta&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=beta&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+            <img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=beta&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+        </picture>
+    </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
-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
+## Documentation
+Visit [beta.css.master.co](https://beta.css.master.co) to view the full documentation
+
+## Getting Started
+Check out the [official guides](https://beta.css.master.co/docs) to get started with Master CSS, or walk through the [examples](https://github.com/master-co/css/tree/beta/examples) for a quick overview of integrating with your framework.
+
+## Rendering Modes
+Master CSS provides various [rendering modes](https://beta.css.master.co/docs/rendering-modes), allowing you to choose according to the characteristics and needs of different projects.
+
+- [Progressive Rendering](https://beta.css.master.co/docs/rendering-modes/progressive-rendering) - Scan the requested HTML on the server side, generate CSS rules, and enable runtime engine on the browser side
+- [Runtime Rendering](https://beta.css.master.co/docs/rendering-modes/runtime-rendering) - Observe the DOM tree, manipulate CSS rules according to the changed class name, and synchronize to the running style sheet at runtime
+- [Static Extraction](https://beta.css.master.co/docs/rendering-modes/static-extraction) - Scan source files for class names at build time, extract class names, and generate CSS files/virtual modules, then import them in the entry file
+
+## Ecosystem
+We've built various Master CSS core functionality/integration packages:
+
+- [CSS](https://github.com/master-co/css/tree/beta/packages/css) - The core of Master CSS, including the runtime engine
+
+##### Frameworks
+- [React](https://github.com/master-co/css/tree/beta/packages/react) - Integrate Master CSS the React way
+- [Svelte](https://github.com/master-co/css/tree/beta/packages/svelte) - Integrate Master CSS the Svelte way
+- [Vue](https://github.com/master-co/css/tree/beta/packages/vue) - Integrate Master CSS the Vue.js way
+
+##### Progressive Rendering
+- [Renderer](https://github.com/master-co/css/tree/beta/packages/renderer) - Pre-renders and injects HTML-required CSS
+- [Nitro Server](https://github.com/master-co/css/tree/beta/packages/server.nitro) - Integrate Master CSS Pre-rendering the Nitro way
+
+##### Static Extraction
+- [Extractor](https://github.com/master-co/css/tree/beta/packages/extractor) - Master CSS static extractor for various raw text extraction.
+- [Vite](https://github.com/master-co/css/tree/beta/packages/extractor.vite) - Integrate Master CSS Static Extraction in Vite way
+- [Webpack](https://github.com/master-co/css/tree/beta/packages/extractor.webpack) - Integrate Master CSS Static Extraction in Webpack way
+
+##### Validation
+- [Validator](https://github.com/master-co/css/tree/beta/packages/validator) for Master CSS class syntax
+
+##### Language
+- [Server](https://github.com/master-co/css/tree/beta/packages/language-server) - The core of the Master CSS language server
+- [Service](https://github.com/master-co/css/tree/beta/packages/language-service) - The core of the Master CSS language service
+- [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=masterco.master-css-language-service) - Master CSS Language Service for Visual Studio Code Extension
+
+##### Others
+- [Normal CSS](https://github.com/master-co/css/tree/beta/packages/normal.css) - Normalize the browser's styles
+- [Theme Service](https://github.com/master-co/css/tree/beta/packages/theme-service) - A CSS theme-switching service for Master CSS
+- [🚧 Class Variant](https://github.com/master-co/css/tree/beta/packages/class-variant) - Create reusable, extensible, and customizable style class variants
+- 🚧 Resolve Class - Conditionally apply classes and trim it to a non-wrap string
+
+## Community
+The Master CSS community can be found here:
+
+- [Discuss on GitHub](https://github.com/master-co/css/discussions) - Ask questions, voice ideas, and do any other discussion
+- [Join our Discord Server](https://discord.com/invite/sZNKpAAAw6) - Casually chat with other people using the language <sup><sub>✓ 中文</sub></sup>
+
+<sub>Our [《 Code of Conduct 》](https://github.com/master-co/css/blob/main/CODE_OF_CONDUCT.md) applies to all Master CSS community channels.</sub>
+
+## Contributing
+Please see our [CONTRIBUTING](https://github.com/master-co/css/blob/beta/.github/CONTRIBUTING.md) for workflow.
+
+## Inspiration
+Some of the core concepts and designs are inspired by these giants.
+- 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/bin/index.bundle.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+var h=Object.create;var d=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var O=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of _(o))!E.call(e,s)&&s!==t&&d(e,s,{get:()=>o[s],enumerable:!(r=C(o,s))||r.enumerable});return e};var p=(e,o,t)=>(t=e!=null?h(x(e)):{},O(o||!e||!e.__esModule?d(t,"default",{value:e,enumerable:!0}):t,e));var T=require("commander"),m=p(require("path")),a=p(require("fs"));var S=`/** @type {import('@master/css').Config} */
+export default {
+    styles: {},
+    rules: {},
+    variables: {},
+    semantics: {},
+    mediaQueries: {},
+    animations: {},
+    selectors: {},
+    functions: {}
+}
+`;var g=`/** @type {import('@master/css').Config} */
+module.exports = {
+    styles: {},
+    rules: {},
+    variables: {},
+    semantics: {},
+    mediaQueries: {},
+    animations: {},
+    selectors: {},
+    functions: {}
+}
+`;var y=`import type { Config } from '@master/css'
+
+export default {
+    styles: {},
+    rules: {},
+    variables: {},
+    semantics: {},
+    mediaQueries: {},
+    animations: {},
+    selectors: {},
+    functions: {}
+} as Config
+`;var n=p(require("@techor/log")),l=require("@techor/fs"),{version:v,name:j,description:F}=(0,l.readJSONFileSync)(m.default.resolve(__dirname,"../../package.json")),c=new T.Command;c.name(j).description(F).version(v||"0.0.0");c.command("init").description("Initialize definition files for Master CSS").option("-o, --override","Override existing definition file").option("--esm","ES Module .mjs").option("--ts","TypeScript .ts").option("--cjs","CommonJS .js").action(async function(e){let{esm:o,ts:t,cjs:r}=e;if(!o&&!t&&!r)if(a.default.existsSync("tsconfig.json"))t=!0;else{let{type:i}=(0,l.readJSONFileSync)("./package.json")||{};i==="module"?o=!0:r=!0}let s=(i,f)=>{let u=a.default.existsSync(m.default.join(process.cwd(),i));u?u&&e.override?(a.default.writeFileSync(i,f),n.default.ok`**${i}** file is overridden`):n.default.x`**${i}** file already exists`:(a.default.writeFileSync(i,f),n.default.ok`**${i}** file is created`)};o&&s("master.css.mjs",S),t&&s("master.css.ts",y),r&&s("master.css.js",g)});c.command("render").description("Scans HTML and injects generated CSS rules").argument("<source paths>","The path in glob patterns of the source of the HTML file").option("-c --config <path>","The source path of the Master CSS configuration","master.css.*").option("-a --analyze","Analyze injected CSS and HTML size ( brotli ) without writing to file").action(async function(e,o){try{await require("@master/css-renderer/actions/main")(e,o)}catch(t){t.code==="ERR_MODULE_NOT_FOUND"?n.default.i`Please run **npm** **install** **@master/css-renderer** first`:console.error(t)}});c.command("extract").argument("[source paths]","The glob pattern path to extract sources").option("-w, --watch","Watch file changed and generate CSS rules.").option("-o, --output <path>","Specify your CSS file output path").option("-v, --verbose","Verbose logging 0~N","1").option("--options <path>","Specify your extractor options sources","master.css-extractor.*").action(async function(e,o){try{await require("@master/css-extractor/actions/main")(e,o)}catch(t){t.code==="ERR_MODULE_NOT_FOUND"?n.default.i`Please run **npm** **install** **@master/css-extractor** first`:console.error(t)}});c.parse();

package/dist/bin/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/config/animations.d.ts

@@ -0,0 +1,110 @@
+declare const animations: {
+    fade: {
+        '0%': {
+            opacity: number;
+        };
+        to: {
+            opacity: number;
+        };
+    };
+    flash: {
+        '0%,50%,to': {
+            opacity: number;
+        };
+        '25%,75%': {
+            opacity: number;
+        };
+    };
+    float: {
+        '0%': {
+            transform: string;
+        };
+        '50%': {
+            transform: string;
+        };
+        to: {
+            transform: string;
+        };
+    };
+    heart: {
+        '0%': {
+            transform: string;
+        };
+        '14%': {
+            transform: string;
+        };
+        '28%': {
+            transform: string;
+        };
+        '42%': {
+            transform: string;
+        };
+        '70%': {
+            transform: string;
+        };
+    };
+    jump: {
+        '0%,to': {
+            transform: string;
+            'animation-timing-function': string;
+        };
+        '50%': {
+            transform: string;
+            'animation-timing-function': string;
+        };
+    };
+    ping: {
+        '75%,to': {
+            transform: string;
+            opacity: number;
+        };
+    };
+    pulse: {
+        '0%': {
+            transform: string;
+        };
+        '50%': {
+            transform: string;
+        };
+        to: {
+            transform: string;
+        };
+    };
+    rotate: {
+        '0%': {
+            transform: string;
+        };
+        to: {
+            transform: string;
+        };
+    };
+    shake: {
+        '0%': {
+            transform: string;
+        };
+        '6.5%': {
+            transform: string;
+        };
+        '18.5%': {
+            transform: string;
+        };
+        '31.5%': {
+            transform: string;
+        };
+        '43.5%': {
+            transform: string;
+        };
+        '50%': {
+            transform: string;
+        };
+    };
+    zoom: {
+        '0%': {
+            transform: string;
+        };
+        to: {
+            transform: string;
+        };
+    };
+};
+export default animations;

package/dist/config/functions.d.ts

@@ -0,0 +1,130 @@
+import type { FunctionDefinition } from './';
+declare const functions: {
+    $: {
+        colored: boolean;
+        transform(value: any): {
+            type: string;
+            name: string;
+            fallback: string;
+        }[];
+    };
+    calc: FunctionDefinition;
+    translate: {
+        unit: string;
+    };
+    translateX: {
+        unit: string;
+    };
+    translateY: {
+        unit: string;
+    };
+    translateZ: {
+        unit: string;
+    };
+    translate3d: {
+        unit: string;
+    };
+    skew: {
+        unit: string;
+    };
+    skewX: {
+        unit: string;
+    };
+    skewY: {
+        unit: string;
+    };
+    skewZ: {
+        unit: string;
+    };
+    skew3d: {
+        unit: string;
+    };
+    rotate: {
+        unit: string;
+    };
+    rotateX: {
+        unit: string;
+    };
+    rotateY: {
+        unit: string;
+    };
+    rotateZ: {
+        unit: string;
+    };
+    rotate3d: {
+        unit: string;
+    };
+    blur: {
+        unit: string;
+    };
+    'drop-shadow': {
+        unit: string;
+    };
+    'hue-rotate': {
+        unit: string;
+    };
+    rgb: {
+        unit: string;
+    };
+    rgba: {
+        unit: string;
+    };
+    hsl: {
+        unit: string;
+    };
+    hsla: {
+        unit: string;
+    };
+    color: {
+        unit: string;
+        colored: boolean;
+    };
+    'color-contrast': {
+        unit: string;
+        colored: boolean;
+    };
+    'color-mix': {
+        unit: string;
+        colored: boolean;
+    };
+    hwb: {
+        unit: string;
+    };
+    lab: {
+        unit: string;
+    };
+    lch: {
+        unit: string;
+    };
+    oklab: {
+        unit: string;
+    };
+    oklch: {
+        unit: string;
+    };
+    clamp: {
+        unit: string;
+    };
+    repeat: {
+        unit: string;
+    };
+    'linear-gradient': {
+        colored: boolean;
+    };
+    'radial-gradient': {
+        colored: boolean;
+    };
+    'conic-gradient': {
+        colored: boolean;
+    };
+    'repeating-linear-gradient': {
+        colored: boolean;
+    };
+    'repeating-radial-gradient': {
+        colored: boolean;
+    };
+    'repeating-conic-gradient': {
+        colored: boolean;
+    };
+};
+export default functions;

package/dist/config/index.d.ts

@@ -0,0 +1,73 @@
+import mediaQueries from './media-queries';
+import selectors from './selectors';
+import semantics from './semantics';
+import animations from './animations';
+import variables from './variables';
+import rules from './rules';
+import functions from './functions';
+import { CSSDeclarations } from '../types/css-declarations';
+import type { Rule, RuleDefinition, ValueComponent } from '../rule';
+declare const config: Config;
+export { config, mediaQueries, selectors, semantics, rules, functions, animations, variables };
+export type VariableValue = number | string | Array<number | string>;
+export type VariableDefinition = {
+    [key in '' | `@${string}`]?: VariableValue;
+} & {
+    [key: string]: VariableValue | VariableDefinition;
+};
+export type AnimationDefinition = {
+    [key in 'from' | 'to']?: CSSDeclarations;
+} & {
+    [key: string]: CSSDeclarations;
+};
+export type AnimationDefinitions = {
+    [key: string]: AnimationDefinition;
+};
+export type SelectorDefinitions = {
+    [key: string]: string | string[] | SelectorDefinitions;
+};
+export type MediaQueryDefinitions = {
+    [key: string]: number | string | MediaQueryDefinitions;
+};
+export type StyleDefinitions = {
+    [key: string]: string | StyleDefinitions;
+};
+export type RuleDefinitions = {
+    [key in keyof typeof rules | string]?: RuleDefinition;
+};
+export type VariableDefinitions = {
+    [key in keyof typeof rules]?: VariableDefinition;
+} & {
+    [key: string]: VariableDefinition | VariableValue;
+};
+export type SemanticDefinitions = {
+    [key in keyof typeof semantics]?: CSSDeclarations;
+} & {
+    [key: string]: CSSDeclarations;
+};
+export interface FunctionDefinition {
+    unit?: string;
+    colored?: boolean;
+    transform?(this: Rule, value: string): string | ValueComponent[];
+}
+export type FunctionDefinitions = {
+    [key: string]: FunctionDefinition;
+};
+export interface Config {
+    extends?: (Config | {
+        config: Config;
+    })[];
+    styles?: StyleDefinitions;
+    mediaQueries?: MediaQueryDefinitions;
+    selectors?: SelectorDefinitions;
+    semantics?: SemanticDefinitions;
+    variables?: VariableDefinitions;
+    rules?: RuleDefinitions;
+    rootSize?: number;
+    scope?: string;
+    important?: boolean;
+    override?: boolean;
+    functions?: FunctionDefinitions;
+    animations?: AnimationDefinitions;
+    themeDriver?: 'class' | 'media' | 'host';
+}

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

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