stylelint-gamut 1.3.3 → 2.0.0

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**.
@@ -27,28 +27,27 @@ npm install stylelint stylelint-config-standard --save-dev
 npm install stylelint-gamut --save-dev
 ```
 
-# Usage
-
-Add `stylelint-gamut` to your Stylelint config `plugins` array, then add rules you need to the rules list. All rules from `stylelint-gamut` need to be namespaced with `gamut`.
+3. Add `stylelint-gamut` to your Stylelint config `plugins` array, then add rules you need to the rules list. All rules from `stylelint-gamut` need to be namespaced with `gamut`.
 
 ```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,20 +1,21 @@
 {
 	"name": "stylelint-gamut",
-	"version": "1.3.3",
+	"version": "2.0.0",
 	"description": "Stylelint plugin for working with different color spaces",
+	"type": "module",
 	"main": "src/index.js",
 	"scripts": {
-		"format": "prettier --write",
-		"lint": "eslint --fix",
-		"test": "jest",
+		"format": "prettier --write .",
+		"lint": "eslint --fix *.js",
+		"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
 		"prepare": "husky install"
 	},
 	"lint-staged": {
-		"*.js": "npm run lint",
-		".": "npm run format"
+		"*.js": "eslint --fix",
+		".": "prettier -write"
 	},
 	"engines": {
-		"node": ">=16.0.0"
+		"node": ">=20.19.0"
 	},
 	"repository": {
 		"type": "git",
@@ -40,22 +41,22 @@
 	},
 	"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 || ^17.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",
 		"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"
+		"jest": "^30.0.0",
+		"jest-cli": "^30.0.0",
+		"jest-preset-stylelint": "^9.0.0",
+		"lint-staged": "^15.0.2",
+		"prettier": "^3.0.3",
+		"stylelint": "^17.0.0"
 	},
 	"dependencies": {
 		"colorjs.io": "^0.4.5"

package/src/index.js

@@ -1,19 +1,18 @@
-"use strict";
+import stylelint from "stylelint";
+import Color from "colorjs.io";
 
-const stylelint = require("stylelint");
-const Color = require("colorjs.io").default;
-const {
+import {
 	isInColorGamutP3MediaQuery,
 	isStandardSyntaxProperty,
 	declarationValueIndex,
 	isInColorGamutRec2020MediaQuery,
 	startsWithNumber,
-} = require("./utils");
+} from "./utils.js";
 
 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 +20,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 +32,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(--") &&
@@ -105,4 +105,7 @@ ruleFunction.ruleName = ruleName;
 ruleFunction.messages = messages;
 ruleFunction.meta = meta;
 
-module.exports = stylelint.createPlugin(ruleName, ruleFunction);
+const plugin = stylelint.createPlugin(ruleName, ruleFunction);
+
+export default plugin;
+export { ruleName, messages, meta };

package/src/utils.js

@@ -1,12 +1,10 @@
-"use strict";
-
 /**
  * Get the index of a declaration's value
  *
  * @param {import('postcss').Declaration} decl
  * @returns {number}
  */
-function declarationValueIndex(decl) {
+export const declarationValueIndex = (decl) => {
 	const raws = decl.raws;
 
 	return [
@@ -22,7 +20,7 @@ function declarationValueIndex(decl) {
 
 		return count;
 	}, 0);
-}
+};
 
 /**
  * Check whether a property is standard
@@ -30,7 +28,7 @@ function declarationValueIndex(decl) {
  * @param {string} property
  * @return {boolean} If `true`, the property is standard
  */
-function isStandardSyntaxProperty(property) {
+export 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 +45,13 @@ function isStandardSyntaxProperty(property) {
 	}
 
 	return true;
-}
+};
 
 /**
  * @param {import('postcss').Declaration} decl
  * @returns {boolean}
  */
-function isInColorGamutP3MediaQuery(decl) {
+export const isInColorGamutP3MediaQuery = (decl) => {
 	const parentMediaQuery = getMediaQueryParent(decl);
 
 	if (
@@ -64,13 +62,13 @@ function isInColorGamutP3MediaQuery(decl) {
 	}
 
 	return false;
-}
+};
 
 /**
  * @param {import('postcss').Declaration} decl
  * @returns {boolean}
  */
-function isInColorGamutRec2020MediaQuery(decl) {
+export const isInColorGamutRec2020MediaQuery = (decl) => {
 	const parentMediaQuery = getMediaQueryParent(decl);
 
 	if (
@@ -81,13 +79,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,24 +93,12 @@ 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";
-}
-
-function startsWithNumber(str) {
-	return /^\d/.test(str);
-}
-
-module.exports = {
-	isStandardSyntaxProperty,
-	declarationValueIndex,
-	isInColorGamutP3MediaQuery,
-	isInColorGamutRec2020MediaQuery,
-	startsWithNumber,
-};
+const isMediaQuery = (decl) => decl.type === "atrule" && decl.name === "media";
+
+export const startsWithNumber = (str) => /^\d/.test(str);

package/src/README.md

@@ -1,121 +0,0 @@
-# color-no-out-gamut-range
-
-Disallow out of gamut range colors.
-
-<!-- prettier-ignore -->
-```css
-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.
-
-This rule checks if the color is in sRGB, p3 or rec2020 space. If it's not in sRGB gamut you should wrap it in a proper media query:
-
-```css
-@media (color-gamut: p3) {
-  a {
-    color: lch(29.8% 42.5 109.485);
-	/* 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 */
-  }
-}
-```
-
-In case of **css custom properties** you should wrap either the custom property declaration:
-
-```css
-@media (color-gamut: p3) {
-  :root {
-    --my-var: lch(48% 82 283);
-  }
-}
-```
-or the rule that uses the custom property:
-
-```css
-@media (color-gamut: p3) {
-  a {
-    color: var(--my-var);
-  }
-}
-```
-
-Custom properties inside color declaration are ignored:
-
-```css
-background-color: oklch(var(--oklch-primary) / var(--alpha-bg)); /* not checked */
-```
-
-Please note that conditional imports are not checked, e.g.:
-
-```html
-<link href="p3-custom-props.css" rel="stylesheet" media="(color-gamut: p3)" />
-```
-
-```css
-@import url("p3-custom-props.css") (color-gamut: p3);
-```
-
-## Options
-
-### `true`
-
-The following patterns are considered problems:
-
-<!-- prettier-ignore -->
-```css
-a { color: lch(48% 82 283) }
-```
-
-<!-- prettier-ignore -->
-```css
-a { color: oklch(57.35% 0.23 259.06) }
-```
-
-<!-- prettier-ignore -->
-```css
-a { color: lab(82.2345% 40.1645 59.9971 / .5) }
-```
-
-<!-- prettier-ignore -->
-```css
-a { color: oklab(85.69% 0.1007 0.1191 / .5) }
-```
-
-The following patterns are _not_ considered problems:
-
-<!-- prettier-ignore -->
-```css
-@media (color-gamut: p3) {
-  a { color: lch(48% 82 283) }
-}
-```
-
-<!-- prettier-ignore -->
-```css
-@media (color-gamut: p3) {
-  a { color: oklch(57.35% 0.23 259.06) }
-}
-```
-
-<!-- prettier-ignore -->
-```css
-@media (color-gamut: rec2020) {
-  a { color: lab(82.2345% 40.1645 59.9971 / .5) }
-}
-```
-
-<!-- prettier-ignore -->
-```css
-@media (color-gamut: rec2020) {
-  a { color: oklab(85.69% 0.1007 0.1191 / .5) }
-}
-```