npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

eslint-plugin-css

v0.11.0

Published

An ESLint plugin that provides rules to verify CSS definition objects.

Downloads

68,236

Readme

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

::: WORKING IN PROGRESS :::

:name_badge: Features

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

  • Find the wrong usage of CSS definition objects, and their hints.
  • Support for Vue and JSX (React).
  • Partial support for styled-components style objects.

You can check on the Online DEMO.

:question: Why is it ESLint plugin?

Stylelint partially supports CSS in JS, but some issues haven't been resolved for a long time.
Also, CSS definitions using template literals are similar to CSS syntax, but CSS definitions using JavaScript objects are not. ESLint may work better for linting JavaScript objects.

:book: Documentation

See documents.

:cd: 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

:book: 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 (eslint.config.js)

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

// eslint.config.js
import * as cssPlugin from "eslint-plugin-css"
export default [
    cssPlugin.configs["flat/recommended"],
];

The recommended configuration (.eslintrc.*)

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"
    ]
}

The standard configuration (eslint.config.js)

The plugin.configs["flat/standard"] config enables a subset of the rules and superset of plugin.configs["flat/recommended"] config that apply a subjective style. See lib/configs/flat/standard.ts for more details.

// eslint.config.js
import * as cssPlugin from "eslint-plugin-css"
export default [
    cssPlugin.configs["flat/standard"],
];

The standard configuration (.eslintrc.*)

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 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.

// eslint.config.js
import * as cssPlugin from "eslint-plugin-css"
export default [
    {
        plugins: { css: cssPlugin },
        rules: {
            // Override/add rules settings here, such as:
            "css/rule-name": "error"
        }
    }
];
// .eslintrc.js
module.exports = {
    "plugins": [
        "css"
    ],
    "rules": {
        // Override/add rules settings here, such as:
        "css/rule-name": "error"
    }
}

Using "plugin:css/all"

The plugin.configs["flat/all"] / 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.

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

    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'
}

:white_check_mark: Rules

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

Possible Errors

| Rule ID | Description | | |:--------|:------------|:---| | css/no-dupe-properties | disallow duplicate properties | :star: | | css/no-invalid-color-hex | disallow invalid hex colors | :star: | | css/no-shorthand-property-overrides | disallow shorthand properties that override related longhand properties | :star: | | css/no-unknown-property | disallow unknown properties | :star: | | css/no-unknown-unit | disallow unknown units | :star: |

Best Practices

| Rule ID | Description | | |:--------|:------------|:---| | css/named-color | enforce named colors | :wrench: | | css/no-length-zero-unit | disallow units for zero lengths | :lipstick::wrench: | | css/no-useless-color-alpha | disallow unnecessary alpha-channel transparency value | :star::wrench: | | css/prefer-reduce-shorthand-property-box-values | require reduction in box values of shorthand property | :lipstick::wrench: |

Stylistic Issues

| Rule ID | Description | | |:--------|:------------|:---| | css/color-hex-style | enforce hex color style | :lipstick::wrench: | | css/no-number-trailing-zeros | disallow trailing zeros in numbers. | :lipstick::wrench: | | css/number-leading-zero | require or disallow a leading zero for fractional numbers less than 1 | :lipstick::wrench: | | css/property-casing | enforce specific casing for CSS properties | :lipstick::wrench: |

:gear: Settings

See Settings.

:beers: 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 configurations.
  • npm run new [new rule name] runs to create the files needed for the new rule.
  • npm run docs:watch starts the website locally.

:lock: License

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