postcss-custom-properties - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+# 3.3.0 - 2015-04-0
+
+- Added: `preserve` now support `"computed"` so only preserve resolved custom properties (see new option below)
+- Added: `appendVariables` allows you (when `preserve` is trulthy) to append your variables as custom properties
+- Added: `strict: false` allows your to avoid too many fallbacks added in your CSS.
+
 # 3.2.0 - 2015-03-31
@@ -2,0 +8,0 @@

index.js

@@ -5,2 +5,4 @@ /**
 
+var assign = require("object-assign")
+var postcss = require("postcss")
 var balanced = require("balanced-match")
@@ -51,5 +53,13 @@ var helpers = require("postcss-message-helpers")
   matches.body.replace(RE_VAR, function(_, name, fallback) {
-    var replacement = variables[name]
-    if (!replacement && !fallback) {
+    var variable = variables[name]
+    var post
+    // undefined and without fallback, just keep original value
+    if (!variable && !fallback) {
       console.warn(helpers.message("variable '" + name + "' is undefined and used without a fallback", source))
+      post = matches.post ? resolveValue(matches.post, variables, source) : [""]
+      // resolve the end of the expression
+      post.forEach(function(afterValue) {
+        results.push(value.slice(0, start) + VAR_FUNC_IDENTIFIER + "(" + name + ")" + afterValue)
+      })
+      return
     }
@@ -59,6 +69,8 @@
     if (fallback) {
+      // resolve fallback values
+      fallback = resolveValue(fallback, variables, source)
       // resolve the end of the expression before the rest
-      (matches.post ? resolveValue(matches.post, variables, source) : [""]).forEach(function(afterValue) {
-        // resolve fallback values
-        resolveValue(fallback, variables, source).forEach(function(fbValue) {
+      post = matches.post ? resolveValue(matches.post, variables, source) : [""]
+      fallback.forEach(function(fbValue) {
+        post.forEach(function(afterValue) {
           results.push(value.slice(0, start) + fbValue + afterValue)
@@ -69,20 +81,36 @@ })
 
+    if (!variable) {
+      return
+    }
+
     // replace with computed custom properties
-    if (replacement) {
-      // resolve the end of the expression
-      (matches.post ? resolveValue(matches.post, variables, source) : [""]).forEach(function(afterValue) {
-        // resolve replacement if it use a custom property
-        resolveValue(replacement, variables, source).forEach(function(replacementValue) {
-          results.push(value.slice(0, start) + replacementValue + afterValue)
-        })
-      })
+    if (!variable.resolved) {
+      // circular reference encountered
+      if (variable.deps.indexOf(name) !== -1) {
+        if (!fallback) {
+          console.warn(helpers.message("circular variable reference: " + name, source))
+          variable.value = [variable.value]
+          variable.circular = true
+        }
+        else {
+          variable.value = fallback
+          return
+        }
+      }
+      else {
+        variable.deps.push(name)
+        variable.value = resolveValue(variable.value, variables, source)
+      }
+      variable.resolved = true
     }
-
-    // nothing, just keep original value
-    if (!replacement && !fallback) {
-      // resolve the end of the expression
-      (matches.post ? resolveValue(matches.post, variables, source) : [""]).forEach(function(afterValue) {
-        results.push(value.slice(0, start) + VAR_FUNC_IDENTIFIER + "(" + name + ")" + afterValue)
+    if (variable.circular && fallback) {
+      return
+    }
+    // resolve the end of the expression
+    post = matches.post ? resolveValue(matches.post, variables, source) : [""]
+    variable.value.forEach(function(replacementValue) {
+      post.forEach(function(afterValue) {
+        results.push(value.slice(0, start) + replacementValue + afterValue)
       })
-    }
+    })
   })
@@ -100,13 +128,12 @@
     options = options || {}
-    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 variables = assign({}, options.variables || {})
+    Object.keys(variables).forEach(function(name) {
+      if (name.slice(0, 2) !== "--") {
+        variables["--" + name] = variables[name]
+        delete variables[name]
+      }
+    })
+    var strict = options.strict === undefined ? true : options.strict
+    var appendVariables = options.appendVariables
+    var preserve = options.preserve
     var map = {}
@@ -141,3 +168,8 @@ var importantMap = {}
           if (!map[prop] || !importantMap[prop] || decl.important) {
-            map[prop] = decl.value
+            map[prop] = {
+              value: decl.value,
+              deps: [],
+              circular: false,
+              resolved: false,
+            }
             importantMap[prop] = decl.important
@@ -164,5 +196,20 @@ }
     Object.keys(variables).forEach(function(variable) {
-      map[variable] = resolveValue(variables[variable], map)
+      map[variable] = {
+        value: variables[variable],
+        deps: [],
+        circular: false,
+        resolved: false,
+      }
     })
 
+    if (preserve) {
+      Object.keys(map).forEach(function(name) {
+        var variable = map[name]
+        if (!variable.resolved) {
+          variable.value = resolveValue(variable.value, map)
+          variable.resolved = true
+        }
+      })
+    }
+
     // resolve variables
@@ -178,3 +225,7 @@ style.eachDecl(function(decl) {
       helpers.try(function resolve() {
-        resolveValue(value, map, decl.source).forEach(function(resolvedValue) {
+        var resolved = resolveValue(value, map, decl.source)
+        if (!strict) {
+          resolved = [resolved.pop()]
+        }
+        resolved.forEach(function(resolvedValue) {
           var clone = decl.cloneBefore()
@@ -185,7 +236,28 @@ clone.value = resolvedValue
 
-      if (!preserve) {
+      if (!preserve || preserve === "computed") {
         decl.removeSelf()
       }
     })
+
+    if (preserve && appendVariables) {
+      var names = Object.keys(map)
+      if (names.length) {
+        var container = postcss.rule({
+          selector: ":root",
+          semicolon: true,
+        })
+        names.forEach(function(name) {
+          var variable = map[name]
+          var val = variable.value
+          if (variable.resolved) { val = val[val.length - 1] }
+          var decl = postcss.decl({
+            prop: name,
+            value: val,
+          })
+          container.append(decl)
+        })
+        style.append(container)
+      }
+    }
   }
 }

package.json

 {
   "name": "postcss-custom-properties",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "PostCSS plugin to polyfill W3C CSS Custom Properties for cascading variables",
@@ -26,2 +26,4 @@ "keywords": [
     "balanced-match": "~0.1.0",
+    "object-assign": "^2.0.0",
+    "postcss": "^4.1.4",
     "postcss-message-helpers": "^2.0.0"
@@ -31,4 +33,3 @@ },
     "eslint": "^0.18.0",
-    "postcss": "^4.0.0",
-    "tape": "^3.0.0"
+    "tape": "^4.0.0"
   },
@@ -35,0 +36,0 @@ "scripts": {

README.md

@@ -58,5 +58,11 @@ # postcss-custom-properties [![Build Status](https://travis-ci.org/postcss/postcss-custom-properties.png)](https://travis-ci.org/postcss/postcss-custom-properties)
 
+#### `strict` (default: `true`)
+
+Per specifications, all fallbacks should be added since we can't verify if a
+computed value is valid or not.
+This option allows you to avoid adding too many fallback values in your CSS.
+
 #### `preserve` (default: `false`)
 
-Allow you to preserve custom properties & var() usage in output.
+Allows you to preserve custom properties & var() usage in output.
 
@@ -70,8 +76,15 @@ ```js
 
+You can also set `preserve: "computed"` to get computed resolved custom properties in the final output.
+Handy to make them available to your JavaScript.
+
 #### `variables` (default: `{}`)
 
-Allow you to pass an object of variables for `:root`. These definitions will override any that exist in the CSS.
+Allows 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.
 
+### `appendVariables` (default: `false`)
+
+If `preserve` is set to `true` (or `"computed"`), allows you to append your variables at then of your CSS.
+
 ---
@@ -78,0 +91,0 @@

No alert changes

Improved metrics

Total package byte prevSize

14399

increased by23.51%

Dev dependency count

2

decreased by-33.33%

Lines of code

226

increased by44.87%

Number of lines in readme file

104

increased by14.29%

Worsened metrics

Dependency count

4

increased by100%

Dependency changes

• + Addedobject-assign@^2.0.0

• + Addedpostcss@^4.1.4

• + Addedamdefine@1.0.1(transitive)

• + Addedes6-promise@2.3.0(transitive)

• + Addedjs-base64@2.1.9(transitive)

• + Addedobject-assign@2.1.1(transitive)

• + Addedpostcss@4.1.16(transitive)

• + Addedsource-map@0.4.4(transitive)