postcss-lab-function 1.0.1 → 1.1.0

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +6 -2
  3. package/index.cjs.js +44 -4
  4. package/index.es.js +44 -4
  5. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changes to PostCSS Lab Function
2
2
 
3
+ ### 1.1.0 (July 24, 2018)
4
+
5
+ - Added: Support for `gray(a / b)` as `lab(a 0 0 / b)`
6
+
3
7
  ### 1.0.1 (May 11, 2018)
4
8
 
5
9
  - Fixed: Values beyond the acceptable 0-255 RGB range
package/README.md CHANGED
@@ -6,13 +6,15 @@
6
6
  [![Windows Build Status][win-img]][win-url]
7
7
  [![Support Chat][git-img]][git-url]
8
8
 
9
- [PostCSS Lab Function] lets you use `lab` and `lch` color functions in CSS,
10
- following the [CSS Color] specification.
9
+ [PostCSS Lab Function] lets you use `lab`, `lch`, and `gray` color functions in
10
+ CSS, following the [CSS Color] specification.
11
11
 
12
12
  ```pcss
13
13
  :root {
14
14
  --firebrick: lab(40 56.6 39);
15
15
  --firebrick-a50: lch(40 68.8 34.5 / 50%);
16
+ --gray-40: gray(40);
17
+ --gray-40a50: gray(40 / .5);
16
18
  }
17
19
 
18
20
  /* becomes */
@@ -20,6 +22,8 @@ following the [CSS Color] specification.
20
22
  :root {
21
23
  --firebrick: rgb(178, 34, 34);
22
24
  --firebrick-a50: rgba(178, 34, 34, .5);
25
+ --gray-40: rgb(94,94,94);
26
+ --gray-40a50: rgba(94,94,94, .5);
23
27
  }
24
28
  ```
25
29
 
