Socket
Socket
Sign inDemoInstall

stylelint-config-standard

Package Overview
Dependencies
Maintainers
3
Versions
48
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

stylelint-config-standard - npm Package Compare versions

Comparing version 22.0.0 to 23.0.0-0

48

index.js

@@ -6,2 +6,3 @@ 'use strict';

rules: {
'alpha-value-notation': 'percentage',
'at-rule-empty-line-before': [

@@ -16,2 +17,3 @@ 'always',

'at-rule-name-space-after': 'always-single-line',
'at-rule-no-vendor-prefix': true,
'at-rule-semicolon-newline-after': 'always',

@@ -25,2 +27,3 @@ 'block-closing-brace-empty-line-before': 'never',

'block-opening-brace-space-before': 'always',
'color-function-notation': 'modern',
'color-hex-case': 'lower',

@@ -43,2 +46,14 @@ 'color-hex-length': 'short',

],
'custom-media-pattern': [
'^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
{
message: 'Expected custom media query name to be kebab-case',
},
],
'custom-property-pattern': [
'^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
{
message: 'Expected custom property name to be kebab-case',
},
],
'declaration-bang-space-after': 'never',

@@ -51,2 +66,3 @@ 'declaration-bang-space-before': 'always',

'declaration-block-trailing-semicolon': 'always',
'declaration-block-no-redundant-longhand-properties': true,
'declaration-colon-newline-after': 'always-multi-line',

@@ -62,2 +78,3 @@ 'declaration-colon-space-after': 'always-single-line',

],
'font-family-name-quotes': 'always-where-recommended',
'function-comma-newline-after': 'always-multi-line',

@@ -70,9 +87,19 @@ 'function-comma-space-after': 'always-single-line',

'function-parentheses-space-inside': 'never-single-line',
'function-url-quotes': 'always',
'function-whitespace-after': 'always',
'hue-degree-notation': 'angle',
indentation: 2,
'keyframes-name-pattern': [
'^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
{
message: 'Expected keyframe name to be kebab-case',
},
],
'length-zero-no-unit': true,
'max-empty-lines': 1,
'max-line-length': 120,
'media-feature-colon-space-after': 'always',
'media-feature-colon-space-before': 'never',
'media-feature-name-case': 'lower',
'media-feature-name-no-vendor-prefix': true,
'media-feature-parentheses-space-inside': 'never',

@@ -84,7 +111,11 @@ 'media-feature-range-operator-space-after': 'always',

'media-query-list-comma-space-before': 'never',
'no-empty-first-line': true,
'no-eol-whitespace': true,
'no-irregular-whitespace': true,
'no-missing-end-of-source-newline': true,
'number-leading-zero': 'always',
'number-max-precision': 4,
'number-no-trailing-zeros': true,
'property-case': 'lower',
'property-no-vendor-prefix': true,
'rule-empty-line-before': [

@@ -100,8 +131,22 @@ 'always-multi-line',

'selector-attribute-operator-space-before': 'never',
'selector-attribute-quotes': 'always',
'selector-class-pattern': [
'^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
{
message: 'Expected class selector to be kebab-case',
},
],
'selector-combinator-space-after': 'always',
'selector-combinator-space-before': 'always',
'selector-descendant-combinator-no-non-space': true,
'selector-id-pattern': [
'^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
{
message: 'Expected id selector to be kebab-case',
},
],
'selector-list-comma-newline-after': 'always',
'selector-list-comma-space-before': 'never',
'selector-max-empty-lines': 0,
'selector-no-vendor-prefix': true,
'selector-pseudo-class-case': 'lower',

@@ -112,2 +157,4 @@ 'selector-pseudo-class-parentheses-space-inside': 'never',

'selector-type-case': 'lower',
'shorthand-property-no-redundant-values': true,
'string-quotes': 'double',
'unit-case': 'lower',

@@ -119,3 +166,4 @@ 'value-keyword-case': 'lower',

'value-list-max-empty-lines': 0,
'value-no-vendor-prefix': true,
},
};

36

package.json
{
"name": "stylelint-config-standard",
"version": "22.0.0",
"description": "Standard shareable config for stylelint",
"version": "23.0.0-0",
"description": "Standard shareable config for Stylelint",
"keywords": [

@@ -15,3 +15,3 @@ "stylelint",

"license": "MIT",
"author": "stylelint",
"author": "Stylelint",
"main": "index.js",

@@ -40,3 +40,7 @@ "files": [

"stylelint"
]
],
"globals": {
"module": true,
"require": true
}
},

