README
stylelint-no-unused-selectors
Concepts
stylelint-no-unused-selectors
is a stylelint rule to disallow unused CSS selectors.
It works best with component-oriented applications where views are built on top of a lot of small components, each of which contains a template file (e.g., jsx or tsx) and its corresponding scoped CSS file (e.g., CSS Modules or PostCSS with BEM).
Assuming your component consists of following files:
FooComponent
├── index.js
├── FooComponent.jsx
└── FooComponent.css
when stylelint-no-unused-selectors
runs on FooComponent.css, it extracts class
es and id
s from FooComponent.jsx and detects unused CSS rules.
Features
If you'd like to jump into code, you can find our examples in the repository that are close to real-world situations.
With the built-in plugins, it supports
- HTML via stylelint-no-unused-selectors-plugin-html
- React components written in pure JavaScript, JSX, flow-typed JSX, JSX + future syntaxes in TC39 proposals via stylelint-no-unused-selectors-plugin-jsx
- React components written in TypeScript via stylelint-no-unused-selectors-plugin-tsx
- CSS Modules
- Basic usages of
classnames
package
See the documentations of built-in plugins for more details.
Installation
yarn add stylelint stylelint-no-unused-selectors
Usage
It works as a stylelint rule, and its plugin name is plugin/no-unused-selectors
. An example configuration of stylelint would look like:
{
"plugins": [
"stylelint-no-unused-selectors"
],
"rules": {
"plugin/no-unused-selectors": true
}
}
See stylelint's documentation for more details.
Configuration
By passing a configuration object described below as the rule's setting value, you can customise the rule's behaviours.
The default configuration is:
{
"rules": {
"plugin/no-unused-selectors": {
"resolve": {
"documents": [
"{cssDir}/{cssName}.tsx",
"{cssDir}/{cssName}.jsx",
"{cssDir}/{cssName}.html",
"{cssDir}/{cssName}.htm",
"{cssDir}/{cssDirName}.tsx",
"{cssDir}/{cssDirName}.jsx",
"{cssDir}/{cssDirName}.html",
"{cssDir}/{cssDirName}.htm",
"{cssDir}/index.tsx",
"{cssDir}/index.jsx",
"{cssDir}/index.html",
"{cssDir}/index.htm"
]
},
"plugins": [
{
"test": "\\.html?