Stylelint configuration with strict settings

Table of Contents

• Overview
• Requirements
  • Developer Requirements
• Configuration
• Contributing
  • Affiliates
• License

Overview

This Stylelint configuration package includes a generous number of Stylelint plugins. The default settings are meant to enforce strict design patterns for CSS / SCSS. Most of the plugins included by this configuration can be found on the GitHub Awesome list for Stylelint. We try to include every well-known and well-received plugin. Then, we customize the settings to our liking. This package is maintained by Megabyte Labs. You can refer to the Megabyte Labs Code Docs to learn more about the design patterns we recommend there. You can use this configuration as is or customize it to your liking so you can have your own shared Stylelint configuration package by forking this repository!

Requirements

If you are simply including this library in your project, all you need is a recent version of Node.js. Node.js >14.18.0 is sometimes required and is the only version range we actively support. Albeit, it is highly probable that lower versions will work as well depending on the requirements that this project imports.

Developer Requirements

The following versions of Node.js and Python are required for development:

• Node.js >14.18.0
• Python >3.10.0

Other versions may work, but only the above versions are supported. Most development dependencies are installed automatically by our Taskfile.yml set-up (even Node.js and Python). Run bash start.sh to install Bodega (an improved fork of go-task) and run the initialization sequence. The taskfiles will automatically install dependencies as they are needed, based on what development tasks you are running. For more information, check out the CONTRIBUTING.md or simply run:

npm run help

npm run help will ensure Bodega is installed and then open an interactive dialog where you can explore and learn about various developer commands.

Configuration

This configuration combines several popular shared configurations and also includes a handful of useful plugins. The configuration is defined in the src/main.js file. The configuration is:

module.exports = {
  plugins: [
    'stylelint-css-modules',
    'stylelint-config-rational-order',
    'stylelint-css-modules-no-global-scoped-selector',
    'stylelint-csstree-validator',
    'stylelint-declaration-block-no-ignored-properties',
    'stylelint-declaration-strict-value',
    'stylelint-gamut',
    'stylelint-group-selectors',
    'stylelint-high-performance-animation',
    'stylelint-images',
    'stylelint-no-nested-media',
    'stylelint-no-unresolved-module',
    'stylelint-no-unsupported-browser-features',
    'stylelint-rem-over-px',
    'stylelint-selector-no-empty',
    'stylelint-selector-tag-no-without-class',
    'stylelint-use-nesting'
  ],
  rules: {
    'css-modules/composed-class-names': true,
    'css-modules/css-variables': [
      true,
      {
        resolve: {
          extensions: ['.css', '.scss']
        }
      }
    ],
    'css-modules/no-global-scoped-selector': true,
    'csstools/use-nesting': true,
    'csstree/validator': true,
    'gamut/color-no-out-gamut-range': true,
    'images/broken': true,
    'images/prefer-data-uri': 2048,
    'pitcher/no-nested-media': true,
    'plugin/declaration-block-no-ignored-properties': true,
    'plugin/no-low-performance-animation-properties': true,
    'plugin/no-unresolved-module': {
      alias: {
        assets: 'pebbles'
      },
      modules: ['node_modules']
    },
    'plugin/no-unsupported-browser-features': [
      true,
      {
        browsers: ['> 1%', 'Last 2 versions'],
        ignore: ['rem'],
        ignorePartialSupport: true
      }
    ],
    'plugin/selector-tag-no-without-class': ['div', 'span'],
    'plugin/stylelint-group-selectors': true,
    'plugin/stylelint-selector-no-empty': true,
    'rem-over-px/rem-over-px': true,
    'scale-unlimited/declaration-strict-value': 'color'
  },
  extends: [
    'stylelint-config-html',
    'stylelint-stylus/standard',
    'stylelint-config-sass-guidelines',
    'stylelint-config-standard-scss',
    'stylelint-config-rational-order',
    'stylelint-config-prettier-scss'
  ]
}

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page. If you would like to contribute, please take a look at the contributing guide.

Brian Zalewski

Affiliates

Below you will find a list of services we leverage that offer special incentives for signing up for their services through our special links:

License

Copyright © 2020-2021 Megabyte LLC. This project is MIT licensed.