Stylelint#

Stylelint is a modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets. It supports various CSS preprocessors like Sass, Less, and even CSS-in-JS.

Starter Stylelint Template#

Extension.js includes a New Tab Stylelint template to quickly get started with linting your CSS files in new projects.

Try it yourself#

npx extension@latest create my-extension --template=new-stylelint

Usage With An Existing Extension#

You can easily integrate Stylelint into your existing Extension.js project by installing the necessary dependencies and creating a configuration file.

Installation#

Install Stylelint and the required plugins:

npx install -D stylelint stylelint-config-standard

Stylelint Configuration#

Create a Stylelint configuration file (.stylelintrc.json) at the root of your project. Here's an example configuration that extends the standard Stylelint configuration:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "color-no-invalid-hex": true,
    "font-family-no-duplicate-names": true,
    "block-no-empty": true,
    "selector-pseudo-element-no-unknown": [
      true,
      { "ignorePseudoElements": ["v-deep"] }
    ],
    "declaration-block-no-duplicate-properties": true
  }
}

Example Usage in a CSS File#

Once Stylelint is configured, it will automatically check your CSS files for errors and inconsistencies. For example:

/* myComponent.css */

+ .primaryColor {
+   color: #000;
+ }
- .primaryColor {
-   color: #0000000; /* Invalid hex color, Stylelint will catch this */
- }

Example Usage in a CSS Module#

Stylelint also supports CSS modules. Here's how you can lint your .module.css files:

/* myComponent.module.css */

.primaryButton {
  background-color: #3498db;
  color: #fff;
}

You can now run Stylelint to automatically lint your CSS and CSS Modules:

stylelint '**/*.css'

Example Usage in a Sass or Less File#

Stylelint can also be used with Sass or Less files:

/* myComponent.scss */

.primaryButton {
  background-color: $primary-color;
  color: #fff;
}

To lint Sass or Less files, install the necessary plugins:

npx install -D stylelint-scss stylelint-less

Now you can lint your Sass or Less files:

stylelint '**/*.scss'

Integrating Stylelint with Prettier#

You can integrate Stylelint with Prettier to automatically format and lint your styles. To do this, install the following dependencies:

npx install -D stylelint-prettier prettier

Then, update your .stylelintrc.json file to include Prettier:

{
  "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"]
}

Now, Stylelint will format and lint your styles based on Prettier rules.

Next Steps#

• Learn how to integrate Prettier into your extension to ensure consistent code formatting.