@projectwallace/stylelint-plugin

A stylelint plugin that checks the complexity of your CSS.

Installation

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

Usage

Using a preset config (recommended)

The easiest way to get started is by extending one of the preset configs:

• recommended — enables all rules with sensible defaults
• design-tokens — enables rules that encourage the use of design tokens in your CSS
• performance — enables rules that affect file size and loading performance
• maintainability — enables rules that limit complexity and enforce conventions to keep CSS easy to reason about and manage over time
• correctness - enables rules to help prevent errors

{
	"extends": ["@projectwallace/stylelint-plugin/configs/recommended"]
}

Manual configuration

Alternatively, add the plugin and configure rules individually in your stylelint config:

{
	"plugins": ["@projectwallace/stylelint-plugin"],
	"rules": {
		"projectwallace/max-average-declarations-per-rule": 5,
		"projectwallace/max-average-selector-complexity": 2,
		"projectwallace/max-average-selectors-per-rule": 2,
		"projectwallace/max-average-specificity": [0, 2.5, 1],
		"projectwallace/max-comment-size": 2500,
		"projectwallace/max-embedded-content-size": 10000,
		"projectwallace/max-file-size": 200000,
		"projectwallace/max-important-ratio": 1
		// ... etc ...
	}
}

Rules

All rules are included in the recommended config. The specialized configs below group rules by concern.

Performance

Rules that affect file size and loading performance.

Rule	Description
max-comment-size	Limit the total byte size of comments in a stylesheet
max-comments	Prevent the total number of comments from exceeding a predefined limit.
max-embedded-content-size	Limit the total byte size of embedded content (data URIs) in a stylesheet
max-file-size	Limit the total byte size of a stylesheet
max-lines-of-code	Prevent a stylesheet from exceeding a predefined number of lines of code
no-duplicate-data-urls	Disallow the same data URL from being used more than once
no-unused-layers	Disallow @layer names that are declared but never implemented

Design Tokens

Rules that encourage the use of design tokens in your CSS.

Rule	Description
max-unique-animation-functions	Limit the number of unique animation timing functions
max-unique-box-shadows	Limit the number of unique box-shadow values
max-unique-color-formats	Limit the number of distinct color formats
max-unique-colors	Limit the number of unique color values
max-unique-durations	Limit the number of unique duration values
max-unique-gradients	Limit the number of unique gradient values
max-unique-font-families	Limit the number of unique font families
max-unique-font-sizes	Limit the number of unique font sizes
max-unique-keyframes	Limit the number of unique keyframe animations
max-unique-media-queries	Limit the number of unique media queries
max-unique-supports-queries	Limit the number of unique supports queries
max-unique-text-shadows	Limit the number of unique text-shadow values

Correctness

Rules to help prevent errors.

Rule	Description
no-unknown-container-names	Disallow container names in @container that were never declared
no-unknown-custom-property	Disallow the use of undeclared custom properties in a var()
no-useless-custom-property-assignment	Disallow custom property assignments that reference themselves via var()
no-unused-container-names	Disallow container names that are declared but never queried
no-unused-custom-properties	Disallow custom properties that are never used in a var()
no-static-container-query	Disallow static (exact-match) numeric container feature conditions
no-static-media-query	Disallow static (exact-match) numeric media feature conditions
no-unreachable-media-conditions	Disallow media queries with contradictory conditions that can never match
no-important-in-keyframes	Disallow !important declarations inside @keyframes blocks
no-invalid-z-index	Disallow z-index values that are not valid 32-bit integers
no-unused-layers	Disallow @layer names that are declared but never implemented

Maintainability

Rules that limit complexity and enforce conventions to keep CSS easy to reason about and manage over time.

Rule	Description
max-atrules	Limit the total number of at-rules in a stylesheet
max-average-declarations-per-rule	Limit the average number of declarations per rule across the stylesheet
max-average-selector-complexity	Limit the average selector complexity across the stylesheet
max-average-selectors-per-rule	Limit the average number of selectors per rule across the stylesheet
max-average-specificity	Limit the average specificity across the stylesheet
max-comments	Prevent the total number of comments from exceeding a predefined limit.
max-declarations	Limit the total number of declarations in a stylesheet
max-declarations-per-rule	Limit the number of declarations in a single rule
max-important-ratio	Limit the ratio of !important declarations relative to all declarations
max-nesting-depth	Limit the maximum nesting depth of CSS rules and at-rules.
max-rules	Limit the total number of rules in a stylesheet
max-selector-complexity	Prevent selector complexity from going over a predefined maximum
max-selectors	Limit the total number of selectors in a stylesheet
max-selectors-per-rule	Limit the number of selectors in a single rule
max-spacing-resets	Limit the number of spacing reset declarations across the stylesheet
max-unique-color-formats	Limit the number of distinct color formats used across the stylesheet
max-unique-keyframes	Limit the number of unique keyframe animations defined across the stylesheet
max-unique-supports-queries	Limit the number of unique supports queries used across the stylesheet
max-unique-units	Limit the number of unique CSS units used across the stylesheet
max-unique-z-indexes	Limit the number of unique z-index values used across the stylesheet
min-declaration-uniqueness-ratio	Enforce a minimum ratio of unique declarations across the stylesheet
min-selector-uniqueness-ratio	Enforce a minimum ratio of unique selectors across the stylesheet
no-anonymous-layers	Disallow anonymous (unnamed) @layer blocks
no-atrule-browserhacks	Disallow the use of known browser hacks in at-rule preludes
no-prefixed-atrules	Disallow vendor-prefixed at-rules
no-prefixed-properties	Disallow vendor-prefixed CSS properties
no-prefixed-selectors	Disallow vendor-prefixed pseudo-classes and pseudo-elements in selectors
no-prefixed-values	Disallow vendor-prefixed CSS values
no-property-browserhacks	Prevent the use of known browserhacks for properties
no-property-shorthand	Disallow the use of shorthand properties
no-value-browserhacks	Disallow the use of known browser hacks in values

License

MIT