Nikolay Vitkov
bb976f7b9e
Add one more deps "@typescript-eslint/utils" to top level to be used in our own custom rules (also needed override if I didn't). Bug: none Change-Id: I130415d1ec5f096ca51200df3eb688dadd963d0f Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6343232 Reviewed-by: Benedikt Meurer <bmeurer@chromium.org> Commit-Queue: Nikolay Vitkov <nvitkov@chromium.org>
stylelint-config-standard
The standard shareable config for Stylelint.
It extends stylelint-config-recommended and turns on additional rules to enforce modern conventions found in the CSS specifications and within Baseline Widely Available.
To see the rules that this config uses, please read the config itself.
Example
@import url("foo.css");
@import url("bar.css");
@custom-media --foo (min-width: 30em);
/**
* Multi-line comment
*/
:root {
--brand-red: hsl(5deg 10% 40%);
}
/* Single-line comment */
.class-foo:not(a, div) {
margin: 0;
top: calc(100% - 2rem);
}
/* Flush single line comment */
@media (width >= 60em) {
#id-bar {
/* Flush to parent comment */
--offset: 0px;
color: #fff;
font-family: Helvetica, "Arial Black", sans-serif;
left: calc(var(--offset) + 50%);
}
/* Flush nested single line comment */
a::after {
display: block;
content: "→";
background-image: url("x.svg");
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Note: the config is tested against this example, as such the example contains plenty of CSS syntax and features.
Installation
npm install stylelint-config-standard --save-dev
Usage
Set your Stylelint config to:
{
"extends": "stylelint-config-standard"
}
Extending the config
Add a "rules" key to your config, then add your overrides and additions there.
You can turn off rules by setting its value to null. For example:
{
"extends": "stylelint-config-standard",
"rules": {
"selector-class-pattern": null
}
}
Or lower the severity of a rule to a warning using the severity secondary option. For example:
{
"extends": "stylelint-config-standard",
"rules": {
"property-no-vendor-prefix": [
true,
{
"severity": "warning"
}
]
}
}
Or to add a rule, For example, the unit-allowed-list one:
{
"extends": "stylelint-config-standard",
"rules": {
"unit-allowed-list": ["em", "rem", "s"]
}
}
We recommend adding more of Stylelint's rules to your config as these rules need to be configured to suit your specific needs.