Package

ESLint

The ESLint configuration and plugin reference for Master CSS.

Configuring

Flat

Use the ESLint v9's new flat configuration.

import css from '@master/eslint-config-css/flat'
 
export default [
    css
]

Legacy

Or compatible with ESLint legacy configurations.

{
    "extends": ["@master/css"]
}

To learn more about features, check out the Code Linting.

Rules

Class Order

Enforce a consistent and logical order of classes.

{
    "rules": {
        "@master/css/class-order": "warn"
    }
}

Class Validation

Detect syntax errors early when writing classes.

{
    "rules": {
        "@master/css/class-validation": "error"
    }
}

Set disallowUnknownClass: true to disallow unknow classes and enforce strict checks:

{
    "rules": {
        "@master/css/class-validation": ["error", {
            "disallowUnknownClass": true
        }]
    }
}

Class Collision

Avoid applying classes with the same CSS declaration.

{
    "rules": {
        "@master/css/class-collision": "warn"
    }
}

Settings

`classAttributes`

Specify the element attribute containing classes.

{
    "settings": {
        "@master/css": {
            "classAttributes": [
                "class",
                "className"
            ]
        }
    }
}

`classFunctions`

Specify the names of the function to check its arguments.

{
    "settings": {
        "@master/css": {
            "classFunctions": [
                "clsx",
                "cva",
                "ctl",
                "cv",
                "class",
                "classnames",
                "classVariant",
                "styled(?:\\s+)?(?:\\.\\w+)?",
                "classList(?:\\s+)?\\.(?:add|remove|toggle|replace)"
            ]
        }
    }
}

`classDeclarations`

Specify the names of the variable/member to check its declarations.

{
    "settings": {
        "@master/css": {
            "classDeclarations": [
                "styles"
            ]
        }
    }
}

`ignoredKeys`

Specifies object keys to ignore checking.

{
    "settings": {
        "@master/css": {
            "ignoredKeys": [
                "compoundVariants",
                "defaultVariants"
            ]
        }
    }
}

`config`

Specify a custom Master CSS configuration or path.

{
    "settings": {
        "@master/css": {
            "config": "master.css"
        }
    }
}