Prepare 23.0.0 (#198)

stylelint · Oct 21, 2021 · 8148a70 · 8148a70
1 parent 04acce4
commit 8148a70
Show file tree

Hide file tree

Showing 8 changed files with 13,070 additions and 24,916 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,39 @@
 # Changelog
 
+## 23.0.0
+
+This release adds over a dozen new rules.
+
+If needed, you can [extend the config](README.md#extending-the-config) to turn off or lower the severity of any of the new rules.
+
+We recommend using [Autoprefixer](https://github.com/postcss/autoprefixer) to automatically prefix your at-rules, properties, selectors and values.
+
+- Removed: `stylelint` less than `14.0.0` from peer dependencies.
+- Changed: updated to [`[email protected]`](https://github.com/stylelint/stylelint-config-recommended/releases/tag/6.0.0).
+- Added: `alpha-value-notation` rule.
+- Added: `at-rule-no-vendor-prefix` rule.
+- Added: `color-function-notation` rule.
+- Added: `custom-media-pattern` rule.
+- Added: `custom-property-pattern` rule.
+- Added: `declaration-block-no-redundant-longhand-properties` rule.
+- Added: `font-family-name-quotes` rule.
+- Added: `function-url-quotes` rule.
+- Added: `hue-degree-notation` rule.
+- Added: `keyframes-name-pattern` rule.
+- Added: `max-line-length` rule.
+- Added: `media-feature-name-no-vendor-prefix` rule.
+- Added: `no-empty-first-line` rule.
+- Added: `no-irregular-whitespace` rule.
+- Added: `number-max-precision` rule.
+- Added: `property-no-vendor-prefix` rule.
+- Added: `selector-attribute-quotes` rule.
+- Added: `selector-class-pattern` rule.
+- Added: `selector-id-pattern` rule.
+- Added: `selector-no-vendor-prefix` rule.
+- Added: `shorthand-property-no-redundant-values` rule.
+- Added: `string-quotes` rule.
+- Added: `value-no-vendor-prefix` rule.
+
 ## 22.0.0
 
 - Removed: `stylelint` less than `13.13.0` from peer dependencies.

diff --git a/README.md b/README.md
@@ -2,43 +2,45 @@
 
 [![NPM version](https://img.shields.io/npm/v/stylelint-config-standard.svg)](https://www.npmjs.org/package/stylelint-config-standard) [![Build Status](https://github.com/stylelint/stylelint-config-standard/workflows/CI/badge.svg)](https://github.com/stylelint/stylelint-config-standard/actions)
 
-> 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.
-
-Use it as is or as a foundation for your own config.
+It favours flexibility over strictness for things like multi-line lists and single-line rulesets.
 
 To see the rules that this config uses, please read the [config itself](./index.js).
 
 ## Example
 
 <!-- prettier-ignore -->
 ```css
-@import url(x.css);
-@import url(y.css);
+@import url("x.css");
+@import url("y.css");
 
 /**
  * Multi-line comment
  */
 
+: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);
 }
 
 .selector-a,
 .selector-b:not(:first-child) {
   padding: 10px !important;
-  top: calc(calc(1em * 2) / 3);
+  top: calc(100% - 2rem);
 }
 
 .selector-x { width: 10%; }
@@ -47,7 +49,7 @@ To see the rules that this config uses, please read the [config itself](./index.
 
 /* Single-line comment */
 
-@media (min-width >= 60em) {
+@media (width >= 60em) {
   .selector {
     /* Flush to parent comment */
     transform: translate(1, 1) scale(3);
@@ -56,8 +58,8 @@ To see the rules that this config uses, please read the [config itself](./index.
 
 @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;
+    background: hsl(20deg 25% 33%);
+    font-family: Helvetica, "Arial Black", sans-serif;
   }
 }
 
@@ -66,12 +68,13 @@ To see the rules that this config uses, please read the [config itself](./index.
   screen and (min-resolution: 192dpi),
   screen and (min-resolution: 2dppx) {
   .selector {
+    animation: 3s none fade-in;
     background-image:
       repeating-linear-gradient(
         -45deg,
         transparent,
         #fff 25px,
-        rgba(255, 255, 255, 1) 50px
+        rgb(255 255 255 / 100%) 50px
       );
     margin: 10px;
     margin-bottom: 5px;
@@ -84,10 +87,15 @@ To see the rules that this config uses, please read the [config itself](./index.
 
   /* Flush nested single line comment */
   .selector::after {
-    content: '→';
-    background-image: url(x.svg);
+    content: "→";
+    background-image: url("x.svg");
   }
 }
+
+@keyframes fade-in {
+  from { opacity: 0%; }
+  to { opacity: 100%; }
+}
 ```
 
 _Note: the config is tested against this example, as such the example contains plenty of CSS syntax, formatting and features._
@@ -100,35 +108,46 @@ npm install stylelint-config-standard --save-dev
 
 ## Usage
 
-If you've installed `stylelint-config-standard` locally within your project, just set your `stylelint` config to:
+Set your stylelint config to:
 
 ```json
 {
   "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.
+### 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
-
-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:
+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:
 
 ```json
 {
@@ -137,11 +156,17 @@ For example, to change the `at-rule-no-unknown` rule to use its `ignoreAtRules`
     "at-rule-no-unknown": [
       true,
       {
-        "ignoreAtRules": ["extends", "ignores"]
+        "ignoreAtRules": ["--my-at-rule"]
       }
     ],
     "indentation": "tab",
     "number-leading-zero": null,
+    "number-max-precision": [
+      4,
+      {
+        "severity": "warning"
+      }
+    ],
     "unit-allowed-list": ["em", "rem", "s"]
   }
 }
@@ -151,24 +176,22 @@ For example, to change the `at-rule-no-unknown` rule to use its `ignoreAtRules`
 
 `stylelint-config-standard` is a great foundation for your own config. You can extend it to create a tailored and much stricter config:
 
-- 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)
   - [`color-no-hex`](https://github.com/stylelint/stylelint/blob/master/lib/rules/color-no-hex/README.md)
   - [`comment-word-disallowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/comment-word-disallowed-list/README.md)
@@ -189,55 +212,18 @@ For example, to change the `at-rule-no-unknown` rule to use its `ignoreAtRules`
   - [`selector-attribute-operator-allowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-attribute-operator-allowed-list/README.md)
   - [`selector-combinator-disallowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-combinator-disallowed-list/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)
   - [`selector-pseudo-class-allowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-pseudo-class-allowed-list/README.md)
   - [`selector-pseudo-element-disallowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-pseudo-element-disallowed-list/README.md)
   - [`selector-pseudo-element-allowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-pseudo-element-allowed-list/README.md)
   - [`unit-disallowed-list`](https://github.com/stylelint/stylelint/blob/master/lib/rules/unit-disallowed-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)
 

diff --git a/__tests__/index.test.js b/__tests__/index.test.js
@@ -4,8 +4,8 @@ const config = require('../');
 const fs = require('fs');
 const stylelint = require('stylelint');
 
-const validCss = fs.readFileSync('./__tests__/css-valid.css', 'utf-8');
-const invalidCss = fs.readFileSync('./__tests__/css-invalid.css', 'utf-8');
+const validCss = fs.readFileSync('./__tests__/valid.css', 'utf-8');
+const invalidCss = fs.readFileSync('./__tests__/invalid.css', 'utf-8');
 
 describe('flags no warnings with valid css', () => {
 	let result;

diff --git a/__tests__/css-invalid.css → __tests__/invalid.css b/__tests__/css-invalid.css → __tests__/invalid.css