stylelint-gamut 1.3.1 → 1.3.3

package/package.json

@@ -1,14 +1,17 @@
 {
 	"name": "stylelint-gamut",
-	"version": "1.3.1",
+	"version": "1.3.3",
 	"description": "Stylelint plugin for working with different color spaces",
 	"main": "src/index.js",
 	"scripts": {
+		"format": "prettier --write",
+		"lint": "eslint --fix",
 		"test": "jest",
 		"prepare": "husky install"
 	},
 	"lint-staged": {
-		"*.js": "eslint --fix"
+		"*.js": "npm run lint",
+		".": "npm run format"
 	},
 	"engines": {
 		"node": ">=16.0.0"
@@ -40,19 +43,21 @@
 		"stylelint": "^14.0.0 || ^15.0.0"
 	},
 	"devDependencies": {
-		"eslint": "^8.22.0",
-		"eslint-config-standard": "^17.0.0",
-		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-n": "^15.2.4",
-		"eslint-plugin-promise": "^6.0.0",
-		"husky": "^8.0.1",
-		"jest": "^28.1.3",
-		"jest-cli": "^28.1.3",
-		"jest-preset-stylelint": "^5.0.4",
-		"lint-staged": "^13.0.3",
-		"stylelint": "^14.10.0"
+		"eslint": "^8.43.0",
+		"eslint-config-prettier": "^8.8.0",
+		"eslint-config-standard": "^17.1.0",
+		"eslint-plugin-import": "^2.27.5",
+		"eslint-plugin-n": "^16.0.0",
+		"eslint-plugin-promise": "^6.1.1",
+		"husky": "^8.0.3",
+		"jest": "^29.5.0",
+		"jest-cli": "^29.5.0",
+		"jest-preset-stylelint": "^6.1.0",
+		"lint-staged": "^13.2.2",
+		"prettier": "^2.8.8",
+		"stylelint": "^15.7.0"
 	},
 	"dependencies": {
-		"colorjs.io": "^0.4.0"
+		"colorjs.io": "^0.4.5"
 	}
 }

package/src/README.md

@@ -4,9 +4,7 @@ Disallow out of gamut range colors.
 
 <!-- prettier-ignore -->
 ```css
-a { color: lch(48% 82 283) }
-/**        ↑
- * This color is out of sRGB gamut range */
+a { color: lch(48% 82 283) } /* This color is out of sRGB gamut range */
 ```
 
 Colors declared using lch, oklch, lab and oklab functions can move from sRGB to P3 or Rec2020 color spaces, which are not supported by most of screens right now. It can happen by mistake. For instance, by converting colors from one space to another.
@@ -17,20 +15,18 @@ This rule checks if the color is in sRGB, p3 or rec2020 space. If it's not in sR
 @media (color-gamut: p3) {
   a {
     color: lch(29.8% 42.5 109.485);
+	/* This color is in p3 gamut range */
   }
 }
-/**        ↑
- * This color is in p3 gamut range */
 ```
 
 ```css
 @media (color-gamut: rec2020) {
   a {
     color: lch(25.1% 42.5 109.485);
+	/* This color is in rec2020 gamut range */
   }
 }
