Skip to content

Latest commit

 

History

History
176 lines (147 loc) · 6.64 KB

content.mdx

File metadata and controls

176 lines (147 loc) · 6.64 KB
Raw

import { IconStatusChange, IconSettingsExclamation, IconArrowMerge, IconShieldCheck, IconPencilExclamation, IconFunction } from '@tabler/icons-react' import Features, { Feature } from 'shared/components/Features'

**[Consistent class order](#consistent-class-order)** 
        Enforce a consistent and logical order of classes
    </div>
</Feature>
<Feature>
    <IconShieldCheck className="app-icon-primary" />
    <div>
        **[Syntax error checks](#syntax-error-checks)**

        Detect syntax errors early when writing classes
    </div>
</Feature>
<Feature>
    <IconSettingsExclamation className="app-icon-primary" />
    <div>
        **[Disallow unknown classes](#disallow-unknown-classes)**

        Enforce the use of Master CSS syntax to apply styles
    </div>
</Feature>
<Feature>
    <IconPencilExclamation className="app-icon-primary" />
    <div>
        **[Class collision detection](#class-collision-detection)**

        Avoid applying classes with the same CSS declaration
    </div>
</Feature>
<Feature>
    <IconFunction className="app-icon-primary" />
    <div>
        **[Supports JS utilities](#supports-js-utilities)**

        Check the classes in popular utility arguments
    </div>
</Feature>

import frameworks from 'shared/data/frameworks' import languages from 'shared/data/languages' import editors from 'shared/data/editors'

Installation guides

{[ ...frameworks.filter(({ name }) => ['React', 'Vue.js', 'Angular', 'Svelte', 'Laravel'].includes(name)), ...languages.filter(({ name }) => ['HTML'].includes(name)), ...editors.filter(({ name }) => ['Visual Studio Code'].includes(name)), ]}

Features

Consistent class order

In practice, you pay less attention to the order of classes, and as the number of classes increases, the template markup becomes less readable.

(i) With the class order rule, you can enforce a consistent and fixed order for classes.

(!) No consistent class order followed.

<div class="font:12 font:24@sm m:32 block font:32@md mb:48">…</div>

(o) Fix this @master/css/class-order problem.

<div class="block font:12 font:24@sm font:32@md m:32 mb:48">…</div>

Syntax error checks

In the past, you would add utility classes to your templates in an unsafe manner, without being able to check whether they were valid or legal in the source code.

(i) With the class validation rule, you can check the validity of classes early as you write them.

(x) Invalid value for `width` property.

<div class="width:">…</div>

This is helpful if you make a typo or are unfamiliar with Master CSS syntax!

Disallow unknown classes

You can also restrict teams to using configuration to create styles instead of defining classes through traditional html <style> or CSS files.

(i) Based on syntax error checking, you can disallow unknown classes.

(x) "btn" is not a valid or known class.

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

(o) Fix this @master/css/class-validation problem using the Master CSS syntax.

<button class="inline-flex px:15">…</button>

(o) Or create the custom style btn using the styles configuration.

export default {
    styles: {
+        btn: 'inline-flex px:15'
    }
}

Restart the VSCode ESLint server to read the modified Master CSS configuration. #298

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

Class collision detection

The class you added may collide with existing classes due to human error or having the same declarations as a third-party custom syntax.

(i) With the class collision rule, you'll no longer collide with existing classes.

(!) "m:10" applies the same CSS declarations as "m:20".
"m:20" applies the same CSS declarations as "m:10".

<div class="m:10 m:20">…</div>

(o) Fix this @master/css/class-collision problem by removing other colliding classes.

<div class="m:10">…</div>

It can also detect whether declarations with the same selector and media query state collide!

(!) "m:40@sm" applies the same CSS declarations as "m:50@sm".
"m:50@sm" applies the same CSS declarations as "m:40@sm".

<div class="m:40@sm m:50@sm">…</div>

(o) Fix this @master/css/class-collision problem by removing other colliding classes.

<div class="m:50@sm">…</div>

Supports JS utilities

You may be using clsx or class variant to conditionally apply classes, but unfortunately, they're just pure strings in JavaScript.

(i) You can make arguments of JavaScript callees have Master CSS code linting.

(x) Invalid value for display property.

import clsx from 'clsx'

export default () => (
    <h1 className={clsx('display:bloc')}>Hello World</h1>
)

(x) Invalid value for text-align property.

import { styled } from '@master/css.react'

const H1 = styled.h1`text-align:cente`

export default () => <H1>Hello World</H1>

Common JavaScript utility names are supported by default.