Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
stylelint-config-standard
Advanced tools
The stylelint-config-standard package is an extensible shared configuration for Stylelint, which is a mighty, modern linter that helps you avoid errors and enforce conventions in your styles. It is considered the standard configuration for Stylelint, providing a sensible default configuration that enforces common stylistic conventions for CSS.
Extensible Configuration
This package provides a base set of rules for Stylelint, which can be extended in a project's .stylelintrc configuration file. By extending stylelint-config-standard, you inherit a standard set of rules that can be customized further.
{
"extends": "stylelint-config-standard"
}
Enforce Stylistic Conventions
The package enforces stylistic conventions such as lowercase hex colors, indentation levels, and leading zeros in numbers. These rules help maintain consistency across your project's stylesheets.
{
"rules": {
"color-hex-case": "lower",
"indentation": 2,
"number-leading-zero": "always"
}
}
Customizable Rules
While it provides a standard set of rules, it also allows for customization. Developers can override or extend the rules to fit their project's specific needs, such as allowing certain at-rules that are not part of CSS specifications but are used by preprocessors.
{
"extends": "stylelint-config-standard",
"rules": {
"at-rule-no-unknown": [ true, {
"ignoreAtRules": ["extends", "ignores"]
}]
}
}
This package is a lighter version of the standard configuration, focusing on possible error rules rather than stylistic rules. It's a good starting point for projects that want to enforce error checking without imposing stylistic choices.
This package extends stylelint-config-standard and adds rules specific to Sass, such as those for nesting depth, name formats, and other conventions. It's tailored for projects that use Sass and want to adhere to common guidelines.
This package integrates Stylelint with Prettier, an opinionated code formatter. It disables all rules that might conflict with Prettier, allowing developers to use Stylelint for linting and Prettier for formatting.
The standard shareable config for stylelint.
Extends stylelint-config-recommended
.
Turns on additional rules to enforce the common stylistic conventions found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, GitHub's PrimerCSS Guidelines, Google's CSS Style Guide, Airbnb's Styleguide, and @mdo's Code Guide.
It favours flexibility over strictness for things like multi-line lists and single-line rulesets, and tries to avoid potentially divisive rules.
Use it as is or as a foundation for your own config.
To see the rules that this config uses, please read the config itself.
@import url(x.css);
@import url(y.css);
/**
* Multi-line comment
*/
.selector-1,
.selector-2,
.selector-3[type="text"] {
background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
box-sizing: border-box;
display: block;
color: #333;
}
.selector-a,
.selector-b:not(:first-child) {
padding: 10px !important;
top: calc(calc(1em * 2) / 3);
}
.selector-x { width: 10%; }
.selector-y { width: 20%; }
.selector-z { width: 30%; }
/* Single-line comment */
@media (min-width >= 60em) {
.selector {
/* Flush to parent comment */
transform: translate(1, 1) scale(3);
}
}
@media (orientation: portrait), projection and (color) {
.selector-i + .selector-ii {
background: color(rgb(0, 0, 0) lightness(50%));
font-family: helvetica, "arial black", sans-serif;
}
}
/* Flush single line comment */
@media
screen and (min-resolution: 192dpi),
screen and (min-resolution: 2dppx) {
.selector {
background-image:
repeating-linear-gradient(
-45deg,
transparent,
#fff 25px,
rgba(255, 255, 255, 1) 50px
);
margin: 10px;
margin-bottom: 5px;
box-shadow:
0 1px 1px #000,
0 1px 0 #fff,
2px 2px 1px 1px #ccc inset;
height: 10rem;
}
/* Flush nested single line comment */
.selector::after {
content: '→';
background-image: url(x.svg);
}
}
Note: the config is tested against this example, as such the example contains plenty of CSS syntax, formatting and features.
npm install stylelint-config-standard --save-dev
If you've installed stylelint-config-standard
locally within your project, just set your stylelint
config to:
{
"extends": "stylelint-config-standard"
}
If you've globally installed stylelint-config-standard
using the -g
flag, then you'll need to use the absolute path to stylelint-config-standard
in your config e.g.
{
"extends": "/absolute/path/to/stylelint-config-standard"
}
Simply add a "rules"
key to your config, then add your overrides and additions there.
For example, to change the at-rule-no-unknown
rule to use its ignoreAtRules
option, change the indentation
to tabs, turn off the number-leading-zero
rule,and add the unit-whitelist
rule:
{
"extends": "stylelint-config-standard",
"rules": {
"at-rule-no-unknown": [ true, {
"ignoreAtRules": [
"extends",
"ignores"
]
}],
"indentation": "tab",
"number-leading-zero": null,
"unit-whitelist": ["em", "rem", "s"]
}
}
stylelint-config-standard
is a great foundation for your own config. You can extend it to create a tailored and much stricter config:
autoprefixer
you'll want to disallow vendor prefixes using:
at-rule-blacklist
at-rule-whitelist
color-named
color-no-hex
comment-word-blacklist
declaration-no-important
declaration-property-unit-blacklist
declaration-property-unit-whitelist
declaration-property-value-blacklist
declaration-property-value-whitelist
function-blacklist
function-url-scheme-blacklist
function-url-scheme-whitelist
function-whitelist
media-feature-name-blacklist
media-feature-name-whitelist
property-blacklist
property-whitelist
selector-attribute-operator-blacklist
selector-attribute-operator-whitelist
selector-max-class
selector-max-attribute
selector-max-combinators
selector-max-id
selector-no-qualifying-type
selector-max-type
selector-max-universal
selector-pseudo-class-blacklist
selector-pseudo-class-whitelist
unit-blacklist
unit-whitelist
The config is broadly compatible with SugarSS syntax. You will need to turn off the rules that check braces and semicolons, as so:
{
"extends": "stylelint-config-standard",
"rules": {
"block-closing-brace-empty-line-before": null,
"block-closing-brace-newline-after": null,
"block-closing-brace-newline-before": null,
"block-closing-brace-space-before": null,
"block-opening-brace-newline-after": null,
"block-opening-brace-space-after": null,
"block-opening-brace-space-before": null,
"declaration-block-semicolon-newline-after": null,
"declaration-block-semicolon-space-after": null,
"declaration-block-semicolon-space-before": null,
"declaration-block-trailing-semicolon": null
}
}
18.0.0
stylelint-config-recommended@2.0.0
.FAQs
Standard shareable config for Stylelint
The npm package stylelint-config-standard receives a total of 2,416,269 weekly downloads. As such, stylelint-config-standard popularity was classified as popular.
We found that stylelint-config-standard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.