Syntax Rules

A guide to adding custom syntax rules.

Overview

In Master CSS, most syntax rules are defined and implemented through the config.rules. You can create your own custom syntax rules and use them directly within the class="" attribute.

These custom rules are fully compatible with Master CSS’s advanced features, including selectors, at-rules, functions, and variables—offering a powerful and flexible styling experience.

Use this as a last resort when implementing your design system or styling conventions. Avoid creating custom syntax rules unless absolutely necessary, as overuse can lead to reduced maintainability and consistency across your codebase.

Add a custom syntax rule

Create your own syntax rule.

export default {    rules: {        foo: {             unit: 'rem',             declarations: {                 width: undefined             }         }     }}

Use it in your markup:

<div class="foo:32"></div>

Generated CSS:

.foo\:32 {    width: 2rem;}

Master CSS does not provide methods like declare or transform to let you fully customize the syntax, but instead exposes limited transformers and declarers to let you extend practical syntax rules. You should rely on the implicit behavior built into Master CSS to achieve the desired effect, but more often than not you will need config.components.

Syntax rule types

Master CSS uses SyntaxRuleType to determine the priority of CSS rule generation. By default, each rule is intentionally ordered to minimize style conflicts and reduce the need for overrides.

enum SyntaxRuleType {    /**     * utility classes     * @example block, inline     */    Utility = -4,    /**     * native shorthand     * @example border, padding, margin     */    NativeShorthand = -3,    /**     * shorthand     * @example px, py, mx, my     */    Shorthand = -2,    /**     * native properties     * @example color, background-color, font-size     */    Native = -1,    /**     * normal     * @example grid-cols     */    Normal = 0,}export default SyntaxRuleType