Package

ESLint

The ESLint configuration and plugin reference for Master CSS.

Configuring

Use the latest flat configuration. As an example of checking Master CSS syntax in TypeScript and HTML files:

import css from '@master/eslint-config-css'
import htmlParser from "@angular-eslint/template-parser"
import tsParser from '@typescript-eslint/parser'
 
/** @type {import('eslint').Linter.Config[]} */
export default [
    {
        files: ['**/*.html'],
        languageOptions: {
            parser: htmlParser
        }
    },
    {
        files: ['**/*.{ts,tsx}'],
        languageOptions: {
            parser: tsParser
        }
    },
    css,
    {
        rules: {
            '@master/css/class-validation': ['error', {
                disallowUnknownClass: true
            }],
        }
    },
]

For the legacy configuration, see the legacy example.

Rules

Class Order

Enforce a consistent and logical order of classes.

export default [
    {
        rules: {
            "@master/css/class-order": "warn"
        }
    }
]

Class Validation

Detect syntax errors early when writing classes.

export default [
    {
        rules: {
            "@master/css/class-validation": "error"
        }
    }
]

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

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

Class Collision

Avoid applying classes with the same CSS declaration.

export default [
    {
        rules: {
            "@master/css/class-collision": "warn"
        }
    }
]

Settings

`classAttributes`

Specify the element attribute containing classes.

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

`classFunctions`

Specify the names of the function to check its arguments.

export default [{
    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.

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

`ignoredKeys`

Specifies object keys to ignore checking.

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

`config`

Specify a custom Master CSS configuration or path. By default, it reads a module named master.css.* based on the current working directory.

export default [
    {
        settings: {
            "@master/css": {
                config: "master.css"
            }
        }
    }
]

If the master.css module cannot be found, you can specify the path:

import { fileURLToPath } from 'node:url'
 
export default [
    {
        settings: {
            "@master/css": {
                config: fileURLToPath(new URL('master.css.ts', import.meta.url))
            }
        }
    }
]