Shopify's stylelint rules and config

Usage no npm install needed!

<script type="module">
  import shopifyStylelintPlugin from 'https://cdn.skypack.dev/@shopify/stylelint-plugin';



License: MIT npm version

Shopify's stylelint rules and config


Install stylelint and @shopify/stylelint-plugin:

With Yarn

yarn add --dev stylelint @shopify/stylelint-plugin

With npm

npm install stylelint @shopify/stylelint-plugin --save-dev


Shopify’s stylelint rules come bundled in @shopify/stylelint-plugin. To enable these rules, add a stylelint property in your package.json. See the stylelint configuration docs for more details.

"stylelint": {
  "extends": ["@shopify/stylelint-plugin"]

Now you can run stylelint by adding the following linting script to your package.json. See the stylelint CLI docs for more details.

"scripts": {
  "stylelint": "stylelint 'src/**/*.scss'"

Run it:

With Yarn

yarn run stylelint

With npm

npm run stylelint


This config also includes a prettier config which can be extended to format .scss. Using the stylelint-prettier plugin, prettier changes are exposed as stylelint rule violations.

Install prettier:

$ yarn add --dev prettier

Extend the config in your package.json:

"stylelint": {
  "extends": [

Add a prettier config in package.json:

"prettier": {
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": false

Prettier fixes shall be reported when you run stylelint **/*.css and shall be autofixed when you run stylelint --fix **/*.scss.