Add property name support

index.js

@@ -52,6 +52,10 @@ var declValue = function (variables, node, opts, result) {
     node.value = bothSyntaxes(variables, node, node.value, opts, result);
 };
 
+var declProp = function (variables, node, opts, result) {
+    node.prop = inStringSyntax(variables, node, node.prop, opts, result);
+};
+
 var ruleSelector = function (variables, node, opts, result) {
     node.selector = bothSyntaxes(variables, node, node.selector, opts, result);
 };
@@ -91,7 +95,9 @@ module.exports = postcss.plugin('postcss-simple-vars', function (opts) {
                 if ( node.value.toString().indexOf('$') !== -1 ) {
                     declValue(variables, node, opts, result);
                 }
-                if ( node.prop[0] === '$' ) {
+                if ( node.prop.indexOf('$(') !== -1 ) {
+                    declProp(variables, node, opts, result);
+                } else if ( node.prop[0] === '$' ) {
                     if ( !opts.only ) definition(variables, node);
                 }
 

test/test.js

@@ -14,6 +14,14 @@ describe('postcss-simple-vars', function () {
              'a{ width: 10px; height: 10px }');
     });
 
+    it('replaces vars in property names', function () {
+        test('$prop: width; a{ $(prop): 1px }', 'a{ width: 1px }');
+    });
+
+    it('replaces vars inside property names', function () {
+        test('$dir: top; a{ margin-$(dir): 1px }', 'a{ margin-top: 1px }');
+    });
+
     it('allows dashes and digits in variable name', function () {
         test('$a-b_10: 1;\na{ one: $a-b_10 a$(a-b_10) }', 'a{ one: 1 a1 }');
     });