stylelint-gamut 1.0.0 → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Fedya Petrakov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,2 +1,38 @@
 # stylelint-gamut
-Stylelint plugin for working with different color spaces
+Stylelint plugin for working with different color spaces.
+Right now it's working with node version >= 16.0.0.
+
+# Installation
+
+1. If you haven't, install [Stylelint]:
+
+```
+npm install stylelint --save-dev
+```
+
+2.  Install `stylelint-gamut`:
+
+```
+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`.
+
+```json
+{
+	"plugins": [
+		"stylelint-gamut"
+	],
+	"rules": {
+		"gamut/color-no-out-gamut-range": true,
+	}
+}
+```
+
+## 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) {}.
+
+[Stylelint]: https://stylelint.io/

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "stylelint-gamut",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Stylelint plugin for working with different color spaces",
   "main": "src/index.js",
   "scripts": {
     "test": "jest"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=16.0.0"
   },
   "repository": {
     "type": "git",

package/src/index.js

@@ -3,11 +3,15 @@
 const valueParser = require('postcss-value-parser')
 const stylelint = require('stylelint')
 const Color = require('colorjs.io').default
-const isStandardSyntaxProperty = require('./utils/isStandardSyntaxProperty')
-const isCustomProperty = require('./utils/isCustomProperty')
-const getDeclarationValue = require('./utils/getDeclarationValue')
-const isAtRule = require('./utils/isAtRule')
-const declarationValueIndex = require('./utils/declarationValueIndex')
+
+const {
+  isStandardSyntaxProperty,
+  isCustomProperty,
+  getDeclarationValue,
+  declarationValueIndex,
+  isInColorGamutP3MediaQuery,
+  isInColorGamutRec2020MediaQuery
+} = require('./utils')
 
 const ruleName = 'gamut/color-no-out-gamut-range'
 
@@ -19,8 +23,10 @@ const meta = {
   url: 'https://stylelint.io/user-guide/rules/list/color-no-out-gamut-range'
 }
 
+const COLOR_FUNCTIONS = new Set(['lch', 'lab', 'oklch', 'oklab'])
+
 /** @type {import('stylelint').Rule} */
-module.exports = stylelint.createPlugin(ruleName, (primary) => {
+const ruleFunction = (primary) => {
   return (root, result) => {
     const validOptions = stylelint.utils.validateOptions(result, ruleName, {
       actual: primary
@@ -40,22 +46,21 @@ module.exports = stylelint.createPlugin(ruleName, (primary) => {
       parsedValue.walk((node, _index, nodes) => {
         if (node.type !== 'function') return
 
-        if (
-          node.value !== 'lch' &&
-          node.value !== 'lab' &&
-          node.value !== 'oklch' &&
-          node.value !== 'oklab'
-        ) {
+        if (!COLOR_FUNCTIONS.has(node.value)) {
           return
         }
 
-        const isInSrgbGamut = new Color(valueParser.stringify(nodes)).inGamut(
-          'srgb'
-        )
+        const color = new Color(valueParser.stringify(nodes))
+
+        const isInSrgbGamut = color.inGamut('srgb')
+        const isInP3Query = isInColorGamutP3MediaQuery(decl)
+        if (isInSrgbGamut || isInP3Query) return
 
-        if (isInSrgbGamut) return
+        const isInP3Gamut = color.inGamut('p3')
+        if (isInP3Gamut && isInP3Query) return
 
-        if (isInColorGamutP3MediaQuery(decl)) return
+        const isInRec2020Gamut = color.inGamut('rec2020')
+        if (isInRec2020Gamut && isInColorGamutRec2020MediaQuery(decl)) return
 
         const index = declarationValueIndex(decl) + node.sourceIndex
         const endIndex = index + decl.value.length
@@ -71,22 +76,10 @@ module.exports = stylelint.createPlugin(ruleName, (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' && parent.params === '(color-gamut: p3)'
-  }
-
-  return false
 }
 
-module.exports.ruleName = ruleName
-module.exports.messages = messages
-module.exports.meta = meta
+ruleFunction.ruleName = ruleName
+ruleFunction.messages = messages
+ruleFunction.meta = meta
+
+module.exports = stylelint.createPlugin(ruleName, ruleFunction)

package/src/index.test.js

@@ -1,6 +1,6 @@
 'use strict'
 
-const { messages, ruleName } = require('./index.js')
+const { rule: { messages, ruleName } } = require('./index.js')
 
 testRule({
   ruleName,
@@ -9,12 +9,16 @@ testRule({
   accept: [
     {
       code: '@media (color-gamut: p3) { a { color: lch(48% 82 283); } }',
-      description: 'lch out of srgb gamut but wrapped in media query'
+      description: 'lch out of srgb gamut but wrapped in p3 media query'
+    },
+    {
+      code: '@media (color-gamut: rec2020) { a { color: lch(48% 82 283); } }',
+      description: 'lch out of p3 gamut but wrapped in rec2020 media query'
     },
     {
       code: '@media (color-gamut: p3) { a { color: oklch(48% 82 283 / 73%); } }',
       description:
-        'oklch with alpha out of srgb gamut but wrapped in media query'
+        'oklch with alpha out of srgb gamut but wrapped in p3 media query'
     },
     {
       code: 'a { color: lch(50% 0 0); }',
@@ -48,6 +52,15 @@ testRule({
       endLine: 1,
       endColumn: 27
     },
+    {
+      code: '@media (color-gamut: srgb) { a { color: lch(48% 82 283); } }',
+      description: 'lch is out of srgb and wrapped in srgb media query',
+      message: messages.rejected('lch(48% 82 283)'),
+      line: 1,
+      column: 41,
+      endLine: 1,
+      endColumn: 56
+    },
     {
       code: 'a { color: lch(48% 82 283 / 72%); }',
       description: 'lch with alpha',

package/src/utils.js

@@ -0,0 +1,127 @@
+'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 {import('postcss').Declaration} decl
+ * @returns {string}
+ */
+function getDeclarationValue (decl) {
+  const raws = decl.raws
+
+  return (raws.value && raws.value.raw) || decl.value
+}
+
+/**
+ * @param {import('postcss').Declaration} decl
+ * @returns {boolean | import('postcss').AtRule}
+ */
+function getMediaQueryAtRule (decl) {
+  if (decl.parent && decl.parent.parent && isAtRule(decl.parent.parent)) {
+    const parent = decl.parent.parent
+
+    return parent.name === 'media' ? parent : false
+  }
+
+  return false
+}
+
+/**
+ * @param {Node} node
+ * @returns {node is import('postcss').AtRule}
+ */
+function isAtRule (node) {
+  return node.type === 'atrule'
+}
+
+/**
+ * Check whether a property is a custom one
+ * @param {string} property
+ * @returns {boolean}
+ */
+function isCustomProperty (property) {
+  return property.startsWith('--')
+}
+
+/**
+ * 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 mediaQueryAtRule = getMediaQueryAtRule(decl)
+
+  return mediaQueryAtRule && mediaQueryAtRule.params === '(color-gamut: p3)'
+}
+
+/**
+ * @param {import('postcss').Declaration} decl
+ * @returns {boolean}
+ */
+function isInColorGamutRec2020MediaQuery (decl) {
+  const mediaQueryAtRule = getMediaQueryAtRule(decl)
+
+  return mediaQueryAtRule && mediaQueryAtRule.params === '(color-gamut: rec2020)'
+}
+
+module.exports = {
+  declarationValueIndex,
+  getDeclarationValue,
+  getMediaQueryAtRule,
+  isCustomProperty,
+  isStandardSyntaxProperty,
+  isAtRule,
+  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/getDeclarationValue.js

@@ -1,11 +0,0 @@
-'use strict'
-
-/**
- * @param {import('postcss').Declaration} decl
- * @returns {string}
- */
-module.exports = function getDeclarationValue (decl) {
-  const raws = decl.raws
-
-  return (raws.value && raws.value.raw) || decl.value
-}

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/isCustomProperty.js

@@ -1,10 +0,0 @@
-'use strict'
-
-/**
- * Check whether a property is a custom one
- * @param {string} property
- * @returns {boolean}
- */
-module.exports = function isCustomProperty (property) {
-  return property.startsWith('--')
-}

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
-}