-/**        ↑
- * This color is in rec2020 gamut range */
 ```
 
 In case of **css custom properties** you should wrap either the custom property declaration:

package/src/index.js

@@ -1,87 +1,108 @@
-'use strict'
+"use strict";
 
-const stylelint = require('stylelint')
-const Color = require('colorjs.io').default
-const { isInColorGamutP3MediaQuery, isStandardSyntaxProperty, declarationValueIndex, isInColorGamutRec2020MediaQuery } = require('./utils')
+const stylelint = require("stylelint");
+const Color = require("colorjs.io").default;
+const {
+	isInColorGamutP3MediaQuery,
+	isStandardSyntaxProperty,
+	declarationValueIndex,
+	isInColorGamutRec2020MediaQuery,
+	startsWithNumber,
+} = require("./utils");
 
-const ruleName = 'gamut/color-no-out-gamut-range'
+const ruleName = "gamut/color-no-out-gamut-range";
 
 const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: (color) => `Unexpected color out of gamut range "${color}"`
-})
+	rejected: color => `Unexpected color out of gamut range "${color}"`,
+});
 
 const meta = {
-  url: 'https://github.com/fpetrakov/stylelint-gamut/blob/master/src/README.md'
-}
+	url: "https://github.com/fpetrakov/stylelint-gamut/blob/master/src/README.md",
+};
 
 /** @type {import('stylelint').Rule} */
-const ruleFunction = (primary) => {
-  return (root, result) => {
-    const validOptions = stylelint.utils.validateOptions(result, ruleName, {
-      actual: primary
-    })
-
-    if (!validOptions) {
-      return
-    }
-
-    const customProperties = {}
-
-    root.walkDecls((decl) => {
-      if (!isStandardSyntaxProperty(decl.prop)) return
-
-      const values = decl.value.match(/(oklch|oklab|lab|lch|var)\([^)]+\)/g)
-      if (values) {
-        for (const value of values) {
-          check(value)
-        }
-      }
-
-      function check (value) {
-        if (!value.startsWith('var(--') && value.includes('var(--')) return
-
-        let customPropValue
-        if (value.startsWith('var(--')) {
-          const varName = value.slice(4, -1)
-
-          if (customProperties[varName] && !customProperties[varName].inQuery) {
-            customPropValue = customProperties[varName].value
-          } else {
-            return
-          }
-        }
-
-        const color = new Color(customPropValue || value)
-
-        if (color.inGamut('srgb')) return
-
-        if (color.inGamut('p3') && isInColorGamutP3MediaQuery(decl)) return
-
-        if (color.inGamut('rec2020') && isInColorGamutRec2020MediaQuery(decl)) return
-
-        if (decl.prop && decl.prop.startsWith('--')) {
-          customProperties[decl.prop] = { value: decl.value.trim(), inQuery: false }
-          return
-        }
-
-        const index = declarationValueIndex(decl)
-        const endIndex = index + decl.value.length
-
-        stylelint.utils.report({
-          message: messages.rejected(value),
-          node: decl,
-          index,
-          endIndex,
-          result,
-          ruleName
-        })
-      }
-    })
-  }
-}
-
-ruleFunction.ruleName = ruleName
-ruleFunction.messages = messages
-ruleFunction.meta = meta
-
-module.exports = stylelint.createPlugin(ruleName, ruleFunction)
+const ruleFunction = primary => {
+	return (root, result) => {
+		const validOptions = stylelint.utils.validateOptions(result, ruleName, {
+			actual: primary,
+		});
+
+		if (!validOptions) {
+			return;
+		}
+
+		const customProperties = {};
+
+		root.walkDecls(decl => {
+			if (!isStandardSyntaxProperty(decl.prop)) return;
+
+			const values = decl.value.match(
+				/(oklch|oklab|lab|lch|var)\([^)]+\)/g,
+			);
+			if (values) {
+				for (const value of values) {
+					check(value);
+				}
+			}
+
+			// value is e.g. lch(48% 82 283 / 67%)
+			function check(value) {
+				const shouldBeIgnored =
+					!value.startsWith("var(--") &&
+					(value.includes("var(--") ||
+						!startsWithNumber(value.split("(")[1]));
+
+				if (shouldBeIgnored) return;
+
+				let customPropValue;
+				if (value.startsWith("var(--")) {
+					const varName = value.slice(4, -1);
+					if (
+						customProperties[varName] &&
+						!customProperties[varName].inQuery
+					) {
+						customPropValue = customProperties[varName].value;
+					} else {
+						return;
+					}
+				}
+
+				const color = new Color(customPropValue || value);
+
+				if (color.inGamut("srgb")) return;
+				if (color.inGamut("p3") && isInColorGamutP3MediaQuery(decl))
+					return;
+				if (
+					color.inGamut("rec2020") &&
+					isInColorGamutRec2020MediaQuery(decl)
+				)
+					return;
+
+				if (decl.prop && decl.prop.startsWith("--")) {
+					customProperties[decl.prop] = {
+						value: decl.value.trim(),
+						inQuery: false,
+					};
+					return;
+				}
+
+				const index = declarationValueIndex(decl);
+				const endIndex = index + decl.value.length;
+				stylelint.utils.report({
+					message: messages.rejected(value),
+					node: decl,
+					index,
+					endIndex,
+					result,
+					ruleName,
+				});
+			}
+		});
+	};
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+ruleFunction.meta = meta;
+
+module.exports = stylelint.createPlugin(ruleName, ruleFunction);

package/src/utils.js

@@ -1,4 +1,4 @@
-'use strict'
+"use strict";
 
 /**
  * Get the index of a declaration's value
@@ -6,26 +6,22 @@
  * @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)
+function declarationValueIndex(decl) {
+	const raws = decl.raws;
+
+	return [
+		raws.prop && raws.prop.prefix,
+		(raws.prop && raws.prop.raw) || decl.prop,
+		raws.prop && raws.prop.suffix,
+		raws.between || ":",
+		raws.value && raws.value.prefix,
+	].reduce((count, str) => {
+		if (str) {
+			return count + str.length;
+		}
+
+		return count;
+	}, 0);
 }
 
 /**
@@ -34,78 +30,89 @@ function declarationValueIndex (decl) {
  * @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
+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 parentMediaQuery = getMediaQueryParent(decl)
+function isInColorGamutP3MediaQuery(decl) {
+	const parentMediaQuery = getMediaQueryParent(decl);
 
-  if (parentMediaQuery && /\(color-gamut:\s*p3\)/.test(parentMediaQuery.params)) {
-    return true
-  }
+	if (
+		parentMediaQuery &&
+		/\(color-gamut:\s*p3\)/.test(parentMediaQuery.params)
+	) {
+		return true;
+	}
 
-  return false
+	return false;
 }
 
 /**
  * @param {import('postcss').Declaration} decl
  * @returns {boolean}
  */
-function isInColorGamutRec2020MediaQuery (decl) {
-  const parentMediaQuery = getMediaQueryParent(decl)
+function isInColorGamutRec2020MediaQuery(decl) {
+	const parentMediaQuery = getMediaQueryParent(decl);
 
-  if (parentMediaQuery && /\(color-gamut:\s*rec2020\)/.test(parentMediaQuery.params)) {
-    return true
-  }
+	if (
+		parentMediaQuery &&
+		/\(color-gamut:\s*rec2020\)/.test(parentMediaQuery.params)
+	) {
+		return true;
+	}
 
-  return false
+	return false;
 }
 
 /**
  * @param {import('postcss').Declaration} decl
  * @returns {boolean | decl}
  */
-function getMediaQueryParent (decl) {
-  let parent = decl.parent
+function getMediaQueryParent(decl) {
+	let parent = decl.parent;
 
-  if (parent && isMediaQuery(parent)) return parent
+	if (parent && isMediaQuery(parent)) return parent;
 
-  parent = parent.parent
+	parent = parent.parent;
 
-  return isMediaQuery(parent) && parent
+	return isMediaQuery(parent) && parent;
 }
 
 /**
  * @param {import('postcss').Declaration} decl
  * @returns {boolean}
  */
-function isMediaQuery (decl) {
-  return decl.type === 'atrule' && decl.name === 'media'
+function isMediaQuery(decl) {
+	return decl.type === "atrule" && decl.name === "media";
 }
 
-module.exports = {
-  isStandardSyntaxProperty,
-  declarationValueIndex,
-  isInColorGamutP3MediaQuery,
-  isInColorGamutRec2020MediaQuery
+function startsWithNumber(str) {
+	return /^\d/.test(str);
 }
+
+module.exports = {
+	isStandardSyntaxProperty,
+	declarationValueIndex,
+	isInColorGamutP3MediaQuery,
+	isInColorGamutRec2020MediaQuery,
+	startsWithNumber,
+};