postcss-custom-properties - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+# 4.1.0 - 2015-07-14
+
+- Added: plugin now returns itself in order to expose a `setVariables` function
+that allow you to programmatically change the variables.
+([#35](https://github.com/postcss/postcss-custom-properties/pull/35))
+
 # 4.0.0 - 2015-06-17
@@ -2,0 +8,0 @@

index.js

@@ -129,2 +129,20 @@ /**
 
+function prefixVariables(variables) {
+  var prefixedVariables = {}
+
+  if (!variables) {
+    return prefixVariables
+  }
+
+  Object.keys(variables).forEach(function(name) {
+    var val = variables[name]
+    if (name.slice(0, 2) !== "--") {
+      name = "--" + name
+    }
+    prefixedVariables[name] = String(val)
+  })
+
+  return prefixedVariables
+}
+
 /**
@@ -135,14 +153,10 @@ * Module export.
 module.exports = postcss.plugin("postcss-custom-properties", function(options) {
-  return function(style, result) {
-    options = options || {}
-    var variables = {}
-    if (options.variables) {
-      Object.keys(options.variables).forEach(function(name) {
-        var val = options.variables[name]
-        if (name.slice(0, 2) !== "--") {
-          name = "--" + name
-        }
-        variables[name] = String(val)
-      })
-    }
+  options = options || {}
+
+  function setVariables(variables) {
+    options.variables = prefixVariables(variables)
+  }
+
+  function plugin(style, result) {
+    var variables = prefixVariables(options.variables)
     var strict = options.strict === undefined ? true : options.strict
@@ -273,2 +287,6 @@ var appendVariables = options.appendVariables
   }
+
+  plugin.setVariables = setVariables
+
+  return plugin
 })

package.json

 {
   "name": "postcss-custom-properties",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "PostCSS plugin to polyfill W3C CSS Custom Properties for cascading variables",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 # postcss-custom-properties [![Build Status](https://travis-ci.org/postcss/postcss-custom-properties.png)](https://travis-ci.org/postcss/postcss-custom-properties)
 
-> [PostCSS](https://github.com/postcss/postcss) plugin to transform [W3C CSS Custom Properties for cascading variables](http://www.w3.org/TR/css-variables/) syntax to more compatible CSS.
+> [PostCSS](https://github.com/postcss/postcss) plugin to transform [W3C CSS Custom Properties for ~~cascading~~ variables](http://www.w3.org/TR/css-variables/) syntax to more compatible CSS.
 
-**N.B.** The transformation _is not complete and **cannot be** (dynamic variables based on custom properties relies on the DOM tree)_. It currently just aims to provide a future-proof way of using a **limited subset (to top-level `:root` selector)** of the features provided by native CSS custom properties.
-_Read [#1](https://github.com/postcss/postcss-custom-properties/issues/1) & [#9](https://github.com/postcss/postcss-custom-properties/issues/9) to know why this limitation exists._
+_Per w3c specifications, the usage of `var()` is limited to property values. Do not expect the plugin to transform `var()` in media queries or in selectors._
 
+**N.B.** The transformation _is not complete_ and **cannot be** (dynamic *cascading* variables based on custom properties relies on the DOM tree).
+It currently just aims to provide a future-proof way of using a **limited subset (to `:root` selector)** of the features provided by native CSS custom properties.
+_Since we do not know the DOM in the context of this plugin, we cannot produce safe output_.
+Read [#1](https://github.com/postcss/postcss-custom-properties/issues/1) & [#9](https://github.com/postcss/postcss-custom-properties/issues/9) to know why this limitation exists.
+
 _If you are looking for a full support of CSS custom properties, please follow [the opened issue for runtime support](https://github.com/postcss/postcss-custom-properties/issues/32)._
 
-**N.B.²** If you are wondering why there is a different plugin ([`postcss-css-variables`](https://github.com/MadLittleMods/postcss-css-variables)) that claims to do more than this plugin, be sure to understand the explanation above about limitation. This plugins have a behavior that is not reflecting the specifications. [You should check some (closed) issues of this plugin](https://github.com/MadLittleMods/postcss-css-variables/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aclosed+-label%3Ainvalid+author%3AMoOx+).
+**N.B.²** If you are wondering why there is a different plugin ([`postcss-css-variables`](https://github.com/MadLittleMods/postcss-css-variables)) that claims to do more than this plugin, be sure to understand the explanation above about limitation. This plugins have a behavior that is not [reflecting the specifications](https://github.com/MadLittleMods/postcss-css-variables/issues/4).
 
@@ -58,2 +62,18 @@ _This plugin works great with [postcss-calc](https://github.com/postcss/postcss-calc)._
 
+Note that plugin returns itself in order to expose a `setVariables` function
+that allow you to programmatically change the variables.
+
+```js
+var variables = {
+  "--a": "b",
+}
+var plugin = customProperties()
+plugin.setVariables(variables)
+var result = postcss()
+  .use(plugin)
+  .process(input)
+```
+
+This might help for dynamic live/hot reloading.
+
 Checkout [tests](test) for more.
@@ -60,0 +80,0 @@

No alert changes

Improved metrics

Total package byte prevSize

16287

increased by6.33%

Lines of code

253

increased by4.12%

Number of lines in readme file

128

increased by18.52%

No dependency changes