@projectwallace/stylelint-plugin

A stylelint plugin that checks the complexity of your CSS.

Only use this plugin with standard CSS. Non-standard CSS (Sass, Less, etc.) is not supported.

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:

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

performance — enables only the rules that affect file size and loading performance:

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

maintainability — enables rules that limit complexity and enforce conventions to keep CSS easy to reason about and manage over time:

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

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,
		"projectwallace/max-declarations-per-rule": 15,
		"projectwallace/max-lines-of-code": 200,
		"projectwallace/max-selector-complexity": 5,
		"projectwallace/max-selectors-per-rule": 10,
		"projectwallace/max-unique-units": 5,
		"projectwallace/min-declaration-uniqueness-ratio": 0.5,
		"projectwallace/min-selector-uniqueness-ratio": 0.66,
		"projectwallace/no-anonymous-layers": true,
		"projectwallace/no-duplicate-data-urls": true,
		"projectwallace/no-property-browserhacks": true,
		"projectwallace/no-static-container-query": true,
		"projectwallace/no-static-media-query": true,
		"projectwallace/no-undeclared-container-names": true,
		"projectwallace/no-unknown-custom-property": true,
		"projectwallace/no-unreachable-media-conditions": true,
		"projectwallace/no-unused-container-names": true,
		"projectwallace/no-unused-custom-properties": true,
		"projectwallace/no-unused-layers": true,
		"projectwallace/no-invalid-z-index": true,
		"projectwallace/no-property-shorthand": true,
		"projectwallace/no-useless-custom-property-assignment": true
	}
}

Rules

| Rule | Description | | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | 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-declarations-per-rule | Limit the number of declarations in a single rule | | max-comment-size | Limit the total byte size of comments in a stylesheet | | 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-important-ratio | Limit the ratio of !important declarations relative to all declarations | | max-lines-of-code | Prevent a stylesheet from exceeding a predefined number of lines of code | | max-selector-complexity | Prevent selector complexity from going over a predefined maximum | | max-selectors-per-rule | Limit the number of selectors in a single rule | | max-unique-units | Limit the number of unique CSS units 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-duplicate-data-urls | Disallow the same data URL from being used more than once | | no-property-browserhacks | Prevent the use of known browserhacks for properties | | 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-invalid-z-index | Disallow z-index values that are not valid 32-bit integers | | no-property-shorthand | Disallow the use of shorthand properties | | no-unused-layers | Disallow @layer names that are declared but never implemented |

Credits

The importFrom option on no-unknown-custom-property and no-unused-custom-properties was inspired by the importFrom option in csstools/postcss-custom-properties.

License

MIT