stylelint-gamut 1.3.0 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/package.json +56 -56
- package/src/README.md +125 -0
- package/src/index.js +17 -7
- package/src/utils.js +6 -5
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
# Requirements
|
|
12
12
|
|
|
13
|
-
- **node version ≥
|
|
13
|
+
- **node version ≥ 12.0.0**
|
|
14
14
|
- **Stylelint version ≥ 14.0.0**.
|
|
15
15
|
|
|
16
16
|
# Installation
|
|
@@ -46,6 +46,7 @@ Add `stylelint-gamut` to your Stylelint config `plugins` array, then add rules y
|
|
|
46
46
|
It is already used by the creator of [PostCSS] [Andrey Sitnik].
|
|
47
47
|
|
|
48
48
|
Read more about color spaces in css:
|
|
49
|
+
- [OKLCH in CSS: why we moved from RGB and HSL](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl)
|
|
49
50
|
- [LCH colors in CSS: what, why, and how?](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/)
|
|
50
51
|
- [A Guide To Modern CSS Colors](https://www.smashingmagazine.com/2021/11/guide-modern-css-colors/)
|
|
51
52
|
|
package/package.json
CHANGED
|
@@ -1,58 +1,58 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
2
|
+
"name": "stylelint-gamut",
|
|
3
|
+
"version": "1.3.2",
|
|
4
|
+
"description": "Stylelint plugin for working with different color spaces",
|
|
5
|
+
"main": "src/index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "jest",
|
|
8
|
+
"prepare": "husky install"
|
|
9
|
+
},
|
|
10
|
+
"lint-staged": {
|
|
11
|
+
"*.js": "eslint --fix"
|
|
12
|
+
},
|
|
13
|
+
"engines": {
|
|
14
|
+
"node": ">=16.0.0"
|
|
15
|
+
},
|
|
16
|
+
"repository": {
|
|
17
|
+
"type": "git",
|
|
18
|
+
"url": "git+https://github.com/fpetrakov/stylelint-gamut.git"
|
|
19
|
+
},
|
|
20
|
+
"files": [
|
|
21
|
+
"src/**/*.js",
|
|
22
|
+
"!**/**/*.test.js"
|
|
23
|
+
],
|
|
24
|
+
"keywords": [
|
|
25
|
+
"stylelint",
|
|
26
|
+
"stylelint-plugin",
|
|
27
|
+
"gamut",
|
|
28
|
+
"lch",
|
|
29
|
+
"oklch",
|
|
30
|
+
"lab",
|
|
31
|
+
"oklab"
|
|
32
|
+
],
|
|
33
|
+
"author": "Fedya Petrakov",
|
|
34
|
+
"license": "MIT",
|
|
35
|
+
"bugs": {
|
|
36
|
+
"url": "https://github.com/fpetrakov/stylelint-gamut/issues"
|
|
37
|
+
},
|
|
38
|
+
"homepage": "https://github.com/fpetrakov/stylelint-gamut#readme",
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"stylelint": "^14.0.0 || ^15.0.0"
|
|
41
|
+
},
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"eslint": "^8.22.0",
|
|
44
|
+
"eslint-config-standard": "^17.0.0",
|
|
45
|
+
"eslint-plugin-import": "^2.26.0",
|
|
46
|
+
"eslint-plugin-n": "^15.2.4",
|
|
47
|
+
"eslint-plugin-promise": "^6.0.0",
|
|
48
|
+
"husky": "^8.0.1",
|
|
49
|
+
"jest": "^28.1.3",
|
|
50
|
+
"jest-cli": "^28.1.3",
|
|
51
|
+
"jest-preset-stylelint": "^5.0.4",
|
|
52
|
+
"lint-staged": "^13.0.3",
|
|
53
|
+
"stylelint": "^14.10.0"
|
|
54
|
+
},
|
|
55
|
+
"dependencies": {
|
|
56
|
+
"colorjs.io": "^0.4.0"
|
|
57
|
+
}
|
|
58
58
|
}
|
package/src/README.md
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# color-no-out-gamut-range
|
|
2
|
+
|
|
3
|
+
Disallow out of gamut range colors.
|
|
4
|
+
|
|
5
|
+
<!-- prettier-ignore -->
|
|
6
|
+
```css
|
|
7
|
+
a { color: lch(48% 82 283) }
|
|
8
|
+
/** ↑
|
|
9
|
+
* This color is out of sRGB gamut range */
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Colors declared using lch, oklch, lab and oklab functions can move from sRGB to P3 or Rec2020 color spaces, which are not supported by most of screens right now. It can happen by mistake. For instance, by converting colors from one space to another.
|
|
13
|
+
|
|
14
|
+
This rule checks if the color is in sRGB, p3 or rec2020 space. If it's not in sRGB gamut you should wrap it in a proper media query:
|
|
15
|
+
|
|
16
|
+
```css
|
|
17
|
+
@media (color-gamut: p3) {
|
|
18
|
+
a {
|
|
19
|
+
color: lch(29.8% 42.5 109.485);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
/** ↑
|
|
23
|
+
* This color is in p3 gamut range */
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```css
|
|
27
|
+
@media (color-gamut: rec2020) {
|
|
28
|
+
a {
|
|
29
|
+
color: lch(25.1% 42.5 109.485);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
/** ↑
|
|
33
|
+
* This color is in rec2020 gamut range */
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
In case of **css custom properties** you should wrap either the custom property declaration:
|
|
37
|
+
|
|
38
|
+
```css
|
|
39
|
+
@media (color-gamut: p3) {
|
|
40
|
+
:root {
|
|
41
|
+
--my-var: lch(48% 82 283);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
or the rule that uses the custom property:
|
|
46
|
+
|
|
47
|
+
```css
|
|
48
|
+
@media (color-gamut: p3) {
|
|
49
|
+
a {
|
|
50
|
+
color: var(--my-var);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Custom properties inside color declaration are ignored:
|
|
56
|
+
|
|
57
|
+
```css
|
|
58
|
+
background-color: oklch(var(--oklch-primary) / var(--alpha-bg)); /* not checked */
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Please note that conditional imports are not checked, e.g.:
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<link href="p3-custom-props.css" rel="stylesheet" media="(color-gamut: p3)" />
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
```css
|
|
68
|
+
@import url("p3-custom-props.css") (color-gamut: p3);
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Options
|
|
72
|
+
|
|
73
|
+
### `true`
|
|
74
|
+
|
|
75
|
+
The following patterns are considered problems:
|
|
76
|
+
|
|
77
|
+
<!-- prettier-ignore -->
|
|
78
|
+
```css
|
|
79
|
+
a { color: lch(48% 82 283) }
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
<!-- prettier-ignore -->
|
|
83
|
+
```css
|
|
84
|
+
a { color: oklch(57.35% 0.23 259.06) }
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
<!-- prettier-ignore -->
|
|
88
|
+
```css
|
|
89
|
+
a { color: lab(82.2345% 40.1645 59.9971 / .5) }
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
<!-- prettier-ignore -->
|
|
93
|
+
```css
|
|
94
|
+
a { color: oklab(85.69% 0.1007 0.1191 / .5) }
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
The following patterns are _not_ considered problems:
|
|
98
|
+
|
|
99
|
+
<!-- prettier-ignore -->
|
|
100
|
+
```css
|
|
101
|
+
@media (color-gamut: p3) {
|
|
102
|
+
a { color: lch(48% 82 283) }
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
<!-- prettier-ignore -->
|
|
107
|
+
```css
|
|
108
|
+
@media (color-gamut: p3) {
|
|
109
|
+
a { color: oklch(57.35% 0.23 259.06) }
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
<!-- prettier-ignore -->
|
|
114
|
+
```css
|
|
115
|
+
@media (color-gamut: rec2020) {
|
|
116
|
+
a { color: lab(82.2345% 40.1645 59.9971 / .5) }
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
<!-- prettier-ignore -->
|
|
121
|
+
```css
|
|
122
|
+
@media (color-gamut: rec2020) {
|
|
123
|
+
a { color: oklab(85.69% 0.1007 0.1191 / .5) }
|
|
124
|
+
}
|
|
125
|
+
```
|
package/src/index.js
CHANGED
|
@@ -2,7 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
const stylelint = require('stylelint')
|
|
4
4
|
const Color = require('colorjs.io').default
|
|
5
|
-
const {
|
|
5
|
+
const {
|
|
6
|
+
isInColorGamutP3MediaQuery,
|
|
7
|
+
isStandardSyntaxProperty,
|
|
8
|
+
declarationValueIndex,
|
|
9
|
+
isInColorGamutRec2020MediaQuery,
|
|
10
|
+
startsWithNumber
|
|
11
|
+
} = require('./utils')
|
|
6
12
|
|
|
7
13
|
const ruleName = 'gamut/color-no-out-gamut-range'
|
|
8
14
|
|
|
@@ -11,7 +17,7 @@ const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
|
11
17
|
})
|
|
12
18
|
|
|
13
19
|
const meta = {
|
|
14
|
-
url: 'https://github.com/
|
|
20
|
+
url: 'https://github.com/fpetrakov/stylelint-gamut/blob/master/src/README.md'
|
|
15
21
|
}
|
|
16
22
|
|
|
17
23
|
/** @type {import('stylelint').Rule} */
|
|
@@ -37,13 +43,20 @@ const ruleFunction = (primary) => {
|
|
|
37
43
|
}
|
|
38
44
|
}
|
|
39
45
|
|
|
46
|
+
// value is e.g. lch(48% 82 283 / 67%)
|
|
40
47
|
function check (value) {
|
|
41
|
-
|
|
48
|
+
const shouldBeIgnored =
|
|
49
|
+
!value.startsWith('var(--') &&
|
|
50
|
+
(
|
|
51
|
+
value.includes('var(--') ||
|
|
52
|
+
!startsWithNumber(value.split('(')[1])
|
|
53
|
+
)
|
|
54
|
+
|
|
55
|
+
if (shouldBeIgnored) return
|
|
42
56
|
|
|
43
57
|
let customPropValue
|
|
44
58
|
if (value.startsWith('var(--')) {
|
|
45
59
|
const varName = value.slice(4, -1)
|
|
46
|
-
|
|
47
60
|
if (customProperties[varName] && !customProperties[varName].inQuery) {
|
|
48
61
|
customPropValue = customProperties[varName].value
|
|
49
62
|
} else {
|
|
@@ -54,9 +67,7 @@ const ruleFunction = (primary) => {
|
|
|
54
67
|
const color = new Color(customPropValue || value)
|
|
55
68
|
|
|
56
69
|
if (color.inGamut('srgb')) return
|
|
57
|
-
|
|
58
70
|
if (color.inGamut('p3') && isInColorGamutP3MediaQuery(decl)) return
|
|
59
|
-
|
|
60
71
|
if (color.inGamut('rec2020') && isInColorGamutRec2020MediaQuery(decl)) return
|
|
61
72
|
|
|
62
73
|
if (decl.prop && decl.prop.startsWith('--')) {
|
|
@@ -66,7 +77,6 @@ const ruleFunction = (primary) => {
|
|
|
66
77
|
|
|
67
78
|
const index = declarationValueIndex(decl)
|
|
68
79
|
const endIndex = index + decl.value.length
|
|
69
|
-
|
|
70
80
|
stylelint.utils.report({
|
|
71
81
|
message: messages.rejected(value),
|
|
72
82
|
node: decl,
|
package/src/utils.js
CHANGED
|
@@ -10,14 +10,10 @@ function declarationValueIndex (decl) {
|
|
|
10
10
|
const raws = decl.raws
|
|
11
11
|
|
|
12
12
|
return [
|
|
13
|
-
// @ts-expect-error -- TS2571: Object is of type 'unknown'.
|
|
14
13
|
raws.prop && raws.prop.prefix,
|
|
15
|
-
// @ts-expect-error -- TS2571: Object is of type 'unknown'.
|
|
16
14
|
(raws.prop && raws.prop.raw) || decl.prop,
|
|
17
|
-
// @ts-expect-error -- TS2571: Object is of type 'unknown'.
|
|
18
15
|
raws.prop && raws.prop.suffix,
|
|
19
16
|
raws.between || ':',
|
|
20
|
-
// @ts-expect-error -- TS2339: Property 'prefix' does not exist on type '{ value: string; raw: string; }'.
|
|
21
17
|
raws.value && raws.value.prefix
|
|
22
18
|
].reduce((count, str) => {
|
|
23
19
|
if (str) {
|
|
@@ -103,9 +99,14 @@ function isMediaQuery (decl) {
|
|
|
103
99
|
return decl.type === 'atrule' && decl.name === 'media'
|
|
104
100
|
}
|
|
105
101
|
|
|
102
|
+
function startsWithNumber (str) {
|
|
103
|
+
return /^\d/.test(str)
|
|
104
|
+
}
|
|
105
|
+
|
|
106
106
|
module.exports = {
|
|
107
107
|
isStandardSyntaxProperty,
|
|
108
108
|
declarationValueIndex,
|
|
109
109
|
isInColorGamutP3MediaQuery,
|
|
110
|
-
isInColorGamutRec2020MediaQuery
|
|
110
|
+
isInColorGamutRec2020MediaQuery,
|
|
111
|
+
startsWithNumber
|
|
111
112
|
}
|