eslint-plugin-css
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

Introduction

eslint-plugin-css is an ESLint plugin that provides rules to verify CSS definition objects.

NPM license NPM version NPM downloads NPM downloads NPM downloads NPM downloads NPM downloads Build Status Coverage Status

📛 Features

This ESLint plugin provides linting rules to verify CSS definition objects.

  • Find the wrong usage of CSS definition objects, and their hints.
  • The plugin supports Vue and JSX (React).

You can check on the Online DEMO.

📖 Documentation

See documents.

💿 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 recommended configuration

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

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

Advanced Configuration

Override/add specific rules configurations. See also: http://eslint.org/docs/user-guide/configuring.

// .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 for more details.

✅ Rules

The --fix option on the command line automatically fixes problems reported by rules which have a wrench 🔧 below. The rules with the following star ⭐ are included in the plugin:css/recommended config.

Possible Errors

Rule ID Description
css/no-unknown-property disallow unknown properties

Best Practices

Rule ID Description
css/no-length-zero-unit disallow units for zero lengths 🔧

Stylistic Issues

Rule ID Description
css/property-casing enforce specific casing for CSS properties 🔧

⚙️ Settings

See Settings.

🍻 Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

See CONTRIBUTING.md.

Development Tools

  • npm test runs tests and measures coverage.
  • npm run update runs in order to update readme and recommended configuration.
  • npm run new [new rule name] runs to create the files needed for the new rule.
  • npm run docs:watch starts the website locally.

🔒 License

See the LICENSE file for license rights and limitations (MIT).

Package Sidebar

Install

npm i eslint-plugin-css@0.1.0

Version

0.1.0

License

MIT

Unpacked Size

40.5 kB

Total Files

20

Last publish

Collaborators

  • ota-meshi