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

package/README.md

@@ -10,7 +10,7 @@
         </picture>
     </a>
 </p>
-<p align="center"><!-- package.description -->A Virtual CSS language with enhanced syntax ~15KB<!----></p>
+<p align="center">A markup-driven CSS language with enhanced syntax</p>
 
 <p align="center">
     <a aria-label="GitHub release (latest by date including pre-releases)" href="https://github.com/master-co/css/releases">
@@ -50,9 +50,9 @@
     </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">
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=rc&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=rc&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=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
         </picture>
     </a>
 </p>
@@ -60,31 +60,49 @@
 </div>
 
 ## Documentation
-Visit [css.master.co](https://css.master.co) to view the full documentation
+Visit [rc.css.master.co](https://rc.css.master.co) to view the full documentation
 
 ## Getting Started
-Check out the [guides](https://css.master.co/docs/guides) to get started with Master CSS
+Check out the [official guides](https://rc.css.master.co/docs) to get started with Master CSS, or walk through the [examples](https://github.com/master-co/css/tree/rc/examples) for a quick overview of integrating with your framework.
 
-## Ecosystem
-We've built various integrations and tools around Master CSS:
+## Rendering Modes
+Master CSS provides various [rendering modes](https://rc.css.master.co/docs/rendering-modes), allowing you to choose according to the characteristics and needs of different projects.
+
+- [Progressive Rendering](https://rc.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://rc.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://rc.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
 
-##### Build Tools
+## Ecosystem
+We've built various Master CSS core functionality/integration packages:
 
-- [Vite Plugin](https://github.com/master-co/css/tree/beta/packages/vite) - A vite plugin for integrating Master CSS AOT compilation
-- [Webpack Plugin](https://github.com/master-co/css/tree/beta/packages/webpack) - A webpack plugin for integrating Master CSS AOT compilation
-- [Compiler](https://github.com/master-co/css/tree/beta/packages/compiler) - The ahead-of-time compiler of Master CSS
+- [CSS](https://github.com/master-co/css/tree/rc/packages/css) - The core of Master CSS, including the runtime engine
 
 ##### Frameworks
-- [React](https://github.com/master-co/css/tree/beta/packages/react) - React hooks for Master CSS
-- [Style Element](https://github.com/master-co/style-element) <sub><sup>React, Vue, ...</sup></sub> - Create reusable style elements using class names in one-linear.
+- [React](https://github.com/master-co/css/tree/rc/packages/react) - Integrate Master CSS the React way
+- [Svelte](https://github.com/master-co/css/tree/rc/packages/svelte) - Integrate Master CSS the Svelte way
+- [Vue](https://github.com/master-co/css/tree/rc/packages/vue) - Integrate Master CSS the Vue.js way
+
+##### Progressive Rendering
+- [Server](https://github.com/master-co/css/tree/rc/packages/server) - Generate Master CSS text from markup on the server
+- [Renderer](https://github.com/master-co/css/tree/rc/packages/renderer) - Pre-renders and injects HTML-required CSS
+
+##### Static Extraction
+- [Extractor](https://github.com/master-co/css/tree/rc/packages/extractor) - Master CSS static extractor for various raw text extraction.
+- [Vite](https://github.com/master-co/css/tree/rc/packages/extractor.vite) - Integrate Master CSS Static Extraction in Vite way
+- [Webpack](https://github.com/master-co/css/tree/rc/packages/extractor.webpack) - Integrate Master CSS Static Extraction in Webpack way
 
-##### Native Plugins
+##### Validation
+- [Validator](https://github.com/master-co/css/tree/rc/packages/validator) for Master CSS class syntax
 
-- [Normal CSS](https://github.com/master-co/css/tree/beta/packages/normal.css) - Normalize the browser's styles
-- [Keyframes CSS](https://github.com/master-co/css/tree/beta/packages/keyframes.css) - Simple and useful CSS keyframes
+##### Language
+- [Server](https://github.com/master-co/css/tree/rc/packages/language-server) - The core of the Master CSS language server
+- [Service](https://github.com/master-co/css/tree/rc/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
 
-##### Extensions
-- [Language Service](https://github.com/master-co/css/tree/beta/packages/language-service) <sub><sup>Visual Studio Code</sup></sub> - Includes code completion, syntax highlighting, CSS hover preview, and inline color decorators
+##### Others
+- [Normal CSS](https://rc.css.master.co/docs/global-styles) - Normalize the browser's styles
+- [Theme Service](https://rc.css.master.co/docs/theme-service) - A CSS theme-switching service for Master CSS
+- [Class Variant](https://rc.css.master.co/docs/class-variant) - Create reusable, extensible, and customizable style class variants
 
 ## Community
 The Master CSS community can be found here:
@@ -95,7 +113,7 @@ The Master CSS community can be found here:
 <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.md](https://github.com/master-co/css/blob/beta/.github/CONTRIBUTING.md) for workflow.
+Please see our [CONTRIBUTING](https://github.com/master-co/css/blob/rc/.github/CONTRIBUTING.md) for workflow.
 
 ## Inspiration
 Some of the core concepts and designs are inspired by these giants.

package/dist/bin/index.bundle.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+"use strict";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 y=`/** @type {import('@master/css').Config} */
+module.exports = {
+    styles: {},
+    rules: {},
+    variables: {},
+    semantics: {},
+    mediaQueries: {},
+    animations: {},
+    selectors: {},
+    functions: {}
+}
+`;var g=`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",g),r&&s("master.css.js",y)});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,3 @@
+import type { FunctionDefinitions } from './';
+declare const functions: FunctionDefinitions;
+export default functions;

package/dist/config/index.d.ts

@@ -1,49 +1,68 @@
-import Rules from './rules';
-import Rule from '../rule';
+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 type { PropertiesHyphen } from 'csstype';
+import type { Rule, RuleDefinition, ValueComponent } from '../rule';
 declare const config: Config;
-export default config;
-type Classes = {
-    [key: string]: string | Classes;
+export { config, mediaQueries, selectors, semantics, rules, functions, animations, variables };
+export type VariableValue = number | string | Array<number | string>;
+export type VariableDefinition = {
+    [key in '' | `@${string}` | string]?: VariableValue | VariableDefinition;
 };
-type Colors = {
-    [key: string]: string | Colors;
+export type CSSKeyframes = {
+    [key in 'from' | 'to' | string]: PropertiesHyphen;
 };
-type Breakpoints = {
-    [key: string]: number | Breakpoints;
+export type AnimationDefinitions = {
+    [key: string]: CSSKeyframes;
 };
-type MediaQueries = {
-    [key: string]: string | MediaQueries;
+export type SelectorDefinitions = {
+    [key: string]: string | string[] | SelectorDefinitions;
 };
-type Selectors = {
-    [key: string]: string | string[] | Selectors;
+export type MediaQueryDefinitions = {
+    [key: string]: number | string | MediaQueryDefinitions;
 };
-type Semantics = {
-    [key: string]: string | number | Record<string, string | number | Semantics>;
+export type StyleDefinitions = {
+    [key: string]: string | StyleDefinitions;
 };
-type Values = {
-    [key: string]: string | number | Values;
+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]?: PropertiesHyphen;
+} & {
+    [key: string]: PropertiesHyphen;
+};
+export interface FunctionDefinition {
+    unit?: string;
+    colored?: boolean;
+    transform?(this: Rule, value: string, bypassVariableNames: string[]): string | ValueComponent[];
+}
+export type FunctionDefinitions = {
+    [key: string]: FunctionDefinition;
 };
 export interface Config {
-    classes?: Classes;
-    colors?: Colors;
-    breakpoints?: Breakpoints;
-    mediaQueries?: MediaQueries;
-    selectors?: Selectors;
-    semantics?: Semantics;
-    values?: {
-        [id in typeof Rules[number]['id']]?: Values;
-    } & Values;
-    Rules?: typeof Rule[];
-    themes?: Record<string, {
-        classes?: Classes;
-        colors?: Colors;
-    }> | string[];
+    extends?: (Config | any)[];
+    styles?: StyleDefinitions;
+    mediaQueries?: MediaQueryDefinitions;
+    selectors?: SelectorDefinitions;
+    semantics?: SemanticDefinitions;
+    variables?: VariableDefinitions;
+    rules?: RuleDefinitions;
     rootSize?: number;
-    scheme?: {
-        preference?: string;
-        storage?: {
-            sync?: boolean;
-            key?: string;
-        };
-    };
+    baseUnit?: number;
+    scope?: string;
+    important?: boolean;
+    override?: boolean;
+    functions?: FunctionDefinitions;
+    animations?: AnimationDefinitions;
+    themeDriver?: 'class' | 'media' | 'host';
 }

package/dist/config/media-queries.d.ts

@@ -0,0 +1 @@
+export { default } from '../tokens/screen-sizes';