stylelint-gamut 1.3.4 → 2.0.0

package/README.md

@@ -27,9 +27,7 @@ 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
 {

package/package.json

@@ -1,12 +1,13 @@
 {
 	"name": "stylelint-gamut",
-	"version": "1.3.4",
+	"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 *.js",
-		"test": "jest",
+		"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
 		"prepare": "husky install"
 	},
 	"lint-staged": {
@@ -14,7 +15,7 @@
 		".": "prettier -write"
 	},
 	"engines": {
-		"node": ">=16.0.0"
+		"node": ">=20.19.0"
 	},
 	"repository": {
 		"type": "git",
@@ -40,7 +41,7 @@
 	},
 	"homepage": "https://github.com/fpetrakov/stylelint-gamut#readme",
 	"peerDependencies": {
-		"stylelint": "^14.0.0 || ^15.0.0 || ^16.0.0"
+		"stylelint": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
 	},
 	"devDependencies": {
 		"eslint": "^8.43.0",
@@ -50,12 +51,12 @@
 		"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",
+		"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": "^15.7.0"
+		"stylelint": "^17.0.0"
 	},
 	"dependencies": {
 		"colorjs.io": "^0.4.5"

package/src/index.js

@@ -1,15 +1,13 @@
-"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";
 
@@ -107,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}
  */
-const declarationValueIndex = (decl) => {
+export const declarationValueIndex = (decl) => {
 	const raws = decl.raws;
 
 	return [
@@ -30,7 +28,7 @@ const declarationValueIndex = (decl) => {
  * @param {string} property
  * @return {boolean} If `true`, the property is standard
  */
-const 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;
@@ -53,7 +51,7 @@ const isStandardSyntaxProperty = (property) => {
  * @param {import('postcss').Declaration} decl
  * @returns {boolean}
  */
-const isInColorGamutP3MediaQuery = (decl) => {
+export const isInColorGamutP3MediaQuery = (decl) => {
 	const parentMediaQuery = getMediaQueryParent(decl);
 
 	if (
@@ -70,7 +68,7 @@ const isInColorGamutP3MediaQuery = (decl) => {
  * @param {import('postcss').Declaration} decl
  * @returns {boolean}
  */
-const isInColorGamutRec2020MediaQuery = (decl) => {
+export const isInColorGamutRec2020MediaQuery = (decl) => {
 	const parentMediaQuery = getMediaQueryParent(decl);
 
 	if (
@@ -103,12 +101,4 @@ const getMediaQueryParent = (decl) => {
  */
 const isMediaQuery = (decl) => decl.type === "atrule" && decl.name === "media";
 
-const startsWithNumber = (str) => /^\d/.test(str);
-
-module.exports = {
-	isStandardSyntaxProperty,
-	declarationValueIndex,
-	isInColorGamutP3MediaQuery,
-	isInColorGamutRec2020MediaQuery,
-	startsWithNumber,
-};
+export const startsWithNumber = (str) => /^\d/.test(str);

package/src/README.md

@@ -1,124 +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) }
-}
-```