Custom Syntax

Rules

Customizing syntax rules for your design system.

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

export default {
    rules: {
        foo: {
            match: /^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;
}

Customization

Extend variables for each rule

Implement your design tokens in different syntax rules.

🚧

References

Default

Rule	Unit	Values
`group`	-	-
`variable`	-	-
`font-size`	`rem`	-
`font-weight`	-	-
`font-family`	-	-
`font-smoothing`	-	-
`font-style`	`deg`	-
`font-variant-numeric`	-	-
`font-variant`	-	-
`font-feature-settings`	-	-
`font`	-
`color`	-
`margin-left`	`rem`
`margin-right`	`rem`
`margin-top`	`rem`
`margin-bottom`	`rem`
`margin-x`	`rem`
`margin-y`	`rem`
`margin`	`rem`
`margin-inline-start`	`rem`
`margin-inline-end`	`rem`
`margin-inline`	`rem`
`padding-left`	`rem`
`padding-right`	`rem`
`padding-top`	`rem`
`padding-bottom`	`rem`
`padding-x`	`rem`
`padding-y`	`rem`
`padding`	`rem`
`padding-inline-start`	`rem`
`padding-inline-end`	`rem`
`padding-inline`	`rem`
`flex-basis`	`rem`
`flex-wrap`	-	-
`flex-grow`	-	-
`flex-shrink`	-	-
`flex-direction`	-	-
`flex`	-	-
`display`	-	-
`width`	`rem`
`height`	`rem`
`min-width`	`rem`
`min-height`	`rem`
`box`	`rem`	-
`min-box`	`rem`	-
`max-box`	`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-decoration-style`	-	-
`text-decoration-thickness`	`em`	-
`text-decoration-line`	-	-
`text-decoration`	`rem`
`text-underline-offset`	`rem`
`text-overflow`	-	-
`text-orientation`	-	-
`text-transform`	-	-
`text-rendering`	-	-
`text-indent`	`rem`	-
`vertical-align`	-	-
`columns`	-	-
`white-space`	-	-
`top`	`rem`
`bottom`	`rem`
`left`	`rem`
`right`	`rem`
`inset`	`rem`
`lines`	-	-
`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-stroke-width`	`rem`	-
`text-stroke-color`	-
`text-stroke`	`rem`	-
`box-shadow`	`rem`	-
`table-layout`	-	-
`transform-box`	-	-
`transform-style`	-	-
`transform-origin`	`px`	-
`transform`	-
`transition-property`	-	-
`transitionTiming-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`	-
`border-top-color`	-	-
`border-bottom-color`	-	-
`border-left-color`	-	-
`border-right-color`	-	-
`border-x-color`	-	-
`border-y-color`	-	-
`border-color`	-	-
`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-outset`	`rem`	-
`border-image-repeat`	-	-
`border-image-slice`	-	-
`border-image-source`	-	-
`border-image-width`	`rem`	-
`border-image`	-	-
`border-top`	`rem`	-
`border-bottom`	`rem`	-
`border-left`	`rem`	-
`border-right`	`rem`	-
`border-x`	`rem`	-
`border-y`	`rem`	-
`border`	`rem`	-
`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`	-
`stroke-width`	-	-
`stroke`	-
`x`	-
`y`	-
`cx`	-
`cy`	-
`rx`	-	-
`ry`	-	-
`grid-column-start`	-	-
`grid-column-end`	-	-
`grid-column`	-	-
`grid-columns`	-	-
`grid-row-start`	-	-
`grid-row-end`	-	-
`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`
`row-gap`	`rem`
`gap`	`rem`
`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`	-	-
`outline-offset`	`rem`
`outline-style`	-	-
`outline-width`	`rem`	-
`outline`	`rem`
`accent-color`	-
`appearance`	-	-
`caret-color`	-
`scroll-behavior`	-	-
`scroll-margin-left`	`rem`
`scroll-margin-right`	`rem`
`scroll-margin-top`	`rem`
`scroll-margin-bottom`	`rem`
`scroll-margin-x`	`rem`
`scroll-margin-y`	`rem`
`scroll-margin`	`rem`
`scroll-padding-left`	`rem`
`scroll-padding-right`	`rem`
`scroll-padding-top`	`rem`
`scroll-padding-bottom`	`rem`
`scroll-padding-x`	`rem`
`scroll-padding-y`	`rem`
`scroll-padding`	`rem`
`scroll-snap-align`	-	-
`scroll-snap-stop`	-	-
`scroll-snap-type`	-	-
`will-change`	-	-
`writing-mode`	-	-
`direction`	-	-
`shape-outside`	-	-
`shape-margin`	`rem`
`shape-image-threshold`	-	-
`clip-path`	-	-
`quotes`	-	-
`mask-image`	-	-

View the full source code

Layer

Name	Value
`Semantic`	`-8`
`CoreNativeShorthand`	`-7`
`NativeShorthand`	`-6`
`CoreShorthand`	`-5`
`Shorthand`	`-4`
`CoreNative`	`-3`
`Native`	`-2`
`Core`	`-1`
`Normal`	`0`