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

1. Install a compatible version of stylelint (we express it as a peerDependency so you can choose a version that works for you).

npm install --save-dev stylelint stylelint-config-palantir

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

1. Install a compatible version of stylelint-scss which provides a collection of linter rules for Sass syntax.

npm install --save-dev stylelint-scss

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