postcss-color-functional-notation - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

 # Changes to PostCSS Color Functional Notation
 
+### 1.0.2 (July 13, 2018)
+
+- Fixed: Poorly detected hsl() and rgb() now resolve correctly
+
 ### 1.0.1 (May 11, 2018)
@@ -4,0 +8,0 @@

index.cjs.js

@@ -22,5 +22,5 @@ 'use strict';
 						var children = node.nodes.slice(1, -1);
-						var isFunctionalHSL = matchFunctionalHSL(children);
-						var isFunctionalRGB1 = matchFunctionalRGB1(children);
-						var isFunctionalRGB2 = matchFunctionalRGB2(children);
+						var isFunctionalHSL = matchFunctionalHSL(node, children);
+						var isFunctionalRGB1 = matchFunctionalRGB1(node, children);
+						var isFunctionalRGB2 = matchFunctionalRGB2(node, children);
 
@@ -78,5 +78,7 @@ if (isFunctionalHSL || isFunctionalRGB1 || isFunctionalRGB2) {
 var colorRegExp = /^(hsla?|rgba?)$/i;
+var hslishRegExp = /^hsla?$/i;
 var hslRgbFuncMatch = /^(hsl|rgb)$/i;
 var hslaRgbaFuncMatch = /^(hsla|rgba)$/i;
 var hueUnitMatch = /^(deg|grad|rad|turn)?$/i;
+var rgbishRegExp = /^rgba?$/i;
 var isAlphaValue = function isAlphaValue(node) {
@@ -97,2 +99,5 @@ return isCalc(node) || Object(node).type === 'number' && alphaUnitMatch.test(node.unit);
 };
+var isHslish = function isHslish(node) {
+	return Object(node).type === 'func' && hslishRegExp.test(node.value);
+};
 var isHslRgb = function isHslRgb(node) {
@@ -104,2 +109,5 @@ return Object(node).type === 'func' && hslRgbFuncMatch.test(node.value);
 };
+var isRgbish = function isRgbish(node) {
+	return Object(node).type === 'func' && rgbishRegExp.test(node.value);
+};
 var isSlash = function isSlash(node) {
@@ -112,14 +120,14 @@ return Object(node).type === 'operator' && node.value === '/';
 
-var matchFunctionalHSL = function matchFunctionalHSL(children) {
-	return children.every(function (child, index) {
+var matchFunctionalHSL = function matchFunctionalHSL(node, children) {
+	return isHslish(node) && children.every(function (child, index) {
 		return typeof functionalHSLMatch[index] === 'function' && functionalHSLMatch[index](child);
 	});
 };
-var matchFunctionalRGB1 = function matchFunctionalRGB1(children) {
-	return children.every(function (child, index) {
+var matchFunctionalRGB1 = function matchFunctionalRGB1(node, children) {
+	return isRgbish(node) && children.every(function (child, index) {
 		return typeof functionalRGB1Match[index] === 'function' && functionalRGB1Match[index](child);
 	});
 };
-var matchFunctionalRGB2 = function matchFunctionalRGB2(children) {
-	return children.every(function (child, index) {
+var matchFunctionalRGB2 = function matchFunctionalRGB2(node, children) {
+	return isRgbish(node) && children.every(function (child, index) {
 		return typeof functionalRGB2Match[index] === 'function' && functionalRGB2Match[index](child);
@@ -126,0 +134,0 @@ });

index.es.js

@@ -18,5 +18,5 @@ import postcss from 'postcss';
 						var children = node.nodes.slice(1, -1);
-						var isFunctionalHSL = matchFunctionalHSL(children);
-						var isFunctionalRGB1 = matchFunctionalRGB1(children);
-						var isFunctionalRGB2 = matchFunctionalRGB2(children);
+						var isFunctionalHSL = matchFunctionalHSL(node, children);
+						var isFunctionalRGB1 = matchFunctionalRGB1(node, children);
+						var isFunctionalRGB2 = matchFunctionalRGB2(node, children);
 
@@ -74,5 +74,7 @@ if (isFunctionalHSL || isFunctionalRGB1 || isFunctionalRGB2) {
 var colorRegExp = /^(hsla?|rgba?)$/i;
+var hslishRegExp = /^hsla?$/i;
 var hslRgbFuncMatch = /^(hsl|rgb)$/i;
 var hslaRgbaFuncMatch = /^(hsla|rgba)$/i;
 var hueUnitMatch = /^(deg|grad|rad|turn)?$/i;
+var rgbishRegExp = /^rgba?$/i;
 var isAlphaValue = function isAlphaValue(node) {
@@ -93,2 +95,5 @@ return isCalc(node) || Object(node).type === 'number' && alphaUnitMatch.test(node.unit);
 };
+var isHslish = function isHslish(node) {
+	return Object(node).type === 'func' && hslishRegExp.test(node.value);
+};
 var isHslRgb = function isHslRgb(node) {
@@ -100,2 +105,5 @@ return Object(node).type === 'func' && hslRgbFuncMatch.test(node.value);
 };
+var isRgbish = function isRgbish(node) {
+	return Object(node).type === 'func' && rgbishRegExp.test(node.value);
+};
 var isSlash = function isSlash(node) {
@@ -108,14 +116,14 @@ return Object(node).type === 'operator' && node.value === '/';
 
-var matchFunctionalHSL = function matchFunctionalHSL(children) {
-	return children.every(function (child, index) {
+var matchFunctionalHSL = function matchFunctionalHSL(node, children) {
+	return isHslish(node) && children.every(function (child, index) {
 		return typeof functionalHSLMatch[index] === 'function' && functionalHSLMatch[index](child);
 	});
 };
-var matchFunctionalRGB1 = function matchFunctionalRGB1(children) {
-	return children.every(function (child, index) {
+var matchFunctionalRGB1 = function matchFunctionalRGB1(node, children) {
+	return isRgbish(node) && children.every(function (child, index) {
 		return typeof functionalRGB1Match[index] === 'function' && functionalRGB1Match[index](child);
 	});
 };
-var matchFunctionalRGB2 = function matchFunctionalRGB2(children) {
-	return children.every(function (child, index) {
+var matchFunctionalRGB2 = function matchFunctionalRGB2(node, children) {
+	return isRgbish(node) && children.every(function (child, index) {
 		return typeof functionalRGB2Match[index] === 'function' && functionalRGB2Match[index](child);
@@ -122,0 +130,0 @@ });

package.json

 {
   "name": "postcss-color-functional-notation",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Use space and slash separated color notation in CSS",
@@ -28,3 +28,3 @@ "author": "Jonathan Neal <[e-mail]>",
   "dependencies": {
-    "postcss": "^6.0.22",
+    "postcss": "^6.0.23",
     "postcss-values-parser": "^1.5.0"
@@ -34,10 +34,10 @@ },
     "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.3",
+    "babel-eslint": "^8.2.6",
     "babel-preset-env": "^1.7.0",
-    "eslint": "^4.19.1",
+    "eslint": "^5.1.0",
     "eslint-config-dev": "^2.0.0",
     "postcss-tape": "^2.2.0",
     "pre-commit": "^1.2.2",
-    "rollup": "^0.58.2",
-    "rollup-plugin-babel": "^3.0.4"
+    "rollup": "^0.62.0",
+    "rollup-plugin-babel": "^3.0.7"
   },
@@ -44,0 +44,0 @@ "eslintConfig": {

README.md

@@ -15,5 +15,5 @@ # PostCSS Color Functional Notation [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
   --firebrick: rgb(178 34 34);
-  --firebrick-a50: color: rgb(70% 13.5% 13.5% / 50%);
-  --firebrick-hsl: color: hsla(0 68% 42%);
-  --firebrick-hsl-a50: color: hsl(0 68% 42% / 50%);
+  --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
+  --firebrick-hsl: hsla(0 68% 42%);
+  --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
 }
@@ -25,5 +25,5 @@
   --firebrick: rgb(178, 34, 34);
-  --firebrick-a50: color: rgba(178, 34, 34, .5);
-  --firebrick-hsl: color: hsl(0, 68%, 42%);
-  --firebrick-hsl-a50: color: hsla(0, 68%, 42%, .5);
+  --firebrick-a50: rgba(178, 34, 34, .5);
+  --firebrick-hsl: hsl(0, 68%, 42%);
+  --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
 }
@@ -169,5 +169,5 @@ ```
   --firebrick: rgb(178 34 34);
-  --firebrick-a50: color: rgb(70% 13.5% 13.5% / 50%);
-  --firebrick-hsl: color: hsla(0 68% 42%);
-  --firebrick-hsl-a50: color: hsl(0 68% 42% / 50%);
+  --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
+  --firebrick-hsl: hsla(0 68% 42%);
+  --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
 }
@@ -180,8 +180,8 @@
   --firebrick: rgb(178 34 34);
-  --firebrick-a50: color: rgba(178, 34, 34, .5);
-  --firebrick-a50: color: rgb(70% 13.5% 13.5% / 50%);
-  --firebrick-hsl: color: hsl(0, 68%, 42%);
-  --firebrick-hsl: color: hsla(0 68% 42%);
-  --firebrick-hsl-a50: color: hsla(0, 68%, 42%, .5);
-  --firebrick-hsl-a50: color: hsl(0 68% 42% / 50%);
+  --firebrick-a50: rgba(178, 34, 34, .5);
+  --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
+  --firebrick-hsl: hsl(0, 68%, 42%);
+  --firebrick-hsl: hsla(0 68% 42%);
+  --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
+  --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
 }
@@ -188,0 +188,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23229

increased by3.33%

Lines of code

230

increased by7.48%

Dependency changes

• Updatedpostcss@^6.0.23