JSPM

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](https://beta.css.master.co/docs/compilation), allowing you to choose according to the characteristics and needs of different projects.

• Just-in-time - Observe the DOM tree, manipulate CSS rules according to the changed class name, and synchronize to the running style sheet at runtime
• 🚧 Ahead-of-time - 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
• 🚧 Hybrid Rendering - Mix just-in-time and ahead-of-time compilation modes and enjoy the advantages and conveniences of both without a server
• 🚧 Progressive Rendering - Scan the requested HTML on the server side, generate CSS rules, and enable just-in-time compilation on the browser side

Ecosystem

We've built various integrations and tools around Master CSS:

Build Tools

• Vite Plugin - A vite plugin for integrating Master CSS AOT compilation
• Webpack Plugin - A webpack plugin for integrating Master CSS AOT compilation
• Compiler - The ahead-of-time compiler of Master CSS

Frameworks

• React - React hooks for Master CSS
• Style Element _{^{React, Vue, ...}} - Create reusable style elements using class names in one-linear.

Native Plugins

• Normal CSS - Normalize the browser's styles
• Keyframes CSS - Simple and useful CSS keyframes

Extensions

• Language Service _{^{Visual Studio Code}} - Includes code completion, syntax highlighting, CSS hover preview, and inline color decorators

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.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 and TypeScript
• The concept of Virtual CSS is inspired by the Virtual DOM