@hint/hint-leading-dot-classlist
v1.0.20
Published
Inform users about classList.add or classList.remove with leading '.' in the argument pitfall
Downloads
103,862
Readme
Leading '.' in classList.add
or classList.remove
This hint informs users that they should to use
Element.classList
argument without a leading '.' as it
may lead to unintended results.
Why is this important?
When writing selectors either in CSS or using DOM methods like
querySelector
, class names are referred to using a leading '.',
e.g. document.querySelector('.foo')
. However when modifying the
classList
of an element the raw class name is expected to be used
instead, e.g. element.classList.add('foo')
.
Unfortunately if a leading '.' is provided to the classList
APIs
it will succeed without an error, treating the '.' as part of the
name itself. This typically causes selectors elsewhere in the code
to fail to match this element. Figuring out why can be tedious and
time-consuming until the typo has been found.
What does the hint check?
This hint scans JavaScript source code to check if the argument in
element.classList.add
or element.classList.remove
contains a
leading '.'. If so it emits a warning to help save time debugging
this subtle issue.
Examples that trigger the hint
const element = document.getElementById('foo');
element.classList.add('.foo');
element.classList.remove('.foo');
Examples that pass the hint
const element = document.getElementById('foo');
element.classList.add('foo');
element.classList.remove('foo');
How to use this hint?
This package is installed automatically by webhint:
npm install hint --save-dev
To use it, activate it via the .hintrc
configuration file:
{
"connector": {...},
"formatters": [...],
"parsers": [...],
"hints": {
"leading-dot-classlist": "warning"
},
...
}
Note: The recommended way of running webhint is as a devDependency
of
your project.