@readme/stylelint-config 3.2.1 → 3.2.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 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

package/__tests__/__snapshots__/index.js.snap

@@ -4,6 +4,9 @@ exports[`stylelint-config with an invalid file and auto-fix enabled matches the
 "@import "x.css";
 @import "y.css";
 
+$one: "one";
+$twoCamelCase: "two";
+
 /**
  * Multi-line comment
  */
@@ -33,8 +36,8 @@ exports[`stylelint-config with an invalid file and auto-fix enabled matches the
 .selector-3[type="text"] {
   background: linear-gradient(#fff, rgb(0 0 0 / 0.8));
   box-sizing: border-box;
-  display: block;
   color: var(--brand-red);
+  display: block;
 }
 
 .selector-a,
@@ -81,16 +84,16 @@ exports[`stylelint-config with an invalid file and auto-fix enabled matches the
       #fff 25px,
       rgb(255 255 255 / 1) 50px
     );
-    margin: 10px;
-    margin-bottom: 5px;
     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 {
-    content: "→";
     background-image: url("x.svg");
+    content: "→";
   }
 }
 

package/__tests__/index.js

@@ -48,7 +48,26 @@ describe('stylelint-config', () => {
     });
 
     it('flags warnings', () => {
-      expect(warnings).toHaveLength(6);
+      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', () => {

package/__tests__/invalid.scss

@@ -1,6 +1,9 @@
 @import url("x.css");
 @import url("y.css");
 
+$one: "one";
+$twoCamelCase: "two";
+
 /**
  * Multi-line comment
  */
@@ -40,9 +43,15 @@
   top: calc(100% - 2rem);
 }
 
-.selector-x { width: 10%; }
-.selector-y { width: 20%; }
-.selector-z { width: 30%; }
+.selector-x {
+  width: 10%;
+}
+.selector-y {
+  width: 20%;
+}
+.selector-z {
+  width: 30%;
+}
 
 /* Single-line comment */
 
@@ -61,24 +70,18 @@
 }
 
 /* Flush single line comment */
-@media
-  screen and (min-resolution: 192dpi),
-  screen and (min-resolution: 2dppx) {
+@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
-      );
+    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;
+    box-shadow: 0 1px 1px #000, 0 1px 0 #fff, 2px 2px 1px 1px #ccc inset;
     height: 10rem;
   }
 
@@ -90,8 +93,12 @@
 }
 
 @keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 // Prefer "simple" selector-not-notation

package/__tests__/valid.scss

@@ -1,6 +1,10 @@
 @import "x.css";
 @import "y.css";
 
+$one: "one";
+$two-kebab-case: "two";
+$media-query-width: 300px;
+
 /**
  * Multi-line comment
  */
@@ -46,6 +50,10 @@
 
 /* Single-line comment */
 
+@media (min-width: $media-query-width) {
+  border: 1px solid black;
+}
+
 @media (width >= 60em) {
   .selector {
     /* Flush to parent comment */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readme/stylelint-config",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "ReadMe coding standards for styles",
   "main": "src/index.js",
   "scripts": {
@@ -33,5 +33,5 @@
     "@readme/eslint-config": "^10.6.2",
     "jest": "^29.4.3"
   },
-  "gitHead": "88d8d9d48d4194b68b5fede311c052b4c2828161"
+  "gitHead": "c6355d9f0a28ebc9a9e739d9718a91e27d7ed256"
 }

package/src/index.js

@@ -59,6 +59,11 @@ module.exports = {
     // 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': [
@@ -130,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)',
       },
     ],