stylelint-gamut 1.0.2 → 1.1.0

package/README.md

@@ -1,5 +1,6 @@
 # stylelint-gamut
 Stylelint plugin for working with different color spaces.
+Right now it's working with node version >= 16.0.0.
 
 # Installation
 

package/package.json

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

package/src/index.js

@@ -3,11 +3,15 @@
 const valueParser = require('postcss-value-parser')
 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')
+
+const {
+  isStandardSyntaxProperty,
+  isCustomProperty,
+  getDeclarationValue,
+  declarationValueIndex,
+  isInColorGamutP3MediaQuery,
+  isInColorGamutRec2020MediaQuery
+} = require('./utils')
 
 const ruleName = 'gamut/color-no-out-gamut-range'
 
@@ -19,6 +23,8 @@ 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) => {
@@ -40,22 +46,21 @@ const ruleFunction = (primary) => {
       parsedValue.walk((node, _index, nodes) => {
         if (node.type !== 'function') return
 
-        if (
-          node.value !== 'lch' &&
-          node.value !== 'lab' &&
-          node.value !== 'oklch' &&
-          node.value !== 'oklab'
-        ) {
+        if (!COLOR_FUNCTIONS.has(node.value)) {
           return
         }
 
-        const isInSrgbGamut = new Color(valueParser.stringify(nodes)).inGamut(
-          'srgb'
-        )
+        const color = new Color(valueParser.stringify(nodes))
 
-        if (isInSrgbGamut) return
+        const isInSrgbGamut = color.inGamut('srgb')
+        const isInP3Query = isInColorGamutP3MediaQuery(decl)
+        if (isInSrgbGamut || isInP3Query) return
 
-        if (isInColorGamutP3MediaQuery(decl)) return
+        const isInP3Gamut = color.inGamut('p3')
+        if (isInP3Gamut && isInP3Query) return
+
+        const isInRec2020Gamut = color.inGamut('rec2020')
+        if (isInRec2020Gamut && isInColorGamutRec2020MediaQuery(decl)) return
 
         const index = declarationValueIndex(decl) + node.sourceIndex
         const endIndex = index + decl.value.length
@@ -73,20 +78,6 @@ const ruleFunction = (primary) => {
   }
 }
 
-/**
- * @param {import('postcss').Declaration} decl
- * @returns {boolean}
- */
-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 false
-}
-
 ruleFunction.ruleName = ruleName
 ruleFunction.messages = messages
 ruleFunction.meta = meta

package/src/index.test.js

@@ -9,12 +9,16 @@ testRule({
   accept: [
     {
       code: '@media (color-gamut: p3) { a { color: lch(48% 82 283); } }',
-      description: 'lch out of srgb gamut but wrapped in media query'
+      description: 'lch out of srgb gamut but wrapped in p3 media query'
+    },
+    {
+      code: '@media (color-gamut: rec2020) { a { color: lch(48% 82 283); } }',
+      description: 'lch out of p3 gamut but wrapped in rec2020 media query'
     },
     {
       code: '@media (color-gamut: p3) { a { color: oklch(48% 82 283 / 73%); } }',
       description:
-        'oklch with alpha out of srgb gamut but wrapped in media query'
+        'oklch with alpha out of srgb gamut but wrapped in p3 media query'
     },
     {
       code: 'a { color: lch(50% 0 0); }',
@@ -48,6 +52,15 @@ testRule({
       endLine: 1,
       endColumn: 27
     },
+    {
+      code: '@media (color-gamut: srgb) { a { color: lch(48% 82 283); } }',
+      description: 'lch is out of srgb and wrapped in srgb media query',
+      message: messages.rejected('lch(48% 82 283)'),
+      line: 1,
+      column: 41,
+      endLine: 1,
+      endColumn: 56
+    },
     {
       code: 'a { color: lch(48% 82 283 / 72%); }',
       description: 'lch with alpha',

package/src/utils.js

@@ -0,0 +1,127 @@
+'use strict'
+
+/**
+ * Get the index of a declaration's value
+ *
+ * @param {import('postcss').Declaration} decl
+ * @returns {number}
+ */
+function declarationValueIndex (decl) {
+  const raws = decl.raws
+
+  return [
+    // @ts-expect-error -- TS2571: Object is of type 'unknown'.
+    raws.prop && raws.prop.prefix,
+    // @ts-expect-error -- TS2571: Object is of type 'unknown'.
+    (raws.prop && raws.prop.raw) || decl.prop,
+    // @ts-expect-error -- TS2571: Object is of type 'unknown'.
+    raws.prop && raws.prop.suffix,
+    raws.between || ':',
+    // @ts-expect-error -- TS2339: Property 'prefix' does not exist on type '{ value: string; raw: string; }'.
+    raws.value && raws.value.prefix
+  ].reduce((count, str) => {
+    if (str) {
+      return count + str.length
+    }
+
+    return count
+  }, 0)
+}
+
+/**
+ * @param {import('postcss').Declaration} decl
+ * @returns {string}
+ */
+function getDeclarationValue (decl) {
+  const raws = decl.raws
+
+  return (raws.value && raws.value.raw) || decl.value
+}
+
+/**
+ * @param {import('postcss').Declaration} decl
+ * @returns {boolean | import('postcss').AtRule}
+ */
+function getMediaQueryAtRule (decl) {
+  if (decl.parent && decl.parent.parent && isAtRule(decl.parent.parent)) {
+    const parent = decl.parent.parent
+
+    return parent.name === 'media' ? parent : false
+  }
+
+  return false
+}
+
+/**
+ * @param {Node} node
+ * @returns {node is import('postcss').AtRule}
+ */
+function isAtRule (node) {
+  return node.type === 'atrule'
+}
+
+/**
+ * Check whether a property is a custom one
+ * @param {string} property
+ * @returns {boolean}
+ */
+function isCustomProperty (property) {
+  return property.startsWith('--')
+}
+
+/**
+ * Check whether a property is standard
+ *
+ * @param {string} property
+ * @return {boolean} If `true`, the property is standard
+ */
+
+function isStandardSyntaxProperty (property) {
+  // SCSS var (e.g. $var: x), list (e.g. $list: (x)) or map (e.g. $map: (key:value))
+  if (property.startsWith('$')) {
+    return false
+  }
+
+  // Less var (e.g. @var: x)
+  if (property.startsWith('@')) {
+    return false
+  }
+
+  // SCSS or Less interpolation
+  if (/#{.+?}|@{.+?}|\$\(.+?\)/.test(property)) {
+    return false
+  }
+
+  return true
+}
+
+/**
+ * @param {import('postcss').Declaration} decl
+ * @returns {boolean}
+ */
+function isInColorGamutP3MediaQuery (decl) {
+  const mediaQueryAtRule = getMediaQueryAtRule(decl)
+
+  return mediaQueryAtRule && mediaQueryAtRule.params === '(color-gamut: p3)'
+}
+
+/**
+ * @param {import('postcss').Declaration} decl
+ * @returns {boolean}
+ */
+function isInColorGamutRec2020MediaQuery (decl) {
+  const mediaQueryAtRule = getMediaQueryAtRule(decl)
+
+  return mediaQueryAtRule && mediaQueryAtRule.params === '(color-gamut: rec2020)'
+}
+
+module.exports = {
+  declarationValueIndex,
+  getDeclarationValue,
+  getMediaQueryAtRule,
+  isCustomProperty,
+  isStandardSyntaxProperty,
+  isAtRule,
+  isInColorGamutP3MediaQuery,
+  isInColorGamutRec2020MediaQuery
+}

package/src/utils/declarationValueIndex.js

@@ -1,29 +0,0 @@
-'use strict'
-
-/**
- * Get the index of a declaration's value
- *
- * @param {import('postcss').Declaration} decl
- * @returns {number}
- */
-module.exports = function declarationValueIndex (decl) {
-  const raws = decl.raws
-
-  return [
-    // @ts-expect-error -- TS2571: Object is of type 'unknown'.
-    raws.prop && raws.prop.prefix,
-    // @ts-expect-error -- TS2571: Object is of type 'unknown'.
-    (raws.prop && raws.prop.raw) || decl.prop,
-    // @ts-expect-error -- TS2571: Object is of type 'unknown'.
-    raws.prop && raws.prop.suffix,
-    raws.between || ':',
-    // @ts-expect-error -- TS2339: Property 'prefix' does not exist on type '{ value: string; raw: string; }'.
-    raws.value && raws.value.prefix
-  ].reduce((count, str) => {
-    if (str) {
-      return count + str.length
-    }
-
-    return count
-  }, 0)
-}

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
-}

package/src/utils/isAtRule.js

@@ -1,7 +0,0 @@
-/**
- * @param {Node} node
- * @returns {node is import('postcss').AtRule}
- */
-module.exports = function isAtRule (node) {
-  return node.type === 'atrule'
-}

package/src/utils/isCustomProperty.js

@@ -1,10 +0,0 @@
-'use strict'
-
-/**
- * Check whether a property is a custom one
- * @param {string} property
- * @returns {boolean}
- */
-module.exports = function isCustomProperty (property) {
-  return property.startsWith('--')
-}

package/src/utils/isStandardSyntaxProperty.js

@@ -1,25 +0,0 @@
-/**
- * Check whether a property is standard
- *
- * @param {string} property
- * @return {boolean} If `true`, the property is standard
- */
-
-module.exports = function isStandardSyntaxProperty (property) {
-  // SCSS var (e.g. $var: x), list (e.g. $list: (x)) or map (e.g. $map: (key:value))
-  if (property.startsWith('$')) {
-    return false
-  }
-
-  // Less var (e.g. @var: x)
-  if (property.startsWith('@')) {
-    return false
-  }
-
-  // SCSS or Less interpolation
-  if (/#{.+?}|@{.+?}|\$\(.+?\)/.test(property)) {
-    return false
-  }
-
-  return true
-}