Customization

Syntaxes

A guide to customizing declarations, selectors, functions, and at-rules in syntax.

🚧This page is still under construction and some content may not be complete.

Syntaxes

Customize your own Master CSS syntax rules.

export default {
    syntaxes: {
        foo: {
            matcher: /^foo:./,
            unit: 'rem',
            declare(value, unit) {
                return {
                    width: value + unit
                }
            }
        }
    }
}

Use your custom syntax:

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

Generated CSS:

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

View the default syntaxes

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

Selectors

By tokenizing selectors, you can simplify your markup.

export default {
    selectors: {
        _headings: '_:where(h1,h2,h3,h4,h5,h6)'
    }
}

Simplify your existing markup in HTML:

<article class="font:bold_:where(h1,h2,h3,h4,h5,h6)">…</article>
<article class="font:bold_headings">…</article>

View the default selectors

Name	Replace with
`::scrollbar`	`"::-webkit-scrollbar"`
`::scrollbar-button`	`"::-webkit-scrollbar-button"`
`::scrollbar-thumb`	`"::-webkit-scrollbar-thumb"`
`::scrollbar-track`	`"::-webkit-scrollbar-track"`
`::scrollbar-track-piece`	`"::-webkit-scrollbar-track-piece"`
`::scrollbar-corner`	`"::-webkit-scrollbar-corner"`
`::slider-thumb`	`["::-webkit-slider-thumb", "::-moz-range-thumb"]`
`::slider-runnable-track`	`["::-webkit-slider-runnable-track", "::-moz-range-track"]`
`::resizer`	`"::-webkit-resizer"`
`::progress`	`"::-webkit-progress"`
`:first`	`":first-child"`
`:last`	`":last-child"`
`:even`	`":nth-child(2n)"`
`:odd`	`":nth-child(odd)"`
`:nth(`	`":nth-child("`
`:only`	`":only-child"`

Functions

Customize the behavior and rules of functions.

export default {
    functions: {
        translate: { unit: 'rem' }
    }
}

Apply your custom functions:

<div class="translate(2rem)">…</div>
<div class="translate(32)">…</div>

View the default functions

Name	Unit	Native Name
`$(…)`	-	`$`
`calc(…)`	-	`calc`
`translate(…)`	`rem`	`translate`
`translateX(…)`	`rem`	`translateX`
`translateY(…)`	`rem`	`translateY`
`translateZ(…)`	`rem`	`translateZ`
`translate3d(…)`	`rem`	`translate3d`
`skew(…)`	`deg`	`skew`
`skewX(…)`	`deg`	`skewX`
`skewY(…)`	`deg`	`skewY`
`skewZ(…)`	`deg`	`skewZ`
`skew3d(…)`	`deg`	`skew3d`
`rotate(…)`	`deg`	`rotate`
`rotateX(…)`	`deg`	`rotateX`
`rotateY(…)`	`deg`	`rotateY`
`rotateZ(…)`	`deg`	`rotateZ`
`rotate3d(…)`	`deg`	`rotate3d`
`blur(…)`	`rem`	`blur`
`drop-shadow(…)`	`rem`	`drop-shadow`
`hue-rotate(…)`	`deg`	`hue-rotate`
`rgb(…)`	-	`rgb`
`rgba(…)`	-	`rgba`
`hsl(…)`	-	`hsl`
`hsla(…)`	-	`hsla`
`color(…)`	-	`color`
`color-contrast(…)`	-	`color-contrast`
`color-mix(…)`	-	`color-mix`
`hwb(…)`	-	`hwb`
`lab(…)`	-	`lab`
`lch(…)`	-	`lch`
`oklab(…)`	-	`oklab`
`oklch(…)`	-	`oklch`
`clamp(…)`	-	`clamp`
`repeat(…)`	-	`repeat`
`linear-gradient(…)`	-	`linear-gradient`
`radial-gradient(…)`	-	`radial-gradient`
`conic-gradient(…)`	-	`conic-gradient`
`repeating-linear-gradient(…)`	-	`repeating-linear-gradient`
`repeating-radial-gradient(…)`	-	`repeating-radial-gradient`
`repeating-conic-gradient(…)`	-	`repeating-conic-gradient`

In native CSS, it's not possible to reuse queries through CSS variables. By tokenizing media queries, feature queries, container queries, and even responsive breakpoints, and applying them with flexible syntax within the markup.

export default {
    at: {
        landscape: 'media (orientation:landscape)' // @landscape
    }
}

You wouldn't want to write full media queries within the markup.

<div class="aspect:2/1@media(orientation:landscape)">…</div>

Employ concise yet semantically meaningful markup.

<img class="aspect:2/1@landscape" … />

Generated CSS

@media (orientation:landscape) {
    .aspect\:2\/1\@landscape {
        aspect-ratio: 2/1
    }
}

View the default at-rules

Name	Value
`all`	`"media all"`
`print`	`"media print"`
`screen`	`"media screen"`
`speech`	`"media speech"`
`landscape`	`"media (orientation:landscape)"`
`portrait`	`"media (orientation:portrait)"`
`motion`	`"media (prefers-reduced-motion:no-preference)"`
`reduced-motion`	`"media (prefers-reduced-motion:reduce)"`

Add a media query

Create a media query token, such as @landscape, to represent landscape orientation.

export default {
    at: {
        landscape: 'media (orientation:landscape)' // @landscape
    }
}

When displayed in landscape orientation, the image is presented in a 2:1 aspect ratio.

<img class="aspect:2/1@landscape" … />

Generated CSS

@media (orientation:landscape) {
    .aspect\:2\/1\@landscape {
        aspect-ratio: 2/1
    }
}

The landscape is the default token.

Add a feature query

Create a feature query token, such as @support-backdrop, to apply styles based on backdrop-filter support.

export default {
    at: {
        support: {
            backdrop: 'supports (backdrop-filter:blur(0px))' // @support-backdrop
        }
    }
}

Applies translucent background only when backdrop-filter is supported.

<div class="bg:white/.8@support-backdrop">…</div>

Generated CSS

@supports (backdrop-filter:blur(0px)) {
    .bg\:white\/\.8\@support-backdrop {
        background-color: rgb(255 255 255/.8)
    }
}

Future

Container Queries #334

Syntaxes

Syntaxes

Selectors

Functions

At-rules

Add a media query

Add a feature query

Future