stylelint-gamut 1.1.1 → 1.1.4

package/.github/workflows/test.yml

@@ -0,0 +1,30 @@
+name: Test
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+env:
+  FORCE_COLOR: 2
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version:
+          - 18
+          - 16
+    name: Node.js Latest Full
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v3
+      - name: Install Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: npm
+      - name: Install dependencies
+        run: npm install --ignore-scripts
+      - name: Run tests
+        run: npm test

package/README.md

@@ -1,6 +1,8 @@
 # stylelint-gamut
-Stylelint plugin for working with different color spaces.
-Right now it's working with node version >= 16.0.0.
+
+**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**.
 
 # Installation
 
@@ -18,21 +20,21 @@ 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`.
+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,
-	}
+  "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) {}.
+* [`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/
+[Stylelint]: https://stylelint.io/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-gamut",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "description": "Stylelint plugin for working with different color spaces",
   "main": "src/index.js",
   "scripts": {
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/fpetrakov/stylelint-gamut#readme",
   "peerDependencies": {
-    "stylelint": "^14.10.0"
+    "stylelint": ">=14.10.0"
   },
   "devDependencies": {
     "eslint": "^8.22.0",

package/src/index.js

@@ -5,7 +5,6 @@ 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')
 
@@ -19,8 +18,6 @@ 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} */
 const ruleFunction = (primary) => {
   return (root, result) => {
@@ -37,35 +34,42 @@ const ruleFunction = (primary) => {
 
       if (isCustomProperty(decl.prop)) return
 
-      const parsedValue = valueParser(getDeclarationValue(decl))
+      if (decl.value.includes('lch(') || decl.value.includes('lab(')) {
+        const colors = decl.value.match(/(oklch|oklab|lab|lch)\([^)]+\)/g)
+        if (colors) {
+          for (const color of colors) {
+            checkColor(color)
+          }
+        }
+      }
 
-      parsedValue.walk((node, _index, nodes) => {
-        if (node.type !== 'function') return
+      function checkColor (color) {
+        const parsedValue = valueParser(color)
 
-        if (!COLOR_FUNCTIONS.has(node.value)) {
-          return
-        }
+        parsedValue.walk((node, _index, nodes) => {
+          if (node.type !== 'function') return
 
-        const isInSrgbGamut = new Color(valueParser.stringify(nodes)).inGamut(
-          'srgb'
-        )
+          const isInSrgbGamut = new Color(valueParser.stringify(nodes)).inGamut(
+            'srgb'
+          )
 
-        if (isInSrgbGamut) return
+          if (isInSrgbGamut) return
 
-        if (isInColorGamutP3MediaQuery(decl)) return
+          if (isInColorGamutP3MediaQuery(decl)) return
 
-        const index = declarationValueIndex(decl) + node.sourceIndex
-        const endIndex = index + decl.value.length
+          const index = declarationValueIndex(decl) + node.sourceIndex
+          const endIndex = index + decl.value.length
 
-        stylelint.utils.report({
-          message: messages.rejected(decl.value),
-          node: decl,
-          index,
-          endIndex,
-          result,
-          ruleName
+          stylelint.utils.report({
+            message: messages.rejected(color),
+            node: decl,
+            index,
+            endIndex,
+            result,
+            ruleName
+          })
         })
-      })
+      }
     })
   }
 }
@@ -78,7 +82,7 @@ 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 parent.name === 'media' && /\(color-gamut:\s*p3\)/.test(parent.params)
   }
 
   return false

package/src/index.test.js

@@ -2,17 +2,22 @@
 
 const { rule: { messages, ruleName } } = require('./index.js')
 
+// eslint-disable-next-line no-undef
 testRule({
   ruleName,
   config: [true],
   plugins: ['./index.js'],
   accept: [
     {
-      code: '@media (color-gamut: p3) { a { color: lch(48% 82 283); } }',
+      code: '@media (color-gamut:p3) { a { color: lch(48% 82 283); } }',
       description: 'lch out of srgb gamut but wrapped in media query'
     },
     {
-      code: '@media (color-gamut: p3) { a { color: oklch(48% 82 283 / 73%); } }',
+      code: '@media (prefers-color-scheme: dark) and (color-gamut: p3) { a { color: lch(48% 82 283); } }',
+      description: 'lch out of srgb gamut but wrapped in a long media query'
+    },
+    {
+      code: '@media (color-gamut: p3) { a { color: oklch(85% 0.1 354 / 73%); } }',
       description:
         'oklch with alpha out of srgb gamut but wrapped in media query'
     },
@@ -20,6 +25,14 @@ testRule({
       code: 'a { color: lch(50% 0 0); }',
       description: 'in srgb gamut'
     },
+    {
+      code: '.foo { border: 4px solid oklch(100% 0 0); }',
+      description: 'in srgb gamut long property'
+    },
+    {
+      code: '.foo {background-image: linear-gradient(red lch(50% 0 0 )); }',
+      description: 'multicolor property in gamut range'
+    },
     {
       code: 'a { color: red; }',
       description: 'ignore not lch color declaration'
@@ -48,6 +61,24 @@ testRule({
       endLine: 1,
       endColumn: 27
     },
+    {
+      code: '@media (prefers-color-scheme: dark) and (color-gamut: srgb) { a { color: lch(48% 82 283); } }',
+      description: 'lch out of srgb gamut and wrapped in a long and wrong media query',
+      message: messages.rejected('lch(48% 82 283)'),
+      line: 1,
+      column: 74,
+      endLine: 1,
+      endColumn: 89
+    },
+    {
+      code: '.foo { background: content-box oklch(82.6% 0.087 262.26); }',
+      description: 'out of srgb gamut long property',
+      message: messages.rejected('oklch(82.6% 0.087 262.26)'),
+      line: 1,
+      column: 20,
+      endLine: 1,
+      endColumn: 57
+    },
     {
       code: 'a { color: lch(48% 82 283 / 72%); }',
       description: 'lch with alpha',
@@ -58,13 +89,22 @@ testRule({
       endColumn: 33
     },
     {
-      code: 'a { color: oklch(98% 49 129); }',
+      code: '.foo {background-image: linear-gradient(red lch(48% 82 283)); }',
+      description: 'multicolor property out of gamut range',
+      message: messages.rejected('lch(48% 82 283)'),
+      line: 1,
+      column: 25,
+      endLine: 1,
+      endColumn: 61
+    },
+    {
+      code: 'a { color: oklch(85% 0.1 354 / 73%); }',
       description: 'oklch',
-      message: messages.rejected('oklch(98% 49 129)'),
+      message: messages.rejected('oklch(85% 0.1 354 / 73%)'),
       line: 1,
       column: 12,
       endLine: 1,
-      endColumn: 29
+      endColumn: 36
     },
 
     {

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