Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stylelint/stylelint-config-standard
The standard shareable config for Stylelint
https://github.com/stylelint/stylelint-config-standard
stylelint
Last synced: 9 days ago
JSON representation
The standard shareable config for Stylelint
- Host: GitHub
- URL: https://github.com/stylelint/stylelint-config-standard
- Owner: stylelint
- License: mit
- Created: 2016-01-11T18:10:57.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2023-12-31T07:53:00.000Z (6 months ago)
- Last Synced: 2024-01-17T07:47:24.284Z (5 months ago)
- Topics: stylelint
- Language: JavaScript
- Homepage:
- Size: 2.97 MB
- Stars: 1,357
- Watchers: 19
- Forks: 123
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-github-star - stylelint-config-standard
- awesome-stars - stylelint-config-standard - The standard shareable config for stylelint (JavaScript)
- awesome-stars - stylelint/stylelint-config-standard - The standard shareable config for Stylelint (others)
README
# stylelint-config-standard
[](https://www.npmjs.org/package/stylelint-config-standard) [](https://github.com/stylelint/stylelint-config-standard/actions)
> The standard shareable config for Stylelint.
It extends [`stylelint-config-recommended`](https://github.com/stylelint/stylelint-config-recommended) and turns on additional rules to enforce modern conventions found in the [CSS specifications](https://www.w3.org/Style/CSS/current-work).
To see the rules that this config uses, please read the [config itself](./index.js).
## Example
```css
@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
```bash
npm install stylelint-config-standard --save-dev
```
## Usage
Set your Stylelint config to:
```json
{
"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:
```json
{
"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:
```json
{
"extends": "stylelint-config-standard",
"rules": {
"property-no-vendor-prefix": [
true,
{
"severity": "warning"
}
]
}
}
```
Or to add a rule, For example, the `unit-allowed-list` one:
```json
{
"extends": "stylelint-config-standard",
"rules": {
"unit-allowed-list": ["em", "rem", "s"]
}
}
```
We recommend adding more of [Stylelint's rules](https://stylelint.io/user-guide/rules/) to your config as these rules need to be configured to suit your specific needs.
## [Changelog](CHANGELOG.md)
## [License](LICENSE)