Add auto-prefix to opts.variables with -- v0.2.2

Author: MadLittleMods

CHANGELOG.md

@@ -1,4 +1,9 @@
 
+
+# 0.2.2 - 2015-5-1
+
+ - Automatically prefix any variables defined in `options.variables` with `--` (according to CSS custom property syntax).
+
 # 0.2.1 - 2015-4-30
 
  - Added support for descendant selector nesting instead of just physical space nesting

README.md

@@ -6,7 +6,7 @@ CSS variables or CSS Custom Properties limited subset polyfill/shim.
 
 We strive for the most complete transformation but we/no plugin can achieve true complete parity according to the [speficification](http://dev.w3.org/csswg/css-variables/) because of the DOM cascade unknowns.
 
-## Latest Version: 0.2.1
+## Latest Version: 0.2.2
 ### [Changelog](https://github.com/MadLittleMods/postcss-css-variables/blob/master/CHANGELOG.md)
 
 
@@ -245,10 +245,12 @@ Allowed values:
 
 ### `variables` (default: `{}`)
 
-Define variables in JavaScript.
+Define an object map of variables in JavaScript that will be declared at the `:root` scope.
 
 Can be a simple key-value pair or an object with a `value` property and an optional `isImportant` bool property
 
+The object keys are automatically prefixed with `--` (according to CSS custom property syntax) if you do not provide it. 
+
 
 ```
 var postcss = require('postcss');
@@ -257,12 +259,12 @@ var cssvariables = require('postcss-css-variables');
 postcss([
 	cssvariables({
 		variables: {
-			'--some-var': 100pxpx,
+			'--some-var': '100px',
 			'--other-var': {
-				value: #00ff00
+				value: '#00ff00'
 			},
 			'--important-var': {
-				value: #ff0000,
+				value: '#ff0000',
 				isImportant: true
 			}
 		}

index.js

@@ -1,5 +1,5 @@
 // PostCSS CSS Variables (postcss-css-variables)
-// v0.2.1
+// v0.2.2
 //
 // https://github.com/MadLittleMods/postcss-css-variables
 
@@ -79,14 +79,6 @@ function generateScopeList(node, /*optional*/includeSelf) {
 		currentNodeParent = currentNodeParent.parent;
 	}
 
-
-	/* * /
-	// Turn it into a string
-	var selectorScopeStringList = selectorScopeList.map(function(scopeStringPieces) {
-		return scopeStringPieces.join(' ');
-	})	
-	/* */
-
 	return selectorScopeList;
 }
 
@@ -186,6 +178,9 @@ var resolveValue = function(decl, map, /*optional*/mimicChildOf) {
 	};
 };
 
+
+
+
 module.exports = postcss.plugin('postcss-css-variables', function(options) {
 	var defaults = {
 		// Allows you to preserve custom properties & var() usage in output.
@@ -223,6 +218,10 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) {
 			Object.keys(opts.variables)
 				.reduce(function(prevVariableMap, variableName) {
 					var variableValue = opts.variables[variableName];
+					// Automatically prefix any variable with `--` (CSS custom property syntax) if it doesn't have it already
+					variableName = variableName.slice(0, 2) === '--' ? variableName : '--' + variableName;
+
+
 					// If they didn't pass a object, lets construct one
 					if(typeof variableValue !== 'object') {
 						variableValue = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-css-variables",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation",
   "keywords": [
     "postcss",

test/fixtures/js-defined.css

@@ -1,4 +1,5 @@
 .box1 {
 	width: var(--js-defined1);
 	height: var(--js-defined2);
+	background: var(--js-defined-no-prefix);
 }

test/fixtures/js-defined.expected.css

@@ -1,4 +1,5 @@
 .box1 {
 	width: 75px;
 	height: 80px;
+	background: #ff0000;
 }

test/test.js

@@ -99,7 +99,9 @@ describe('postcss-css-variables', function() {
 						'--js-defined1': '75px',
 						'--js-defined2': {
 							value: '80px'
-						}
+						},
+						// Should be automatically prefixed with `--`
+						'js-defined-no-prefix': '#ff0000'
 					}
 				}
 			);