Add declaration with multiple attributes including rgba to be converted correctly

index.js

@@ -9,7 +9,6 @@ module.exports = postcss.plugin('postcss-hexrgba', function () {
      * @return {array} RGB values
      */
     var hexRgb = function(hex){
-
       // If given shorthand, expand it
       var shorthandCheck = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
       hex = hex.replace(shorthandCheck, function(m, r, g, b) {
@@ -39,6 +38,8 @@ module.exports = postcss.plugin('postcss-hexrgba', function () {
 
       var input = decl.value;
       var output = '';
+      var prefix = input.match(/(.+) rgba\(.+\)/);
+      var suffix = input.match(/rgba\(.+\) (.+)/);
 
       // Strip out surrounding css property and throw the values in an array
       var rgba = input.split('(')[1].split(')')[0];
@@ -73,6 +74,16 @@ module.exports = postcss.plugin('postcss-hexrgba', function () {
       output = converted.toString();
       output = 'rgba(' + output + ')';
 
+      // Prepend the output with the beginning of the value before the conversion without the rgba part, if it exists
+      if (prefix) {
+        output = prefix[1] + ' ' + output;
+      }
+
+      // PAppend the output with the end of the value before the conversion without the rgba part, if it exists
+      if (suffix) {
+        output = output + ' ' + suffix[1];
+      }
+
       // Create the new declaration value
       decl.value = output;
 

test/fixtures/multiple-attributes.css

@@ -0,0 +1,5 @@
+.foo {
+  border: 1px solid rgba(#f00, 0.2);
+  border: rgba(#f00, 0.2) 1px solid;
+  border: 1px rgba(#f00, 0.2) solid;
+}

test/fixtures/multiple-attributes.expected.css

@@ -0,0 +1,5 @@
+.foo {
+  border: 1px solid rgba(255,0,0,0.2);
+  border: rgba(255,0,0,0.2) 1px solid;
+  border: 1px rgba(255,0,0,0.2) solid;
+}

test/test.js

@@ -36,4 +36,8 @@ describe('postcss-hexrgba', function() {
     test('shorthand', {}, done);
   });
 
+  it('handles hex in multiple attributes', function(done) {
+    test('multiple-attributes', {}, done);
+  });
+
 });