From 7ee4c2082752b1ed75896462ed120466f127dd0b Mon Sep 17 00:00:00 2001 From: firefoxic Date: Fri, 7 Jun 2024 16:57:09 +0300 Subject: [PATCH] Disallow out of gamut range colors --- CHANGELOG.md | 1 + package.json | 1 + pnpm-lock.yaml | 19 ++++++ stylelint.config.js | 3 + test/gamut/color-no-out-gamut-range.js | 95 ++++++++++++++++++++++++++ 5 files changed, 119 insertions(+) create mode 100644 test/gamut/color-no-out-gamut-range.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 095a4df..96cbe30 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index d3a5cdd..c60113e 100644 --- a/package.json +++ b/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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2a31393..4f75dbf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@stylistic/stylelint-plugin': specifier: ^2.1.2 version: 2.1.2(stylelint@16.6.1) + stylelint-gamut: + specifier: ^1.3.4 + version: 1.3.4(stylelint@16.6.1) stylelint-plugin-logical-css: specifier: ^1.2.1 version: 1.2.1(stylelint@16.6.1) @@ -233,6 +236,9 @@ packages: colord@2.9.3: resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} + colorjs.io@0.4.5: + resolution: {integrity: sha512-yCtUNCmge7llyfd/Wou19PMAcf5yC3XXhgFoAh6zsO2pGswhUPBaaUh8jzgHnXtXuZyFKzXZNAnyF5i+apICow==} + concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} @@ -690,6 +696,12 @@ packages: style-search@0.1.0: resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==} + stylelint-gamut@1.3.4: + resolution: {integrity: sha512-mN/8BRPNGlKwf/lGrR9JjW9Abm6e7lCn7fiq4M6a4RxDCU/R6lSUI65R6cdo5BV14qf3GmrqNBAjmSujBVrHoA==} + engines: {node: '>=16.0.0'} + peerDependencies: + stylelint: ^14.0.0 || ^15.0.0 || ^16.0.0 + stylelint-plugin-logical-css@1.2.1: resolution: {integrity: sha512-56r1xGVZ/ExZT5SFJ7AhyZVUjOvRTCbLLl68PFTN1R55KU0SQEe22YyE53570cxeTf9plpvqckHAQBiUU714YQ==} engines: {node: '>=18.12.0'} @@ -955,6 +967,8 @@ snapshots: colord@2.9.3: {} + colorjs.io@0.4.5: {} + concat-map@0.0.1: {} cosmiconfig@9.0.0: @@ -1361,6 +1375,11 @@ snapshots: style-search@0.1.0: {} + stylelint-gamut@1.3.4(stylelint@16.6.1): + dependencies: + colorjs.io: 0.4.5 + stylelint: 16.6.1 + stylelint-plugin-logical-css@1.2.1(stylelint@16.6.1): dependencies: stylelint: 16.6.1 diff --git a/stylelint.config.js b/stylelint.config.js index e33819c..71ba3b3 100644 --- a/stylelint.config.js +++ b/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`, diff --git a/test/gamut/color-no-out-gamut-range.js b/test/gamut/color-no-out-gamut-range.js new file mode 100644 index 0000000..2fbe9ec --- /dev/null +++ b/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})`, + }, + ], +})