Custom Syntax

Configuration

Implement your design system using the configuration API.

npm create @master/css@rc

If you don't have a configuration file, create one first.

Options

`.animations`

Customizing animation animations for your design system.

export default {
    animations: {
        'slide-in-up': {
            from: {
                transform: 'translateY(100%)'
            },
            to: {
                transform: 'translateY(0)'
            }
        }
    }
}

Apply the custom animation using animation syntax:

<div class="@slide-in-up|.5s"></div>

`.functions`

Customizing functions for your design system.

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

Apply your custom functions:

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

`.queries`

Customizing queries for your design system.

export default {
    queries: {
        tablet: 1024,   // @tablet
        desktop: 1280   // @desktop
    }
}

Applies larger font sizes as the viewport width increases.

<div class="font:24 font:32@tablet font:48@desktop">…</div>

Generated CSS

.font\:24 {
    font-size: 1.5rem
}
 
@media (min-width:1024px) {
    .font\:32\@tablet {
        font-size: 2rem
    }
}
 
@media (min-width:1280px) {
    .font\:48\@desktop {
        font-size: 3rem
    }
}

`.rules`

Customizing syntax rules for your design system.

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;
}

`.selectors`

Customizing selectors for your design system.

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>

`.semantics`

Customizing semantic classes for your design system.

export default {
    semantics: {
        show: {
            display: 'block'
        },
        'hide-text': {
            'font-size': 0
        }
    }
}

Apply your custom semantics:

<div class="show hide-text" hidden></div>

`.styles`

Customizing abstract styles for your design system.

export default {
    styles: {
        btn: 'inline-flex h:10x …'
    }
}

Apply the btn style to the button element:

<button class="btn">Submit</button>

Generated CSS

.inline-flex,
.btn {
    display: inline-flex
}
 
.h\:10x,
.btn {
    height: 2.5rem
}

`.variables`

Customizing variables for your design tokens.

import { variables } from '@master/css'
 
export default {
    variables: {
        'font-family': {
            sans: 'Inter'
         },
        screen: { desktop: 1280 },
        spacing: { sm: 10 },
        primary: '
#000000'
    }
}

Apply custom variables using ambiguous shorthand:

<div class="font:sans max-w:screen-desktop m:sm bg:primary">…</div>

Settings

`.extends`

Extend custom or external configuration.

Default	`undefined`
Type	`any[]`

export default {
    extends: [
        require('@master/ui'),
        require('./styles/btn.css'),
        …
    ]
}

`.important`

Make all generated CSS declarations !important.

Default	`false`
Type	`boolean`

Using important: true should be considered as a last option, as it's a compromise.

export default {
    important: true
}

Generated CSS:

.hide {
    display: none !important;
}
 
.full {
    width: 100% !important;
    height: 100% !important;
}

`.override`

Customize your configuration to override all default configuration, default false to extend.

Default	`false`
Type	`boolean`

export default {
    override: true
}

We've carefully preset some configurations to enhance the syntax; usually, you'll extend it.

`.rootSize`

Specify the conversion factor for rem and em.

Default	`16`
Type	`number`

Here's a common use case with rootSize: 10:

export default {
    rootSize: 10
}

Generated CSS rules:

.font\:16 {
    font-size: 1rem;   /* rootSize: 16 */
    font-size: 1.6rem; /* rootSize: 10 */
}

And you will set the font size of the root to 62.5%:

<html class="font:62.5%">

`.baseUnit`

This base unit determines the size scale and ensures visual consistency across products.

Default	`4`
Type	`number`

For example, with the default baseUnit: 4, the size scale 1x, 2x, … will be 4, 8, ….

<div class="m:4x"></div>

Generated CSS:

.m\:4x {
    margin: 1rem; /* 4x = 4*4 = 16px, 16px / 16 = 1rem */
}

`.scope`

Limit the generated CSS rules to a specific scope with CSS selectors.

Default	`''`
Type	`string`

Don't make it part of your coding style, but as a last resort to solve problems.

export default {
    scope: '#app'
}

All Master CSS syntax will only be applied if the .

<html>
<body id="app">
    <div class="mt:1 text:center"></div>
</body>
</html>

Generated CSS:

#app .mt\:1 {
    margin-top: 0.0625rem
}
 
#app .text\:center {
    text-align: center
}

`.modeDriver`

Sets how the theme should drive and generate CSS rules.

Default	`'class'`
Type	`'class'` `'media'` `'host'`

<div class="bg:black@dark">

Drive theme styles through CSS classes

export default {
    modeDriver: 'class'
}

Generated CSS:

.dark .bg\:#000000 { background-color: #000000 }

Drive theme styles through media queries

export default {
    modeDriver: 'media'
}

Generated CSS:

@media (prefers-color-scheme: dark) { .bg\:#000000 { background-color: #000000 } }

Drive theme styles through shadow DOM's host

export default {
    modeDriver: 'host'
}

Generated CSS:

:host(.dark) .bg\:#000000 { background-color: #000000 }