@zohodesk/react-cli 1.0.3-exp.3 → 1.0.3-exp.5

package/lib/plugins/VariableConversionCollector.js

@@ -25,7 +25,38 @@ const {
   errHandler
 } = require('../postcss-plugins/variableModificationPlugin/index');
 
-const supportedProps = ['font-size', 'margin', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right', 'padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', '^top', '^right', '^bottom', '^left', '^width', 'min-width', 'max-width', '^height', 'min-height', 'max-height', 'text-indent', 'clip', 'flex-basis', 'row-gap', 'gap', 'column-gap', 'flex']; // const avoidProps = [];
+const supportedProps = ['font-size', 'margin', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right', 'padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', '^top', '^right', '^bottom', '^left', '^width', 'min-width', 'max-width', '^height', 'min-height', 'max-height', 'text-indent', 'clip', 'flex-basis', 'row-gap', 'gap', 'column-gap', 'flex'];
+
+function convertCalcValue(pxReplacement, parsedValue) {
+  Object.keys(parsedValue).forEach(key => {
+    if (parsedValue[key].includes('px')) {
+      parsedValue[key] = pxReplacement.replace('$$', parsedValue[key].replace('px', ''));
+    }
+  });
+  return parsedValue;
+}
+
+function parseCalcValue(calcValue) {
+  // Remove "calc(" and ")" from the string
+  const value = calcValue.replace(/calc\(/gi, '').replace(/\)/gi, '').trim(); // Split the string by "*" or "/"
+
+  const parts = value.split(/[\\/*]/); // Parse the first part as a number
+
+  const num1 = parts[0].trim(); // Parse the second part as a number
+
+  const num2 = parts[1].trim();
+  return {
+    valOne: num1,
+    valTwo: num2
+  };
+}
+
+function convertToCalc(pxReplacement, value) {
+  const parsedValue = parseFloat(value, 10);
+  const sign = parsedValue < 0 ? '-' : '';
+  const varName = `${parsedValue < 0 ? parsedValue * -1 : parsedValue}`;
+  return `calc( ${pxReplacement.replace('$$', varName)} * ${sign}1 )`;
+} // const avoidProps = [];
 // -- is issue IO --
 
 /*
@@ -39,6 +70,7 @@ comment :
 do not execute when --zd_size comes as prop 
 */
 
+
 function isIgnoreValuePresent(ignoreVals, prop) {
   let present = false;
   ignoreVals.forEach(issue => {
@@ -89,6 +121,25 @@ function variableConvertor(rootOriginal, variables, settingsObject) {
           const valArr = decl.value.split(' '); // single values are considered in the above array and converted below
 
           valArr.forEach((value, index) => {
+            if (value.includes('px')) {
+              if (value.includes('calc')) {
+                const res = convertCalcValue(pxReplacement, parseCalcValue(value));
+                valArr[index] = `calc( ${res.valOne.trim()} * ${res.valTwo.trim()} )`;
+                return;
+              }
+
+              if (/-(\d+)/gi.test(value)) {
+                valArr[index] = convertToCalc(pxReplacement, value);
+                return;
+              }
+
+              const num = value.replace('px', '');
+
+              if (value) {
+                valArr[index] = pxReplacement.replace('$$', num);
+              }
+            }
+
             if (value.includes('px')) {
               const num = value.replace('px', '');
               valArr[index] = pxReplacement.replace('$$', num);

package/lib/postcss-plugins/variableModificationPlugin/index.js

@@ -89,6 +89,7 @@ function pxToCalc(value) {
       }
     });
   });
+  console.log(arr.join(' '));
   return arr.join(' ');
 }
 

package/lib/utils/variableConverter.js

@@ -38,6 +38,37 @@ function isIgnoreValuePresent(ignoreVals, prop) {
   return present;
 }
 
+function convertCalcValue(pxReplacement, parsedValue) {
+  Object.keys(parsedValue).forEach(key => {
+    if (parsedValue[key].includes('px')) {
+      parsedValue[key] = pxReplacement.replace('$$', parsedValue[key].replace('px', ''));
+    }
+  });
+  return parsedValue;
+}
+
+function parseCalcValue(calcValue) {
+  // Remove "calc(" and ")" from the string
+  const value = calcValue.replace(/calc\(/gi, '').replace(/\)/gi, '').trim(); // Split the string by "*" or "/"
+
+  const parts = value.split(/[\\/*]/); // Parse the first part as a number
+
+  const num1 = parts[0].trim(); // Parse the second part as a number
+
+  const num2 = parts[1].trim();
+  return {
+    valOne: num1,
+    valTwo: num2
+  };
+}
+
+function convertToCalc(pxReplacement, value) {
+  const parsedValue = parseFloat(value, 10);
+  const sign = parsedValue < 0 ? '-' : '';
+  const varName = `${parsedValue < 0 ? parsedValue * -1 : parsedValue}`;
+  return `calc( ${pxReplacement.replace('$$', varName)} * ${sign}1 )`;
+}
+
 function variableConverter(rootOriginal, variables, settingsObject) {
   rootOriginal.walkRules(rule => {
     rule.nodes.forEach((decl, index) => {
@@ -63,6 +94,25 @@ function variableConverter(rootOriginal, variables, settingsObject) {
           const valArr = decl.value.split(' '); // single values are considered in the above array and converted below
 
           valArr.forEach((value, index) => {
+            if (value.includes('px')) {
+              if (value.includes('calc')) {
+                const res = convertCalcValue(pxReplacement, parseCalcValue(value));
+                valArr[index] = `calc( ${res.valOne.trim()} * ${res.valTwo.trim()} )`;
+                return;
+              }
+
+              if (/-(\d+)/gi.test(value)) {
+                valArr[index] = convertToCalc(pxReplacement, value);
+                return;
+              }
+
+              const num = value.replace('px', '');
+
+              if (value) {
+                valArr[index] = pxReplacement.replace('$$', num);
+              }
+            }
+
             if (value.includes('px')) {
               const num = value.replace('px', '');
               valArr[index] = pxReplacement.replace('$$', num);
@@ -106,7 +156,6 @@ function watchHandler(fromPath, toPath) {
     // strictMode
 
   } = data;
-  const oldCode = rootOriginal.toString();
   rootOriginal.walkRules(rule => {
     rule.walkDecls(decl => {
       decl.value.split(' ').forEach(val => {
@@ -131,24 +180,15 @@ function watchHandler(fromPath, toPath) {
     return;
   }
 
-  const convertedCode = variableConverter(rootOriginal, variables, settingsObject).toString();
-
-  if (convertedCode.trim() !== '') {
-    fs.writeFileSync(fromPath, convertedCode);
-  } // console.log(convertedCode);
-
+  const convertedCode = variableConverter(rootOriginal, variables, settingsObject).toString(); // if (convertedCode.trim() !== '') {
+  //   fs.writeFileSync(fromPath, convertedCode);
+  // }
+  // console.log(convertedCode);
 
-  postcss([postcssVariableConvertor(cssVariableOptions)]).process(css, {
-    from: fromPath,
-    to: toPath
+  postcss([postcssVariableConvertor(cssVariableOptions)]).process(convertedCode, {
+    from: undefined
   }).then(result => {
     fs.writeFileSync(toPath, result.css);
-
-    if (result.map) {
-      fs.writeFileSync(`${toPath}.map`, result.map);
-    }
-  }).then(() => {
-    fs.writeFileSync(fromPath, oldCode);
   }); // console.log(variableOptions);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.0.3-exp.3",
+  "version": "1.0.3-exp.5",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",