@master/css

A markup-driven CSS language with enhanced syntax

Documentation

Visit beta.css.master.co to view the full documentation

Getting Started

Check out the official guides to get started with Master CSS, or walk through the examples for a quick overview of integrating with your framework.

Compilation Modes

Master CSS provides various compilation modes, allowing you to choose according to the characteristics and needs of different projects.

• Progressive Rendering - Scan the requested HTML on the server side, generate CSS rules, and enable runtime-rendering compilation on the browser side
• 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 - 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 - The core of Master CSS, including the runtime engine

Frameworks

• React - Integrate Master CSS the React way
• Svelte - Integrate Master CSS the Svelte way
• Vue - Integrate Master CSS the Vue.js way

Progressive Rendering

• Renderer - Pre-renders and injects HTML-required CSS
• Nitro Server - Integrate Master CSS Pre-rendering the Nitro way

Static Extraction

• Extractor - Master CSS static extractor for various raw text extraction.
• Vite - Integrate Master CSS Static Extraction in Vite way
• Webpack - Integrate Master CSS Static Extraction in Webpack way

Validation

• Validator for Master CSS class syntax

Language

• Server - The core of the Master CSS language server
• Service - The core of the Master CSS language service
• Visual Studio Code - Master CSS Language Service for Visual Studio Code Extension

Others

• Normal CSS - Normalize the browser's styles
• Theme Service - A CSS theme-switching service for Master CSS
• 🚧 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 - Ask questions, voice ideas, and do any other discussion
• Join our Discord Server - Casually chat with other people using the language ^{_{✓ 中文}}

_{Our 《 Code of Conduct 》 applies to all Master CSS community channels.}

Contributing

Please see our CONTRIBUTING for workflow.

Inspiration

Some of the core concepts and designs are inspired by these giants.

• The concept of enhanced syntax is inspired by SASS and TypeScript
• The concept of Virtual CSS is inspired by the Virtual DOM