stylelint-gamut 1.0.0

package/.eslintrc.js

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

package/README.md

@@ -0,0 +1,2 @@
+# stylelint-gamut
+Stylelint plugin for working with different color spaces

package/jest.config.js

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

package/jest.setup.js

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

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "stylelint-gamut",
+  "version": "1.0.0",
+  "description": "Stylelint plugin for working with different color spaces",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fpetrakov/stylelint-gamut.git"
+  },
+  "keywords": [
+    "stylelint",
+    "stylelint-plugin",
+    "gamut",
+    "lch",
+    "oklch",
+    "lab",
+    "oklab"
+  ],
+  "author": "Fedya Petrakov",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/fpetrakov/stylelint-gamut/issues"
+  },
+  "homepage": "https://github.com/fpetrakov/stylelint-gamut#readme",
+  "peerDependencies": {
+    "stylelint": "^14.10.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.22.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-n": "^15.2.4",
+    "eslint-plugin-promise": "^6.0.0",
+    "jest": "^28.1.3",
+    "jest-cli": "^28.1.3",
+    "jest-preset-stylelint": "^5.0.4",
+    "stylelint": "^14.10.0"
+  },
+  "dependencies": {
+    "colorjs.io": "^0.4.0"
+  }
+}

package/src/README.md

@@ -0,0 +1,88 @@
+# 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.js

@@ -0,0 +1,92 @@
+'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 getDeclarationValue = require('./utils/getDeclarationValue')
+const isAtRule = require('./utils/isAtRule')
+const declarationValueIndex = require('./utils/declarationValueIndex')
+
+const ruleName = 'gamut/color-no-out-gamut-range'
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  rejected: (color) => `Unexpected color out of gamut range "${color}"`
+})
+
+const meta = {
+  url: 'https://stylelint.io/user-guide/rules/list/color-no-out-gamut-range'
+}
+
+/** @type {import('stylelint').Rule} */
+module.exports = stylelint.createPlugin(ruleName, (primary) => {
+  return (root, result) => {
+    const validOptions = stylelint.utils.validateOptions(result, ruleName, {
+      actual: primary
+    })
+
+    if (!validOptions) {
+      return
+    }
+
+    root.walkDecls((decl) => {
+      if (!isStandardSyntaxProperty(decl.prop)) return
+
+      if (isCustomProperty(decl.prop)) return
+
+      const parsedValue = valueParser(getDeclarationValue(decl))
+
+      parsedValue.walk((node, _index, nodes) => {
+        if (node.type !== 'function') return
+
+        if (
+          node.value !== 'lch' &&
+          node.value !== 'lab' &&
+          node.value !== 'oklch' &&
+          node.value !== 'oklab'
+        ) {
+          return
+        }
+
+        const isInSrgbGamut = new Color(valueParser.stringify(nodes)).inGamut(
+          'srgb'
+        )
+
+        if (isInSrgbGamut) return
+
+        if (isInColorGamutP3MediaQuery(decl)) return
+
+        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
+        })
+      })
+    })
+  }
+})
+
+/**
+ * @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

package/src/index.test.js

@@ -0,0 +1,89 @@
+'use strict'
+
+const { 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/declarationValueIndex.js

@@ -0,0 +1,29 @@
+'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

@@ -0,0 +1,11 @@
+'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

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

package/src/utils/isCustomProperty.js

@@ -0,0 +1,10 @@
+'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

@@ -0,0 +1,25 @@
+/**
+ * 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
+}