postcss-color-mod-function - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

CHANGELOG.md

 # Changes to PostCSS color-mod() Function
 
+### 3.0.3 (September 23, 2018)
+
+- Fixed an issue with certain colors not being tranformed from variables
+
 ### 3.0.2 (September 23, 2018)
@@ -4,0 +8,0 @@

index.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var parser = _interopDefault(require('postcss-values-parser'));
+var valueParser = _interopDefault(require('postcss-values-parser'));
 var fs = _interopDefault(require('fs'));
@@ -141,3 +141,3 @@ var path = _interopDefault(require('path'));
 
-          customPropertiesObject[prop] = parser(decl.value).parse(); // conditionally remove the custom property declaration
+          customPropertiesObject[prop] = valueParser(decl.value).parse(); // conditionally remove the custom property declaration
 
@@ -194,5 +194,5 @@ if (!opts.preserve) {
   _importCustomPropertiesFromCSSFile = _asyncToGenerator(function* (from) {
-    const css = yield readFile(path.resolve(from));
+    const css = yield readFile(from);
     const root = postcss.parse(css, {
-      from: path.resolve(from)
+      from
     });
@@ -206,2 +206,7 @@ return importCustomPropertiesFromCSSAST(root);
   const customProperties = Object.assign({}, Object(object).customProperties || Object(object)['custom-properties']);
+
+  for (const prop in customProperties) {
+    customProperties[prop] = valueParser(customProperties[prop]).parse();
+  }
+
   return customProperties;
@@ -222,3 +227,3 @@ }
   _importCustomPropertiesFromJSONFile = _asyncToGenerator(function* (from) {
-    const object = yield readJSON(path.resolve(from));
+    const object = yield readJSON(from);
     return importCustomPropertiesFromObject(object);
@@ -238,3 +243,3 @@ });
   _importCustomPropertiesFromJSFile = _asyncToGenerator(function* (from) {
-    const object = yield Promise.resolve(require(path.resolve(from)));
+    const object = yield Promise.resolve(require(from));
     return importCustomPropertiesFromObject(object);
@@ -263,3 +268,3 @@ });
 
-    const from = String(opts.from || ''); // type of file being read from
+    const from = path.resolve(String(opts.from || '')); // type of file being read from
 
@@ -1031,3 +1036,3 @@ const type = (opts.type || path.extname(from).slice(1)).toLowerCase();
         // update the color-mod() function with the transformed value
-        child.replaceWith(parser.word({
+        child.replaceWith(valueParser.word({
           raws: child.raws,
@@ -1048,28 +1053,31 @@ value: opts.stringifier(color)
     if (isVariable(child)) {
+      // get the custom property and fallback value from var()
       const _transformArgsByParam = transformArgsByParams(child, [// <value> , [ <fallback> ]?
       [transformWord, isComma, transformNode]]),
             _transformArgsByParam2 = _slicedToArray(_transformArgsByParam, 2),
-            variableName = _transformArgsByParam2[0],
-            fallbackNode = _transformArgsByParam2[1];
+            prop = _transformArgsByParam2[0],
+            fallbackNode = _transformArgsByParam2[1]; // if the custom property is known
 
-      if (variableName in opts.customProperties) {
-        let customPropertyValue = opts.customProperties[variableName];
 
+      if (prop in opts.customProperties) {
+        let customPropertyValue = opts.customProperties[prop]; // follow custom properties referencing custom properties
+
         if (looseVarMatch.test(customPropertyValue)) {
-          if (typeof customPropertyValue === 'string') {
-            customPropertyValue = parser(customPropertyValue).parse();
-          }
-
           const rootChildAST = customPropertyValue.clone();
           transformVariables(rootChildAST, opts);
-          customPropertyValue = opts.customProperties[variableName] = rootChildAST;
+          customPropertyValue = rootChildAST;
+        } // replace var() with the custom property value
+
+
+        if (customPropertyValue.nodes.length === 1 && customPropertyValue.nodes[0].nodes.length) {
+          customPropertyValue.nodes[0].nodes.forEach(customPropertyChild => {
+            child.parent.insertBefore(child, customPropertyChild);
+          });
         }
 
-        child.replaceWith(parser.word({
-          raws: child.raws,
-          value: String(customPropertyValue)
-        }));
-      } else if (fallbackNode) {
+        child.remove();
+      } else if (fallbackNode && fallbackNode.nodes.length === 1 && fallbackNode.nodes[0].nodes.length) {
+        // otherwise, replace var() with the fallback value
         transformVariables(fallbackNode, opts);
-        child.replaceWith(...fallbackNode.nodes[0].nodes);
+        child.replaceWith(...fallbackNode.nodes[0].nodes[0]);
       }
@@ -1757,3 +1765,3 @@ }
           if (colorModFunctionMatch.test(originalValue)) {
-            const ast = parser(originalValue, {
+            const ast = valueParser(originalValue, {
               loose: true
@@ -1760,0 +1768,0 @@ }).parse();

package.json

 {
   "name": "postcss-color-mod-function",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Modify colors using the color-mod() function in CSS",
@@ -5,0 +5,0 @@ "author": "Jonathan Neal <[e-mail]>",

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

Improved metrics

Total package byte prevSize

357866

0.66%

Lines of code

2982

0.27%

No dependency changes