Quick Start

Introduction

@tryg/stylelint-plugin is a collection of custom linting rules for Stylelint, designed to help you write consistent and maintainable CSS code.

What's in the plugin?

Our plugin includes three custom rules:

@tryg/no-deprecated-vars

Disallows the use of deprecated CSS tokens (variables) in your CSS code.

@tryg/no-hardcoded-declaration-values

Disallows the use of hardcoded values for certain CSS properties, encouraging the use of CSS variables instead.

@tryg/no-invalid-variable-assignment

Disallows the assignment of CSS variables to invalid properties in your CSS code.

Getting Started

To get started with our plugin, follow these steps:

Install the plugin using npm or yarn:

npm install @tryg/stylelint-plugin --save-dev

Add the plugin to your Stylelint configuration file (.stylelintrc.json):

{
  "plugins": ["@tryg/stylelint-plugin"],
  "rules": {
    "@tryg/no-deprecated-vars": true,
    "@tryg/no-hardcoded-declaration-values": true,
    "@tryg/no-invalid-variable-assignment": true
  }
}

Run Stylelint on your CSS code to see the plugin in action:

npx stylelint your-css-file.css

Learn More

For more information on each rule, check out the following pages:

No Deprecated Vars

Learn how to use the @tryg/no-deprecated-vars rule.

No Hardcoded Declaration Values

Learn how to use the @tryg/no-hardcoded-declaration-values rule.

No Invalid Variable Assignment

Learn how to use the @tryg/no-invalid-variable-assignment rule.

FAQ

Some common questions you may encounter.