The CSS language and framework for rapidly building modern and high-performance websites

Installation

npm install @master/css

Stylesheet entries

@master/css exports the default stylesheet and split stylesheet entries used by integrations.

@import '@master/css';

The default stylesheet contains:

@import "./base.css";
@import "./theme.css";
@import "./variants.css";
@import "./utilities.css";

Use @import '@master/css/base.css'; when a runtime-only page only needs the base layer declaration and normalization rules. Use @master/css/theme.css, @master/css/variants.css, or @master/css/utilities.css when an integration needs only one preset source facet. Use the default @master/css import from app stylesheets that should receive generated Master CSS and native CSS pruning in static mode.

API

MasterCSS

import { MasterCSS, createCSS } from '@master/css'

const css = createCSS(manifest)
const customCSS = new MasterCSS(manifest)

new MasterCSS(manifest) and createCSS(manifest) require a complete MasterCSSManifest.

API	Type	Description
css.manifest	MasterCSSManifest	Compiled manifest executed by the engine.
css.settings	MasterCSSManifestSettings	Resolved settings from the active manifest.
css.text	string	Joined text of all generated CSS rules.
css.add(...classNames)	boolean	Adds classes and generated rules.
css.delete(...classNames)	boolean	Removes classes and unused rules.
css.refresh(manifest?)	this	Refreshes with a compiled manifest.
css.reset()	this	Clears all rules and resets the instance.
css.destroy()	this	Destroys and removes the current instance.

globalThis.MasterCSS

The browser/global build exposes MasterCSS as globalThis.MasterCSS.

Getting started

Read the installation guide to set up Master CSS for an application.

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