Merge pull request #21 from bloodyowl/feat.auto-double-dash

Added: variables defined in JS are now automatically prefixed with `--`

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 3.1.0 - 2015-03-16
+
+- Added: variables defined in JS are now automatically prefixed with `--`
+  ([0691784](https://github.com/postcss/postcss-custom-properties/commit/0691784ed2218d7e6b16da8c4df03e2ca0c4798c))
+
 # 3.0.1 - 2015-02-06
 
 - Fixed: logs now have filename back ([#19](https://github.com/postcss/postcss-custom-properties/issues/19))

README.md

@@ -69,6 +69,8 @@ var out = postcss()
 #### `variables` (default: `{}`)
 
 Allow you to pass an object of variables for `:root`. These definitions will override any that exist in the CSS.
+The keys are automatically prefixed with the CSS `--` to make it easier to share
+variables in your codebase.
 
 ---
 

index.js

@@ -20,7 +20,16 @@ var RE_VAR = /([\w-]+)(?:\s*,\s*)?(.*)?/ // matches `name[, fallback]`, captures
 module.exports = function(options) {
   return function(style) {
     options = options || {}
-    var variables = options.variables || {}
+    var userVariables = options.variables || {}
+    var variables =
+      Object.keys(userVariables)
+        .reduce(function(acc, key) {
+          if (key.indexOf("--") !== 0) {
+            acc["--" + key] = userVariables[key]
+          }
+          acc[key] = userVariables[key]
+          return acc
+        }, {})
     var preserve = (options.preserve === true ? true : false)
     var map = {}
     var importantMap = {}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-custom-properties",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "PostCSS plugin to polyfill W3C CSS Custom Properties for cascading variables",
   "keywords": [
     "css",

test/fixtures/automatic-variable-prefix.css

@@ -0,0 +1,4 @@
+div {
+  color: var(--unprefixed);
+  background: var(--prefixed);
+}

test/fixtures/automatic-variable-prefix.expected.css

@@ -0,0 +1,4 @@
+div {
+  color: blue;
+  background: white;
+}

test/index.js

@@ -56,6 +56,16 @@ test("accepts variables defined from JavaScript, and overrides local definitions
   t.end()
 })
 
+test("prefixes js defined variabled with a double dash automatically", function(t) {
+  compareFixtures(t, "automatic-variable-prefix", {
+    variables: {
+      unprefixed: "blue",
+      "--prefixed":  "white"
+    }
+  })
+  t.end()
+})
+
 test("removes variable properties from the output", function(t) {
   compareFixtures(t, "remove-properties")
   t.end()