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-wrap`	-	-
`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                 }             }         }     }}