Stylelint: require tabs instead of spaces for indenting, but don't count tabs

Question

I frequently nest my CSS code to better understand variations, such as this:

.a .animate {
    transition: opacity 0.2s linear;
    opacity: 0;
}

    html.js .a.show .animate {
        opacity: 1;
    }

With a rule of "indentation": "tab", Stylelint lists an error with the second definition, expecting zero tabs.

How can I request Stylelint check that tabs are used for indenting (not spaces), but not count them?

Submitted feature request: https://github.com/stylelint/stylelint/issues/6595

Answer 1

You can write a custom rule as a Stylelint plugin. Custom rules support a particular methodology or toolset, apply to non-standard constructs and features, or be for specific use cases.

However, the Stylelint docs now recommend using a pretty printer, like Prettier, alongside Stylelint for formatting whitespace. Linters and pretty printers are complementary tools that work together to help you write consistent and error-free code.

You can use Stylelint to:

• avoid errors
• enforce (non-stylistic conventions)

And then use a pretty printer (like Prettier) to format stylistic things like whitespace to an optimal line length.

Prettier is an opinionated formatter, so you may need to relinquish control of how your indent your CSS rules. Alternatively, you can write a Prettier plugin to enforce your specific indentation style.