Disallow out of gamut range colors

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com), and 
 
 - The legacy single-value syntax for the `display` property is now disallowed.
 - Physical properties, values and units are now disallowed. Use logical ones instead.
+- Out of gamut colors should now be wrapped in the proper media query.
 
 ## [2.0.0] — 2024–05–17
 

package.json

@@ -29,6 +29,7 @@
 	},
 	"dependencies": {
 		"@stylistic/stylelint-plugin": "^2.1.2",
+		"stylelint-gamut": "^1.3.4",
 		"stylelint-plugin-logical-css": "^1.2.1"
 	},
 	"scripts": {

stylelint.config.js

@@ -3,6 +3,7 @@ export default {
 	plugins: [
 		`@stylistic/stylelint-plugin`,
 		`stylelint-plugin-logical-css`,
+		`stylelint-gamut`,
 	],
 	rules: {
 		"annotation-no-unknown": true,
@@ -136,6 +137,8 @@ export default {
 		"plugin/use-logical-properties-and-values": true,
 		"plugin/use-logical-units": true,
 
+		"gamut/color-no-out-gamut-range": true,
+
 		"@stylistic/at-rule-name-case": `lower`,
 		"@stylistic/at-rule-name-space-after": `always`,
 		"@stylistic/at-rule-semicolon-newline-after": `always`,

test/gamut/color-no-out-gamut-range.js

@@ -0,0 +1,95 @@
+import { testRule } from "../../utils/testRule.js"
+
+let plugin = {
+	name: `stylelint-gamut`,
+	prefix: `gamut/`,
+}
+
+let rule = `${plugin.prefix}color-no-out-gamut-range`
+
+let code = `
+.valid-1 {
+	@media (color-gamut: p3) {
+		color: lch(48% 82 283);
+	}
+}
+
+.valid-2 {
+	@media (color-gamut: p3) {
+		color: oklch(57.35% 0.23 259.06);
+	}
+}
+
+.valid-3 {
+	@media (color-gamut: rec2020) {
+		color: lab(82.2345% 40.1645 59.9971 / .5);
+	}
+}
+
+.valid-4 {
+	@media (color-gamut: rec2020) {
+		color: oklab(85.69% 0.1007 0.1191 / .5);
+	}
+}
+
+.invalid-1 {
+	color: lch(48% 82 283);
+}
+
+.invalid-2 {
+	color: oklch(57.35% 0.23 259.06);
+}
+
+.invalid-3 {
+	color: lab(82.2345% 40.1645 59.9971 / .5);
+}
+
+.invalid-4 {
+	color: oklab(85.69% 0.1007 0.1191 / .5);
+}
+`
+
+testRule({
+	description: `Out of gamut colors must be wrapped in the proper media query`,
+	rule,
+	plugin,
+	code,
+	expectedWarnings: [
+		{
+			line: 27,
+			column: 9,
+			endLine: 27,
+			endColumn: 24,
+			rule,
+			severity: `error`,
+			text: `Unexpected color out of gamut range "lch(48% 82 283)" (${rule})`,
+		},
+		{
+			line: 31,
+			column: 9,
+			endLine: 31,
+			endColumn: 34,
+			rule,
+			severity: `error`,
+			text: `Unexpected color out of gamut range "oklch(57.35% 0.23 259.06)" (${rule})`,
+		},
+		{
+			line: 35,
+			column: 9,
+			endLine: 35,
+			endColumn: 43,
+			rule,
+			severity: `error`,
+			text: `Unexpected color out of gamut range "lab(82.2345% 40.1645 59.9971 / .5)" (${rule})`,
+		},
+		{
+			line: 39,
+			column: 9,
+			endLine: 39,
+			endColumn: 41,
+			rule,
+			severity: `error`,
+			text: `Unexpected color out of gamut range "oklab(85.69% 0.1007 0.1191 / .5)" (${rule})`,
+		},
+	],
+})