First release based on rework-vars v3.1.1

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+test/fixtures/*.actual.css

.travis.yml

@@ -0,0 +1 @@
+language: node_js

CHANGELOG.md

@@ -0,0 +1,3 @@
+# 0.1.0 - 2014-08-01
+
+First release based on [rework-vars](https://github.com/reworkcss/rework-vars) v3.1.1

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 "MoOx" Maxime Thirouin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,43 @@
+# postcss-custom-properties [![Build Status](https://travis-ci.org/postcss/postcss-custom-properties.png)](https://travis-ci.org/postcss/postcss-custom-properties)
+
+A [PostCSS](https://github.com/postcss/postcss) plugin to polyfill the
+[W3C-style CSS Custom Properties for cascading variables](http://www.w3.org/TR/css-variables/).
+
+**N.B.** For now the polyfill _is not complete_. It currently just aims to provide a future-proof way of using a _limited subset_ of the features provided by native CSS variables.  
+
+_[Checkout opened issue to know the state of this plugin](issues)._
+
+## Installation
+
+```
+npm install postcss-custom-properties
+```
+
+## Usage
+
+```js
+// dependencies
+var fs = require('fs')
+var postcss = require('postcss')
+var customProperties = require('postcss-custom-properties')
+
+// css to be processed
+var css = fs.readFileSync('build/build.css', 'utf8')
+
+// process css using postcss-custom-properties
+var out = postcss(customProperties()).process(css).css
+```
+
+### Options
+
+#### `preserve` (default: `false`)
+
+Allow you to preserve custom properties & var() usage in output.
+
+```js
+var out = postcss(customProperties({preserve: true})).process(css).css
+```
+
+## [Changelog](CHANGELOG.md)
+
+## [License](LICENSE-MIT)

index.js

@@ -0,0 +1,119 @@
+/**
+ * Module dependencies.
+ */
+
+var balanced = require('balanced-match')
+
+/**
+ * Constants.
+ */
+
+var VAR_PROP_IDENTIFIER = '--'
+var VAR_FUNC_IDENTIFIER = 'var'
+
+/**
+ * Module export.
+ */
+
+module.exports = function (options) {
+
+  return function(style) {
+    options = options || {}
+    var map = {}
+    var preserve = (options.preserve === true ? true : false)
+
+    // define variables
+    style.eachRule(function (rule) {
+      var varNameIndices = []
+      if (rule.type !== 'rule') return
+
+      // only variables declared for `:root` are supported for now
+      if (rule.selectors.length !== 1 || rule.selectors[0] !== ":root" || rule.parent.type !== "root") return
+
+      rule.each(function (decl, i) {
+        var prop = decl.prop
+        var value = decl.value
+
+        if (prop && prop.indexOf(VAR_PROP_IDENTIFIER) === 0) {
+          map[prop] = value
+          varNameIndices.push(i)
+        }
+      })
+
+      // optionally remove `--*` properties from the rule
+      if (!preserve) {
+        for (var i = varNameIndices.length - 1; i >= 0; i--) {
+          rule.decls.splice(varNameIndices[i], 1)
+        }
+
+        // remove empty :root {}
+        if (rule.decls.length === 0) rule.removeSelf()
+      }
+    })
+
+    // resolve variables
+    style.eachDecl(function (decl, i) {
+      var resolvedValue
+      var value = decl.value
+
+      // skip values that don't contain variable functions
+      if (!value || value.indexOf(VAR_FUNC_IDENTIFIER + '(') === -1) return
+
+      resolvedValue = resolveValue(value, map)
+
+      if (!preserve) {
+        decl.value = resolvedValue
+      }
+      else {
+        decl.parent.insertBefore(decl, {
+          prop: decl.prop,
+          value: resolvedValue
+        })
+      }
+    })
+  }
+}
+
+/**
+ * Resolve CSS variables in a value
+ *
+ * The second argument to a CSS variable function, if provided, is a fallback
+ * value, which is used as the substitution value when the referenced variable
+ * is invalid.
+ *
+ * var(name[, fallback])
+ *
+ * @param {String} value A property value known to contain CSS variable functions
+ * @param {Object} map A map of variable names and values
+ * @return {String} A property value with all CSS variables substituted.
+ */
+
+function resolveValue(value, map) {
+  // matches `name[, fallback]`, captures 'name' and 'fallback'
+  var RE_VAR = /([\w-]+)(?:\s*,\s*)?(.*)?/
+  var balancedParens = balanced('(', ')', value)
+  var varStartIndex = value.indexOf('var(')
+  var varRef = balanced('(', ')', value.substring(varStartIndex)).body
+
+  if (!balancedParens) throw new SyntaxError('postcss-custom-properties: missing closing ")" in the value "' + value + '"')
+  if (varRef === '') throw new Error('postcss-custom-properties: var() must contain a non-whitespace string')
+
+  var varFunc = VAR_FUNC_IDENTIFIER + '(' + varRef + ')'
+
+  var varResult = varRef.replace(RE_VAR, function (_, name, fallback) {
+    var replacement = map[name]
+    if (!replacement && !fallback) throw new Error('postcss-custom-properties: variable "' + name + '" is undefined')
+    if (!replacement && fallback) return fallback
+    return replacement
+  })
+
+  // resolve the variable
+  value = value.split(varFunc).join(varResult)
+
+  // recursively resolve any remaining variables in the value
+  if (value.indexOf(VAR_FUNC_IDENTIFIER) !== -1) {
+    value = resolveValue(value, map)
+  }
+
+  return value
+}

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "postcss-custom-properties",
+  "version": "0.0.0",
+  "description": "PostCSS that polyfill CSS custom properties for cascading variable module",
+  "keywords": ["css", "postcss", "postcss-plugin", "custom-properties", "variables", "vars"],
+  "author": "MoOx",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/postcss/postcss-custom-properties.git"
+  },
+  "files": [
+    "CHANGELOG.md",
+    "LICENSE",
+    "README.md",
+    "index.js"
+  ],
+  "dependencies": {
+    "balanced-match": "~0.1.0"
+  },
+  "devDependencies": {
+    "postcss": "^2.1.0",
+    "tap-colorize": "^1.2.0",
+    "tape": "^2.13.4"
+  },
+  "scripts": {
+    "test": "node test | tap-colorize"
+  }
+}

