stylelint-gamut 1.3.3 → 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,17 +1,17 @@
 {
 	"name": "stylelint-gamut",
-	"version": "1.3.3",
+	"version": "1.3.4",
 	"description": "Stylelint plugin for working with different color spaces",
 	"main": "src/index.js",
 	"scripts": {
-		"format": "prettier --write",
-		"lint": "eslint --fix",
+		"format": "prettier --write .",
+		"lint": "eslint --fix *.js",
 		"test": "jest",
 		"prepare": "husky install"
 	},
 	"lint-staged": {
-		"*.js": "npm run lint",
-		".": "npm run format"
+		"*.js": "eslint --fix",
+		".": "prettier -write"
 	},
 	"engines": {
 		"node": ">=16.0.0"
@@ -40,11 +40,11 @@
 	},
 	"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.43.0",
-		"eslint-config-prettier": "^8.8.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",
@@ -53,8 +53,8 @@
 		"jest": "^29.5.0",
 		"jest-cli": "^29.5.0",
 		"jest-preset-stylelint": "^6.1.0",
-		"lint-staged": "^13.2.2",
-		"prettier": "^2.8.8",
+		"lint-staged": "^15.0.2",
+		"prettier": "^3.0.3",
 		"stylelint": "^15.7.0"
 	},
 	"dependencies": {

package/src/README.md

@@ -15,7 +15,7 @@ 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 */
   }
 }
 ```
@@ -24,7 +24,7 @@ This rule checks if the color is in sRGB, p3 or rec2020 space. If it's not in sR
 @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 */
   }
 }
 ```
@@ -38,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
@@ -51,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

@@ -2,6 +2,7 @@
 
 const stylelint = require("stylelint");
 const Color = require("colorjs.io").default;
+
 const {
 	isInColorGamutP3MediaQuery,
 	isStandardSyntaxProperty,
@@ -13,7 +14,7 @@ const {
 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 = {
@@ -21,7 +22,7 @@ const meta = {
 };
 
 /** @type {import('stylelint').Rule} */
-const ruleFunction = primary => {
+const ruleFunction = (primary) => {
 	return (root, result) => {
 		const validOptions = stylelint.utils.validateOptions(result, ruleName, {
 			actual: primary,
@@ -33,19 +34,20 @@ const ruleFunction = primary => {
 
 		const customProperties = {};
 
-		root.walkDecls(decl => {
+		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);
-				}
-			}
+
+			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(--") &&

package/src/utils.js

@@ -6,7 +6,7 @@
  * @param {import('postcss').Declaration} decl
  * @returns {number}
  */
-function declarationValueIndex(decl) {
+const declarationValueIndex = (decl) => {
 	const raws = decl.raws;
 
 	return [
@@ -22,7 +22,7 @@ function declarationValueIndex(decl) {
 
 		return count;
 	}, 0);
-}
+};
 
 /**
  * Check whether a property is standard
@@ -30,7 +30,7 @@ function declarationValueIndex(decl) {
  * @param {string} property
  * @return {boolean} If `true`, the property is standard
  */
-function isStandardSyntaxProperty(property) {
+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;
@@ -47,13 +47,13 @@ function isStandardSyntaxProperty(property) {
 	}
 
 	return true;
-}
+};
 
 /**
  * @param {import('postcss').Declaration} decl
  * @returns {boolean}
  */
-function isInColorGamutP3MediaQuery(decl) {
+const isInColorGamutP3MediaQuery = (decl) => {
 	const parentMediaQuery = getMediaQueryParent(decl);
 
 	if (
@@ -64,13 +64,13 @@ function isInColorGamutP3MediaQuery(decl) {
 	}
 
 	return false;
-}
+};
 
 /**
  * @param {import('postcss').Declaration} decl
  * @returns {boolean}
  */
-function isInColorGamutRec2020MediaQuery(decl) {
+const isInColorGamutRec2020MediaQuery = (decl) => {
 	const parentMediaQuery = getMediaQueryParent(decl);
 
 	if (
@@ -81,13 +81,13 @@ function isInColorGamutRec2020MediaQuery(decl) {
 	}
 
 	return false;
-}
+};
 
 /**
  * @param {import('postcss').Declaration} decl
  * @returns {boolean | decl}
  */
-function getMediaQueryParent(decl) {
+const getMediaQueryParent = (decl) => {
 	let parent = decl.parent;
 
 	if (parent && isMediaQuery(parent)) return parent;
@@ -95,19 +95,15 @@ function getMediaQueryParent(decl) {
 	parent = 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,