Prepare 30.0.0

.github/workflows/nodejs.yml

@@ -13,6 +13,4 @@ jobs:
     uses: stylelint/.github/.github/workflows/lint.yml@main
 
   test:
-    uses: stylelint/.github/.github/workflows/test.yml@main
-    with:
-      os: '["ubuntu-latest", "windows-latest", "macos-latest"]'
+    uses: stylelint/.github/.github/workflows/test.yml@remove-nodejs-12 # TODO: Change to `@main`.

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 30.0.0
+
+- Removed: `stylelint` less than `15.0.0` from peer dependencies.
+- Removed: 64 rules deprecated in [`stylelint@15.0.0`](https://github.com/stylelint/stylelint-config-recommended/releases/tag/15.0.0). For details, see the [migration guide](https://github.com/stylelint/stylelint/blob/15.0.0/docs/migration-guide/to-15.md).
+- Fixed: `length-zero-no-unit` to ignore custom properties.
+- Fixed: `value-no-vendor-prefix` to ignore `-webkit-inline-box`.
+
 ## 29.0.0
 
 - Removed: `stylelint` less than `14.14.0` from peer dependencies.

README.md

@@ -4,21 +4,17 @@
 
 > The standard shareable config for Stylelint.
 
-Extends [`stylelint-config-recommended`](https://github.com/stylelint/stylelint-config-recommended).
-
-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.
+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
 
-<!-- prettier-ignore -->
 ```css
-@import url("x.css");
-@import url("y.css");
+@import url("foo.css");
+@import url("bar.css");
+
+@custom-media --foo (min-width: 30em);
 
 /**
  * Multi-line comment
@@ -28,77 +24,44 @@ To see the rules that this config uses, please read the [config itself](./index.
   --brand-red: hsl(5deg 10% 40%);
 }
 
-.selector-1,
-.selector-2,
-.selector-3[type="text"] {
-  background: linear-gradient(#fff, rgb(0 0 0 / 80%));
-  box-sizing: border-box;
-  display: block;
-  color: var(--brand-red);
-}
+/* Single-line comment */
 
-.selector-a,
-.selector-b:not(:first-child) {
-  padding: 10px !important;
+.class-foo:not(a, div) {
+  margin: 0;
   top: calc(100% - 2rem);
 }
 
-.selector-x { width: 10%; }
-.selector-y { width: 20%; }
-.selector-z { width: 30%; }
-
-/* Single-line comment */
-
+/* Flush single line comment */
 @media (width >= 60em) {
-  .selector {
+  #id-bar {
     /* Flush to parent comment */
-    transform: translate(1, 1) scale(3);
-  }
-}
+    --offset: 0px;
 
-@media (orientation: portrait), projection and (color) {
-  .selector-i + .selector-ii {
-    background: hsl(20deg 25% 33%);
+    color: #fff;
     font-family: Helvetica, "Arial Black", sans-serif;
-  }
-}
-
-/* Flush single line comment */
-@media
-  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,
-        rgb(255 255 255 / 100%) 50px
-      );
-    margin: 10px;
-    margin-bottom: 5px;
-    box-shadow:
-      0 1px 1px #000,
-      0 1px 0 #fff,
-      2px 2px 1px 1px #ccc inset;
-    height: 10rem;
+    left: calc(var(--offset) + 50%);
   }
 
   /* Flush nested single line comment */
-  .selector::after {
+  a::after {
+    display: block;
     content: "→";
     background-image: url("x.svg");
   }
 }
 
 @keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 ```
 
-_Note: the config is tested against this example, as such the example contains plenty of CSS syntax, formatting and features._
+_Note: the config is tested against this example, as such the example contains plenty of CSS syntax and features._
 
 ## Installation
 
@@ -108,7 +71,7 @@ npm install stylelint-config-standard --save-dev
 
 ## Usage
 
-Set your stylelint config to:
+Set your Stylelint config to:
 
 ```json
 {
@@ -147,83 +110,18 @@ Or lower the severity of a rule to a warning using the `severity` secondary opti
 }
 ```
 
-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:
+Or to add a rule, For example, the `unit-allowed-list` one:
 
 ```json
 {
   "extends": "stylelint-config-standard",
   "rules": {
-    "at-rule-no-unknown": [
-      true,
-      {
-        "ignoreAtRules": ["--my-at-rule"]
-      }
-    ],
-    "indentation": "tab",
-    "number-leading-zero": null,
-    "number-max-precision": [
-      4,
-      {
-        "severity": "warning"
-      }
-    ],
     "unit-allowed-list": ["em", "rem", "s"]
   }
 }
 ```
 
-#### Suggested additions
-
-`stylelint-config-standard` is a great foundation for your own config. You can extend it to create a tailored and much stricter config:
-
-- Manage specificity using:
-  - [`max-nesting-depth`](https://github.com/stylelint/stylelint/blob/main/lib/rules/max-nesting-depth/README.md)
-  - [`selector-max-attribute`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-max-attribute/README.md)
-  - [`selector-max-class`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-max-class/README.md)
-  - [`selector-max-combinators`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-max-combinators/README.md)
-  - [`selector-max-compound-selectors`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-max-compound-selectors/README.md)
-  - [`selector-max-id`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-max-id/README.md)
-  - [`selector-max-pseudo-class`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-max-pseudo-class/README.md)
-  - [`selector-max-specificity`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-max-specificity/README.md)
-  - [`selector-max-type`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-max-type/README.md)
-  - [`selector-max-universal`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-max-universal/README.md)
-  - [`selector-no-qualifying-type`](https://github.com/stylelint/stylelint/blob/main/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/main/lib/rules/at-rule-disallowed-list/README.md)
-  - [`at-rule-allowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/at-rule-allowed-list/README.md)
-  - [`at-rule-property-required-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/at-rule-property-required-list/README.md)
-  - [`color-named`](https://github.com/stylelint/stylelint/blob/main/lib/rules/color-named/README.md)
-  - [`color-no-hex`](https://github.com/stylelint/stylelint/blob/main/lib/rules/color-no-hex/README.md)
-  - [`comment-word-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/comment-word-disallowed-list/README.md)
-  - [`declaration-no-important`](https://github.com/stylelint/stylelint/blob/main/lib/rules/declaration-no-important/README.md)
-  - [`declaration-property-unit-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/declaration-property-unit-disallowed-list/README.md)
-  - [`declaration-property-unit-allowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/declaration-property-unit-allowed-list/README.md)
-  - [`declaration-property-value-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/declaration-property-value-disallowed-list/README.md)
-  - [`declaration-property-value-allowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/declaration-property-value-allowed-list/README.md)
-  - [`function-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/function-disallowed-list/README.md)
-  - [`function-url-scheme-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/function-url-scheme-disallowed-list/README.md)
-  - [`function-url-scheme-allowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/function-url-scheme-allowed-list/README.md)
-  - [`function-allowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/function-allowed-list/README.md)
-  - [`media-feature-name-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/media-feature-name-disallowed-list/README.md)
-  - [`media-feature-name-allowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/media-feature-name-allowed-list/README.md)
-  - [`property-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/property-disallowed-list/README.md)
-  - [`property-allowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/property-allowed-list/README.md)
-  - [`selector-attribute-operator-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-attribute-operator-disallowed-list/README.md)
-  - [`selector-attribute-operator-allowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-attribute-operator-allowed-list/README.md)
-  - [`selector-combinator-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-combinator-disallowed-list/README.md)
-  - [`selector-combinator-allowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-combinator-allowed-list/README.md)
-  - [`selector-pseudo-class-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-pseudo-class-disallowed-list/README.md)
-  - [`selector-pseudo-class-allowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-pseudo-class-allowed-list/README.md)
-  - [`selector-pseudo-element-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-pseudo-element-disallowed-list/README.md)
-  - [`selector-pseudo-element-allowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-pseudo-element-allowed-list/README.md)
-  - [`unit-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/unit-disallowed-list/README.md)
-  - [`unit-allowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/unit-allowed-list/README.md)
-- Specify acceptable patterns using:
-  - [`selector-nested-pattern`](https://github.com/stylelint/stylelint/blob/main/lib/rules/selector-nested-pattern/README.md)
-- Specify a notation for font weights using:
-  - [`font-weight-notation`](https://github.com/stylelint/stylelint/blob/main/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/main/lib/rules/function-url-no-scheme-relative/README.md)
+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)
 

__tests__/index.test.js

@@ -40,15 +40,14 @@ describe('flags warnings with invalid css', () => {
 	});
 
 	it('flags warnings', () => {
-		expect(result.results[0].warnings).toHaveLength(6);
+		expect(result.results[0].warnings).toHaveLength(5);
 	});
 
 	it('correct warning text', () => {
 		expect(result.results[0].warnings.map((w) => w.text)).toEqual([
 			'Expected custom media query name "--FOO" to be kebab-case',
 			'Expected custom property name "--FOO" to be kebab-case',
 			'Expected keyframe name "FOO" to be kebab-case',
-			'Expected a leading zero (number-leading-zero)',
 			'Expected class selector ".FOO" to be kebab-case',
 			'Expected id selector "#FOO" to be kebab-case',
 		]);
@@ -59,7 +58,6 @@ describe('flags warnings with invalid css', () => {
 			'custom-media-pattern',
 			'custom-property-pattern',
 			'keyframes-name-pattern',
-			'number-leading-zero',
 			'selector-class-pattern',
 			'selector-id-pattern',
 		]);
@@ -70,10 +68,23 @@ describe('flags warnings with invalid css', () => {
 	});
 
 	it('correct line number', () => {
-		expect(result.results[0].warnings[0].line).toBe(5);
+		expect(result.results[0].warnings[0].line).toBe(1);
 	});
 
 	it('correct column number', () => {
 		expect(result.results[0].warnings[0].column).toBe(15);
 	});
 });
+
+describe('deprecated rules', () => {
+	const deprecatedRuleNames = Object.values(stylelint.rules)
+		.filter((rule) => rule.meta.deprecated)
+		.map((rule) => rule.ruleName);
+
+	const testFn = deprecatedRuleNames.length === 0 ? it.skip : it;
+
+	testFn('exclude deprecate rules', () => {
+		// eslint-disable-next-line jest/no-standalone-expect -- If not using `it` directly, false positives occur.
+		expect(Object.keys(config.rules)).toEqual(expect.not.arrayContaining(deprecatedRuleNames));
+	});
+});

__tests__/invalid.css

@@ -1,13 +1,17 @@
-a {
-  top: .2em;
-}
-
 @custom-media --FOO;
 
-:root { --FOO: 1px; }
+:root {
+	--FOO: 1px;
+}
 
-@keyframes FOO { /* ... */ }
+@keyframes FOO {
+	/* ... */
+}
 
-.FOO { /* ... */ }
+.FOO {
+	/* ... */
+}
 
-#FOO { /* ... */ }
+#FOO {
+	/* ... */
+}