stylelint-gamut 1.1.0 → 1.1.1

package/package.json

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

package/src/index.js

@@ -3,15 +3,11 @@
 const valueParser = require('postcss-value-parser')
 const stylelint = require('stylelint')
 const Color = require('colorjs.io').default
-
-const {
-  isStandardSyntaxProperty,
-  isCustomProperty,
-  getDeclarationValue,
-  declarationValueIndex,
-  isInColorGamutP3MediaQuery,
-  isInColorGamutRec2020MediaQuery
-} = require('./utils')
+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 ruleName = 'gamut/color-no-out-gamut-range'
 
@@ -50,17 +46,13 @@ const ruleFunction = (primary) => {
           return
         }
 
-        const color = new Color(valueParser.stringify(nodes))
-
-        const isInSrgbGamut = color.inGamut('srgb')
-        const isInP3Query = isInColorGamutP3MediaQuery(decl)
-        if (isInSrgbGamut || isInP3Query) return
+        const isInSrgbGamut = new Color(valueParser.stringify(nodes)).inGamut(
+          'srgb'
+        )
 
-        const isInP3Gamut = color.inGamut('p3')
-        if (isInP3Gamut && isInP3Query) return
+        if (isInSrgbGamut) return
 
-        const isInRec2020Gamut = color.inGamut('rec2020')
-        if (isInRec2020Gamut && isInColorGamutRec2020MediaQuery(decl)) return
+        if (isInColorGamutP3MediaQuery(decl)) return
 
         const index = declarationValueIndex(decl) + node.sourceIndex
         const endIndex = index + decl.value.length
@@ -78,6 +70,20 @@ 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,16 +9,12 @@ testRule({
   accept: [
     {
       code: '@media (color-gamut: p3) { a { color: lch(48% 82 283); } }',
-      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'
+      description: 'lch out of srgb gamut but wrapped in 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 p3 media query'
+        'oklch with alpha out of srgb gamut but wrapped in media query'
     },
     {
       code: 'a { color: lch(50% 0 0); }',
@@ -52,15 +48,6 @@ 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/declarationValueIndex.js

@@ -0,0 +1,29 @@
+'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

@@ -0,0 +1,11 @@
+'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

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

package/src/utils/isCustomProperty.js

@@ -0,0 +1,10 @@
+'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

@@ -0,0 +1,25 @@
+/**
+ * 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
+}

package/src/utils.js

@@ -1,127 +0,0 @@
-'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
-}