package/index.cjs.js CHANGED
@@ -23,8 +23,10 @@ var index = postcss.plugin('postcss-lab-function', function (opts) {
23
23
  if (colorRegExp.test(node.value)) {
24
24
  var children = node.nodes.slice(1, -1);
25
25
  var isLab = labRegExp.test(node.value);
26
- var isFunctionalLAB = matchFunctionalLAB(children);
27
- var isFunctionalLCH = matchFunctionalLCH(children);
26
+ var isGray = grayRegExp.test(node.value);
27
+ var isFunctionalLAB = !isGray && matchFunctionalLAB(children);
28
+ var isFunctionalLCH = !isGray && matchFunctionalLCH(children);
29
+ var isFunctionalGray = isGray && matchFunctionalGray(children);
28
30
 
29
31
  if (isFunctionalLAB || isFunctionalLCH) {
30
32
  node.value = 'rgb';
@@ -64,6 +66,31 @@ var index = postcss.plugin('postcss-lab-function', function (opts) {
64
66
 
65
67
  node.nodes.splice(3, 0, [newComma()]);
66
68
  node.nodes.splice(2, 0, [newComma()]);
69
+ } else if (isFunctionalGray) {
70
+ node.value = 'rgb';
71
+
72
+ var _alphaNode = children[2];
73
+
74
+ var _rgbValues = convertColors.lab2rgb.apply(undefined, _toConsumableArray([children[0].value, 0, 0].map(function (number) {
75
+ return parseFloat(number);
76
+ }))).map(function (sourceValue) {
77
+ return Math.max(Math.min(parseInt(sourceValue * 2.55), 255), 0);
78
+ });
79
+
80
+ node.removeAll().append(newParen('(')).append(newNumber(_rgbValues[0])).append(newComma()).append(newNumber(_rgbValues[1])).append(newComma()).append(newNumber(_rgbValues[2])).append(newParen(')'));
81
+
82
+ if (_alphaNode) {
83
+ if (isPercentage(_alphaNode) && !isCalc(_alphaNode)) {
84
+ _alphaNode.unit = '';
85
+ _alphaNode.value = String(_alphaNode.value / 100);
86
+ }
87
+
88
+ if (_alphaNode.value !== '1') {
89
+ node.value += 'a';
90
+
91
+ node.insertBefore(node.last, newComma()).insertBefore(node.last, _alphaNode);
92
+ }
93
+ }
67
94
  }
68
95
  }
69
96
  });
@@ -80,9 +107,10 @@ var index = postcss.plugin('postcss-lab-function', function (opts) {
80
107
  };
81
108
  });
82
109
 
83
- var colorAnyRegExp = /(^|[^\w-])(lab?|lch?)\(/i;
84
- var colorRegExp = /^(lab?|lch?)$/i;
110
+ var colorAnyRegExp = /(^|[^\w-])(lab|lch|gray)\(/i;
111
+ var colorRegExp = /^(lab|lch|gray)$/i;
85
112
  var labRegExp = /^lab$/i;
113
+ var grayRegExp = /^gray$/i;
86
114
  var alphaUnitMatch = /^%?$/i;
87
115
  var calcFuncMatch = /^calc$/i;
88
116
  var hueUnitMatch = /^(deg|grad|rad|turn)?$/i;
@@ -107,6 +135,7 @@ var isSlash = function isSlash(node) {
107
135
  };
108
136
  var functionalLABMatch = [isNumber, isNumber, isNumber, isSlash, isAlphaValue];
109
137
  var functionalLCHMatch = [isNumber, isNumber, isHue, isSlash, isAlphaValue];
138
+ var functionalGrayMatch = [isNumber, isSlash, isAlphaValue];
110
139
  var matchFunctionalLAB = function matchFunctionalLAB(children) {
111
140
  return children.every(function (child, index) {
112
141
  return typeof functionalLABMatch[index] === 'function' && functionalLABMatch[index](child);
@@ -117,9 +146,20 @@ var matchFunctionalLCH = function matchFunctionalLCH(children) {
117
146
  return typeof functionalLCHMatch[index] === 'function' && functionalLCHMatch[index](child);
118
147
  });
119
148
  };
149
+ var matchFunctionalGray = function matchFunctionalGray(children) {
150
+ return children.every(function (child, index) {
151
+ return typeof functionalGrayMatch[index] === 'function' && functionalGrayMatch[index](child);
152
+ });
153
+ };
120
154
 
121
155
  var newComma = function newComma() {
122
156
  return parser.comma({ value: ',' });
123
157
  };
158
+ var newNumber = function newNumber(value) {
159
+ return parser.number({ value });
160
+ };
161
+ var newParen = function newParen(value) {
162
+ return parser.paren({ value });
163
+ };
124
164
 
125
165
  module.exports = index;
package/index.es.js CHANGED
@@ -19,8 +19,10 @@ var index = postcss.plugin('postcss-lab-function', function (opts) {
19
19
  if (colorRegExp.test(node.value)) {
20
20
  var children = node.nodes.slice(1, -1);
21
21
  var isLab = labRegExp.test(node.value);
22
- var isFunctionalLAB = matchFunctionalLAB(children);
23
- var isFunctionalLCH = matchFunctionalLCH(children);
22
+ var isGray = grayRegExp.test(node.value);
23
+ var isFunctionalLAB = !isGray && matchFunctionalLAB(children);
24
+ var isFunctionalLCH = !isGray && matchFunctionalLCH(children);
25
+ var isFunctionalGray = isGray && matchFunctionalGray(children);
24
26
 
25
27
  if (isFunctionalLAB || isFunctionalLCH) {
26
28
  node.value = 'rgb';
@@ -60,6 +62,31 @@ var index = postcss.plugin('postcss-lab-function', function (opts) {
60
62
 
61
63
  node.nodes.splice(3, 0, [newComma()]);
62
64
  node.nodes.splice(2, 0, [newComma()]);
65
+ } else if (isFunctionalGray) {
66
+ node.value = 'rgb';
67
+
68
+ var _alphaNode = children[2];
69
+
70
+ var _rgbValues = lab2rgb.apply(undefined, _toConsumableArray([children[0].value, 0, 0].map(function (number) {
71
+ return parseFloat(number);
72
+ }))).map(function (sourceValue) {
73
+ return Math.max(Math.min(parseInt(sourceValue * 2.55), 255), 0);
74
+ });
75
+
76
+ node.removeAll().append(newParen('(')).append(newNumber(_rgbValues[0])).append(newComma()).append(newNumber(_rgbValues[1])).append(newComma()).append(newNumber(_rgbValues[2])).append(newParen(')'));
77
+
78
+ if (_alphaNode) {
79
+ if (isPercentage(_alphaNode) && !isCalc(_alphaNode)) {
80
+ _alphaNode.unit = '';
81
+ _alphaNode.value = String(_alphaNode.value / 100);
82
+ }
83
+
84
+ if (_alphaNode.value !== '1') {
85
+ node.value += 'a';
86
+
87
+ node.insertBefore(node.last, newComma()).insertBefore(node.last, _alphaNode);
88
+ }
89
+ }
63
90
  }
64
91
  }
65
92
  });
@@ -76,9 +103,10 @@ var index = postcss.plugin('postcss-lab-function', function (opts) {
76
103
  };
77
104
  });
78
105
 
79
- var colorAnyRegExp = /(^|[^\w-])(lab?|lch?)\(/i;
80
- var colorRegExp = /^(lab?|lch?)$/i;
106
+ var colorAnyRegExp = /(^|[^\w-])(lab|lch|gray)\(/i;
107
+ var colorRegExp = /^(lab|lch|gray)$/i;
81
108
  var labRegExp = /^lab$/i;
109
+ var grayRegExp = /^gray$/i;
82
110
  var alphaUnitMatch = /^%?$/i;
83
111
  var calcFuncMatch = /^calc$/i;
84
112
  var hueUnitMatch = /^(deg|grad|rad|turn)?$/i;
@@ -103,6 +131,7 @@ var isSlash = function isSlash(node) {
103
131
  };
104
132
  var functionalLABMatch = [isNumber, isNumber, isNumber, isSlash, isAlphaValue];
105
133
  var functionalLCHMatch = [isNumber, isNumber, isHue, isSlash, isAlphaValue];
134
+ var functionalGrayMatch = [isNumber, isSlash, isAlphaValue];
106
135
  var matchFunctionalLAB = function matchFunctionalLAB(children) {
107
136
  return children.every(function (child, index) {
108
137
  return typeof functionalLABMatch[index] === 'function' && functionalLABMatch[index](child);
@@ -113,9 +142,20 @@ var matchFunctionalLCH = function matchFunctionalLCH(children) {
113
142
  return typeof functionalLCHMatch[index] === 'function' && functionalLCHMatch[index](child);
114
143
  });
115
144
  };
145
+ var matchFunctionalGray = function matchFunctionalGray(children) {
146
+ return children.every(function (child, index) {
147
+ return typeof functionalGrayMatch[index] === 'function' && functionalGrayMatch[index](child);
148
+ });
149
+ };
116
150
 
117
151
  var newComma = function newComma() {
118
152
  return parser.comma({ value: ',' });
119
153
  };
154
+ var newNumber = function newNumber(value) {
155
+ return parser.number({ value });
156
+ };
157
+ var newParen = function newParen(value) {
158
+ return parser.paren({ value });
159
+ };
120
160
 
121
161
  export default index;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "postcss-lab-function",
3
- "version": "1.0.1",
3
+ "version": "1.1.0",
4
4
  "description": "Use lab() and lch() color functions in CSS",
5
5
  "author": "Jonathan Neal <jonathantneal@hotmail.com>",
6
6
  "license": "CC0-1.0",
@@ -26,19 +26,19 @@
26
26
  },
27
27
  "dependencies": {
28
28
  "@csstools/convert-colors": "^1.4.0",
29
- "postcss": "^6.0.22",
29
+ "postcss": "^6.0.23",
30
30
  "postcss-values-parser": "^1.5.0"
31
31
  },
32
32
  "devDependencies": {
33
33
  "babel-core": "^6.26.3",
34
- "babel-eslint": "^8.2.3",
34
+ "babel-eslint": "^8.2.6",
35
35
  "babel-preset-env": "^1.7.0",
36
- "eslint": "^4.19.1",
36
+ "eslint": "^5.2.0",
37
37
  "eslint-config-dev": "^2.0.0",
38
38
  "postcss-tape": "^2.2.0",
39
39
  "pre-commit": "^1.2.2",
40
- "rollup": "^0.58.2",
41
- "rollup-plugin-babel": "^3.0.4"
40
+ "rollup": "^0.63.4",
41
+ "rollup-plugin-babel": "^3.0.7"
42
42
  },
43
43
  "eslintConfig": {
44
44
  "extends": "dev",