@readme/stylelint-config 3.2.0 → 3.2.2

package/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@readme/eslint-config', '@readme/eslint-config/testing'],
+};

package/CHANGELOG.md

@@ -0,0 +1,262 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.2.2](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.2.1...@readme/stylelint-config@3.2.2) (2023-07-05)
+
+
+### Bug Fixes
+
+* **stylelint-config:** disable media-query-no-invalid rule ([#700](https://github.com/readmeio/standards/issues/700)) ([c6cfebd](https://github.com/readmeio/standards/commit/c6cfebdacf63b5f8cc73ee06d79dcac8a66d945c))
+
+
+
+
+
+## [3.2.1](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.2.0...@readme/stylelint-config@3.2.1) (2023-07-05)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+# [3.2.0](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.19...@readme/stylelint-config@3.2.0) (2023-06-30)
+
+
+### Features
+
+* **stylelint-config:** add rules from our main readme repo ([#686](https://github.com/readmeio/standards/issues/686)) ([556183e](https://github.com/readmeio/standards/commit/556183e8f0609b28cedef18e239c2e600718a702))
+
+
+
+
+
+## [3.1.19](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.18...@readme/stylelint-config@3.1.19) (2023-06-06)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.18](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.17...@readme/stylelint-config@3.1.18) (2023-06-01)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.17](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.16...@readme/stylelint-config@3.1.17) (2023-05-26)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.16](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.15...@readme/stylelint-config@3.1.16) (2023-04-01)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.15](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.14...@readme/stylelint-config@3.1.15) (2023-03-02)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.14](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.13...@readme/stylelint-config@3.1.14) (2023-01-23)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.13](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.12...@readme/stylelint-config@3.1.13) (2023-01-18)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.12](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.11...@readme/stylelint-config@3.1.12) (2023-01-12)
+
+
+### Bug Fixes
+
+* pinning eslint-plugin-import to 2.26 ([b16cd44](https://github.com/readmeio/standards/commit/b16cd44c4dddca2ef323aea5015525c2a25657e9))
+
+
+
+
+
+## [3.1.11](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.10...@readme/stylelint-config@3.1.11) (2023-01-12)
+
+
+### Bug Fixes
+
+* downgrading eslint-plugin-import, 2.27 has regressions ([a069a0b](https://github.com/readmeio/standards/commit/a069a0badaefbe17513a96be192f99936558d6ee))
+
+
+
+
+
+## [3.1.10](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.9...@readme/stylelint-config@3.1.10) (2023-01-12)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.9](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.8...@readme/stylelint-config@3.1.9) (2023-01-11)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.8](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.7...@readme/stylelint-config@3.1.8) (2023-01-11)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.7](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.6...@readme/stylelint-config@3.1.7) (2023-01-03)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.6](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.5...@readme/stylelint-config@3.1.6) (2022-12-04)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.5](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.4...@readme/stylelint-config@3.1.5) (2022-12-04)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+
+
+
+
+## [3.1.4](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.3...@readme/stylelint-config@3.1.4) (2022-11-17)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [3.1.3](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.2...@readme/stylelint-config@3.1.3) (2022-11-04)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [3.1.2](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.1...@readme/stylelint-config@3.1.2) (2022-11-01)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [3.1.1](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.0...@readme/stylelint-config@3.1.1) (2022-10-03)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+# [3.1.0](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.0.1...@readme/stylelint-config@3.1.0) (2022-08-31)
+
+### Features
+
+- **stylelint:** use "simple" selector-not-notation ([#514](https://github.com/readmeio/standards/issues/514)) ([0c83923](https://github.com/readmeio/standards/commit/0c8392345796ad6be41e4f2a862dbbc1c6921e62))
+
+## [3.0.1](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.0.0...@readme/stylelint-config@3.0.1) (2022-08-29)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+# [3.0.0](https://github.com/readmeio/standards/compare/@readme/stylelint-config@2.0.0...@readme/stylelint-config@3.0.0) (2022-08-10)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+# [2.0.0](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.14...@readme/stylelint-config@2.0.0) (2022-07-25)
+
+### Features
+
+- requiring Node 14.18+ ([c5f5350](https://github.com/readmeio/standards/commit/c5f5350935fc6bed8b5bf27f0c7d92316a6b3cd0))
+
+## [1.1.14](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.13...@readme/stylelint-config@1.1.14) (2022-07-13)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [1.1.13](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.12...@readme/stylelint-config@1.1.13) (2022-07-13)
+
+### Bug Fixes
+
+- reverting the unicorn eslint plugin as v43 requires >=Node 14.18 ([#455](https://github.com/readmeio/standards/issues/455)) ([334a1b5](https://github.com/readmeio/standards/commit/334a1b58bdf72f4152529f29655d2d6411cb4d76))
+
+## [1.1.12](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.11...@readme/stylelint-config@1.1.12) (2022-07-07)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [1.1.11](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.10...@readme/stylelint-config@1.1.11) (2022-06-21)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [1.1.10](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.9...@readme/stylelint-config@1.1.10) (2022-06-13)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [1.1.9](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.8...@readme/stylelint-config@1.1.9) (2022-05-31)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [1.1.8](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.7...@readme/stylelint-config@1.1.8) (2022-05-23)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [1.1.7](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.6...@readme/stylelint-config@1.1.7) (2022-04-26)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [1.1.6](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.5...@readme/stylelint-config@1.1.6) (2022-04-26)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [1.1.5](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.4...@readme/stylelint-config@1.1.5) (2022-04-26)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [1.1.4](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.3...@readme/stylelint-config@1.1.4) (2022-04-20)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [1.1.3](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.2...@readme/stylelint-config@1.1.3) (2022-04-18)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [1.1.2](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.1...@readme/stylelint-config@1.1.2) (2022-04-12)
+
+**Note:** Version bump only for package @readme/stylelint-config
+
+## [1.1.1](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.0...@readme/stylelint-config@1.1.1) (2022-04-06)
+
+### Bug Fixes
+
+- out of date lockfiles ([318393a](https://github.com/readmeio/standards/commit/318393ac195feda4701da171af08e02a80dedf12))
+
+# 1.1.0 (2022-04-04)
+
+### Features
+
+- **stylelint-config:** init new config package for stylelint ([#349](https://github.com/readmeio/standards/issues/349)) ([e697176](https://github.com/readmeio/standards/commit/e697176e4b1d95528175e148d5d4acec25e346d4))

package/__tests__/__snapshots__/index.js.snap

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`stylelint-config with an invalid file and auto-fix enabled matches the auto-fixed snapshot 1`] = `
+"@import "x.css";
+@import "y.css";
+
+$one: "one";
+$twoCamelCase: "two";
+
+/**
+ * Multi-line comment
+ */
+
+:root {
+  --brand-red: hsl(5deg 10% 40%);
+}
+
+#id-selector {
+  color: blue;
+
+  #another-id {
+    border: 0;
+  }
+}
+
+#ValidIdSelector {
+  padding: 0;
+}
+
+#badIdSelector {
+  border: 0;
+}
+
+.selector-1,
+.selector-2,
+.selector-3[type="text"] {
+  background: linear-gradient(#fff, rgb(0 0 0 / 0.8));
+  box-sizing: border-box;
+  color: var(--brand-red);
+  display: block;
+}
+
+.selector-a,
+.selector-b:not(:first-child) {
+  padding: 10px !important;
+  top: calc(100% - 2rem);
+}
+
+.selector-x {
+  width: 10%;
+}
+
+.selector-y {
+  width: 20%;
+}
+
+.selector-z {
+  width: 30%;
+}
+
+/* Single-line comment */
+
+@media (width >= 60em) {
+  .selector {
+    /* Flush to parent comment */
+    transform: translate(1, 1) scale(3);
+  }
+}
+
+@media (orientation: portrait), projection and (color) {
+  .selector-i + .selector-ii {
+    background: hsl(20deg 25% 33%);
+    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 / 1) 50px
+    );
+    box-shadow: 0 1px 1px #000, 0 1px 0 #fff, 2px 2px 1px 1px #ccc inset;
+    height: 10rem;
+    margin: 10px;
+    margin-bottom: 5px;
+  }
+
+  /* Flush nested single line comment */
+  .selector::after {
+    background-image: url("x.svg");
+    content: "→";
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// Prefer "simple" selector-not-notation
+.selector-not-notation {
+  &:not(.one):not(.two):not(.three) {
+    display: block;
+  }
+}
+"
+`;

package/__tests__/index.js

@@ -0,0 +1,85 @@
+const fs = require('fs');
+
+const stylelint = require('stylelint');
+
+const config = require('..');
+
+const invalidScss = fs.readFileSync('./__tests__/invalid.scss', 'utf-8');
+const validScss = fs.readFileSync('./__tests__/valid.scss', 'utf-8');
+
+describe('stylelint-config', () => {
+  let data;
+  let warnings;
+
+  describe('with a valid file', () => {
+    beforeEach(async () => {
+      data = await stylelint.lint({
+        code: validScss,
+        config,
+      });
+      ({ warnings } = data.results[0]);
+    });
+
+    it('has no errors', () => {
+      expect(data.errored).toBeFalsy();
+    });
+
+    it('flags no warnings', () => {
+      expect(warnings).toHaveLength(0);
+    });
+  });
+
+  describe('with an invalid file and auto-fix enabled', () => {
+    beforeEach(async () => {
+      data = await stylelint.lint({
+        code: invalidScss,
+        config,
+        fix: true,
+      });
+      ({ warnings } = data.results[0]);
+    });
+
+    it('matches the auto-fixed snapshot', () => {
+      expect(data.output).toMatchSnapshot();
+    });
+
+    it('has errors', () => {
+      expect(data.errored).toBeTruthy();
+    });
+
+    it('flags warnings', () => {
+      expect(warnings).toContainEqual(
+        expect.objectContaining({
+          text: expect.stringMatching(/scss\/dollar-variable-pattern/),
+        })
+      );
+      expect(warnings).toContainEqual(
+        expect.objectContaining({
+          text: expect.stringMatching(/color-function-notation/),
+        })
+      );
+      expect(warnings).toContainEqual(
+        expect.objectContaining({
+          text: expect.stringMatching(/selector-id-pattern/),
+        })
+      );
+      expect(warnings).toContainEqual(
+        expect.objectContaining({
+          text: expect.stringMatching(/selector-max-id/),
+        })
+      );
+    });
+
+    it('expects no more than 1 id selector', () => {
+      expect(warnings.some(w => w.rule === 'selector-max-id')).toBeTruthy();
+    });
+
+    it('expects id pattern to be either kebab-case or TitleCase', () => {
+      expect(warnings.some(w => w.rule === 'selector-id-pattern')).toBeTruthy();
+    });
+
+    it('auto-fixes "selector-not-notation" to "simple" pattern', () => {
+      expect(data.output).toContain('&:not(.one):not(.two):not(.three)');
+    });
+  });
+});

package/__tests__/invalid.scss

@@ -0,0 +1,109 @@
+@import url("x.css");
+@import url("y.css");
+
+$one: "one";
+$twoCamelCase: "two";
+
+/**
+ * Multi-line comment
+ */
+
+:root {
+  --brand-red: hsl(5deg 10% 40%);
+}
+
+#id-selector {
+  color: blue;
+
+  #another-id {
+    border: 0;
+  }
+}
+
+#ValidIdSelector {
+  padding: 0px 0px 0px;
+}
+
+#badIdSelector {
+  border: 0;
+}
+
+.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);
+}
+
+.selector-a,
+.selector-b:not(:first-child) {
+  padding: 10px !important;
+  top: calc(100% - 2rem);
+}
+
+.selector-x {
+  width: 10%;
+}
+.selector-y {
+  width: 20%;
+}
+.selector-z {
+  width: 30%;
+}
+
+/* Single-line comment */
+
+@media (width >= 60em) {
+  .selector {
+    /* Flush to parent comment */
+    transform: translate(1, 1) scale(3);
+  }
+}
+
+@media (orientation: portrait), projection and (color) {
+  .selector-i + .selector-ii {
+    background: hsl(20deg 25% 33%);
+    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;
+  }
+
+  /* Flush nested single line comment */
+  .selector::after {
+    content: "→";
+    background-image: url("x.svg");
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// Prefer "simple" selector-not-notation
+.selector-not-notation {
+  &:not(.one, .two, .three) {
+    display: block;
+  }
+}

package/__tests__/valid.scss

@@ -0,0 +1,109 @@
+@import "x.css";
+@import "y.css";
+
+$one: "one";
+$two-kebab-case: "two";
+$media-query-width: 300px;
+
+/**
+ * Multi-line comment
+ */
+
+:root {
+  --brand-red: rgb(112, 94, 92);
+}
+
+#id-selector {
+  color: blue;
+}
+
+#ValidIdSelector {
+  padding: 0;
+}
+
+.selector-1,
+.selector-2,
+.selector-3[type="text"] {
+  background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
+  box-sizing: border-box;
+  color: var(--brand-red);
+  display: block;
+}
+
+.selector-a,
+.selector-b:not(:first-child) {
+  padding: 10px !important;
+  top: calc(100% - 2rem);
+}
+
+.selector-x {
+  width: 10%;
+}
+
+.selector-y {
+  width: 20%;
+}
+
+.selector-z {
+  width: 30%;
+}
+
+/* Single-line comment */
+
+@media (min-width: $media-query-width) {
+  border: 1px solid black;
+}
+
+@media (width >= 60em) {
+  .selector {
+    /* Flush to parent comment */
+    transform: translate(1, 1) scale(3);
+  }
+}
+
+@media (orientation: portrait), projection and (color) {
+  .selector-i + .selector-ii {
+    background: rgb(105, 77, 63);
+    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, 1) 50px
+    );
+    box-shadow: 0 1px 1px #000, 0 1px 0 #fff, 2px 2px 1px 1px #ccc inset;
+    height: 10rem;
+    margin: 10px;
+    margin-bottom: 5px;
+  }
+
+  /* Flush nested single line comment */
+  .selector::after {
+    background-image: url("x.svg");
+    content: "→";
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// Prefer "simple" selector-not-notation
+.selector-not-notation {
+  &:not(.one):not(.two):not(.three) {
+    display: block;
+  }
+}

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@readme/stylelint-config",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "description": "ReadMe coding standards for styles",
-  "main": "index.js",
-  "files": [
-    "index.js"
-  ],
+  "main": "src/index.js",
   "scripts": {
     "lint": "eslint .",
     "test": "jest"
@@ -21,20 +18,20 @@
   },
   "homepage": "https://github.com/readmeio/standards",
   "dependencies": {
+    "stylelint": "^15.10.0",
     "stylelint-config-css-modules": "^4.2.0",
-    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-sass-guidelines": "^9.0.1",
-    "stylelint-config-standard": "^29.0.0",
-    "stylelint-config-standard-scss": "^6.1.0",
-    "stylelint-prettier": "^2.0.0"
+    "stylelint-config-sass-guidelines": "^10.0.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^10.0.0",
+    "stylelint-order": "^6.0.3",
+    "stylelint-prettier": "^3.0.0"
   },
   "peerDependencies": {
-    "postcss": "^8.4.12",
-    "stylelint": "^14.6.1"
+    "postcss": "^8.4.12"
   },
   "devDependencies": {
-    "@readme/eslint-config": "^10.6.1",
+    "@readme/eslint-config": "^10.6.2",
     "jest": "^29.4.3"
   },
-  "gitHead": "4b53a9bdf9efd6006033bf34656dc7a3da321d65"
+  "gitHead": "c6355d9f0a28ebc9a9e739d9718a91e27d7ed256"
 }

package/{index.js → src/index.js}

@@ -13,9 +13,12 @@ module.exports = {
     'stylelint-config-css-modules',
 
     // Enable prettier formatting for SCSS/CSS
-    'stylelint-config-prettier',
     'stylelint-prettier/recommended',
   ],
+  plugins: [
+    // Enable ordering rules for content within declaration blocks.
+    'stylelint-order',
+  ],
   rules: {
     // Until we migrate *all* our repos away from legacy node-sass to dart sass,
     // we must continue defining alpha values with decimal numbers. Node-sass
@@ -51,6 +54,16 @@ module.exports = {
     // ReadMe breaks this rule in many places.
     'max-nesting-depth': null,
 
+    // Prefer neither "prefix" or "context" notations for media queries.
+    // e.g. "min-width: 400px" or "width >= 600px"
+    // https://stylelint.io/user-guide/rules/media-feature-range-notation/
+    'media-feature-range-notation': null,
+
+    // Rule is not appropriate when using SCSS variables with media queries.
+    // e.g. @media (max-width: $container-lg)
+    // https://stylelint.io/user-guide/rules/media-query-no-invalid/
+    'media-query-no-invalid': null,
+
     // Allows us to write duplicate selectors in groups
     // https://github.com/stylelint/stylelint/issues/3196
     'no-descending-specificity': [
@@ -107,6 +120,7 @@ module.exports = {
         'rules',
       ],
     ],
+    'order/properties-alphabetical-order': true,
 
     // Custom regex of ReadMe's current BEM selector class pattern.
     'selector-class-pattern': [
@@ -121,7 +135,7 @@ module.exports = {
     'selector-id-pattern': [
       '^(([a-z][a-z0-9]*(-[a-z0-9]+)*)|([A-Z][a-z0-9]*)+)$',
       {
-        message: 'Expected id selector to be kebab-case or TitleCase',
+        message: 'Expected id selector to be kebab-case or TitleCase (selector-id-pattern)',
       },
     ],