stylelint-gamut 1.1.4 → 1.2.0

package/README.md

@@ -1,8 +1,10 @@
 # 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**.
+Right now it's working with **node version ≥ 16.0.0** and **Stylelint version ≥ 14.0.0**.
 
 # Installation
 
@@ -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.4",
+  "version": "1.2.0",
   "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

@@ -1,10 +1,8 @@
 'use strict'
 
-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 isAtRule = require('./utils/isAtRule')
 const declarationValueIndex = require('./utils/declarationValueIndex')
 
@@ -29,45 +27,47 @@ const ruleFunction = (primary) => {
       return
     }
 
+    const customProperties = {}
+
     root.walkDecls((decl) => {
       if (!isStandardSyntaxProperty(decl.prop)) return
 
-      if (isCustomProperty(decl.prop)) return
-
-      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)
-          }
+      const values = decl.value.match(/(oklch|oklab|lab|lch|var)\([^)]+\)/g)
+      if (values) {
+        for (const value of values) {
+          check(value)
         }
       }
 
-      function checkColor (color) {
-        const parsedValue = valueParser(color)
+      function check (value) {
+        let customPropValue
+        if (value.startsWith('var(--')) {
+          const varName = value.slice(4, -1)
+          customPropValue = customProperties[varName]
+          if (!customPropValue) return
+        }
 
-        parsedValue.walk((node, _index, nodes) => {
-          if (node.type !== 'function') return
+        const isInSrgbGamut = new Color(customPropValue || value).inGamut('srgb')
 
-          const isInSrgbGamut = new Color(valueParser.stringify(nodes)).inGamut(
-            'srgb'
-          )
+        if (isInSrgbGamut) return
 
-          if (isInSrgbGamut) return
+        if (decl.prop && decl.prop.startsWith('--')) {
+          customProperties[decl.prop] = decl.value.trim()
+          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)
+        const endIndex = index + decl.value.length
 
-          stylelint.utils.report({
-            message: messages.rejected(color),
-            node: decl,
-            index,
-            endIndex,
-            result,
-            ruleName
-          })
+        stylelint.utils.report({
+          message: messages.rejected(value),
+          node: decl,
+          index,
+          endIndex,
+          result,
+          ruleName
         })
       }
     })

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,129 +0,0 @@
-'use strict'
-
-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); } }',
-      description: 'lch out of srgb gamut but wrapped in media query'
-    },
-    {
-      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'
-    },
-    {
-      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'
-    },
-    {
-      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: '@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',
-      message: messages.rejected('lch(48% 82 283 / 72%)'),
-      line: 1,
-      column: 12,
-      endLine: 1,
-      endColumn: 33
-    },
-    {
-      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(85% 0.1 354 / 73%)'),
-      line: 1,
-      column: 12,
-      endLine: 1,
-      endColumn: 36
-    },
-
-    {
-      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/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('--')
-}