@@ -49,21 +53,21 @@ "remarkConfig": {

"dependencies": {
"stylelint-config-recommended": "^5.0.0"
"stylelint-config-recommended": "^6.0.0-0"
},
"devDependencies": {
"@stylelint/prettier-config": "^2.0.0",
"@stylelint/remark-preset": "^2.0.0",
"eslint": "^7.21.0",
"eslint-config-stylelint": "^13.1.0",
"husky": "^6.0.0",
"jest": "^26.6.3",
"lint-staged": "^10.5.4",
"np": "^7.4.0",
"@stylelint/remark-preset": "^3.0.0",
"eslint": "^7.32.0",
"eslint-config-stylelint": "^14.0.0",
"husky": "^7.0.2",
"jest": "^27.1.0",
"lint-staged": "^11.1.2",
"np": "^7.5.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1",
"remark-cli": "^9.0.0",
"stylelint": "^13.13.0"
"prettier": "^2.3.2",
"remark-cli": "^10.0.0",
"stylelint": "^14.0.0-0"
},
"peerDependencies": {
"stylelint": "^13.13.0"
"stylelint": "^14.0.0-0"
}
}

@@ -5,13 +5,11 @@ # stylelint-config-standard

> The standard shareable config for stylelint.
> The standard shareable config for Stylelint.
Extends [`stylelint-config-recommended`](https://github.com/stylelint/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](https://github.com/necolas/idiomatic-css),
Turns on additional rules to enforce common conventions found in the specifications and in a handful of CSS styleguides, including: [The Idiomatic CSS Principles](https://github.com/necolas/idiomatic-css),
[Google's CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules), [Airbnb's Styleguide](https://github.com/airbnb/css#css), and [@mdo's Code Guide](https://codeguide.co/#css).
It favours flexibility over strictness for things like multi-line lists and single-line rulesets, and tries to avoid potentially divisive rules.
It favours flexibility over strictness for things like multi-line lists and single-line rulesets.
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](./index.js).

@@ -23,4 +21,4 @@

```css
@import url(x.css);
@import url(y.css);
@import url("x.css");
@import url("y.css");

@@ -31,9 +29,13 @@ /**

:root {
--brand-red: hsl(5deg 10% 40%);
}
.selector-1,
.selector-2,
.selector-3[type="text"] {
background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
background: linear-gradient(#fff, rgb(0 0 0 / 80%));
box-sizing: border-box;
display: block;
color: #333;
color: var(--brand-red);
}

@@ -44,3 +46,3 @@

padding: 10px !important;
top: calc(calc(1em * 2) / 3);
top: calc(100% - 2rem);
}

@@ -54,3 +56,3 @@

@media (min-width >= 60em) {
@media (width >= 60em) {
.selector {

@@ -64,4 +66,4 @@ /* Flush to parent comment */

.selector-i + .selector-ii {
background: color(rgb(0, 0, 0) lightness(50%));
font-family: helvetica, "arial black", sans-serif;
background: hsl(20deg 25% 33%);
font-family: Helvetica, "Arial Black", sans-serif;
}

@@ -75,2 +77,3 @@ }

.selector {
animation: 3s none fade-in;
background-image:

@@ -81,3 +84,3 @@ repeating-linear-gradient(

#fff 25px,
rgba(255, 255, 255, 1) 50px
rgb(255 255 255 / 100%) 50px
);

@@ -95,6 +98,11 @@ margin: 10px;

.selector::after {
content: '→';
background-image: url(x.svg);
content: "→";
background-image: url("x.svg");
}
}
@keyframes fade-in {
from { opacity: 0%; }
to { opacity: 100%; }
}
```

@@ -112,3 +120,3 @@

If you've installed `stylelint-config-standard` locally within your project, just set your `stylelint` config to:
Set your stylelint config to:

@@ -121,24 +129,35 @@ ```json

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.
### 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": "/absolute/path/to/stylelint-config-standard"
"extends": "stylelint-config-standard",
"rules": {
"selector-class-pattern": null
}
}
```
Since [stylelint 9.7.0](https://github.com/stylelint/stylelint/blob/9.7.0/CHANGELOG.md#970), you can simply use the globally installed configuration name instead of the absolute path:
Or lower the severity of a rule to a warning using the `severity` secondary option. For example:
```json
{
"extends": "stylelint-config-standard"
"extends": "stylelint-config-standard",
"rules": {
"property-no-vendor-prefix": [
true,
{
"severity": "warning"
}
]
}
}
```
### Extending the config
A more complete 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, set the severity of the `number-max-precision` rule to `warning`, and add the `unit-allowed-list` rule:
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-allowed-list` rule:
```json

@@ -151,3 +170,3 @@ {

{
"ignoreAtRules": ["extends", "ignores"]
"ignoreAtRules": ["--my-at-rule"]
}

@@ -157,2 +176,8 @@ ],

"number-leading-zero": null,
"number-max-precision": [
4,
{
"severity": "warning"
}
],
"unit-allowed-list": ["em", "rem", "s"]

@@ -167,20 +192,18 @@ }

- Specify what quotes must be used using:
- [`font-family-name-quotes`](https://github.com/stylelint/stylelint/blob/master/lib/rules/font-family-name-quotes/README.md)
- [`function-url-quotes`](https://github.com/stylelint/stylelint/blob/master/lib/rules/function-url-quotes/README.md)
- [`selector-attribute-quotes`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-attribute-quotes/README.md)
- [`string-quotes`](https://github.com/stylelint/stylelint/blob/master/lib/rules/string-quotes/README.md)
- If you use [`autoprefixer`](https://github.com/postcss/autoprefixer) you'll want to disallow vendor prefixes using:
- [`at-rule-no-vendor-prefix`](https://github.com/stylelint/stylelint/blob/master/lib/rules/at-rule-no-vendor-prefix/README.md)
- [`media-feature-name-no-vendor-prefix`](https://github.com/stylelint/stylelint/blob/master/lib/rules/media-feature-name-no-vendor-prefix/README.md)
- [`property-no-vendor-prefix`](https://github.com/stylelint/stylelint/blob/master/lib/rules/property-no-vendor-prefix/README.md)
- [`selector-no-vendor-prefix`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-no-vendor-prefix/README.md)
- [`value-no-vendor-prefix`](https://github.com/stylelint/stylelint/blob/master/lib/rules/value-no-vendor-prefix/README.md)
- Control specificity using:
- Manage specificity using:
- [`max-nesting-depth`](https://github.com/stylelint/stylelint/blob/master/lib/rules/max-nesting-depth/README.md)
- [`selector-max-attribute`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-attribute/README.md)
- [`selector-max-class`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-class/README.md)
- [`selector-max-combinators`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-combinators/README.md)
- [`selector-max-compound-selectors`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-compound-selectors/README.md)
- [`selector-max-id`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-id/README.md)
- [`selector-max-pseudo-class`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-pseudo-class/README.md)
- [`selector-max-specificity`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-specificity/README.md)
- [`selector-max-type`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-type/README.md)
- [`selector-max-universal`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-universal/README.md)
- [`selector-no-qualifying-type`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-no-qualifying-type/README.md)
- Specify acceptable selector types, units, properties, functions and words in comments using:
- [`at-rule-disallowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/at-rule-disallowed-list/README.md)
- [`at-rule-allowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/at-rule-allowed-list/README.md)
- [`at-rule-property-required-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/at-rule-property-required-list/README.md)
- [`color-named`](https://github.com/stylelint/stylelint/blob/master/lib/rules/color-named/README.md)

@@ -206,10 +229,2 @@ - [`color-no-hex`](https://github.com/stylelint/stylelint/blob/master/lib/rules/color-no-hex/README.md)

- [`selector-combinator-allowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-combinator-allowed-list/README.md)
- [`selector-max-class`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-class/README.md)
- [`selector-max-attribute`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-attribute/README.md)
- [`selector-max-combinators`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-combinators/README.md)
- [`selector-max-id`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-id/README.md)
- [`selector-max-pseudo-class`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-pseudo-class/README.md)
- [`selector-no-qualifying-type`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-no-qualifying-type/README.md)
- [`selector-max-type`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-type/README.md)
- [`selector-max-universal`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-max-universal/README.md)
- [`selector-pseudo-class-disallowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-pseudo-class-disallowed-list/README.md)

@@ -221,40 +236,11 @@ - [`selector-pseudo-class-allowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-pseudo-class-allowed-list/README.md)

- [`unit-allowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/unit-allowed-list/README.md)
- Specify acceptable naming patterns using:
- [`custom-media-pattern`](https://github.com/stylelint/stylelint/blob/master/lib/rules/custom-media-pattern/README.md)
- [`custom-property-pattern`](https://github.com/stylelint/stylelint/blob/master/lib/rules/custom-property-pattern/README.md)
- [`selector-class-pattern`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-class-pattern/README.md)
- [`selector-id-pattern`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-id-pattern/README.md)
- Specify acceptable patterns using:
- [`selector-nested-pattern`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-nested-pattern/README.md)
- Specify a notation when there are one or more valid representations using:
- Specify a notation for font weights using:
- [`font-weight-notation`](https://github.com/stylelint/stylelint/blob/master/lib/rules/font-weight-notation/README.md)
- Specify what types of URLs are allowed using:
- [`function-url-no-scheme-relative`](https://github.com/stylelint/stylelint/blob/master/lib/rules/function-url-no-scheme-relative/README.md)
- Specify a maximum line length using:
- [`max-line-length`](https://github.com/stylelint/stylelint/blob/master/lib/rules/max-line-length/README.md)
### Using the config with SugarSS syntax
The config is broadly compatible with [SugarSS](https://github.com/postcss/sugarss) syntax. You _will_ need to turn off the rules that check braces and semicolons, as so:
```json
{
"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
}
}
```
## [Changelog](CHANGELOG.md)
## [License](LICENSE)
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc