diff --git a/index.js b/index.js index cd06393..8a67098 100644 --- a/index.js +++ b/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; diff --git a/test/fixtures/multiple-attributes.css b/test/fixtures/multiple-attributes.css new file mode 100644 index 0000000..32e95a0 --- /dev/null +++ b/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; +} diff --git a/test/fixtures/multiple-attributes.expected.css b/test/fixtures/multiple-attributes.expected.css new file mode 100644 index 0000000..2715085 --- /dev/null +++ b/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; +} diff --git a/test/test.js b/test/test.js index ef7ee09..5f9c223 100644 --- a/test/test.js +++ b/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); + }); + });