postcss-color-functional-notation 1.0.1 → 1.0.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +15 -15
  3. package/index.cjs.js +17 -9
  4. package/index.es.js +17 -9
  5. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changes to PostCSS Color Functional Notation
2
2
 
3
+ ### 1.0.2 (July 13, 2018)
4
+
5
+ - Fixed: Poorly detected hsl() and rgb() now resolve correctly
6
+
3
7
  ### 1.0.1 (May 11, 2018)
4
8
 
5
9
  - Fixed: A non-percentage 0 works alongside other percentages
package/README.md CHANGED
@@ -12,18 +12,18 @@ color notation in CSS, following the [CSS Color] specification.
12
12
  ```pcss
13
13
  :root {
14
14
  --firebrick: rgb(178 34 34);
15
- --firebrick-a50: color: rgb(70% 13.5% 13.5% / 50%);
16
- --firebrick-hsl: color: hsla(0 68% 42%);
17
- --firebrick-hsl-a50: color: hsl(0 68% 42% / 50%);
15
+ --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
16
+ --firebrick-hsl: hsla(0 68% 42%);
17
+ --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
18
18
  }
19
19
 
20
20
  /* becomes */
21
21
 
22
22
  :root {
23
23
  --firebrick: rgb(178, 34, 34);
24
- --firebrick-a50: color: rgba(178, 34, 34, .5);
25
- --firebrick-hsl: color: hsl(0, 68%, 42%);
26
- --firebrick-hsl-a50: color: hsla(0, 68%, 42%, .5);
24
+ --firebrick-a50: rgba(178, 34, 34, .5);
25
+ --firebrick-hsl: hsl(0, 68%, 42%);
26
+ --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
27
27
  }
28
28
  ```
29
29
 
@@ -164,9 +164,9 @@ postcssImageSetFunction({ preserve: true })
164
164
  ```pcss
165
165
  :root {
166
166
  --firebrick: rgb(178 34 34);
167
- --firebrick-a50: color: rgb(70% 13.5% 13.5% / 50%);
168
- --firebrick-hsl: color: hsla(0 68% 42%);
169
- --firebrick-hsl-a50: color: hsl(0 68% 42% / 50%);
167
+ --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
168
+ --firebrick-hsl: hsla(0 68% 42%);
169
+ --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
170
170
  }
171
171
 
172
172
  /* becomes */
@@ -174,12 +174,12 @@ postcssImageSetFunction({ preserve: true })
174
174
  :root {
175
175
  --firebrick: rgb(178, 34, 34);
176
176
  --firebrick: rgb(178 34 34);
177
- --firebrick-a50: color: rgba(178, 34, 34, .5);
178
- --firebrick-a50: color: rgb(70% 13.5% 13.5% / 50%);
179
- --firebrick-hsl: color: hsl(0, 68%, 42%);
180
- --firebrick-hsl: color: hsla(0 68% 42%);
181
- --firebrick-hsl-a50: color: hsla(0, 68%, 42%, .5);
182
- --firebrick-hsl-a50: color: hsl(0 68% 42% / 50%);
177
+ --firebrick-a50: rgba(178, 34, 34, .5);
178
+ --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
179
+ --firebrick-hsl: hsl(0, 68%, 42%);
180
+ --firebrick-hsl: hsla(0 68% 42%);
181
+ --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
182
+ --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
183
183
  }
184
184
  ```
185
185
 
