postcss-custom-properties - npm Package Compare versions

Comparing version 8.0.5 to 8.0.6

CHANGELOG.md

 # Changes to PostCSS Custom Properties
 
+### 8.0.6 (September 21, 2018)
+
+- Fixed: Issue with regular `:root` and `html` properties not getting polyfilled
+- Updated: `postcss` to 7.0.3 (patch)
+
 ### 8.0.5 (September 21, 2018)
@@ -4,0 +9,0 @@

index.cjs.js

@@ -96,3 +96,3 @@ 'use strict';
 
-function getCustomProperties(root, opts) {
+function getCustomPropertiesFromRoot(root, opts) {
   // initialize custom selectors
@@ -141,137 +141,27 @@ const customPropertiesFromHtmlElement = {};
 
-function transformValueAST(root, customProperties) {
-  if (root.nodes && root.nodes.length) {
-    root.nodes.slice().forEach(child => {
-      if (isVarFunction(child)) {
-        // eslint-disable-next-line no-unused-vars
-        const _child$nodes$slice = child.nodes.slice(1, -1),
-              _child$nodes$slice2 = _toArray(_child$nodes$slice),
-              propertyNode = _child$nodes$slice2[0],
-              comma = _child$nodes$slice2[1],
-              fallbacks = _child$nodes$slice2.slice(2);
-
-        const name = propertyNode.value;
-
-        if (name in customProperties) {
-          // conditionally replace a known custom property
-          child.replaceWith(...asClonedArrayWithBeforeSpacing(customProperties[name], child.raws.before));
-          retransformValueAST(root, customProperties, name);
-        } else if (fallbacks.length) {
-          // conditionally replace a custom property with a fallback
-          child.replaceWith(...asClonedArrayWithBeforeSpacing(fallbacks, child.raws.before));
-          transformValueAST(root, customProperties);
-        }
-      } else {
-        transformValueAST(child, customProperties);
-      }
-    });
-  }
-
-  return root;
-} // retransform the current ast without a custom property (to prevent recursion)
-
-function retransformValueAST(root, customProperties, withoutProperty) {
-  const nextCustomProperties = Object.assign({}, customProperties);
-  delete nextCustomProperties[withoutProperty];
-  return transformValueAST(root, nextCustomProperties);
-} // match var() functions
-
-
-const varRegExp = /^var$/i; // whether the node is a var() function
-
-const isVarFunction = node => node.type === 'func' && varRegExp.test(node.value) && Object(node.nodes).length > 0; // return an array with its nodes cloned, preserving the raw
-
-
-const asClonedArrayWithBeforeSpacing = (array, beforeSpacing) => {
-  const clonedArray = asClonedArray(array, null);
-
-  if (clonedArray[0]) {
-    clonedArray[0].raws.before = beforeSpacing;
-  }
-
-  return clonedArray;
-}; // return an array with its nodes cloned
-
-
-const asClonedArray = (array, parent) => array.map(node => asClonedNode(node, parent)); // return a cloned node
-
-
-const asClonedNode = (node, parent) => {
-  const cloneNode = new node.constructor(node);
-
-  for (const key in node) {
-    if (key === 'parent') {
-      cloneNode.parent = parent;
-    } else if (Object(node[key]).constructor === Array) {
-      cloneNode[key] = asClonedArray(node.nodes, cloneNode);
-    } else if (Object(node[key]).constructor === Object) {
-      cloneNode[key] = Object.assign({}, node[key]);
-    }
-  }
-
-  return cloneNode;
-};
-
-var transformProperties = ((root, customProperties, opts) => {
-  // walk decls that can be transformed
-  root.walkDecls(decl => {
-    if (isTransformableDecl(decl)) {
-      const originalValue = decl.value;
-      const valueAST = valueParser(originalValue).parse();
-      const value = String(transformValueAST(valueAST, customProperties)); // conditionally transform values that have changed
-
-      if (value !== originalValue) {
-        if (opts.preserve) {
-          decl.cloneBefore({
-            value
-          });
-        } else {
-          decl.value = value;
-        }
-      }
-    }
-  });
-}); // match html and :root rules
-
-const htmlOrRootSelectorRegExp = /^(html|:root)$/i; // match custom property inclusions
-
-const customPropertiesRegExp = /(^|[^\w-])var\([\W\w]+\)/; // whether the declaration has a parent rule that is either html or :root
-
-const isDeclChildOfHtmlOrRootRule = decl => Object(decl.parent).type === 'rule' && htmlOrRootSelectorRegExp.test(decl.parent.selector); // whether the declaration should be potentially transformed
-
-
-const isTransformableDecl = decl => customPropertiesRegExp.test(decl.value) && !isDeclChildOfHtmlOrRootRule(decl);
-
-/* Import Custom Properties from CSS AST
+/* Get Custom Properties from CSS File
 /* ========================================================================== */
 
-function importCustomPropertiesFromCSSAST(root) {
-  return getCustomProperties(root, {
-    preserve: true
-  });
+function getCustomPropertiesFromCSSFile(_x) {
+  return _getCustomPropertiesFromCSSFile.apply(this, arguments);
 }
-/* Import Custom Properties from CSS File
+/* Get Custom Properties from Object
 /* ========================================================================== */
 
 
-function importCustomPropertiesFromCSSFile(_x) {
-  return _importCustomPropertiesFromCSSFile.apply(this, arguments);
-}
-/* Import Custom Properties from Object
-/* ========================================================================== */
-
-
-function _importCustomPropertiesFromCSSFile() {
-  _importCustomPropertiesFromCSSFile = _asyncToGenerator(function* (from) {
-    const css = yield readFile(path.resolve(from));
+function _getCustomPropertiesFromCSSFile() {
+  _getCustomPropertiesFromCSSFile = _asyncToGenerator(function* (from) {
+    const css = yield readFile(from);
     const root = postcss.parse(css, {
-      from: path.resolve(from)
+      from
     });
-    return importCustomPropertiesFromCSSAST(root);
+    return getCustomPropertiesFromRoot(root, {
+      preserve: true
+    });
   });
-  return _importCustomPropertiesFromCSSFile.apply(this, arguments);
+  return _getCustomPropertiesFromCSSFile.apply(this, arguments);
 }
 
-function importCustomPropertiesFromObject(object) {
-  const customProperties = Object.assign({}, Object(object).customProperties || Object(object)['custom-properties']);
+function getCustomPropertiesFromObject(object) {
+  const customProperties = Object.assign({}, Object(object).customProperties, Object(object)['custom-properties']);
 
@@ -284,37 +174,37 @@ for (const key in customProperties) {
 }
-/* Import Custom Properties from JSON file
+/* Get Custom Properties from JSON file
 /* ========================================================================== */
 
 
-function importCustomPropertiesFromJSONFile(_x2) {
-  return _importCustomPropertiesFromJSONFile.apply(this, arguments);
+function getCustomPropertiesFromJSONFile(_x2) {
+  return _getCustomPropertiesFromJSONFile.apply(this, arguments);
 }
-/* Import Custom Properties from JS file
+/* Get Custom Properties from JS file
 /* ========================================================================== */
 
 
-function _importCustomPropertiesFromJSONFile() {
-  _importCustomPropertiesFromJSONFile = _asyncToGenerator(function* (from) {
-    const object = yield readJSON(path.resolve(from));
-    return importCustomPropertiesFromObject(object);
+function _getCustomPropertiesFromJSONFile() {
+  _getCustomPropertiesFromJSONFile = _asyncToGenerator(function* (from) {
+    const object = yield readJSON(from);
+    return getCustomPropertiesFromObject(object);
   });
-  return _importCustomPropertiesFromJSONFile.apply(this, arguments);
+  return _getCustomPropertiesFromJSONFile.apply(this, arguments);
 }
 
-function importCustomPropertiesFromJSFile(_x3) {
-  return _importCustomPropertiesFromJSFile.apply(this, arguments);
+function getCustomPropertiesFromJSFile(_x3) {
+  return _getCustomPropertiesFromJSFile.apply(this, arguments);
 }
-/* Import Custom Properties from Sources
+/* Get Custom Properties from Imports
 /* ========================================================================== */
 
 
-function _importCustomPropertiesFromJSFile() {
-  _importCustomPropertiesFromJSFile = _asyncToGenerator(function* (from) {
-    const object = yield Promise.resolve(require(path.resolve(from)));
-    return importCustomPropertiesFromObject(object);
+function _getCustomPropertiesFromJSFile() {
+  _getCustomPropertiesFromJSFile = _asyncToGenerator(function* (from) {
+    const object = yield Promise.resolve(require(from));
+    return getCustomPropertiesFromObject(object);
   });
-  return _importCustomPropertiesFromJSFile.apply(this, arguments);
+  return _getCustomPropertiesFromJSFile.apply(this, arguments);
 }
 
-function importCustomPropertiesFromSources(sources) {
+function getCustomPropertiesFromImports(sources) {
   return sources.map(source => {
@@ -337,3 +227,3 @@ if (source instanceof Promise) {
 
-    const from = String(opts.from || ''); // type of file being read from
+    const from = path.resolve(String(opts.from || '')); // type of file being read from
 
@@ -353,19 +243,15 @@ const type = (opts.type || path.extname(from).slice(1)).toLowerCase();
 
-      if (type === 'ast') {
-        return Object.assign((yield customProperties), importCustomPropertiesFromCSSAST(from));
-      }
-
       if (type === 'css') {
-        return Object.assign((yield customProperties), (yield importCustomPropertiesFromCSSFile(from)));
+        return Object.assign((yield customProperties), (yield getCustomPropertiesFromCSSFile(from)));
       }
 
       if (type === 'js') {
-        return Object.assign((yield customProperties), (yield importCustomPropertiesFromJSFile(from)));
+        return Object.assign((yield customProperties), (yield getCustomPropertiesFromJSFile(from)));
       }
 
       if (type === 'json') {
-        return Object.assign((yield customProperties), (yield importCustomPropertiesFromJSONFile(from)));
+        return Object.assign((yield customProperties), (yield getCustomPropertiesFromJSONFile(from)));
       }
 
-      return Object.assign((yield customProperties), (yield importCustomPropertiesFromObject((yield source))));
+      return Object.assign((yield customProperties), (yield getCustomPropertiesFromObject((yield source))));
     });
@@ -403,14 +289,114 @@
 
-/* Export Custom Properties to CSS File
+function transformValueAST(root, customProperties) {
+  if (root.nodes && root.nodes.length) {
+    root.nodes.slice().forEach(child => {
+      if (isVarFunction(child)) {
+        // eslint-disable-next-line no-unused-vars
+        const _child$nodes$slice = child.nodes.slice(1, -1),
+              _child$nodes$slice2 = _toArray(_child$nodes$slice),
+              propertyNode = _child$nodes$slice2[0],
+              comma = _child$nodes$slice2[1],
+              fallbacks = _child$nodes$slice2.slice(2);
+
+        const name = propertyNode.value;
+
+        if (name in customProperties) {
+          // conditionally replace a known custom property
+          child.replaceWith(...asClonedArrayWithBeforeSpacing(customProperties[name], child.raws.before));
+          retransformValueAST(root, customProperties, name);
+        } else if (fallbacks.length) {
+          // conditionally replace a custom property with a fallback
+          child.replaceWith(...asClonedArrayWithBeforeSpacing(fallbacks, child.raws.before));
+          transformValueAST(root, customProperties);
+        }
+      } else {
+        transformValueAST(child, customProperties);
+      }
+    });
+  }
+
+  return root;
+} // retransform the current ast without a custom property (to prevent recursion)
+
+function retransformValueAST(root, customProperties, withoutProperty) {
+  const nextCustomProperties = Object.assign({}, customProperties);
+  delete nextCustomProperties[withoutProperty];
+  return transformValueAST(root, nextCustomProperties);
+} // match var() functions
+
+
+const varRegExp = /^var$/i; // whether the node is a var() function
+
+const isVarFunction = node => node.type === 'func' && varRegExp.test(node.value) && Object(node.nodes).length > 0; // return an array with its nodes cloned, preserving the raw
+
+
+const asClonedArrayWithBeforeSpacing = (array, beforeSpacing) => {
+  const clonedArray = asClonedArray(array, null);
+
+  if (clonedArray[0]) {
+    clonedArray[0].raws.before = beforeSpacing;
+  }
+
+  return clonedArray;
+}; // return an array with its nodes cloned
+
+
+const asClonedArray = (array, parent) => array.map(node => asClonedNode(node, parent)); // return a cloned node
+
+
+const asClonedNode = (node, parent) => {
+  const cloneNode = new node.constructor(node);
+
+  for (const key in node) {
+    if (key === 'parent') {
+      cloneNode.parent = parent;
+    } else if (Object(node[key]).constructor === Array) {
+      cloneNode[key] = asClonedArray(node.nodes, cloneNode);
+    } else if (Object(node[key]).constructor === Object) {
+      cloneNode[key] = Object.assign({}, node[key]);
+    }
+  }
+
+  return cloneNode;
+};
+
+var transformProperties = ((root, customProperties, opts) => {
+  // walk decls that can be transformed
+  root.walkDecls(decl => {
+    if (isTransformableDecl(decl)) {
+      const originalValue = decl.value;
+      const valueAST = valueParser(originalValue).parse();
+      const value = String(transformValueAST(valueAST, customProperties)); // conditionally transform values that have changed
+
+      if (value !== originalValue) {
+        if (opts.preserve) {
+          decl.cloneBefore({
+            value
+          });
+        } else {
+          decl.value = value;
+        }
+      }
+    }
+  });
+}); // match custom properties
+
+const customPropertyRegExp$1 = /^--[A-z][\w-]*$/; // match custom property inclusions
+
+const customPropertiesRegExp = /(^|[^\w-])var\([\W\w]+\)/; // whether the declaration should be potentially transformed
+
+const isTransformableDecl = decl => !customPropertyRegExp$1.test(decl.prop) && customPropertiesRegExp.test(decl.value);
+
+/* Write Custom Properties to CSS File
 /* ========================================================================== */
 
-function exportCustomPropertiesToCssFile(_x, _x2) {
-  return _exportCustomPropertiesToCssFile.apply(this, arguments);
+function writeCustomPropertiesToCssFile(_x, _x2) {
+  return _writeCustomPropertiesToCssFile.apply(this, arguments);
 }
-/* Export Custom Properties to JSON file
+/* Write Custom Properties to JSON file
 /* ========================================================================== */
 
 
-function _exportCustomPropertiesToCssFile() {
-  _exportCustomPropertiesToCssFile = _asyncToGenerator(function* (to, customProperties) {
+function _writeCustomPropertiesToCssFile() {
+  _writeCustomPropertiesToCssFile = _asyncToGenerator(function* (to, customProperties) {
     const cssContent = Object.keys(customProperties).reduce((cssLines, name) => {
@@ -423,14 +409,14 @@ cssLines.push(`\t${name}: ${customProperties[name]};`);
   });
-  return _exportCustomPropertiesToCssFile.apply(this, arguments);
+  return _writeCustomPropertiesToCssFile.apply(this, arguments);
 }
 
-function exportCustomPropertiesToJsonFile(_x3, _x4) {
-  return _exportCustomPropertiesToJsonFile.apply(this, arguments);
+function writeCustomPropertiesToJsonFile(_x3, _x4) {
+  return _writeCustomPropertiesToJsonFile.apply(this, arguments);
 }
-/* Export Custom Properties to Common JS file
+/* Write Custom Properties to Common JS file
 /* ========================================================================== */
 
 
-function _exportCustomPropertiesToJsonFile() {
-  _exportCustomPropertiesToJsonFile = _asyncToGenerator(function* (to, customProperties) {
+function _writeCustomPropertiesToJsonFile() {
+  _writeCustomPropertiesToJsonFile = _asyncToGenerator(function* (to, customProperties) {
     const jsonContent = JSON.stringify({
@@ -442,14 +428,14 @@ 'custom-properties': customProperties
   });
-  return _exportCustomPropertiesToJsonFile.apply(this, arguments);
+  return _writeCustomPropertiesToJsonFile.apply(this, arguments);
 }
 
-function exportCustomPropertiesToCjsFile(_x5, _x6) {
-  return _exportCustomPropertiesToCjsFile.apply(this, arguments);
+function writeCustomPropertiesToCjsFile(_x5, _x6) {
+  return _writeCustomPropertiesToCjsFile.apply(this, arguments);
 }
-/* Export Custom Properties to Module JS file
+/* Write Custom Properties to Module JS file
 /* ========================================================================== */
 
 
-function _exportCustomPropertiesToCjsFile() {
-  _exportCustomPropertiesToCjsFile = _asyncToGenerator(function* (to, customProperties) {
+function _writeCustomPropertiesToCjsFile() {
+  _writeCustomPropertiesToCjsFile = _asyncToGenerator(function* (to, customProperties) {
     const jsContents = Object.keys(customProperties).reduce((jsLines, name) => {
@@ -462,14 +448,14 @@ jsLines.push(`\t\t'${escapeForJS(name)}': '${escapeForJS(customProperties[name])}'`);
   });
-  return _exportCustomPropertiesToCjsFile.apply(this, arguments);
+  return _writeCustomPropertiesToCjsFile.apply(this, arguments);
 }
 
-function exportCustomPropertiesToMjsFile(_x7, _x8) {
-  return _exportCustomPropertiesToMjsFile.apply(this, arguments);
+function writeCustomPropertiesToMjsFile(_x7, _x8) {
+  return _writeCustomPropertiesToMjsFile.apply(this, arguments);
 }
-/* Export Custom Properties to Destinations
+/* Write Custom Properties to Exports
 /* ========================================================================== */
 
 
-function _exportCustomPropertiesToMjsFile() {
-  _exportCustomPropertiesToMjsFile = _asyncToGenerator(function* (to, customProperties) {
+function _writeCustomPropertiesToMjsFile() {
+  _writeCustomPropertiesToMjsFile = _asyncToGenerator(function* (to, customProperties) {
     const mjsContents = Object.keys(customProperties).reduce((mjsLines, name) => {
@@ -482,6 +468,6 @@ mjsLines.push(`\t'${escapeForJS(name)}': '${escapeForJS(customProperties[name])}'`);
   });
-  return _exportCustomPropertiesToMjsFile.apply(this, arguments);
+  return _writeCustomPropertiesToMjsFile.apply(this, arguments);
 }
 
-function exportCustomPropertiesToDestinations(customProperties, destinations) {
+function writeCustomPropertiesToExports(customProperties, destinations) {
   return Promise.all(destinations.map(
@@ -516,15 +502,15 @@ /*#__PURE__*/
           if (type === 'css') {
-            yield exportCustomPropertiesToCssFile(to, customPropertiesJSON);
+            yield writeCustomPropertiesToCssFile(to, customPropertiesJSON);
           }
 
           if (type === 'js') {
-            yield exportCustomPropertiesToCjsFile(to, customPropertiesJSON);
+            yield writeCustomPropertiesToCjsFile(to, customPropertiesJSON);
           }
 
           if (type === 'json') {
-            yield exportCustomPropertiesToJsonFile(to, customPropertiesJSON);
+            yield writeCustomPropertiesToJsonFile(to, customPropertiesJSON);
           }
 
           if (type === 'mjs') {
-            yield exportCustomPropertiesToMjsFile(to, customPropertiesJSON);
+            yield writeCustomPropertiesToMjsFile(to, customPropertiesJSON);
           }
@@ -570,3 +556,3 @@ }
 
-  const customPropertiesPromise = importCustomPropertiesFromSources(importFrom);
+  const customPropertiesPromise = getCustomPropertiesFromImports(importFrom);
   return (
@@ -576,6 +562,6 @@ /*#__PURE__*/
       var _ref = _asyncToGenerator(function* (root) {
-        const customProperties = Object.assign((yield customPropertiesPromise), getCustomProperties(root, {
+        const customProperties = Object.assign((yield customPropertiesPromise), getCustomPropertiesFromRoot(root, {
           preserve
         }));
-        yield exportCustomPropertiesToDestinations(customProperties, exportTo);
+        yield writeCustomPropertiesToExports(customProperties, exportTo);
         transformProperties(root, customProperties, {
@@ -582,0 +568,0 @@ preserve

package.json

 {
   "name": "postcss-custom-properties",
-  "version": "8.0.5",
+  "version": "8.0.6",
   "description": "Use Custom Properties Queries in CSS",
@@ -24,3 +24,3 @@ "author": "Jonathan Neal <[e-mail]>",
     "pretest": "rollup -c .rollup.js --silent",
-    "test": "echo 'Running tests...'; npm run test:js && npm run test:tape",
+    "test": "npm run test:js && npm run test:tape",
     "test:js": "eslint *.js lib/*.js --cache --ignore-path .gitignore --quiet",
@@ -33,3 +33,3 @@ "test:tape": "postcss-tape"
   "dependencies": {
-    "postcss": "^7.0.2",
+    "postcss": "^7.0.3",
     "postcss-values-parser": "^2.0.0"
@@ -41,3 +41,3 @@ },
     "@babel/preset-env": "^7.1.0",
-    "babel-eslint": "^9.0.0",
+    "babel-eslint": "^10.0.0",
     "eslint": "^5.6.0",
@@ -44,0 +44,0 @@ "eslint-config-dev": "^2.0.0",

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

106446

decreased by-3.17%

Lines of code

900

decreased by-1.96%

Dependency changes

• Updatedpostcss@^7.0.3