Getting Started

Code Linting for Master CSS

An official ESLint plugin for enforcing team coding styles, making your template markup more organized, and catching syntax errors early.

Consistent class order

Enforce a consistent and logical order of classes

Syntax error checks

Detect syntax errors early when writing classes

Disallow unknown classes

Enforce the use of Master CSS syntax to apply styles

Class collision detection

Avoid applying classes with the same CSS declaration

Supports JS utilities

Check the classes in popular utility arguments


Guides


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.

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>

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 added utility classes to your templates unsafely, lacking the capability to verify their validity or legality directly within the source code.

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

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 <style> or CSS files.

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

"btn" is not a valid or known class.

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

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

<button class="inline-flex px:4x"></button>

Or create the custom style btn using the styles configuration.

export default {
styles: {
btn: 'inline-flex px:4x'
}
}

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.

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>

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:12x@sm".
"m:12x@sm" applies the same CSS declarations as "m:40@sm".

<div class="m:40@sm m:12x@sm"></div>

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

<div class="m:12x@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.

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

Invalid value for display property.

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

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.

Getting Started
Language Service for Master CSS

Enhanced Master CSS development experience, including syntax highlighting, code completion, syntax rule preview, and more.

Getting Started
Migrating to Master CSS

Migrate your current CSS technologies and projects to Master CSS.

© Aoyue Design LLC.