stylelint-config-palantir
v7.1.0
Published
stylelint configuration
Downloads
948
Maintainers
Readme
stylelint-config-palantir
This repository contains Palantir's standard configuration for Stylelint, our preferred stylesheet linter. These rules enforce 4-space indentation, comfortable whitespace, and property ordering that mimics the CSS box model. Properly formatted CSS looks like this (blank lines optional):
.sidebar {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
box-shadow: inset -1px 0 0 #000000;
box-sizing: border-box;
background-color: #ffffff;
width: 250px;
padding: 20px;
}
Usage
- Install a compatible version of
stylelint
(we express it as apeerDependency
so you can choose a version that works for you).
npm install --save-dev stylelint stylelint-config-palantir
- Configure your stylelint configuration file to extend this package:
{
"extends": "stylelint-config-palantir",
"rules": {
// Add overrides and additional rules here
}
}
Linting Sass
Stylelint works with preprocessor syntaxes such as Sass and Less out of the box but an additional library and config file are suggested for true linter superpowers.
- Install a compatible version of
stylelint-scss
which provides a collection of linter rules for Sass syntax.
npm install --save-dev stylelint-scss
- Configure your stylelint configuration file to also extend
sass.js
in this package. This file configures the stylelint-scss rules and updates some existing rules to support Sass syntax.
{
"extends": [
"stylelint-config-palantir",
"stylelint-config-palantir/sass.js",
],
"rules": {
// Add overrides and additional rules here
}
}
Customization
We use a lowercase-single-dashed-names-only
naming pattern for all rules that support a pattern. The regular expression for this pattern is exported as namingPattern
in the main stylelint.config.js
file. You can use it in your own rules like so:
const { namingPattern } = require("stylelint-config-palantir");
FAQ
How do I order my CSS properties in a declaration block?
We use alphabetical ordering enforced by stylelint-order.