stylelint-gamut 1.1.3 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-gamut",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Stylelint plugin for working with different color spaces",
   "main": "src/index.js",
   "scripts": {

package/src/index.js

@@ -5,7 +5,6 @@ const stylelint = require('stylelint')
 const Color = require('colorjs.io').default
 const isStandardSyntaxProperty = require('./utils/isStandardSyntaxProperty')
 const isCustomProperty = require('./utils/isCustomProperty')
-const getDeclarationValue = require('./utils/getDeclarationValue')
 const isAtRule = require('./utils/isAtRule')
 const declarationValueIndex = require('./utils/declarationValueIndex')
 
@@ -19,8 +18,6 @@ const meta = {
   url: 'https://stylelint.io/user-guide/rules/list/color-no-out-gamut-range'
 }
 
-const COLOR_FUNCTIONS = new Set(['lch', 'lab', 'oklch', 'oklab'])
-
 /** @type {import('stylelint').Rule} */
 const ruleFunction = (primary) => {
   return (root, result) => {
@@ -37,35 +34,42 @@ const ruleFunction = (primary) => {
 
       if (isCustomProperty(decl.prop)) return
 
-      const parsedValue = valueParser(getDeclarationValue(decl))
+      if (decl.value.includes('lch(') || decl.value.includes('lab(')) {
+        const colors = decl.value.match(/(oklch|oklab|lab|lch)\([^)]+\)/g)
+        if (colors) {
+          for (const color of colors) {
+            checkColor(color)
+          }
+        }
+      }
 
-      parsedValue.walk((node, _index, nodes) => {
-        if (node.type !== 'function') return
+      function checkColor (color) {
+        const parsedValue = valueParser(color)
 
-        if (!COLOR_FUNCTIONS.has(node.value)) {
-          return
-        }
+        parsedValue.walk((node, _index, nodes) => {
+          if (node.type !== 'function') return
 
-        const isInSrgbGamut = new Color(valueParser.stringify(nodes)).inGamut(
-          'srgb'
-        )
+          const isInSrgbGamut = new Color(valueParser.stringify(nodes)).inGamut(
+            'srgb'
+          )
 
-        if (isInSrgbGamut) return
+          if (isInSrgbGamut) return
 
-        if (isInColorGamutP3MediaQuery(decl)) return
+          if (isInColorGamutP3MediaQuery(decl)) return
 
-        const index = declarationValueIndex(decl) + node.sourceIndex
-        const endIndex = index + decl.value.length
+          const index = declarationValueIndex(decl) + node.sourceIndex
+          const endIndex = index + decl.value.length
 
-        stylelint.utils.report({
-          message: messages.rejected(decl.value),
-          node: decl,
-          index,
-          endIndex,
-          result,
-          ruleName
+          stylelint.utils.report({
+            message: messages.rejected(color),
+            node: decl,
+            index,
+            endIndex,
+            result,
+            ruleName
+          })
         })
-      })
+      }
     })
   }
 }
@@ -78,7 +82,7 @@ function isInColorGamutP3MediaQuery (decl) {
   if (decl.parent && decl.parent.parent && isAtRule(decl.parent.parent)) {
     const parent = decl.parent.parent
 
-    return parent.name === 'media' && parent.params === '(color-gamut: p3)'
+    return parent.name === 'media' && /\(color-gamut:\s*p3\)/.test(parent.params)
   }
 
   return false

package/src/index.test.js

@@ -2,17 +2,22 @@
 
 const { rule: { messages, ruleName } } = require('./index.js')
 
+// eslint-disable-next-line no-undef
 testRule({
   ruleName,
   config: [true],
   plugins: ['./index.js'],
   accept: [
     {
-      code: '@media (color-gamut: p3) { a { color: lch(48% 82 283); } }',
+      code: '@media (color-gamut:p3) { a { color: lch(48% 82 283); } }',
       description: 'lch out of srgb gamut but wrapped in media query'
     },
     {
-      code: '@media (color-gamut: p3) { a { color: oklch(48% 82 283 / 73%); } }',
+      code: '@media (prefers-color-scheme: dark) and (color-gamut: p3) { a { color: lch(48% 82 283); } }',
+      description: 'lch out of srgb gamut but wrapped in a long media query'
+    },
+    {
+      code: '@media (color-gamut: p3) { a { color: oklch(85% 0.1 354 / 73%); } }',
       description:
         'oklch with alpha out of srgb gamut but wrapped in media query'
     },
@@ -20,6 +25,14 @@ testRule({
       code: 'a { color: lch(50% 0 0); }',
       description: 'in srgb gamut'
     },
+    {
+      code: '.foo { border: 4px solid oklch(100% 0 0); }',
+      description: 'in srgb gamut long property'
+    },
+    {
+      code: '.foo {background-image: linear-gradient(red lch(50% 0 0 )); }',
+      description: 'multicolor property in gamut range'
+    },
     {
       code: 'a { color: red; }',
       description: 'ignore not lch color declaration'
@@ -48,6 +61,24 @@ testRule({
       endLine: 1,
       endColumn: 27
     },
+    {
+      code: '@media (prefers-color-scheme: dark) and (color-gamut: srgb) { a { color: lch(48% 82 283); } }',
+      description: 'lch out of srgb gamut and wrapped in a long and wrong media query',
+      message: messages.rejected('lch(48% 82 283)'),
+      line: 1,
+      column: 74,
+      endLine: 1,
+      endColumn: 89
+    },
+    {
+      code: '.foo { background: content-box oklch(82.6% 0.087 262.26); }',
+      description: 'out of srgb gamut long property',
+      message: messages.rejected('oklch(82.6% 0.087 262.26)'),
+      line: 1,
+      column: 20,
+      endLine: 1,
+      endColumn: 57
+    },
     {
       code: 'a { color: lch(48% 82 283 / 72%); }',
       description: 'lch with alpha',
@@ -58,13 +89,22 @@ testRule({
       endColumn: 33
     },
     {
-      code: 'a { color: oklch(98% 49 129); }',
+      code: '.foo {background-image: linear-gradient(red lch(48% 82 283)); }',
+      description: 'multicolor property out of gamut range',
+      message: messages.rejected('lch(48% 82 283)'),
+      line: 1,
+      column: 25,
+      endLine: 1,
+      endColumn: 61
+    },
+    {
+      code: 'a { color: oklch(85% 0.1 354 / 73%); }',
       description: 'oklch',
-      message: messages.rejected('oklch(98% 49 129)'),
+      message: messages.rejected('oklch(85% 0.1 354 / 73%)'),
       line: 1,
       column: 12,
       endLine: 1,
-      endColumn: 29
+      endColumn: 36
     },
 
     {

package/src/utils/getDeclarationValue.js

@@ -1,11 +0,0 @@
-'use strict'
-
-/**
- * @param {import('postcss').Declaration} decl
- * @returns {string}
- */
-module.exports = function getDeclarationValue (decl) {
-  const raws = decl.raws
-
-  return (raws.value && raws.value.raw) || decl.value
-}