@justeattakeaway/stylelint-config-pie

v3.0.1

Published

5 days ago

Shareable Stylelint config for use with any front-end web projects across JET.

0High
0Medium
0Low

PIE stylelint stylelint-config standard

stylelint-config-pie

PIE shareable stylelint config.

A Stylelint config used in PIE – Just Eat Takeaway’s design system.

Use it as is or as a foundation for your own config.

To see the rules that this config uses, please read the config itself.

Installation

npm install @justeattakeaway/stylelint-config-pie --save-dev

Usage

Rules

Currently there are 4 different sets of rules:

base - the base rules that we'd advise all projects use and extend as needed.
strict - a smaller collection of optional opinionated rules.
ordering - an even smaller collection of optional rules that specify the ordering of CSS Variables.
style - an optional stylistic ruleset powered by @stylistic/stylelint-plugin.

In your projects

If you've installed stylelint-config-pie locally within your project, just set your stylelint config to:

{
  "extends": "@justeattakeaway/stylelint-config-pie/base"
}

The easiest way to do this is by adding the following section to your package.json:

"stylelint": {
  "extends": "@justeattakeaway/stylelint-config-pie/base"
}

You may only want to use specific rulesets such as base, strict, ordering or style. If so, simply point to the ones you'd like to use:

"stylelint": {
  "extends": [
    "@justeattakeaway/stylelint-config-pie/base",
    "@justeattakeaway/stylelint-config-pie/strict",
    "@justeattakeaway/stylelint-config-pie/ordering",
    "@justeattakeaway/stylelint-config-pie/style"
  ]
}

Note: @justeattakeaway/stylelint-config-pie includes all rules. We would strongly recommend using @justeattakeaway/stylelint-config-pie/base and going from there.

If you've globally installed stylelint-config-pie using the -g flag, then you'll need to use the absolute path to stylelint-config-pie in your config e.g.

{
  "extends": "/absolute/path/to/@justeattakeaway/stylelint-config-pie/base"
}

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to change the indentation to tabs, and turn off the number-leading-zero rule:

{
  "extends": "@justeattakeaway/stylelint-config-pie/base",
  "rules": {
    "indentation": "tab",
    "number-leading-zero": null
  }
}

Plugins

`@justeattakeaway/pie-design-tokens`

A built-in plugin that validates PIE design token usage (--dt- prefixed custom properties). Not enabled by default — opt in via your rules:

{
  "extends": "@justeattakeaway/stylelint-config-pie/base",
  "rules": {
    "@justeattakeaway/pie-design-tokens": true
  }
}

Checks:

Global tokens — Warns when global tokens are used directly instead of alias tokens.
Deprecated tokens — Warns when a deprecated token is used and suggests a replacement.
Invalid tokens — Warns when a --dt- token does not exist.
Font token calc() enforcement — Warns when --dt-font-*-size or --dt-font-*-line-height tokens are used in font-size or line-height without calc() wrapping.

Requires @justeat/pie-design-tokens as a dependency. Optionally loads @justeattakeaway/pie-css for additional tokens (e.g. z-index).

Documentation

Configured Lints

stylelint-config-pie is a great foundation for your own config. Here is a list of the rules turned on in this config, and what they do:

Base

Strict

Ordering

Style

Stylistic rules (e.g. indentation, casing) were moved out of the core Stylelint package to instead be optionally included via plugins from Stylelint v15. We use the @stylistic/stylelint-plugin to allow these stylistic rules to be optionally included in your rulesets.

Configured rules:

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme