cmslewis / stylelint-config-palantir

Palantir's stylelint config

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

What's up with property ordering? It seems random.

We use a modified version of Concentric CSS. The basic template looks like this:

{
    display: ;    /* Where and how the box is placed */
    position: ;
    float: ;
    clear: ;

    visibility: ; /* Can the box be seen? */
    opacity: ;
    z-index: ;

    margin: ;     /* Layers of the box model */
    outline: ;
    border: ;
    background: ;
    padding: ;

    width: ;      /* Content dimensions and scrollbars */
    height: ;
    overflow: ;

    color: ;      /* Text */
    text: ;
    font: ;
}

For a full specification, check out property-order.js in this package.