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");

Maintenance

To release this package:

1. Bump the version in package.json by opening a new PR to the master branch.
2. Click on the Releases link at the top of the repository's homepage.
3. Click on the "Draft a new release button".
4. Create a new tag matching the version in package.json.
5. Click on "Generate release notes" to list the latest commits that will be part of the release.
6. Check the "Set as the latest release" checkbox.
7. Publish the release.

FAQ

How do I order my CSS properties in a declaration block?

We use alphabetical ordering enforced by stylelint-order.