Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
stylelint-no-unused-selectors
Advanced tools
Readme
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.
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
classnames
packageSee the documentations of built-in plugins for more details.
yarn add stylelint stylelint-no-unused-selectors
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.
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?$",
"plugin": "stylelint-no-unused-selectors-plugin-html"
},
{
"test": "\\.jsx?$",
"plugin": "stylelint-no-unused-selectors-plugin-jsx",
"options": {
"sourceType": "module",
"plugins": ["jsx", "flow"]
}
},
{
"test": "\\.tsx$",
"plugin": "stylelint-no-unused-selectors-plugin-tsx"
}
]
}
}
}
Type: Array<string>
This field tells the rule how to find a template file from a CSS file. The paths are evaluated from the top to the bottom and the first path that exists will be used.
Available variables are as follows:
Name | Description | Example (/project_root/components/Foo/Bar.css) |
---|---|---|
{cssDir} | The path to a directory that contains a CSS file | /project_root/components/Foo |
{cssDirName} | The name of a directory that contains a CSS file | Foo |
{cssName} | The file name of a CSS file without its extension | Bar |
Type: Array<Plugin>
stylelint-no-unused-selectors
relies on plugins to extract className
s/id
s and/or determine if a selector is used in a template file.
Type: string
(the value will be directly compiled with new RegExp()
)
Plugin.test
represents what kind of template files should be processed with a plugin.
Type: string
A name of a plugin that is applied to template files, which is identical to its package name.
Type: any
(optional)
An optional object that will be passed to a plugin, which can be used as parser's configurations or to change the plugin's behaviour. See each plugin's document to know what kind of options are available.
(To be written)
Please note that all the following tools are to remove unused rules, not to lint CSS files.
FAQs
A rule for stylelint to disallow unused selectors
The npm package stylelint-no-unused-selectors receives a total of 50,545 weekly downloads. As such, stylelint-no-unused-selectors popularity was classified as popular.
We found that stylelint-no-unused-selectors demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.