stylelint-gamut 1.3.2 → 1.3.4

package/README.md

@@ -6,9 +6,9 @@
 
 # Rules
 
-* [`color-no-out-gamut-range`](./src/README.md): Throw warning if color goes out of sRGB color space and is not wrapped in `@media (color-gamut: p3) {}` or `@media (color-gamut: rec2020) {}`.
+- [`color-no-out-gamut-range`](./src/README.md): Throw warning if color goes out of sRGB color space and is not wrapped in `@media (color-gamut: p3) {}` or `@media (color-gamut: rec2020) {}`.
 
-# Requirements 
+# Requirements
 
 - **node version ≥ 12.0.0**
 - **Stylelint version ≥ 14.0.0**.
@@ -33,22 +33,23 @@ Add `stylelint-gamut` to your Stylelint config `plugins` array, then add rules y
 
 ```json
 {
-  "plugins": [
-    "stylelint-gamut"
-  ],
+  "plugins": ["stylelint-gamut"],
   "rules": {
-    "gamut/color-no-out-gamut-range": true,
+    "gamut/color-no-out-gamut-range": true
   }
 }
 ```
 
 # More
+
 It is already used by the creator of [PostCSS] [Andrey Sitnik].
 
 Read more about color spaces in css:
+
 - [OKLCH in CSS: why we moved from RGB and HSL](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl)
 - [LCH colors in CSS: what, why, and how?](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/)
 - [A Guide To Modern CSS Colors](https://www.smashingmagazine.com/2021/11/guide-modern-css-colors/)
+- [Better dynamic themes in Tailwind with OKLCH color magic](https://evilmartians.com/chronicles/better-dynamic-themes-in-tailwind-with-oklch-color-magic)
 
 [Stylelint]: https://stylelint.io/
 [npm-version-img]: https://img.shields.io/npm/v/stylelint-gamut.svg

package/package.json

@@ -1,14 +1,17 @@
 {
 	"name": "stylelint-gamut",
-	"version": "1.3.2",
+	"version": "1.3.4",
 	"description": "Stylelint plugin for working with different color spaces",
 	"main": "src/index.js",
 	"scripts": {
+		"format": "prettier --write .",
+		"lint": "eslint --fix *.js",
 		"test": "jest",
 		"prepare": "husky install"
 	},
 	"lint-staged": {
-		"*.js": "eslint --fix"
+		"*.js": "eslint --fix",
+		".": "prettier -write"
 	},
 	"engines": {
 		"node": ">=16.0.0"
@@ -37,22 +40,24 @@
 	},
 	"homepage": "https://github.com/fpetrakov/stylelint-gamut#readme",
 	"peerDependencies": {
-		"stylelint": "^14.0.0 || ^15.0.0"
+		"stylelint": "^14.0.0 || ^15.0.0 || ^16.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": "^9.0.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": "^15.0.2",
+		"prettier": "^3.0.3",
+		"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:
@@ -42,6 +38,7 @@ In case of **css custom properties** you should wrap either the custom property
   }
 }
 ```
+
 or the rule that uses the custom property:
 
 ```css
@@ -55,7 +52,9 @@ or the rule that uses the custom property:
 Custom properties inside color declaration are ignored:
 
 ```css
-background-color: oklch(var(--oklch-primary) / var(--alpha-bg)); /* not checked */
+background-color: oklch(
+  var(--oklch-primary) / var(--alpha-bg)
+); /* not checked */
 ```
 
 Please note that conditional imports are not checked, e.g.:

package/src/index.js

@@ -1,97 +1,110 @@
-'use strict'
+"use strict";
+
+const stylelint = require("stylelint");
+const Color = require("colorjs.io").default;
 
-const stylelint = require('stylelint')
-const Color = require('colorjs.io').default
 const {
-  isInColorGamutP3MediaQuery,
-  isStandardSyntaxProperty,
-  declarationValueIndex,
-  isInColorGamutRec2020MediaQuery,
-  startsWithNumber
-} = require('./utils')
+	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)
-        }
-      }
-
-      // 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)
+	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) return;
+
+			// value is e.g. lch(48% 82 283 / 67%)
+			for (const value of values) {
+				check(value);
+			}
+
+			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,23 +6,23 @@
  * @param {import('postcss').Declaration} decl
  * @returns {number}
  */
-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)
-}
+const 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);
+};
 
 /**
  * Check whether a property is standard
@@ -30,83 +30,85 @@ 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
-  }
+const 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
-  }
+	// Less var (e.g. @var: x)
+	if (property.startsWith("@")) {
+		return false;
+	}
 
-  // SCSS or Less interpolation
-  if (/#{.+?}|@{.+?}|\$\(.+?\)/.test(property)) {
-    return false
-  }
+	// SCSS or Less interpolation
+	if (/#{.+?}|@{.+?}|\$\(.+?\)/.test(property)) {
+		return false;
+	}
 
-  return true
-}
+	return true;
+};
 
 /**
  * @param {import('postcss').Declaration} decl
  * @returns {boolean}
  */
-function isInColorGamutP3MediaQuery (decl) {
-  const parentMediaQuery = getMediaQueryParent(decl)
+const 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)
+const 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
+const 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'
-}
+const isMediaQuery = (decl) => decl.type === "atrule" && decl.name === "media";
 
-function startsWithNumber (str) {
-  return /^\d/.test(str)
-}
+const startsWithNumber = (str) => /^\d/.test(str);
 
 module.exports = {
-  isStandardSyntaxProperty,
-  declarationValueIndex,
-  isInColorGamutP3MediaQuery,
-  isInColorGamutRec2020MediaQuery,
-  startsWithNumber
-}
+	isStandardSyntaxProperty,
+	declarationValueIndex,
+	isInColorGamutP3MediaQuery,
+	isInColorGamutRec2020MediaQuery,
+	startsWithNumber,
+};