Customization

Customizing Syntax Rules

A guide to adding custom syntax rules.

Name	Unit	Variables
`accent-color`	-	-
`align-content`	-	-
`align-items`	-	-
`align-self`	-	-
`animation`	-	-
`animation-delay`	`ms`	-
`animation-direction`	-	-
`animation-duration`	`ms`	-
`animation-fill-mode`	-	-
`animation-iteration-count`	-	-
`animation-name`	-	-
`animation-play-state`	-	-
`animation-timing-function`	-	-
`appearance`	-	-
`aspect-ratio`	-	-
`backdrop-filter`	-	-
`background`	-	-
`background-attachment`	-	-
`background-blend-mode`	-	-
`background-clip`	-	-
`background-color`	-	-
`background-image`	-	-
`background-origin`	-	-
`background-position`	`px`	-
`background-repeat`	-	-
`background-size`	`rem`	-
`border`	`rem`	`["frame"]`
`border-bottom`	`rem`	`["frame"]`
`border-bottom-color`	-	`["frame"]`
`border-bottom-left-radius`	`rem`	-
`border-bottom-radius`	`rem`	-
`border-bottom-right-radius`	`rem`	-
`border-bottom-style`	-	-
`border-bottom-width`	`rem`	-
`border-collapse`	-	-
`border-color`	-	`["frame"]`
`border-image`	-	-
`border-image-outset`	`rem`	-
`border-image-repeat`	-	-
`border-image-slice`	-	-
`border-image-source`	-	-
`border-image-width`	`rem`	-
`border-left`	`rem`	`["frame"]`
`border-left-color`	-	`["frame"]`
`border-left-radius`	`rem`	-
`border-left-style`	-	-
`border-left-width`	`rem`	-
`border-radius`	`rem`	-
`border-right`	`rem`	`["frame"]`
`border-right-color`	-	`["frame"]`
`border-right-radius`	`rem`	-
`border-right-style`	-	-
`border-right-width`	`rem`	-
`border-spacing`	`rem`	`["spacing"]`
`border-style`	-	-
`border-top`	`rem`	`["frame"]`
`border-top-color`	-	`["frame"]`
`border-top-left-radius`	`rem`	-
`border-top-radius`	`rem`	-
`border-top-right-radius`	`rem`	-
`border-top-style`	-	-
`border-top-width`	`rem`	-
`border-width`	`rem`	-
`border-x`	`rem`	`["frame"]`
`border-x-color`	-	`["frame"]`
`border-x-style`	-	-
`border-x-width`	`rem`	-
`border-y`	`rem`	`["frame"]`
`border-y-color`	-	`["frame"]`
`border-y-style`	-	-
`border-y-width`	`rem`	-
`bottom`	`rem`	`["spacing"]`
`box-decoration-break`	-	-
`box-shadow`	`rem`	-
`box-sizing`	-	-
`break-after`	-	-
`break-before`	-	-
`break-inside`	-	-
`caret-color`	-	`["text"]`
`clear`	-	-
`clip-path`	-	-
`color`	-	`["text"]`
`column-gap`	`rem`	`["spacing"]`
`column-span`	-	-
`columns`	-	-
`contain`	-	-
`container`	-	-
`container-name`	-	-
`container-type`	-	-
`content`	-	-
`counter-increment`	-	-
`counter-reset`	-	-
`cursor`	-	-
`cx`	-	`["spacing"]`
`cy`	-	`["spacing"]`
`direction`	-	-
`display`	-	-
`fill`	-	-
`filter`	-	-
`flex`	-	-
`flex-basis`	`rem`	-
`flex-direction`	-	-
`flex-grow`	-	-
`flex-shrink`	-	-
`flex-wrap`	-	-
`float`	-	-
`font`	-	`["font-family", "font-variant", "font-weight", "font-size", "font-style", "line-height"]`
`font-family`	-	-
`font-feature-settings`	-	-
`font-size`	`rem`	-
`font-smoothing`	-	-
`font-style`	`deg`	-
`font-variant`	-	-
`font-variant-numeric`	-	-
`font-weight`	-	-
`gap`	`rem`	`["spacing"]`
`gradient`	-	-
`grid`	-	-
`grid-area`	-	-
`grid-auto-columns`	-	-
`grid-auto-flow`	-	-
`grid-auto-rows`	-	-
`grid-column`	-	-
`grid-column-end`	-	-
`grid-column-span`	-	-
`grid-column-start`	-	-
`grid-columns`	-	-
`grid-row`	-	-
`grid-row-end`	-	-
`grid-row-span`	-	-
`grid-row-start`	-	-
`grid-rows`	-	-
`grid-template`	-	-
`grid-template-areas`	-	-
`grid-template-columns`	`rem`	-
`grid-template-rows`	`rem`	-
`group`	-	-
`height`	`rem`	-
`hyphens`	-	-
`inset`	`rem`	`["spacing"]`
`isolation`	-	-
`justify-content`	-	-
`justify-items`	-	-
`justify-self`	-	-
`left`	`rem`	`["spacing"]`
`letter-spacing`	`em`	-
`line-height`	-	-
`list-style`	-	-
`list-style-image`	-	-
`list-style-position`	-	-
`list-style-type`	-	-
`margin`	`rem`	`["spacing"]`
`margin-bottom`	`rem`	`["spacing"]`
`margin-inline`	`rem`	`["spacing"]`
`margin-inline-end`	`rem`	`["spacing"]`
`margin-inline-start`	`rem`	`["spacing"]`
`margin-left`	`rem`	`["spacing"]`
`margin-right`	`rem`	`["spacing"]`
`margin-top`	`rem`	`["spacing"]`
`margin-x`	`rem`	`["spacing"]`
`margin-y`	`rem`	`["spacing"]`
`mask-image`	-	-
`max-height`	`rem`	-
`max-size`	`rem`	-
`max-width`	`rem`	-
`min-height`	`rem`	-
`min-size`	`rem`	-
`min-width`	`rem`	-
`mix-blend-mode`	-	-
`object-fit`	-	-
`object-position`	-	-
`opacity`	-	-
`order`	-	-
`outline`	`rem`	`["outline-width", "outline-style", "outline-offset", "outline-color", "frame"]`
`outline-color`	-	`["frame"]`
`outline-offset`	`rem`	`["spacing"]`
`outline-style`	-	-
`outline-width`	`rem`	-
`overflow`	-	-
`overflow-x`	-	-
`overflow-y`	-	-
`overscroll-behavior`	-	-
`overscroll-behavior-x`	-	-
`overscroll-behavior-y`	-	-
`padding`	`rem`	`["spacing"]`
`padding-bottom`	`rem`	`["spacing"]`
`padding-inline`	`rem`	`["spacing"]`
`padding-inline-end`	`rem`	`["spacing"]`
`padding-inline-start`	`rem`	`["spacing"]`
`padding-left`	`rem`	`["spacing"]`
`padding-right`	`rem`	`["spacing"]`
`padding-top`	`rem`	`["spacing"]`
`padding-x`	`rem`	`["spacing"]`
`padding-y`	`rem`	`["spacing"]`
`place-content`	-	-
`place-items`	-	-
`place-self`	-	-
`pointer-events`	-	-
`position`	-	-
`quotes`	-	-
`resize`	-	-
`right`	`rem`	`["spacing"]`
`row-gap`	`rem`	`["spacing"]`
`rx`	-	-
`ry`	-	-
`scroll-behavior`	-	-
`scroll-margin`	`rem`	`["spacing"]`
`scroll-margin-bottom`	`rem`	`["spacing"]`
`scroll-margin-left`	`rem`	`["spacing"]`
`scroll-margin-right`	`rem`	`["spacing"]`
`scroll-margin-top`	`rem`	`["spacing"]`
`scroll-margin-x`	`rem`	`["spacing"]`
`scroll-margin-y`	`rem`	`["spacing"]`
`scroll-padding`	`rem`	`["spacing"]`
`scroll-padding-bottom`	`rem`	`["spacing"]`
`scroll-padding-left`	`rem`	`["spacing"]`
`scroll-padding-right`	`rem`	`["spacing"]`
`scroll-padding-top`	`rem`	`["spacing"]`
`scroll-padding-x`	`rem`	`["spacing"]`
`scroll-padding-y`	`rem`	`["spacing"]`
`scroll-snap-align`	-	-
`scroll-snap-stop`	-	-
`scroll-snap-type`	-	-
`shape-image-threshold`	-	-
`shape-margin`	`rem`	`["spacing"]`
`shape-outside`	-	-
`size`	`rem`	-
`stroke`	-	-
`stroke-dasharray`	-	-
`stroke-dashoffset`	-	`["spacing"]`
`stroke-width`	-	-
`table-layout`	-	-
`text-align`	-	-
`text-decoration`	`rem`	`["text"]`
`text-decoration-color`	-	`["text"]`
`text-decoration-line`	-	-
`text-decoration-style`	-	-
`text-decoration-thickness`	`em`	-
`text-fill-color`	-	`["text"]`
`text-indent`	`rem`	-
`text-orientation`	-	-
`text-overflow`	-	-
`text-rendering`	-	-
`text-shadow`	`rem`	-
`text-size`	`rem`	-
`text-stroke`	`rem`	-
`text-stroke-color`	-	-
`text-stroke-width`	`rem`	-
`text-transform`	-	-
`text-truncate`	-	-
`text-underline-offset`	`rem`	`["spacing"]`
`text-underline-position`	-	-
`text-wrap`	-	-
`top`	`rem`	`["spacing"]`
`touch-action`	-	-
`transform`	`px`	`["spacing"]`
`transform-box`	-	-
`transform-origin`	`px`	-
`transform-style`	-	-
`transition`	-	-
`transition-delay`	`ms`	-
`transition-duration`	`ms`	-
`transition-property`	-	-
`transition-timing-function`	-	-
`user-drag`	-	-
`user-select`	-	-
`variable`	-	-
`vertical-align`	-	-
`visibility`	-	-
`white-space`	-	-
`width`	`rem`	-
`will-change`	-	-
`word-break`	-	-
`word-spacing`	`em`	-
`writing-mode`	-	-
`x`	-	`["spacing"]`
`y`	-	`["spacing"]`
`z-index`	-	-

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.

Basic usage

Add a syntax rule

Create your own syntax rule.

export default {    rules: {        foo: {             unit: 'rem',             declare(value, unit) {                 return {                     width: value + unit                 }             }         }     }}

Use it in your markup:

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

Generated CSS:

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

Customizing Syntax Rules

Overview

Basic usage

Add a syntax rule