stylelint-gamut 1.1.3 → 1.1.6

package/README.md

@@ -1,5 +1,7 @@
 # stylelint-gamut
 
+[![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. 
 
 Right now it's working with **node version ≥ 16.0.0**.
@@ -38,3 +40,6 @@ Add `stylelint-gamut` to your Stylelint config `plugins` array, then add rules y
 * [`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/
+[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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-gamut",
-  "version": "1.1.3",
+  "version": "1.1.6",
   "description": "Stylelint plugin for working with different color spaces",
   "main": "src/index.js",
   "scripts": {
@@ -13,6 +13,10 @@
     "type": "git",
     "url": "git+https://github.com/fpetrakov/stylelint-gamut.git"
   },
+  "files": [
+    "src/**/*.js",
+    "!**/**/*.test.js"
+  ],
   "keywords": [
     "stylelint",
     "stylelint-plugin",
@@ -29,7 +33,7 @@
   },
   "homepage": "https://github.com/fpetrakov/stylelint-gamut#readme",
   "peerDependencies": {
-    "stylelint": ">=14.10.0"
+    "stylelint": "^14.0.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/.eslintrc.js

@@ -1,15 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    commonjs: true,
-    es2021: true
-  },
-  extends: [
-    'standard'
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest'
-  },
-  rules: {
-  }
-}

package/.github/workflows/test.yml

@@ -1,30 +0,0 @@
-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/jest.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  preset: 'jest-preset-stylelint',
-  clearMocks: true,
-  setupFiles: ['./jest.setup.js'],
-  testEnvironment: 'node',
-  roots: ['src']
-}

package/jest.setup.js

@@ -1,5 +0,0 @@
-'use strict'
-
-const { getTestRule } = require('jest-preset-stylelint')
-
-global.testRule = getTestRule({ plugins: ['./src'] })

package/src/README.md

@@ -1,88 +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 color space, which is 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 space. If it's not, you should wrap it in media query like this:
-
-```css
-@media (color-gamut: p3) {
-  a {
-    color: lch(48% 82 283);
-  }
-}
-```
-
-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(48% 82 283) }
-```
-
-<!-- prettier-ignore -->
-```css
-a { color: lab(48% 82 283) }
-```
-
-<!-- prettier-ignore -->
-```css
-a { color: oklab(48% 82 283) }
-```
-
-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(48% 82 283) }
-}
-```
-
-<!-- prettier-ignore -->
-```css
-@media (color-gamut: p3) {
-  a { color: lab(48% 82 283) }
-}
-```
-
-<!-- prettier-ignore -->
-```css
-@media (color-gamut: p3) {
-  a { color: oklab(48% 82 283) }
-}
-```

package/src/index.test.js

@@ -1,89 +0,0 @@
-'use strict'
-
-const { rule: { messages, ruleName } } = require('./index.js')
-
-testRule({
-  ruleName,
-  config: [true],
-  plugins: ['./index.js'],
-  accept: [
-    {
-      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%); } }',
-      description:
-        'oklch with alpha out of srgb gamut but wrapped in media query'
-    },
-    {
-      code: 'a { color: lch(50% 0 0); }',
-      description: 'in srgb gamut'
-    },
-    {
-      code: 'a { color: red; }',
-      description: 'ignore not lch color declaration'
-    },
-    {
-      code: ':root { --clr: lch(48% 82 283 / 75%) } a { color: var(--clr) }',
-      description: 'ignore css variables'
-    },
-    {
-      code: '@myVariable: lch(48% 82 283); a { color: @myVariable; }',
-      description: 'ignore Less variable'
-    },
-    {
-      code: ':root { $clr: lch(48% 82 283 / 67%) } a { color: $clr; }',
-      description: 'ignore scss variables'
-    }
-  ],
-
-  reject: [
-    {
-      code: 'a { color: lch(48% 82 283); }',
-      description: 'lch',
-      message: messages.rejected('lch(48% 82 283)'),
-      line: 1,
-      column: 12,
-      endLine: 1,
-      endColumn: 27
-    },
-    {
-      code: 'a { color: lch(48% 82 283 / 72%); }',
-      description: 'lch with alpha',
-      message: messages.rejected('lch(48% 82 283 / 72%)'),
-      line: 1,
-      column: 12,
-      endLine: 1,
-      endColumn: 33
-    },
-    {
-      code: 'a { color: oklch(98% 49 129); }',
-      description: 'oklch',
-      message: messages.rejected('oklch(98% 49 129)'),
-      line: 1,
-      column: 12,
-      endLine: 1,
-      endColumn: 29
-    },
-
-    {
-      code: 'a { color: lab(98% 49 129); }',
-      description: 'lab',
-      message: messages.rejected('lab(98% 49 129)'),
-      line: 1,
-      column: 12,
-      endLine: 1,
-      endColumn: 27
-    },
-    {
-      code: 'a { color: oklab(98% 49 129); }',
-      description: 'oklab',
-      message: messages.rejected('oklab(98% 49 129)'),
-      line: 1,
-      column: 12,
-      endLine: 1,
-      endColumn: 29
-    }
-  ]
-})

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