@master/css 2.0.0-rc.4 → 2.0.0-rc.40

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,7 +48,7 @@
             <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/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">
@@ -60,49 +60,10 @@
 </div>
 
 ## Documentation
-Visit [rc.css.master.co](https://rc.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 [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
+Check out the [official guides](https://rc.css.master.co/docs) to get started with Master CSS.
 
 ## Community
 The Master CSS community can be found here:

package/dist/_virtual/_commonjsHelpers.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+exports.commonjsGlobal = commonjsGlobal;

package/dist/_virtual/_commonjsHelpers.mjs

@@ -0,0 +1,3 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+export { commonjsGlobal };

package/dist/_virtual/css-escape.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+var cssEscape = {};
+
+exports.__exports = cssEscape;

package/dist/_virtual/css-escape.mjs

@@ -0,0 +1,3 @@
+var cssEscape = {};
+
+export { cssEscape as __exports };

package/dist/bin/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var child_process = require('child_process');
+
+try {
+    child_process.execSync('mastercss', {
+        stdio: 'inherit'
+    });
+} catch (error) {
+    console.error('Command not found. Try installing "@master/css-cli" first.');
+}

package/dist/bin/index.d.ts

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

package/dist/bin/index.mjs

@@ -0,0 +1,9 @@
+import { execSync } from 'child_process';
+
+try {
+    execSync('mastercss', {
+        stdio: 'inherit'
+    });
+} catch (error) {
+    console.error('Command not found. Try installing "@master/css-cli" first.');
+}

package/dist/common.cjs

@@ -0,0 +1,159 @@
+'use strict';
+
+const VALUE_DELIMITERS = {
+    '(': ')',
+    '\'': '\'',
+    '"': '"',
+    '{': '}'
+};
+const BASE_UNIT_REGEX = /^([+-]?(?:\d+(?:\.?\d+)?|\.\d+))x$/m // 1x, 1.1x, -1x, -.1x
+;
+const TRANSITION_SIGN = '~';
+const ANIMATION_SIGN = '@';
+const SELECTOR_SIGNS = [
+    ':',
+    '_',
+    '>',
+    '+',
+    '~'
+];
+const QUERY_COMPARISON_OPERATORS = [
+    '>',
+    '<',
+    '='
+];
+const QUERY_LOGICAL_OPERATORS = [
+    '&'
+];
+const SEPARATOR_SIGNS = [
+    ',',
+    '|'
+];
+const DELIMITER_SIGN = '|';
+const SEPARATOR_SIGN = ',';
+const AT_SIGN = '@';
+const VALUE_UNITS = [
+    '%',
+    'cm',
+    'mm',
+    'q',
+    'in',
+    'pt',
+    'pc',
+    'px',
+    'em',
+    'rem',
+    'ex',
+    'rex',
+    'cap',
+    'rcap',
+    'ch',
+    'rch',
+    'ic',
+    'ric',
+    'lh',
+    'rlh',
+    'vw',
+    'svw',
+    'lvw',
+    'dvw',
+    'vh',
+    'svh',
+    'lvh',
+    'dvh',
+    'vi',
+    'svi',
+    'lvi',
+    'dvi',
+    'vb',
+    'svb',
+    'lvb',
+    'dvb',
+    'vmin',
+    'svmin',
+    'lvmin',
+    'dvmin',
+    'vmax',
+    'svmax',
+    'lvmax',
+    'dvmax',
+    'cqw',
+    'cqh',
+    'cqi',
+    'cqb',
+    'cqmin',
+    'cqmax',
+    'deg',
+    'grad',
+    'rad',
+    'turn',
+    's',
+    'ms',
+    'hz',
+    'khz',
+    'dpi',
+    'dpcm',
+    'dppx',
+    'x',
+    'fr',
+    'db',
+    'st'
+];
+const UNIT_REGEX = /^([+-.]?\d+(\.?\d+)?)(%|cm|mm|q|in|pt|pc|px|em|rem|ex|rex|cap|rcap|ch|rch|ic|ric|lh|rlh|vw|svw|lvw|dvw|vh|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax|cqw|cqh|cqi|cqb|cqmin|cqmax|deg|grad|rad|turn|s|ms|hz|khz|dpi|dpcm|dppx|x|fr|db|st)?$/;
+const IMAGE_VALUE_REGEX = /(?:url|linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient|conic-gradient)\(.*\)/;
+const COLOR_VALUE_REGEX = /(?:#|(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla)\(.*\)|(?:\$colors)(?![a-zA-Z0-9-]))/;
+const NUMBER_VALUE_REGEX = /(?:[\d.]|(?:max|min|calc|clamp)\([^|]*\))/;
+const OFFICIAL_URL = new URL('https://rc.css.master.co');
+const CLASS_ATTRIBUTES = [
+    'class',
+    'className'
+];
+const CLASS_DECLARATIONS = [
+    'styles'
+];
+const CLASS_FUNCTIONS = [
+    'clsx',
+    'cva',
+    'ctl',
+    'cv',
+    'class',
+    'classnames',
+    'classVariant',
+    'styled(?:\\s+)?(?:\\.\\w+)?',
+    'classList(?:\\s+)?\\.(?:add|remove|toggle|replace)'
+];
+const BORDER_STYLE_VALUES = [
+    'none',
+    'auto',
+    'hidden',
+    'dotted',
+    'dashed',
+    'solid',
+    'double',
+    'groove',
+    'ridge',
+    'inset',
+    'outset'
+];
+
+exports.ANIMATION_SIGN = ANIMATION_SIGN;
+exports.AT_SIGN = AT_SIGN;
+exports.BASE_UNIT_REGEX = BASE_UNIT_REGEX;
+exports.BORDER_STYLE_VALUES = BORDER_STYLE_VALUES;
+exports.CLASS_ATTRIBUTES = CLASS_ATTRIBUTES;
+exports.CLASS_DECLARATIONS = CLASS_DECLARATIONS;
+exports.CLASS_FUNCTIONS = CLASS_FUNCTIONS;
+exports.COLOR_VALUE_REGEX = COLOR_VALUE_REGEX;
+exports.DELIMITER_SIGN = DELIMITER_SIGN;
+exports.IMAGE_VALUE_REGEX = IMAGE_VALUE_REGEX;
+exports.NUMBER_VALUE_REGEX = NUMBER_VALUE_REGEX;
+exports.OFFICIAL_URL = OFFICIAL_URL;
+exports.QUERY_COMPARISON_OPERATORS = QUERY_COMPARISON_OPERATORS;
+exports.QUERY_LOGICAL_OPERATORS = QUERY_LOGICAL_OPERATORS;
+exports.SELECTOR_SIGNS = SELECTOR_SIGNS;
+exports.SEPARATOR_SIGN = SEPARATOR_SIGN;
+exports.SEPARATOR_SIGNS = SEPARATOR_SIGNS;
+exports.TRANSITION_SIGN = TRANSITION_SIGN;
+exports.UNIT_REGEX = UNIT_REGEX;
+exports.VALUE_DELIMITERS = VALUE_DELIMITERS;
+exports.VALUE_UNITS = VALUE_UNITS;

package/dist/common.d.ts

@@ -0,0 +1,26 @@
+export declare const VALUE_DELIMITERS: {
+    '(': string;
+    '\'': string;
+    '"': string;
+    '{': string;
+};
+export declare const BASE_UNIT_REGEX: RegExp;
+export declare const TRANSITION_SIGN = "~";
+export declare const ANIMATION_SIGN = "@";
+export declare const SELECTOR_SIGNS: string[];
+export declare const QUERY_COMPARISON_OPERATORS: string[];
+export declare const QUERY_LOGICAL_OPERATORS: string[];
+export declare const SEPARATOR_SIGNS: string[];
+export declare const DELIMITER_SIGN = "|";
+export declare const SEPARATOR_SIGN = ",";
+export declare const AT_SIGN = "@";
+export declare const VALUE_UNITS: string[];
+export declare const UNIT_REGEX: RegExp;
+export declare const IMAGE_VALUE_REGEX: RegExp;
+export declare const COLOR_VALUE_REGEX: RegExp;
+export declare const NUMBER_VALUE_REGEX: RegExp;
+export declare const OFFICIAL_URL: URL;
+export declare const CLASS_ATTRIBUTES: string[];
+export declare const CLASS_DECLARATIONS: string[];
+export declare const CLASS_FUNCTIONS: string[];
+export declare const BORDER_STYLE_VALUES: string[];

package/dist/common.mjs

@@ -0,0 +1,137 @@
+const VALUE_DELIMITERS = {
+    '(': ')',
+    '\'': '\'',
+    '"': '"',
+    '{': '}'
+};
+const BASE_UNIT_REGEX = /^([+-]?(?:\d+(?:\.?\d+)?|\.\d+))x$/m // 1x, 1.1x, -1x, -.1x
+;
+const TRANSITION_SIGN = '~';
+const ANIMATION_SIGN = '@';
+const SELECTOR_SIGNS = [
+    ':',
+    '_',
+    '>',
+    '+',
+    '~'
+];
+const QUERY_COMPARISON_OPERATORS = [
+    '>',
+    '<',
+    '='
+];
+const QUERY_LOGICAL_OPERATORS = [
+    '&'
+];
+const SEPARATOR_SIGNS = [
+    ',',
+    '|'
+];
+const DELIMITER_SIGN = '|';
+const SEPARATOR_SIGN = ',';
+const AT_SIGN = '@';
+const VALUE_UNITS = [
+    '%',
+    'cm',
+    'mm',
+    'q',
+    'in',
+    'pt',
+    'pc',
+    'px',
+    'em',
+    'rem',
+    'ex',
+    'rex',
+    'cap',
+    'rcap',
+    'ch',
+    'rch',
+    'ic',
+    'ric',
+    'lh',
+    'rlh',
+    'vw',
+    'svw',
+    'lvw',
+    'dvw',
+    'vh',
+    'svh',
+    'lvh',
+    'dvh',
+    'vi',
+    'svi',
+    'lvi',
+    'dvi',
+    'vb',
+    'svb',
+    'lvb',
+    'dvb',
+    'vmin',
+    'svmin',
+    'lvmin',
+    'dvmin',
+    'vmax',
+    'svmax',
+    'lvmax',
+    'dvmax',
+    'cqw',
+    'cqh',
+    'cqi',
+    'cqb',
+    'cqmin',
+    'cqmax',
+    'deg',
+    'grad',
+    'rad',
+    'turn',
+    's',
+    'ms',
+    'hz',
+    'khz',
+    'dpi',
+    'dpcm',
+    'dppx',
+    'x',
+    'fr',
+    'db',
+    'st'
+];
+const UNIT_REGEX = /^([+-.]?\d+(\.?\d+)?)(%|cm|mm|q|in|pt|pc|px|em|rem|ex|rex|cap|rcap|ch|rch|ic|ric|lh|rlh|vw|svw|lvw|dvw|vh|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax|cqw|cqh|cqi|cqb|cqmin|cqmax|deg|grad|rad|turn|s|ms|hz|khz|dpi|dpcm|dppx|x|fr|db|st)?$/;
+const IMAGE_VALUE_REGEX = /(?:url|linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient|conic-gradient)\(.*\)/;
+const COLOR_VALUE_REGEX = /(?:#|(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla)\(.*\)|(?:\$colors)(?![a-zA-Z0-9-]))/;
+const NUMBER_VALUE_REGEX = /(?:[\d.]|(?:max|min|calc|clamp)\([^|]*\))/;
+const OFFICIAL_URL = new URL('https://rc.css.master.co');
+const CLASS_ATTRIBUTES = [
+    'class',
+    'className'
+];
+const CLASS_DECLARATIONS = [
+    'styles'
+];
+const CLASS_FUNCTIONS = [
+    'clsx',
+    'cva',
+    'ctl',
+    'cv',
+    'class',
+    'classnames',
+    'classVariant',
+    'styled(?:\\s+)?(?:\\.\\w+)?',
+    'classList(?:\\s+)?\\.(?:add|remove|toggle|replace)'
+];
+const BORDER_STYLE_VALUES = [
+    'none',
+    'auto',
+    'hidden',
+    'dotted',
+    'dashed',
+    'solid',
+    'double',
+    'groove',
+    'ridge',
+    'inset',
+    'outset'
+];
+
+export { ANIMATION_SIGN, AT_SIGN, BASE_UNIT_REGEX, BORDER_STYLE_VALUES, CLASS_ATTRIBUTES, CLASS_DECLARATIONS, CLASS_FUNCTIONS, COLOR_VALUE_REGEX, DELIMITER_SIGN, IMAGE_VALUE_REGEX, NUMBER_VALUE_REGEX, OFFICIAL_URL, QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, SELECTOR_SIGNS, SEPARATOR_SIGN, SEPARATOR_SIGNS, TRANSITION_SIGN, UNIT_REGEX, VALUE_DELIMITERS, VALUE_UNITS };

package/dist/config/animations.cjs

@@ -0,0 +1,113 @@
+'use strict';
+
+const animations = {
+    fade: {
+        '0%': {
+            opacity: 0
+        },
+        to: {
+            opacity: 1
+        }
+    },
+    flash: {
+        '0%,50%,to': {
+            opacity: 1
+        },
+        '25%,75%': {
+            opacity: 0
+        }
+    },
+    float: {
+        '0%': {
+            transform: 'none'
+        },
+        '50%': {
+            transform: 'translateY(-1.25rem)'
+        },
+        to: {
+            transform: 'none'
+        }
+    },
+    heart: {
+        '0%': {
+            transform: 'scale(1)'
+        },
+        '14%': {
+            transform: 'scale(1.3)'
+        },
+        '28%': {
+            transform: 'scale(1)'
+        },
+        '42%': {
+            transform: 'scale(1.3)'
+        },
+        '70%': {
+            transform: 'scale(1)'
+        }
+    },
+    jump: {
+        '0%,to': {
+            transform: 'translateY(-25%)',
+            'animation-timing-function': 'cubic-bezier(.8,0,1,1)'
+        },
+        '50%': {
+            transform: 'translateY(0)',
+            'animation-timing-function': 'cubic-bezier(0,0,.2,1)'
+        }
+    },
+    ping: {
+        '75%,to': {
+            transform: 'scale(2)',
+            opacity: 0
+        }
+    },
+    pulse: {
+        '0%': {
+            transform: 'none'
+        },
+        '50%': {
+            transform: 'scale(1.05)'
+        },
+        to: {
+            transform: 'none'
+        }
+    },
+    rotate: {
+        '0%': {
+            transform: 'rotate(-360deg)'
+        },
+        to: {
+            transform: 'none'
+        }
+    },
+    shake: {
+        '0%': {
+            transform: 'none'
+        },
+        '6.5%': {
+            transform: 'translateX(-6px) rotateY(-9deg)'
+        },
+        '18.5%': {
+            transform: 'translateX(5px) rotateY(7deg)'
+        },
+        '31.5%': {
+            transform: 'translateX(-3px) rotateY(-5deg)'
+        },
+        '43.5%': {
+            transform: 'translateX(2px) rotateY(3deg)'
+        },
+        '50%': {
+            transform: 'none'
+        }
+    },
+    zoom: {
+        '0%': {
+            transform: 'scale(0)'
+        },
+        to: {
+            transform: 'none'
+        }
+    }
+};
+
+module.exports = animations;

package/dist/config/animations.mjs

@@ -0,0 +1,111 @@
+const animations = {
+    fade: {
+        '0%': {
+            opacity: 0
+        },
+        to: {
+            opacity: 1
+        }
+    },
+    flash: {
+        '0%,50%,to': {
+            opacity: 1
+        },
+        '25%,75%': {
+            opacity: 0
+        }
+    },
+    float: {
+        '0%': {
+            transform: 'none'
+        },
+        '50%': {
+            transform: 'translateY(-1.25rem)'
+        },
+        to: {
+            transform: 'none'
+        }
+    },
+    heart: {
+        '0%': {
+            transform: 'scale(1)'
+        },
+        '14%': {
+            transform: 'scale(1.3)'
+        },
+        '28%': {
+            transform: 'scale(1)'
+        },
+        '42%': {
+            transform: 'scale(1.3)'
+        },
+        '70%': {
+            transform: 'scale(1)'
+        }
+    },
+    jump: {
+        '0%,to': {
+            transform: 'translateY(-25%)',
+            'animation-timing-function': 'cubic-bezier(.8,0,1,1)'
+        },
+        '50%': {
+            transform: 'translateY(0)',
+            'animation-timing-function': 'cubic-bezier(0,0,.2,1)'
+        }
+    },
+    ping: {
+        '75%,to': {
+            transform: 'scale(2)',
+            opacity: 0
+        }
+    },
+    pulse: {
+        '0%': {
+            transform: 'none'
+        },
+        '50%': {
+            transform: 'scale(1.05)'
+        },
+        to: {
+            transform: 'none'
+        }
+    },
+    rotate: {
+        '0%': {
+            transform: 'rotate(-360deg)'
+        },
+        to: {
+            transform: 'none'
+        }
+    },
+    shake: {
+        '0%': {
+            transform: 'none'
+        },
+        '6.5%': {
+            transform: 'translateX(-6px) rotateY(-9deg)'
+        },
+        '18.5%': {
+            transform: 'translateX(5px) rotateY(7deg)'
+        },
+        '31.5%': {
+            transform: 'translateX(-3px) rotateY(-5deg)'
+        },
+        '43.5%': {
+            transform: 'translateX(2px) rotateY(3deg)'
+        },
+        '50%': {
+            transform: 'none'
+        }
+    },
+    zoom: {
+        '0%': {
+            transform: 'scale(0)'
+        },
+        to: {
+            transform: 'none'
+        }
+    }
+};
+
+export { animations as default };

package/dist/config/at.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const at = {
+    all: 'media all',
+    print: 'media print',
+    screen: 'media screen',
+    speech: 'media speech',
+    landscape: 'media (orientation:landscape)',
+    portrait: 'media (orientation:portrait)',
+    motion: 'media (prefers-reduced-motion:no-preference)',
+    'reduced-motion': 'media (prefers-reduced-motion:reduce)'
+};
+
+module.exports = at;