Package

ESLint

The ESLint configuration and plugin reference for Master CSS.

npm i @master/eslint-config-css

Basic usage

Setup ESLint configuration

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.

API Reference

`rules.class-order`

Enforce a consistent and logical order of classes.

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

`rules.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            }]        }    }]

`rules.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"            ]        }    }}]

`settings.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)"            ]        }    }}]

`settings.classDeclarations`

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

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

`settings.ignoredKeys`

Specifies object keys to ignore checking.

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

`settings.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))            }        }    }]