test/fixtures/case-sensitive.css

@@ -0,0 +1,9 @@
+:root {
+  --TEST-color: red;
+  --tESt-COLOR: green;
+}
+
+div {
+  color: var(--TEST-color);
+  color: var(--tESt-COLOR);
+}

test/fixtures/case-sensitive.out.css

@@ -0,0 +1,4 @@
+div {
+  color: red;
+  color: green;
+}

test/fixtures/media-query.css

@@ -0,0 +1,5 @@
+@media screen and (min-width: 320px) {
+  :root {
+    --error: red;
+  }
+}

test/fixtures/media-query.out.css

@@ -0,0 +1,5 @@
+@media screen and (min-width: 320px) {
+  :root {
+    --error: red;
+  }
+}

test/fixtures/preserve-variables.css

@@ -0,0 +1,20 @@
+:root {
+  --color-one: red;
+  --color-two: blue;
+}
+
+.atthebeginning {
+  color: var(--color-one);
+  prop: after;
+}
+
+.attheend {
+  prop: before;
+  color: var(--color-two);
+}
+
+.surrounded {
+  prop: before;
+  color: var(--undefined-color, green);
+  otherprop: after;
+}

test/fixtures/preserve-variables.out.css

@@ -0,0 +1,23 @@
+:root {
+  --color-one: red;
+  --color-two: blue;
+}
+
+.atthebeginning {
+  color: red;
+  color: var(--color-one);
+  prop: after;
+}
+
+.attheend {
+  prop: before;
+  color: blue;
+  color: var(--color-two);
+}
+
+.surrounded {
+  prop: before;
+  color: green;
+  color: var(--undefined-color, green);
+  otherprop: after;
+}

test/fixtures/remove-properties.css

@@ -0,0 +1,13 @@
+:root {
+  --test-one: test;
+  --test-two: test;
+}
+
+div {
+  color: red;
+}
+
+:root {
+  --test-three: test;
+  --test-four: test;
+}

test/fixtures/remove-properties.out.css

@@ -0,0 +1,3 @@
+div {
+  color: red;
+}

test/fixtures/substitution-defined.css

@@ -0,0 +1,28 @@
+/**
+ * Test comment
+ */
+
+:root {
+  --test-one: green;
+  --test-two: blue;
+  --test-three: yellow;
+}
+
+:root,
+span {
+  --untouched: red;
+}
+
+div {
+  --untouched: red;
+  /* single variable */
+  color: var(--test-one);
+  /* single variable with tail */
+  color: var(--test-one) !important;
+  /* multiple variables */
+  color: var(--test-one), var(--test-two);
+  /* variable with function in fallback */
+  border: var(--test-one, 1px solid rgba(0, 0, 0, 0.1));
+  /* multiple variables within a function */
+  background: linear-gradient(to top, var(--test-one), var(--test-two));
+}

test/fixtures/substitution-defined.out.css

@@ -0,0 +1,22 @@
+/**
+ * Test comment
+ */
+
+:root,
+span {
+  --untouched: red;
+}
+
+div {
+  --untouched: red;
+  /* single variable */
+  color: green;
+  /* single variable with tail */
+  color: green !important;
+  /* multiple variables */
+  color: green, blue;
+  /* variable with function in fallback */
+  border: green;
+  /* multiple variables within a function */
+  background: linear-gradient(to top, green, blue);
+}

test/fixtures/substitution-empty.css

@@ -0,0 +1,3 @@
+div {
+  color: var();
+}

test/fixtures/substitution-fallback.css

@@ -0,0 +1,22 @@
+:root {
+  --nested: green;
+}
+
+div {
+  /* simple fallback */
+  color: var(--missing, green);
+  /* comma-separated fallback */
+  color: var(--missing, green, blue);
+  /* fallback is a function */
+  background: var(--missing, linear-gradient(to top, #000, #111));
+  /* fallback contains a function */
+  background: var(--missing, 1px solid rgba(0, 0, 0, 0.1));
+  /* fallback is a function containing a function */
+  background: var(--missing, linear-gradient(to top, #000, rgba(0, 0, 0, 0.5)));
+  /* fallback contains a defined variable */
+  background: var(--missing, var(--nested));
+  /* fallback contains a defined variable within a function */
+  background: var(--missing, linear-gradient(to top, #000, var(--nested)));
+  /* fallback contains an undefined variable with a fallack */
+  background: var(--missing, var(--also-missing, green));
+}