JavaScript CSS Shell
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.circleci [breaking] Upgrade to Stylelint 9 (#15) Feb 23, 2018
scripts [breaking] Upgrade to Stylelint 9 (#15) Feb 23, 2018
test Upgrade stylelint to v7.8.0 and resolve deprecations (#10) Mar 9, 2017
.gitignore Fixup gitignore, npmignore Mar 9, 2017
.npmignore [breaking] Upgrade to Stylelint 9 (#15) Feb 23, 2018
LICENSE Update LICENSE (#8) Nov 11, 2016
README.md Add property ordering FAQ to README Apr 20, 2017
package.json 3.1.0 May 30, 2018
property-order.js Add CSS grid rule order (#21) May 30, 2018
sass.js [breaking] Upgrade to Stylelint 9 (#15) Feb 23, 2018
stylelint.config.js Add length-zero-no-unit: true (#19) May 29, 2018
yarn.lock

README.md

stylelint-config-palantir

CircleCI npm version License

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