stylelint-gamut 1.2.2 → 1.2.5

package/README.md

@@ -2,16 +2,23 @@
 
 [![npm version][npm-version-img]][npm] [![npm downloads last month][npm-downloads-img]][npm]
 
-**stylelint-gamut** is a [Stylelint] plugin that helps you to work with different color spaces. 
+**stylelint-gamut** is a [Stylelint] plugin that helps you to work with different color spaces.
 
-Right now it's working with **node version ≥ 16.0.0** and **Stylelint version ≥ 14.0.0**.
+# 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) {}`.
+
+# Requirements 
+
+- **node version ≥ 16.0.0**
+- **Stylelint version ≥ 14.0.0**.
 
 # Installation
 
 1. If you haven't, install [Stylelint]:
 
 ```
-npm install stylelint --save-dev
+npm install stylelint stylelint-config-standard --save-dev
 ```
 
 2.  Install `stylelint-gamut`:
@@ -20,7 +27,7 @@ npm install stylelint --save-dev
 npm install stylelint-gamut --save-dev
 ```
 
-## Usage
+# 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`.
 
@@ -35,11 +42,16 @@ Add `stylelint-gamut` to your Stylelint config `plugins` array, then add rules y
 }
 ```
 
-## Rules
+# More
+It is already used by the creator of [PostCSS] [Andrey Sitnik].
 
-* [`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) {}`.
+Read more about color spaces in css:
+- [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/)
 
 [Stylelint]: https://stylelint.io/
 [npm-version-img]: https://img.shields.io/npm/v/stylelint-gamut.svg
 [npm-downloads-img]: https://img.shields.io/npm/dm/stylelint-gamut.svg
 [npm]: https://www.npmjs.com/package/stylelint-gamut
+[PostCSS]: https://github.com/postcss/postcss
+[Andrey Sitnik]: https://github.com/ai

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-gamut",
-  "version": "1.2.2",
+  "version": "1.2.5",
   "description": "Stylelint plugin for working with different color spaces",
   "main": "src/index.js",
   "scripts": {

package/src/index.js

@@ -2,9 +2,7 @@
 
 const stylelint = require('stylelint')
 const Color = require('colorjs.io').default
-const isStandardSyntaxProperty = require('./utils/isStandardSyntaxProperty')
-const isAtRule = require('./utils/isAtRule')
-const declarationValueIndex = require('./utils/declarationValueIndex')
+const { isInColorGamutP3MediaQuery, isStandardSyntaxProperty, declarationValueIndex, isInColorGamutRec2020MediaQuery } = require('./utils')
 
 const ruleName = 'gamut/color-no-out-gamut-range'
 
@@ -51,11 +49,13 @@ const ruleFunction = (primary) => {
           }
         }
 
-        const isInSrgbGamut = new Color(customPropValue || value).inGamut('srgb')
+        const color = new Color(customPropValue || value)
 
-        if (isInSrgbGamut) return
+        if (color.inGamut('srgb')) return
 
-        if (isInColorGamutP3MediaQuery(decl)) 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 }
@@ -78,20 +78,6 @@ const ruleFunction = (primary) => {
   }
 }
 
-/**
- * @param {import('postcss').Declaration} decl
- * @returns {boolean}
- */
-function isInColorGamutP3MediaQuery (decl) {
-  if (decl.parent && decl.parent.parent && isAtRule(decl.parent.parent)) {
-    const parent = decl.parent.parent
-
-    return parent.name === 'media' && /\(color-gamut:\s*p3\)/.test(parent.params)
-  }
-
-  return false
-}
-
 ruleFunction.ruleName = ruleName
 ruleFunction.messages = messages
 ruleFunction.meta = meta

package/src/utils.js

@@ -0,0 +1,111 @@
+'use strict'
+
+/**
+ * Get the index of a declaration's value
+ *
+ * @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)
+}
+
+/**
+ * @param {Node} node
+ * @returns {node is import('postcss').AtRule}
+ */
+function isAtRule (node) {
+  return node.type === 'atrule'
+}
+
+/**
+ * Check whether a property is standard
+ *
+ * @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
+}
+
+/**
+ * @param {import('postcss').Declaration} decl
+ * @returns {boolean}
+ */
+function isInColorGamutP3MediaQuery (decl) {
+  const parentMediaQuery = getMediaQueryParent(decl)
+
+  if (parentMediaQuery && /\(color-gamut:\s*p3\)/.test(parentMediaQuery.params)) {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * @param {import('postcss').Declaration} decl
+ * @returns {boolean}
+ */
+function isInColorGamutRec2020MediaQuery (decl) {
+  const parentMediaQuery = getMediaQueryParent(decl)
+
+  if (parentMediaQuery && /\(color-gamut:\s*rec2020\)/.test(parentMediaQuery.params)) {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * @param {import('postcss').Declaration} decl
+ * @returns {boolean | decl}
+ */
+function getMediaQueryParent (decl) {
+  if (decl.parent && decl.parent.parent && isAtRule(decl.parent.parent)) {
+    const parent = decl.parent.parent
+
+    return parent.name === 'media' && parent
+  }
+
+  return false
+}
+
+module.exports = {
+  isStandardSyntaxProperty,
+  declarationValueIndex,
+  isInColorGamutP3MediaQuery,
+  isInColorGamutRec2020MediaQuery
+}

package/src/utils/declarationValueIndex.js

@@ -1,29 +0,0 @@
-'use strict'
-
-/**
- * Get the index of a declaration's value
- *
- * @param {import('postcss').Declaration} decl
- * @returns {number}
- */
-module.exports = 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)
-}

package/src/utils/isAtRule.js

@@ -1,7 +0,0 @@
-/**
- * @param {Node} node
- * @returns {node is import('postcss').AtRule}
- */
-module.exports = function isAtRule (node) {
-  return node.type === 'atrule'
-}

package/src/utils/isStandardSyntaxProperty.js

@@ -1,25 +0,0 @@
-/**
- * Check whether a property is standard
- *
- * @param {string} property
- * @return {boolean} If `true`, the property is standard
- */
-
-module.exports = 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
-}