enforce use of custom media queries

keithamus · keithamus · commit efb686160edd · 2023-01-27T18:36:59.000Z
diff --git a/css/global.css b/css/global.css
@@ -416,7 +416,7 @@ pre[class^="language-"] {
 }
 
 /* Dark syntax highlighting */
-@media (prefers-color-scheme: dark) {
+@media (--OSdark) {
   .language-css,
   .language-html {
     --token-punctuation: var(--indigo-2);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,10 +25,17 @@
   "stylelint": {
     "extends": "stylelint-config-standard",
     "plugins": [
-      "stylelint-use-logical"
+      "stylelint-use-logical",
+      "stylelint-media-use-custom-media"
     ],
     "rules": {
-      "csstools/use-logical": "always"
+      "csstools/use-logical": "always",
+      "csstools/media-use-custom-media": [
+        "always",
+        {
+          "importFrom": "./node_modules/open-props/media.min.css"
+        }
+      ]
     }
   },
   "prettier": {
@@ -95,6 +102,7 @@
     "retext-spell": "^5.3.0",
     "stylelint": "^14.16.0",
     "stylelint-config-standard": "^29.0.0",
+    "stylelint-media-use-custom-media": "^2.0.1",
     "stylelint-use-logical": "^2.0.0"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -416,7 +416,7 @@ pre[class^="language-"] {`
`416`	`416`	`}`
`417`	`417`
`418`	`418`	`/* Dark syntax highlighting */`
`419`		`-@media (prefers-color-scheme: dark) {`
	`419`	`+@media (--OSdark) {`
`420`	`420`	`.language-css,`
`421`	`421`	`.language-html {`
`422`	`422`	`--token-punctuation: var(--indigo-2);`