postcss-custom-properties - npm Package Compare versions

Comparing version 3.3.0 to 4.0.0

CHANGELOG.md

@@ -1,5 +0,9 @@
-# 3.3.0 - 2015-04-0
+# 4.0.0 - 2015-06-17
 
+- Changed: messages and exceptions are now sent using postcss message API.
+
+# 3.3.0 - 2015-04-08
+
 - 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: `appendVariables` allows you (when `preserve` is truthy) to append your variables as custom properties
 - Added: `strict: false` allows your to avoid too many fallbacks added in your CSS.
@@ -6,0 +10,0 @@

index.js

@@ -5,6 +5,4 @@ /**
 
-var assign = require("object-assign")
 var postcss = require("postcss")
 var balanced = require("balanced-match")
-var helpers = require("postcss-message-helpers")
 
@@ -17,3 +15,4 @@ /**
 var VAR_FUNC_IDENTIFIER = "var"
-var RE_VAR = /([\w-]+)(?:\s*,\s*)?(.*)?/ // matches `name[, fallback]`, captures "name" and "fallback"
+// matches `name[, fallback]`, captures "name" and "fallback"
+var RE_VAR = /([\w-]+)(?:\s*,\s*)?(.*)?/
 
@@ -29,3 +28,4 @@ /**
  *
- * @param {String} value A property value known to contain CSS variable functions
+ * @param {String} value A property value known to contain CSS variable
+ *                       functions
  * @param {Object} variables A map of variable names and values
@@ -36,3 +36,3 @@ * @param {Object} source source object of the declaration containing the rule
 
-function resolveValue(value, variables, source) {
+function resolveValue(value, variables, result, decl) {
   var results = []
@@ -48,7 +48,7 @@
   if (!matches) {
-    throw new SyntaxError("missing closing ')' in the value '" + value + "'")
+    throw decl.error("missing closing ')' in the value '" + value + "'")
   }
 
   if (matches.body === "") {
-    throw new Error("var() must contain a non-whitespace string")
+    throw decl.error("var() must contain a non-whitespace string")
   }
@@ -61,7 +61,15 @@
     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) : [""]
+      result.warn(
+        "variable '" + name + "' is undefined and used without a fallback",
+        {node: decl}
+      )
+      post = matches.post
+        ? resolveValue(matches.post, variables, result, decl)
+        : [""]
       // resolve the end of the expression
       post.forEach(function(afterValue) {
-        results.push(value.slice(0, start) + VAR_FUNC_IDENTIFIER + "(" + name + ")" + afterValue)
+        results.push(
+          value.slice(0, start) +
+          VAR_FUNC_IDENTIFIER + "(" + name + ")" + afterValue
+        )
       })
@@ -74,5 +82,7 @@ return
       // resolve fallback values
-      fallback = resolveValue(fallback, variables, source)
+      fallback = resolveValue(fallback, variables, result, decl)
       // resolve the end of the expression before the rest
-      post = matches.post ? resolveValue(matches.post, variables, source) : [""]
+      post = matches.post
+        ? resolveValue(matches.post, variables, result, decl)
+        : [""]
       fallback.forEach(function(fbValue) {
@@ -94,3 +104,3 @@ post.forEach(function(afterValue) {
         if (!fallback) {
-          console.warn(helpers.message("circular variable reference: " + name, source))
+          result.warn("Circular variable reference: " + name, {node: decl})
           variable.value = [variable.value]
@@ -106,3 +116,3 @@ variable.circular = true
         variable.deps.push(name)
-        variable.value = resolveValue(variable.value, variables, source)
+        variable.value = resolveValue(variable.value, variables, result, decl)
       }
@@ -115,3 +125,5 @@ variable.resolved = true
     // resolve the end of the expression
-    post = matches.post ? resolveValue(matches.post, variables, source) : [""]
+    post = matches.post
+      ? resolveValue(matches.post, variables, result, decl)
+      : [""]
     variable.value.forEach(function(replacementValue) {
@@ -131,12 +143,15 @@ post.forEach(function(afterValue) {
 
-module.exports = function(options) {
-  return function(style) {
+module.exports = postcss.plugin("postcss-custom-properties", function(options) {
+  return function(style, result) {
     options = options || {}
-    var variables = assign({}, options.variables || {})
-    Object.keys(variables).forEach(function(name) {
-      if (name.slice(0, 2) !== "--") {
-        variables["--" + name] = variables[name]
-        delete variables[name]
-      }
-    })
+    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)
+      })
+    }
     var strict = options.strict === undefined ? true : options.strict
@@ -153,13 +168,15 @@ var appendVariables = options.appendVariables
       // only variables declared for `:root` are supported for now
-      if (rule.selectors.length !== 1 || rule.selectors[0] !== ":root" || rule.parent.type !== "root") {
+      if (
+          rule.selectors.length !== 1 ||
+          rule.selectors[0] !== ":root" ||
+          rule.parent.type !== "root"
+      ) {
         rule.each(function(decl) {
           var prop = decl.prop
           if (prop && prop.indexOf(VAR_PROP_IDENTIFIER) === 0) {
-            console.warn(
-              helpers.message(
-                "Custom property ignored: not scoped to the top-level :root element (" +
-                rule.selectors +
-                " { ... " + prop + ": ... })" +
-                (rule.parent.type !== "root" ? ", in " + rule.parent.type : ""),
-              decl.source)
+            result.warn(
+              "Custom property ignored: not scoped to the top-level :root " +
+              "element (" + rule.selectors + " { ... " + prop + ": ... })" +
+              (rule.parent.type !== "root" ? ", in " + rule.parent.type : ""),
+              {node: decl}
             )
@@ -214,3 +231,3 @@ }
         if (!variable.resolved) {
-          variable.value = resolveValue(variable.value, map)
+          variable.value = resolveValue(variable.value, map, result)
           variable.resolved = true
@@ -230,12 +247,10 @@ }
 
-      helpers.try(function resolve() {
-        var resolved = resolveValue(value, map, decl.source)
-        if (!strict) {
-          resolved = [resolved.pop()]
-        }
-        resolved.forEach(function(resolvedValue) {
-          var clone = decl.cloneBefore()
-          clone.value = resolvedValue
-        })
-      }, decl.source)
+      var resolved = resolveValue(value, map, result, decl)
+      if (!strict) {
+        resolved = [resolved.pop()]
+      }
+      resolved.forEach(function(resolvedValue) {
+        var clone = decl.cloneBefore()
+        clone.value = resolvedValue
+      })
 
@@ -257,3 +272,5 @@ if (!preserve || preserve === "computed") {
           var val = variable.value
-          if (variable.resolved) { val = val[val.length - 1] }
+          if (variable.resolved) {
+            val = val[val.length - 1]
+          }
           var decl = postcss.decl({
@@ -269,2 +286,2 @@ prop: name,
   }
-}
+})

package.json

 {
   "name": "postcss-custom-properties",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "description": "PostCSS plugin to polyfill W3C CSS Custom Properties for cascading variables",
@@ -26,8 +26,6 @@ "keywords": [
     "balanced-match": "~0.1.0",
-    "object-assign": "^2.0.0",
-    "postcss": "^4.1.4",
-    "postcss-message-helpers": "^2.0.0"
+    "postcss": "^4.1.4"
   },
   "devDependencies": {
-    "eslint": "^0.18.0",
+    "eslint": "^0.23.0",
     "tape": "^4.0.0"
@@ -34,0 +32,0 @@ },

README.md

@@ -5,7 +5,11 @@ # postcss-custom-properties [![Build Status](https://travis-ci.org/postcss/postcss-custom-properties.png)](https://travis-ci.org/postcss/postcss-custom-properties)
 
-**N.B.** The transformation _is not complete_. 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.
+**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._
 
-Works great with [postcss-calc](https://github.com/postcss/postcss-calc).
+_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+).
+
+_This plugin works great with [postcss-calc](https://github.com/postcss/postcss-calc)._
+
 ## Installation
@@ -85,5 +89,5 @@
 
-### `appendVariables` (default: `false`)
+#### `appendVariables` (default: `false`)
 
-If `preserve` is set to `true` (or `"computed"`), allows you to append your variables at then of your CSS.
+If `preserve` is set to `true` (or `"computed"`), allows you to append your variables at the end of your CSS.
 
@@ -90,0 +94,0 @@ ---

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15318

increased by6.38%

Dependency count

2

decreased by-50%

Lines of code

243

increased by7.52%

Number of lines in readme file

108

increased by3.85%

Dependency changes

• - Removedobject-assign@^2.0.0

• - Removedpostcss-message-helpers@^2.0.0

• - Removedobject-assign@2.1.1(transitive)

• - Removedpostcss-message-helpers@2.0.0(transitive)