@master/css 2.0.0-rc.8 → 2.0.0-rc.80

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) Aoyue Design LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -10,7 +10,7 @@
         </picture>
     </a>
 </p>
-<p align="center">A markup-driven CSS language with enhanced syntax</p>
+<p align="center">The CSS language and framework for rapidly building modern and high-performance websites</p>
 
 <p align="center">
     <a aria-label="GitHub release (latest by date including pre-releases)" href="https://github.com/master-co/css/releases">
@@ -48,61 +48,20 @@
             <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">
+    <a aria-label="Github Actions" href="https://github.com/master-co/css/actions/workflows/ci-release.yml">
         <picture>
-            <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">
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/ci-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/ci-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/ci-release.yml?branch=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
         </picture>
     </a>
 </p>
 
 </div>
 
-## Documentation
-Visit [rc.css.master.co](https://rc.css.master.co) to view the full documentation
+## Getting started
 
-## Getting Started
-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.
-
-## 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
-
-## Ecosystem
-We've built various Master CSS core functionality/integration packages:
-
-- [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/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
-
-##### Validation
-- [Validator](https://github.com/master-co/css/tree/rc/packages/validator) for Master CSS class syntax
-
-##### 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
-
-##### 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
+Read the [installation guide](https://rc.css.master.co/guide/installation) to set up Master CSS for an application.
 
 ## Community
 The Master CSS community can be found here:

package/dist/index.d.ts

@@ -1,7 +1,2 @@
-export { MasterCSS, MasterCSS as default } from './core';
-export { Rule } from './rule';
-export type { NativeRule, MediaFeatureComponent, MediaQuery } from './rule';
-export { Layer } from './layer';
-export { default as extend } from '@techor/extend';
-export { default as reorderForReadableClasses } from './functions/reorder-for-readable-classes';
-export * from './config';
+import css_engine_default, { AnimationRule, CompiledUtility, GeneratedRule, Layer, MasterCSS, MasterCSSClassInspection, MasterCSSCreateOptions, MasterCSSEmittedGlobals, MasterCSSGeneratedRuleIR, MasterCSSHydrationManifest, MasterCSSInspectedClassVariable, MasterCSSManifest, MasterCSSManifestSettings, MasterCSSManifestUtility, MasterCSSManifestUtilityLayerName, MasterCSSManifestVariable, MasterCSSManifestVariableNumericValue, MasterCSSManifestVariant, MasterCSSNormalizedNumericValue, MasterCSSOptions, NativeCSSDeclaration, NativeCSSDeclarationMatcher, NonLayer, Rule, ThemeLayer, UtilityLayer, VariableRule, compareRulePriority, createHydrationManifest } from "@master/css-engine";
+export { AnimationRule, type CompiledUtility, type GeneratedRule, Layer, MasterCSS, type MasterCSSClassInspection, type MasterCSSCreateOptions, type MasterCSSEmittedGlobals, type MasterCSSGeneratedRuleIR, type MasterCSSHydrationManifest, type MasterCSSInspectedClassVariable, type MasterCSSManifest, type MasterCSSManifestSettings, type MasterCSSManifestUtility, type MasterCSSManifestUtilityLayerName, type MasterCSSManifestVariable, type MasterCSSManifestVariableNumericValue, type MasterCSSManifestVariant, type MasterCSSNormalizedNumericValue, type MasterCSSOptions, type NativeCSSDeclaration, type NativeCSSDeclarationMatcher, NonLayer, Rule, ThemeLayer, UtilityLayer, VariableRule, compareRulePriority, createHydrationManifest, css_engine_default as default };

package/dist/index.js

@@ -0,0 +1,2 @@
+import css_engine_default, { AnimationRule, Layer, MasterCSS, NonLayer, Rule, ThemeLayer, UtilityLayer, VariableRule, compareRulePriority, createHydrationManifest } from "@master/css-engine";
+export { AnimationRule, Layer, MasterCSS, NonLayer, Rule, ThemeLayer, UtilityLayer, VariableRule, compareRulePriority, createHydrationManifest, css_engine_default as default };

package/package.json

@@ -1 +1,80 @@
-{"name":"@master/css","scripts":{"build":"techor pack --declare --external @master/css-renderer @master/css-extractor","dev":"pnpm run build --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"A markup-driven CSS language with enhanced syntax","author":"Aoyue Design LLC.","funding":"https://css.master.co/docs/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/css"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.bundle.js","jsnext:main":"./dist/index.bundle.mjs","esnext":"./dist/index.bundle.mjs","module":"./dist/index.bundle.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.bundle.js","import":"./dist/index.bundle.mjs","types":"./dist/index.d.ts"}},"bin":{"@master/css":"./dist/bin/index.bundle.js","mcss":"./dist/bin/index.bundle.js","mastercss":"./dist/bin/index.bundle.js"},"files":["dist"],"publishConfig":{"access":"public"},"dependencies":{"@master/normal.css":"^2.0.0-rc.8","@techor/fs":"^2.5.24","@techor/log":"^2.5.24","commander":"^11.0.0"},"devDependencies":{"@techor/extend":"^2.5.24","@techor/pack":"^2.5.24","@types/jest":"^29.5.11","css-shared":"^2.0.0-rc.8","csstype":"^3.1.2","puppeteer":"^21.0.1","vite":"^4.2.1"},"version":"2.0.0-rc.8"}
+{
+  "name": "@master/css",
+  "type": "module",
+  "license": "MIT",
+  "description": "The CSS language and framework for rapidly building modern and high-performance websites",
+  "author": "Aoyue Design LLC.",
+  "funding": "https://rc.css.master.co/sponsor",
+  "homepage": "https://css.master.co",
+  "bugs": {
+    "url": "https://github.com/master-co/css/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/master-co/css.git",
+    "directory": "packages/facade"
+  },
+  "keywords": [
+    "style",
+    "styles",
+    "html",
+    "variants",
+    "virtual",
+    "virtual-css",
+    "utility",
+    "css",
+    "ui",
+    "lightweight",
+    "class",
+    "webpack",
+    "plugin",
+    "integration",
+    "vite",
+    "parcel",
+    "build-tools",
+    "mastercss"
+  ],
+  "sideEffects": [
+    "./src/*.css"
+  ],
+  "main": "./dist/index.js",
+  "jsnext:main": "./dist/index.js",
+  "esnext": "./dist/index.js",
+  "module": "./dist/index.js",
+  "style": "./src/index.css",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "style": "./src/index.css",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./index.css": "./src/index.css",
+    "./base.css": "./src/base.css",
+    "./theme.css": "./src/theme.css",
+    "./variants.css": "./src/variants.css",
+    "./utilities.css": "./src/utilities.css"
+  },
+  "files": [
+    "dist",
+    "src/*.css"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@master/css-engine": "^2.0.0-rc.80",
+    "@master/css-preset": "^2.0.0-rc.80"
+  },
+  "version": "2.0.0-rc.80",
+  "scripts": {
+    "build": "tsdown --config ../../shared/tsdown-package.config.ts",
+    "dev": "tsdown --config ../../shared/tsdown-package.config.ts --watch",
+    "test": "vitest",
+    "bench": "vitest bench",
+    "type-check": "tsc -b tsconfig.typecheck.json",
+    "lint": "eslint"
+  }
+}

package/src/base.css

@@ -0,0 +1 @@
+@import "@master/css-preset/base.css";

package/src/index.css

@@ -0,0 +1 @@
+@import "@master/css-preset";

package/src/theme.css

@@ -0,0 +1 @@
+@import "@master/css-preset/theme.css";

package/src/utilities.css

@@ -0,0 +1 @@
+@import "@master/css-preset/utilities.css";

package/src/variants.css

@@ -0,0 +1 @@
+@import "@master/css-preset/variants.css";

package/dist/bin/index.bundle.js

@@ -1,33 +0,0 @@
-#!/usr/bin/env node
-"use strict";var T=Object.create;var d=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var j=(e,s,t,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of v(s))!_.call(e,o)&&o!==t&&d(e,o,{get:()=>s[o],enumerable:!(r=C(s,o))||r.enumerable});return e};var p=(e,s,t)=>(t=e!=null?T(x(e)):{},j(s||!e||!e.__esModule?d(t,"default",{value:e,enumerable:!0}):t,e));var h=require("commander"),m=p(require("path")),c=p(require("fs"));var g=`/** @type {import('@master/css').Config} */
-module.exports = {
-    styles: {},
-    rules: {},
-    variables: {},
-    semantics: {},
-    mediaQueries: {},
-    animations: {},
-    selectors: {},
-    functions: {}
-}`;var y=`/** @type {import('@master/css').Config} */
-export default {
-    styles: {},
-    rules: {},
-    variables: {},
-    semantics: {},
-    mediaQueries: {},
-    animations: {},
-    selectors: {},
-    functions: {}
-}`;var S=`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:b,name:M,description:F}=(0,l.readJSONFileSync)(m.default.resolve(__dirname,"../../package.json")),a=new h.Command;a.name(M).description(F).version(b||"0.0.0");a.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:s,ts:t,cjs:r}=e;if(!s&&!t&&!r)if(c.default.existsSync("tsconfig.json"))t=!0;else{let{type:i}=(0,l.readJSONFileSync)("./package.json")||{};i==="module"?s=!0:r=!0}let o=(i,f)=>{let u=c.default.existsSync(m.default.join(process.cwd(),i));u?u&&e.override?(c.default.writeFileSync(i,f),n.default.ok`**${i}** file is overridden`):n.default.x`**${i}** file already exists`:(c.default.writeFileSync(i,f),n.default.ok`**${i}** file is created`)};s&&o("master.css.mjs",y),t&&o("master.css.ts",S),r&&o("master.css.js",g)});a.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,s){try{await require("@master/css-renderer/actions/main")(e,s)}catch(t){t.code==="ERR_MODULE_NOT_FOUND"?n.default.i`Please run **npm** **install** **@master/css-renderer** first`:console.error(t)}});a.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,s){try{await require("@master/css-extractor/actions/main")(e,s)}catch(t){t.code==="ERR_MODULE_NOT_FOUND"?n.default.i`Please run **npm** **install** **@master/css-extractor** first`:console.error(t)}});console.log(a.parse);a.parse();

package/dist/bin/index.d.ts

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

package/dist/config/animations.d.ts

@@ -1,110 +0,0 @@
-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

@@ -1,3 +0,0 @@
-import type { FunctionDefinitions } from './';
-declare const functions: FunctionDefinitions;
-export default functions;

package/dist/config/index.d.ts

@@ -1,68 +0,0 @@
-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 { 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;
-};
-export type CSSKeyframes = {
-    [key in 'from' | 'to' | string]: PropertiesHyphen;
-};
-export type AnimationDefinitions = {
-    [key: string]: CSSKeyframes;
-};
-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]?: 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 {
-    extends?: (Config | any)[];
-    styles?: StyleDefinitions;
-    mediaQueries?: MediaQueryDefinitions;
-    selectors?: SelectorDefinitions;
-    semantics?: SemanticDefinitions;
-    variables?: VariableDefinitions;
-    rules?: RuleDefinitions;
-    rootSize?: number;
-    baseUnit?: number;
-    scope?: string;
-    important?: boolean;
-    override?: boolean;
-    functions?: FunctionDefinitions;
-    animations?: AnimationDefinitions;
-    themeDriver?: 'class' | 'media' | 'host';
-}

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

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