Stylelint-8-point-grid NPM

stylelint-8-point-grid

Validates any defined margin, padding, height, and width.

Supports pixel and rem values.

npm.io

Inspiration

Ignores

css calc() function
sass variables

Installation

npm

npm install stylelint-8-point-grid --save-dev

yarn

yarn add stylelint-8-point-grid --dev

Usage

Update .stylelintrc or stylelint config in package.json.

Recommended config

// .stylelintrc
{
  "extends": [
    "stylelint-8-point-grid"
  ]
}

Uses base 8 for pixel values (and base 0.5 for rem values).

Extending the config

// .stylelintrc
{
  "extends": [
    "stylelint-8-point-grid"
  ],
  "rules": {
    "plugin/8-point-grid": {
      "base": 4,
      "allowlist": ["2px", "1px", "0.0625rem"],
      "customProperties": ['size', 'position'],
      "ignorelist": ["width", "height"]
    }
  }
}

base

value used for divisibility checking
base value is 8 by default
used to compute the base for rem values (base / 16)

using 4 as base means:

pixel values should be divisible by 4
rem values should be divisible by 0.25

customProperties

array of custom properties, useful when you use custom shorthand properties like postcss-short

allowlist

array of pixel or rem values to be excluded from divisibility checking

ignorelist

array of css properties to be excluded from divisibility checking
supported values:
- margin
- margin-top
- margin-bottom
- margin-left
- margin-right
- padding
- padding-top
- padding-bottom
- padding-left
- padding-right
- height
- min-height
- max-height
- width
- min-width
- max-width
- top
- bottom
- right
- left
- margin-block
- margin-block-start
- margin-block-end
- margin-inline
- margin-inline-start
- margin-inline-end
- padding-block
- padding-block-start
- padding-block-end
- padding-inline
- padding-inline-start
- padding-inline-end
- block-size
- min-block-size
- max-block-size
- inline-size
- min-inline-size
- max-inline-size
- inset
- inset-block
- inset-inline
- inset-block-start
- inset-block-end
- inset-inline-start
- inset-inline-end