Security News
Internet Archive Hacked, 31 Million Record Compromised
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
stylelint
Advanced tools
Stylelint is a powerful, modern linter that helps you avoid errors and enforce consistent conventions in your stylesheets. It is configurable and supports the latest CSS syntax as well as CSS-like syntaxes, such as SCSS.
Linting CSS files
This command will lint all CSS files in the 'src' directory and its subdirectories. It will check for errors and code quality issues based on the rules defined in the configuration.
"stylelint 'src/**/*.css'"
Fixing CSS files
This command will not only lint the CSS files but also attempt to fix any fixable issues, such as formatting inconsistencies, automatically.
"stylelint 'src/**/*.css' --fix"
Custom configuration
This JSON represents a custom Stylelint configuration object where specific rules are defined, such as disallowing invalid hex colors, setting indentation preferences, and enforcing no leading zero for numbers.
{ "rules": { "color-no-invalid-hex": true, "indentation": [2, { "except": ["block"] }], "number-leading-zero": "never" } }
Extending configurations
This JSON represents a Stylelint configuration that extends a shared configuration, in this case, 'stylelint-config-standard', which is a popular set of rules that enforce common stylistic conventions.
{ "extends": "stylelint-config-standard" }
Using plugins
This JSON represents a Stylelint configuration that includes a plugin, 'stylelint-scss', which adds SCSS-specific linting rules to Stylelint. The configuration then enables a rule from that plugin to disallow unknown at-rules in SCSS.
{ "plugins": ["stylelint-scss"], "rules": { "scss/at-rule-no-unknown": true } }
ESLint is a static code analysis tool for identifying problematic patterns in JavaScript code. It is similar to Stylelint in its extensibility and plugin ecosystem but is focused on JavaScript rather than stylesheets.
Prettier is an opinionated code formatter that supports many languages, including CSS. Unlike Stylelint, which can both lint and fix code, Prettier is solely focused on code formatting and does not provide linting functionalities.
Sass-lint is a node-only Sass linter for both sass and scss syntax. It is similar to Stylelint when working with SCSS files but does not support plain CSS or other CSS-like syntaxes.
CSSLint is a tool that helps to point out problems with your CSS code. It is less configurable than Stylelint and has a smaller set of rules and plugins, but it serves a similar purpose in linting CSS files.
Modern CSS linter.
$ npm install stylelint
5.x
or 4.x
compatibility - versions 1.0.0+
of the linter are compatible with PostCSS 5.0.2+
. Whereas, versions 0.8.0 and below
are compatible with PostCSS 4.x
.gulp-postcss
) or another PostCSS plugin that prints warnings (e.g. postcss-reporter
).You must, for now, use the linter as a PostCSS plugin. You can either use a PostCSS runner -- such as gulp-postcss
, grunt-postcss
and postcss-loader
-- or you can use the PostCSS JS API directly.
The linter also expects a config. You can either craft your own config or use a pre-written one.
An example of using gulp-postcss
and crafting your own config:
gulp.task("css", function () {
var postcss = require("gulp-postcss")
var stylelint = require("stylelint")
var reporter = require("postcss-reporter")
return gulp.src("src/**/*.css")
.pipe(postcss([
stylelint({ // an example config that has four rules
"rules": {
"color-no-invalid-hex": 2,
"declaration-colon-space-before": [2, "never"],
"indentation": [2, "tab"],
"number-leading-zero": [2, "always"]
}
}),
reporter({
clearMessages: true,
})
]))
})
An example of using the JS API and the stylelint-config-suitcss
config:
var fs = require("fs")
var postcss = require("postcss")
var stylelint = require("stylelint")
var configSuitcss = require("stylelint-config-suitcss")
var reporter = require("postcss-reporter")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
postcss([
stylelint(configSuitcss), // using the pre-written SuitCSS config
reporter(),
])
.process(css, { from: "input.css" })
.then()
.catch(err => console.error(err.stack))
The linter supports current and future CSS syntax. This includes all standard CSS but also special features that use standard CSS syntactic structures, e.g. special at-rules, special properties, and special functions. Some CSS-like language extensions -- features that use non-standard syntactic structures -- are, as such, supported; however, since there are infinite processing possibilities, the linter cannot support everything.
You can run the linter before or after your css processors. Depending on which processors you use, each approach has caveats:
In both cases you can either turn off the incompatible linter rule, or stop using the incompatible plugin. You could also approach plugin authors and request alternate formatting options that will make their plugin compatible with stylelint.
Rules are built into the linter and focus on standard CSS. They are configured within the rules
key of the config. The user guide contains details of how rules are named and how certain ones should be configured in unison.
Like ESLint, each rule can be turned off or on:
0
- turn the rule off.1
- turn the rule on as a warning (does not affect exit code).2
- turn the rule on Severities are not yet implemented. See issue #26 for more details.
An example of turning one rule off and another on:
{
"rules": {
"rule-no-single-line": 0, // turn rule off
"declaration-no-important": 2, // turn rule on
}
}
Rules can be temporarily turned off by using special comments in your CSS. For example, you can either turn all the rules off:
/* stylelint-disable */
a {}
/* stylelint-enable */
Or you can turn off individual rules:
/* stylelint-disable selector-no-id, declaration-no-important */
#id {
color: pink !important;
}
/* stylelint-enable */
Only the *-no-*
rules don't expect options. All the other rules must be explicitly configured as there are no default values.
An example of explicitly configuring the options for three rules:
{
"rules": {
"indentation": [2, "tab", {
except: ["value"],
}],
"declaration-colon-space-before": [2, "never"],
"number-leading-zero": [2, "always"],
}
}
If you prefer to enforce a third-party styleguide (rather than craft your own config), you can use:
You can also extend a shareable config file, starting with what's there and making your own modifications and additions:
var assign = require("lodash.assign")
var configSuitcss = require("stylelint-config-suitcss")
// change indentation to tabs and turn off the number-leading-zero rule
var myConfig = {
"rules": {
"indentation": [2, "tab"],
"number-leading-zero": 0,
}
}
// merge the configs together
var config = {
rules: assign(configSuitcss.rules, myConfig.rules)
}
Plugins are userland rules that support non-standard CSS features. To use one, add a "plugins"
property to your config. The key is the rule's name; the value is the rule function itself. Then, within the "rules"
object, your can add settings for your plugin rule just like any standard rule.
var myConfig = {
plugins: {
"special-rule": require("special-rule"),
},
rules: {
// ...
"special-rule": [ 2, "everything" ],
// ...
},
}
The linter works well with:
1.1.0
declaration-colon-newline-after
rule.indentation
rule now checks indentation of multi-line at-rule params, unless there's the except
option of param
.selector-list-comma-newline-after
.#${sass-interpolation}
in rules checking for hex colors.custom-property-pattern
and custom-media-pattern
.color-no-invalid-hex
rule no longer flags hashes in url()
arguments.node.raw()
instead of node.raws
to avoid expected errors.FAQs
A mighty CSS linter that helps you avoid errors and enforce conventions.
The npm package stylelint receives a total of 4,363,544 weekly downloads. As such, stylelint popularity was classified as popular.
We found that stylelint demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 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
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
Security News
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
Security News
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.