Permalink
Browse files

First release based on rework-vars v3.1.1

  • Loading branch information...
0 parents commit 35fd8f43453f7c48b818f3e852720f7f902c6e6f @MoOx MoOx committed Aug 1, 2014
@@ -0,0 +1,2 @@
+node_modules
+test/fixtures/*.actual.css
@@ -0,0 +1 @@
+language: node_js
@@ -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
@@ -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.
@@ -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)
@@ -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
+}
@@ -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"
+ }
+}
@@ -0,0 +1,9 @@
+:root {
+ --TEST-color: red;
+ --tESt-COLOR: green;
+}
+
+div {
+ color: var(--TEST-color);
+ color: var(--tESt-COLOR);
+}
@@ -0,0 +1,4 @@
+div {
+ color: red;
+ color: green;
+}
@@ -0,0 +1,5 @@
+@media screen and (min-width: 320px) {
+ :root {
+ --error: red;
+ }
+}
@@ -0,0 +1,5 @@
+@media screen and (min-width: 320px) {
+ :root {
+ --error: red;
+ }
+}
@@ -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;
+}
@@ -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;
+}
@@ -0,0 +1,13 @@
+:root {
+ --test-one: test;
+ --test-two: test;
+}
+
+div {
+ color: red;
+}
+
+:root {
+ --test-three: test;
+ --test-four: test;
+}
@@ -0,0 +1,3 @@
+div {
+ color: red;
+}
@@ -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));
+}
@@ -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);
+}
@@ -0,0 +1,3 @@
+div {
+ color: var();
+}
@@ -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));
+}
Oops, something went wrong.

0 comments on commit 35fd8f4

Please sign in to comment.