fix: node functions after nested conditions

dimitrinicolas · Jul 6, 2018 · ee946c9 · ee946c9
1 parent 505c8e4
commit ee946c9
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 25 deletions.
diff --git a/index.js b/index.js
@@ -2,14 +2,33 @@ const glob = require('glob');
 const postcss = require('postcss');
 const valueParser = require('postcss-value-parser');
 
+/**
+ * gets string value of a node
+ * @param {Node} node 
+ * @returns {string} node value
+ */
+const getValue = (node) => {
+  if (node.type === 'function') {
+    return valueParser.stringify(node);
+  } else {
+    return node.value;
+  }
+};
+
+/**
+ * parse nodes
+ * @param {Node[]} nodes 
+ * @param {object} opts 
+ * @returns {{ base: {string}, querys: {MediaQuery[]} }}
+ */
 const parse = (nodes, opts) => {
   let base = '';
   let querys = [];
   let nestedQuery = false;
 
   for (let node of nodes) {
     if (node.type === 'function' && node.value === '') {
-      const nested = parse(node.nodes, Object.assign({}, opts, { base: base }));
+      const nested = parse(node.nodes, Object.assign({}, opts, { base }));
 
       for (let nestedQuery of nested.querys) {
         nestedQuery.value = base + nestedQuery.value;
@@ -28,8 +47,7 @@ const parse = (nodes, opts) => {
       for (let item of node.nodes) {
         if (item.type === 'function') {
           querys[querys.length - 1].media += valueParser.stringify(item);
-        }
-        else {
+        } else {
           querys[querys.length - 1].media += ((item.before || '') + item.value + (item.after || ''));
         }
       }
@@ -52,35 +70,25 @@ const parse = (nodes, opts) => {
     else if (querys.length > 0) {
       if (nestedQuery) {
         for (let query of querys) {
-          if (node.type === 'function') {
-            query.value += valueParser.stringify(node);
-          }
-          else {
-            query.value += node.value;
-          }
+          query.value += getValue(node);
         }
       }
       else {
-        if (node.type === 'function') {
-          querys[querys.length - 1].value += valueParser.stringify(node);
-        }
-        else {
-          querys[querys.length - 1].value += node.value;
-        }
+        querys[querys.length - 1].value += getValue(node);
       }
     }
 
-    if (nestedQuery && ['word', 'space'].indexOf(node.type) !== -1) {
-      base += node.value;
+    if (nestedQuery) {
+      if (['word', 'space'].indexOf(node.type) !== -1) {
+        base += getValue(node);
+      }
+      else if (node.type === 'function' && ['', '@'].indexOf(node.value) === -1) {
+        base += getValue(node);
+      }
     }
 
     if (!nestedQuery && querys.length < 1) {
-      if (node.type === 'function') {
-        base += valueParser.stringify(node);
-      }
-      else {
-        base += node.value;
-      }
+      base += getValue(node);
     }
   }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postcss-inline-media",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Media queries shortcut on PostCSS",
   "license": "MIT",
   "main": "index.js",
@@ -31,7 +31,7 @@
     "postcss-value-parser": "^3.3.0"
   },
   "scripts": {
-    "test": "nyc ava",
+    "test": "nyc --reporter=lcov --reporter=text ava",
     "coverage": "nyc report --reporter=text-lcov | coveralls",
     "watch": "nodemon -e js -x \"npm run test\""
   },

diff --git a/test.js b/test.js
@@ -112,6 +112,7 @@ test('simple nested condition', async t => {
 });
 
 test('complex nested condition', async t => {
+  console.log('———');
   const input = 'div { margin: 20px (15px @(print) 10px @(max-width: 800px) 7px) 5px 5px; }';
   const output = [
     'div { margin: 20px 15px 5px 5px; }',
@@ -123,6 +124,18 @@ test('complex nested condition', async t => {
   testPostcss(input, output, t);
 });
 
+test('complex nested condition with function node', async t => {
+  console.log('———');
+  const input = 'div { margin: 20px (15px @(print) 10px) 7px func(8px); }';
+  const output = [
+    'div { margin: 20px 15px 7px func(8px); }',
+    '@media print {',
+    ' div { margin: 20px 10px 7px func(8px); } }'
+  ].join(' ');
+  testPostcss(input, output, t);
+  console.log('—————————');
+});
+
 test('postcss-custom-media', async t => {
   const input = '@custom-media --small-viewport (max-width: 30em); div { margin: 20px @(--small-viewport) 10px; }';
   const output = [