postcss-hexrgba - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

index.js

 'use strict';
 
 const postcss = require('postcss');
+const valueParser = require('postcss-value-parser');
 
-module.exports = postcss.plugin('postcss-hexrgba', () => {
+const rgbShorthandRegex = /^([a-f\d])([a-f\d])([a-f\d])$/i;
+const rgbRegex = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
 
-  /**
-   * Hex to RGB converter
-   * @param  {string} hex hexidecimal string without #
-   * @return {array} RGB values
-   */
-  function hexRgb(hex){
-    let shorthandCheck = /^([a-f\d])([a-f\d])([a-f\d])$/i,
-        rgbRegex = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,
-        rgb;
+/**
+ * Hex to RGB converter
+ * @param  {string} hex hexadecimal string without #
+ * @return {array} RGB values
+ */
+function hexRgb(hex){
+  hex = hex.replace(rgbShorthandRegex, (m, r, g, b) => {
+    return r + r + g + g + b + b;
+  });
 
-    hex = hex.replace(shorthandCheck, function(m, r, g, b) {
-      return r + r + g + g + b + b;
-    });
+  const rgb = hex.match(rgbRegex);
 
-    rgb = hex.replace(/^\s+|\s+$/g, '').match(rgbRegex);
+  // Convert it
+  return rgb ? [
+    parseInt(rgb[1], 16),
+    parseInt(rgb[2], 16),
+    parseInt(rgb[3], 16)
+  ] : false;
+}
 
-    // Convert it
-    return rgb ? [
-      parseInt(rgb[1], 16),
-      parseInt(rgb[2], 16),
-      parseInt(rgb[3], 16)
-    ] : false;
-  }
+/**
+ * CSS rule handler
+ * @param  {string} decl CSS declaration
+ */
+function ruleHandler(decl, result) {
+  const value = valueParser(decl.value).walk(node => {
+    if (node.type !== 'function' || node.value !== 'rgba') {
+      return;
+    }
 
-  /**
-   * CSS rule handler
-   * @param  {string} decl CSS delcaration
-   */
-  function ruleHandler(decl, result) {
-    let input = decl.value;
+    const nodes = node.nodes;
+    // Check for the hex value
+    if (nodes[0].type !== 'word' || nodes[0].value.indexOf('#') !== 0) {
+      return;
+    }
 
-    if (input.includes('rgba(#')) {
-      // Get the raw hex values and replace them
-      let output = input.replace(/rgba\(#(.*?),/g, (match, hex) => {
-        let rgb = hexRgb(hex),
-            matchHex = new RegExp('#' + hex);
-          
-        // If conversion fails, emit a warning
-        if (!rgb) {
-          result.warn('not a valid hex', { node: decl });
-          return match;
-        }
+    const hex = nodes[0].value.replace('#', '');
+    const rgb = hexRgb(hex);
 
-        rgb = rgb.toString();
-        
-        return match.replace(matchHex, rgb);
-      });
-      decl.value = output;
+    // If conversion fails, emit a warning
+    if (!rgb) {
+      result.warn('not a valid hex', { node: decl });
+      return;
     }
-  }
 
-  return function(css, result) {
+    // Replace hex value with rgb
+    nodes[0].value = rgb;
+  }).toString();
+
+  decl.value = value;
+}
+
+module.exports = postcss.plugin('postcss-hexrgba', () => {
+  return (css, result) => {
     css.walkDecls(decl => {
-      if (typeof decl.value === 'undefined' || decl.value.indexOf('rgba') === -1) {
+      if (decl.value.indexOf('rgba') === -1) {
         return;
@@ -62,0 +66,0 @@ }

package.json

 {
   "name": "postcss-hexrgba",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "PostCSS plugin that adds shorthand hex methods to rgba() values",
@@ -23,3 +23,4 @@ "keywords": [
   "dependencies": {
-    "postcss": "^7.0.14"
+    "postcss": "^7.0.14",
+    "postcss-value-parser": "^4.1.0"
   },
@@ -26,0 +27,0 @@ "devDependencies": {

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

7367

increased by0.18%

Lines of code

58

increased by7.41%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedpostcss-value-parser@^4.1.0

• + Addedpostcss-value-parser@4.2.0(transitive)