Custom Syntax

Rules

Customizing syntax rules for your design system.

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

Overview

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

RuleUnitValues
group--
variable--
font-sizerem-
font-weight--
font-family--
font-smoothing--
font-styledeg-
font-variant-numeric--
font-variant--
font-feature-settings--
font-
color-
margin-leftrem
margin-rightrem
margin-toprem
margin-bottomrem
margin-xrem
margin-yrem
marginrem
margin-inline-startrem
margin-inline-endrem
margin-inlinerem
padding-leftrem
padding-rightrem
padding-toprem
padding-bottomrem
padding-xrem
padding-yrem
paddingrem
padding-inline-startrem
padding-inline-endrem
padding-inlinerem
flex-basisrem-
flex-wrap--
flex-grow--
flex-shrink--
flex-direction--
flex--
display--
widthrem-
heightrem-
min-widthrem-
min-heightrem-
sizerem-
min-sizerem-
max-sizerem-
box-sizing--
box-decoration-break--
contain--
content--
counter-increment--
counter-reset--
letter-spacingem-
line-height--
object-fit--
object-position--
text-align--
text-decoration-color-
text-decoration-style--
text-decoration-thicknessem-
text-decoration-line--
text-decorationrem
text-underline-offsetrem
text-overflow--
text-orientation--
text-transform--
text-rendering--
text-indentrem-
vertical-align--
columns--
white-space--
toprem
bottomrem
leftrem
rightrem
insetrem
lines--
max-heightrem-
max-widthrem-
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-spacingem-
user-drag--
user-select--
text-shadowrem-
text-sizerem-
text-fill-color-
text-stroke-widthrem-
text-stroke-color-
text-strokerem-
box-shadowrem-
table-layout--
transform-box--
transform-style--
transform-originpx-
transform-
transition-property--
transition-timing-function--
transition-durationms-
transition-delayms-
transition--
animation-delayms-
animation-direction--
animation-durationms-
animation-fill-mode--
animation-iteration-count--
animation-name--
animation-play-state--
animation-timing-function--
animation--
border-collapse--
border-spacingrem-
border-top-color--
border-bottom-color--
border-left-color--
border-right-color--
border-x-color--
border-y-color--
border-color--
border-top-left-radiusrem-
border-top-right-radiusrem-
border-bottom-left-radiusrem-
border-bottom-right-radiusrem-
border-top-radiusrem-
border-bottom-radiusrem-
border-left-radiusrem-
border-right-radiusrem-
border-radiusrem-
border-top-style--
border-bottom-style--
border-left-style--
border-right-style--
border-x-style--
border-y-style--
border-style--
border-top-widthrem-
border-bottom-widthrem-
border-left-widthrem-
border-right-widthrem-
border-x-widthrem-
border-y-widthrem-
border-widthrem-
border-image-outsetrem-
border-image-repeat--
border-image-slice--
border-image-source--
border-image-widthrem-
border-image--
border-toprem-
border-bottomrem-
border-leftrem-
border-rightrem-
border-xrem-
border-yrem-
borderrem-
background-attachment--
background-blend-mode--
background-color--
background-clip--
background-origin--
background-positionpx-
background-repeat--
background-sizerem-
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-columnsrem-
grid-template-rowsrem-
grid-template--
grid-area--
grid--
column-gaprem
row-gaprem
gaprem
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-offsetrem
outline-style--
outline-widthrem-
outlinerem
accent-color--
appearance--
caret-color-
scroll-behavior--
scroll-margin-leftrem
scroll-margin-rightrem
scroll-margin-toprem
scroll-margin-bottomrem
scroll-margin-xrem
scroll-margin-yrem
scroll-marginrem
scroll-padding-leftrem
scroll-padding-rightrem
scroll-padding-toprem
scroll-padding-bottomrem
scroll-padding-xrem
scroll-padding-yrem
scroll-paddingrem
scroll-snap-align--
scroll-snap-stop--
scroll-snap-type--
will-change--
writing-mode--
direction--
shape-outside--
shape-marginrem
shape-image-threshold--
clip-path--
quotes--
mask-image--

View the full source code

Layer

NameValue
Semantic-8
CoreNativeShorthand-7
NativeShorthand-6
CoreShorthand-5
Shorthand-4
CoreNative-3
Native-2
Core-1
Normal0

View the full source code

Custom Syntax
Media Queries

Customizing media queries and breakpoints for your design system.

Custom Syntax
Selectors

Customizing selectors for your design system.

© Aoyue Design LLC.