package/index.cjs.js CHANGED
@@ -19,9 +19,9 @@ var index = postcss.plugin('postcss-color-functional-notation', function (opts)
19
19
  ast.walkType('func', function (node) {
20
20
  if (colorRegExp.test(node.value)) {
21
21
  var children = node.nodes.slice(1, -1);
22
- var isFunctionalHSL = matchFunctionalHSL(children);
23
- var isFunctionalRGB1 = matchFunctionalRGB1(children);
24
- var isFunctionalRGB2 = matchFunctionalRGB2(children);
22
+ var isFunctionalHSL = matchFunctionalHSL(node, children);
23
+ var isFunctionalRGB1 = matchFunctionalRGB1(node, children);
24
+ var isFunctionalRGB2 = matchFunctionalRGB2(node, children);
25
25
 
26
26
  if (isFunctionalHSL || isFunctionalRGB1 || isFunctionalRGB2) {
27
27
  var slashNode = children[3];
@@ -74,9 +74,11 @@ var alphaUnitMatch = /^%?$/i;
74
74
  var calcFuncMatch = /^calc$/i;
75
75
  var colorAnyRegExp = /(^|[^\w-])(hsla?|rgba?)\(/i;
76
76
  var colorRegExp = /^(hsla?|rgba?)$/i;
77
+ var hslishRegExp = /^hsla?$/i;
77
78
  var hslRgbFuncMatch = /^(hsl|rgb)$/i;
78
79
  var hslaRgbaFuncMatch = /^(hsla|rgba)$/i;
79
80
  var hueUnitMatch = /^(deg|grad|rad|turn)?$/i;
81
+ var rgbishRegExp = /^rgba?$/i;
80
82
  var isAlphaValue = function isAlphaValue(node) {
81
83
  return isCalc(node) || Object(node).type === 'number' && alphaUnitMatch.test(node.unit);
82
84
  };
@@ -92,12 +94,18 @@ var isNumber = function isNumber(node) {
92
94
  var isPercentage = function isPercentage(node) {
93
95
  return isCalc(node) || Object(node).type === 'number' && (node.unit === '%' || node.unit === '' && node.value === '0');
94
96
  };
97
+ var isHslish = function isHslish(node) {
98
+ return Object(node).type === 'func' && hslishRegExp.test(node.value);
99
+ };
95
100
  var isHslRgb = function isHslRgb(node) {
96
101
  return Object(node).type === 'func' && hslRgbFuncMatch.test(node.value);
97
102
  };
98
103
  var isHslaRgba = function isHslaRgba(node) {
99
104
  return Object(node).type === 'func' && hslaRgbaFuncMatch.test(node.value);
100
105
  };
106
+ var isRgbish = function isRgbish(node) {
107
+ return Object(node).type === 'func' && rgbishRegExp.test(node.value);
108
+ };
101
109
  var isSlash = function isSlash(node) {
102
110
  return Object(node).type === 'operator' && node.value === '/';
103
111
  };
@@ -105,18 +113,18 @@ var functionalHSLMatch = [isHue, isPercentage, isPercentage, isSlash, isAlphaVal
105
113
  var functionalRGB1Match = [isNumber, isNumber, isNumber, isSlash, isAlphaValue];
106
114
  var functionalRGB2Match = [isPercentage, isPercentage, isPercentage, isSlash, isAlphaValue];
107
115
 
108
- var matchFunctionalHSL = function matchFunctionalHSL(children) {
109
- return children.every(function (child, index) {
116
+ var matchFunctionalHSL = function matchFunctionalHSL(node, children) {
117
+ return isHslish(node) && children.every(function (child, index) {
110
118
  return typeof functionalHSLMatch[index] === 'function' && functionalHSLMatch[index](child);
111
119
  });
112
120
  };
113
- var matchFunctionalRGB1 = function matchFunctionalRGB1(children) {
114
- return children.every(function (child, index) {
121
+ var matchFunctionalRGB1 = function matchFunctionalRGB1(node, children) {
122
+ return isRgbish(node) && children.every(function (child, index) {
115
123
  return typeof functionalRGB1Match[index] === 'function' && functionalRGB1Match[index](child);
116
124
  });
117
125
  };
118
- var matchFunctionalRGB2 = function matchFunctionalRGB2(children) {
119
- return children.every(function (child, index) {
126
+ var matchFunctionalRGB2 = function matchFunctionalRGB2(node, children) {
127
+ return isRgbish(node) && children.every(function (child, index) {
120
128
  return typeof functionalRGB2Match[index] === 'function' && functionalRGB2Match[index](child);
121
129
  });
122
130
  };
package/index.es.js CHANGED
@@ -15,9 +15,9 @@ var index = postcss.plugin('postcss-color-functional-notation', function (opts)
15
15
  ast.walkType('func', function (node) {
16
16
  if (colorRegExp.test(node.value)) {
17
17
  var children = node.nodes.slice(1, -1);
18
- var isFunctionalHSL = matchFunctionalHSL(children);
19
- var isFunctionalRGB1 = matchFunctionalRGB1(children);
20
- var isFunctionalRGB2 = matchFunctionalRGB2(children);
18
+ var isFunctionalHSL = matchFunctionalHSL(node, children);
19
+ var isFunctionalRGB1 = matchFunctionalRGB1(node, children);
20
+ var isFunctionalRGB2 = matchFunctionalRGB2(node, children);
21
21
 
22
22
  if (isFunctionalHSL || isFunctionalRGB1 || isFunctionalRGB2) {
23
23
  var slashNode = children[3];
@@ -70,9 +70,11 @@ var alphaUnitMatch = /^%?$/i;
70
70
  var calcFuncMatch = /^calc$/i;
71
71
  var colorAnyRegExp = /(^|[^\w-])(hsla?|rgba?)\(/i;
72
72
  var colorRegExp = /^(hsla?|rgba?)$/i;
73
+ var hslishRegExp = /^hsla?$/i;
73
74
  var hslRgbFuncMatch = /^(hsl|rgb)$/i;
74
75
  var hslaRgbaFuncMatch = /^(hsla|rgba)$/i;
75
76
  var hueUnitMatch = /^(deg|grad|rad|turn)?$/i;
77
+ var rgbishRegExp = /^rgba?$/i;
76
78
  var isAlphaValue = function isAlphaValue(node) {
77
79
  return isCalc(node) || Object(node).type === 'number' && alphaUnitMatch.test(node.unit);
78
80
  };
@@ -88,12 +90,18 @@ var isNumber = function isNumber(node) {
88
90
  var isPercentage = function isPercentage(node) {
89
91
  return isCalc(node) || Object(node).type === 'number' && (node.unit === '%' || node.unit === '' && node.value === '0');
90
92
  };
93
+ var isHslish = function isHslish(node) {
94
+ return Object(node).type === 'func' && hslishRegExp.test(node.value);
95
+ };
91
96
  var isHslRgb = function isHslRgb(node) {
92
97
  return Object(node).type === 'func' && hslRgbFuncMatch.test(node.value);
93
98
  };
94
99
  var isHslaRgba = function isHslaRgba(node) {
95
100
  return Object(node).type === 'func' && hslaRgbaFuncMatch.test(node.value);
96
101
  };
102
+ var isRgbish = function isRgbish(node) {
103
+ return Object(node).type === 'func' && rgbishRegExp.test(node.value);
104
+ };
97
105
  var isSlash = function isSlash(node) {
98
106
  return Object(node).type === 'operator' && node.value === '/';
99
107
  };
@@ -101,18 +109,18 @@ var functionalHSLMatch = [isHue, isPercentage, isPercentage, isSlash, isAlphaVal
101
109
  var functionalRGB1Match = [isNumber, isNumber, isNumber, isSlash, isAlphaValue];
102
110
  var functionalRGB2Match = [isPercentage, isPercentage, isPercentage, isSlash, isAlphaValue];
103
111
 
104
- var matchFunctionalHSL = function matchFunctionalHSL(children) {
105
- return children.every(function (child, index) {
112
+ var matchFunctionalHSL = function matchFunctionalHSL(node, children) {
113
+ return isHslish(node) && children.every(function (child, index) {
106
114
  return typeof functionalHSLMatch[index] === 'function' && functionalHSLMatch[index](child);
107
115
  });
108
116
  };
109
- var matchFunctionalRGB1 = function matchFunctionalRGB1(children) {
110
- return children.every(function (child, index) {
117
+ var matchFunctionalRGB1 = function matchFunctionalRGB1(node, children) {
118
+ return isRgbish(node) && children.every(function (child, index) {
111
119
  return typeof functionalRGB1Match[index] === 'function' && functionalRGB1Match[index](child);
112
120
  });
113
121
  };
114
- var matchFunctionalRGB2 = function matchFunctionalRGB2(children) {
115
- return children.every(function (child, index) {
122
+ var matchFunctionalRGB2 = function matchFunctionalRGB2(node, children) {
123
+ return isRgbish(node) && children.every(function (child, index) {
116
124
  return typeof functionalRGB2Match[index] === 'function' && functionalRGB2Match[index](child);
117
125
  });
118
126
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "postcss-color-functional-notation",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Use space and slash separated color notation in CSS",
5
5
  "author": "Jonathan Neal <jonathantneal@hotmail.com>",
6
6
  "license": "CC0-1.0",
@@ -25,19 +25,19 @@
25
25
  "node": ">=4.0.0"
26
26
  },
27
27
  "dependencies": {
28
- "postcss": "^6.0.22",
28
+ "postcss": "^6.0.23",
29
29
  "postcss-values-parser": "^1.5.0"
30
30
  },
31
31
  "devDependencies": {
32
32
  "babel-core": "^6.26.3",
33
- "babel-eslint": "^8.2.3",
33
+ "babel-eslint": "^8.2.6",
34
34
  "babel-preset-env": "^1.7.0",
35
- "eslint": "^4.19.1",
35
+ "eslint": "^5.1.0",
36
36
  "eslint-config-dev": "^2.0.0",
37
37
  "postcss-tape": "^2.2.0",
38
38
  "pre-commit": "^1.2.2",
39
- "rollup": "^0.58.2",
40
- "rollup-plugin-babel": "^3.0.4"
39
+ "rollup": "^0.62.0",
40
+ "rollup-plugin-babel": "^3.0.7"
41
41
  },
42
42
  "eslintConfig": {
43
43
  "extends": "dev",