# User Guide

# 💿 Installation

npm install --save-dev eslint eslint-plugin-css

Requirements

  • ESLint v7.0.0 and above
  • Node.js v12.22.x, v14.17.x, v16.x and above

# 📖 Usage

Add css to the plugins section of your .eslintrc configuration file (you can omit the eslint-plugin- prefix) and either use one of the two configurations available (recommended or all) or configure the rules you want:

The plugin:css/recommended config enables a subset of the rules that should be most useful to most users. See lib/configs/recommended.ts (opens new window) for more details.

// .eslintrc.js
module.exports = {
    "plugins": [
        "css"
    ],
    "extends": [
         // add more generic rulesets here, such as:
         // 'eslint:recommended',
        "plugin:css/recommended"
    ]
}

# The standard configuration

The plugin:css/standard config enables a subset of the rules and superset of plugin:css/recommended config that apply a subjective style. See lib/configs/standard.ts (opens new window) for more details.

// .eslintrc.js
module.exports = {
    "plugins": [
        "css"
    ],
    "extends": [
        "plugin:css/standard"
    ]
}

# Advanced Configuration

Override/add specific rules configurations. See also: http://eslint.org/docs/user-guide/configuring (opens new window).

// .eslintrc.js
module.exports = {
    "plugins": [
        "css"
    ],
    "rules": {
        // Override/add rules settings here, such as:
        "css/rule-name": "error"
    }
}

# Using "plugin:css/all"

The plugin:css/all config enables all rules. It's meant for testing, not for production use because it changes with every minor and major version of the plugin. Use it at your own risk. See lib/configs/all.ts (opens new window) for more details.

# How does ESLint detect CSS objects?

All CSS-related rules are applied to code that passes any of the following checks:

  • style={ {} } JSX attribute expression

    const jsx = <div
        style={ {/* JSX attribute expression */} }
    />
    
  • v-bind:style="{}" Vue directive

    <template>
        <div
            v-bind:style="{/* Vue directive */}"
        />
    </template>
    
  • CSS definition function call for styled-components (opens new window)

    e.g.

    import styled, { css, createGlobalStyle } from 'styled-components'
    
    styled.input({/*CSS*/})
    styled.input.attrs({})({/*CSS*/})
    css({/*CSS*/})
    createGlobalStyle({/*CSS*/})
    
  • According to settings.css.target settings.

However, if you want to take advantage of the rules in any of your custom objects that are CSS objects, you might need to use the special comment // @css that marks an object in the next line as a CSS object in any file, e.g.:

// @css
const myStyle = {
  height: '100px'
}

See the rule list to get the rules that this plugin provides.

Last Updated: 2/13/2024, 12:55:19 AM