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

package/lib/utils/cssClassNameGenerate.js

@@ -41,33 +41,32 @@ const isSelectorPackage = (resourcePath, packages) => {
 var _default = (unique = true, {
   filenames,
   packages
-}, classNamePrefix, patterns, rootDir) => (context, localIdentName, localName) => {
+}, classNamePrefix, patterns) => (context, localIdentName, localName) => {
   // console.log(patterns, context.resourcePath);
   // NOTE:  in build macine we use date as folder path.
   // So every time we create new build there is path will alway different
   // in order to minmaze that problem we try in relative path;
   // console.log('context.resourcePath', context.resourcePath, context);
   // let contextResourcePath = context.resourcePath;
-  let filePaths = context.resourcePath.split(_path.default.sep);
-  let fileName = filePaths[filePaths.length - 1];
-  let [fileNameWithoutExt] = fileName.split('.');
-  let cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase();
-
-  let relativePath = _path.default.relative(context.rootContext, context.resourcePath);
-  /*
-    input : 
-    context.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
-  
-      patterns.cssVariableReplacement: 
-    // include src folder, include deskapp folder, exclude node modules
-    "cssUniqueness": [
-      "src",
-      "deskapp",
-      "!node_modules"
-    ]
-      rootDir : patternsRootDir : 'supportapp'
-      output : 
-    true or false
+  const filePaths = context.resourcePath.split(_path.default.sep);
+  const fileName = filePaths[filePaths.length - 1];
+  const [fileNameWithoutExt] = fileName.split('.');
+  const cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase();
+
+  const relativePath = _path.default.relative(context.rootContext, context.resourcePath);
+  /*
+    input : 
+    context.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+  
+     patterns.cssVariableReplacement: 
+    // include src folder, include deskapp folder, exclude node modules
+    "cssUniqueness": [
+      "src",
+      "deskapp",
+      "!node_modules"
+    ]
+     output : 
+    true or false
   */
 
 
@@ -77,8 +76,7 @@ var _default = (unique = true, {
 
   if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
     filename: context.resourcePath,
-    filterArr: patterns.cssUniqueness,
-    rootDir
+    filterArr: patterns.cssUniqueness
   })) {
     return `${classNamePrefix}-${cleanFileName}-${localName}`;
   }
@@ -86,7 +84,7 @@ var _default = (unique = true, {
 
 
   if (unique) {
-    let h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
+    const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
     return `${classNamePrefix}${h}`;
   } //css file has casesensitive selector issue so can't toLowerCase
   //let local = localName.toLowerCase()

package/lib/utils/resultSchema.json

@@ -1,73 +1,73 @@
-{
-  "jobDetails": {
-    "isTriggeredFromGit": true,
-    "isCIPassed": true,
-    "developerName": "GITLAB_USER_NAME",
-    "jobID": "CI_PIPELINE_ID",
-    "branchName": "CI_COMMIT_REF_NAME",
-    "commitMessage": "CI_COMMIT_MESSAGE",
-    "jobURL": "CI_JOB_URL",
-    "isByManual": "CI_JOB_MANUAL",
-    "commitID": "CI_COMMIT_SHA",
-    "executionTime": "Date.now()-Date.now()",
-    "hostName": "kathir-zt252"
-  },
-  "tests": {
-    "unitCase": {
-      "startTime": "123455",
-      "endTime": "123446",
-      "isExecuted": true,
-      "numberOfSuccess": "",
-      "numberOfFails": "",
-      "numberOfCases": "",
-      "numberOfSuites": "",
-      "fileDetail": {
-        "fileName": "sample.spec.js",
-        "caseDetail": {
-          "failedCaseLists": [],
-          "passedCaseList": []
-        }
-      },
-      "coverageDetail": {
-        "codeCoveragePercentage": "",
-        "fileCoveragePercentage": ""
-      }
-    },
-    "modifiedFileUnitCase": {
-      "hasChanges": "true",
-      "startTime": "123455",
-      "endTime": "123446",
-      "isExecuted": true,
-      "isPassed": true,
-      "numberOfSuccess": "",
-      "numberOfFails": "",
-      "numberOfCases": "",
-      "numberOfSuites": "",
-      "fileDetail": {
-        "fileName": "sample.spec.js",
-        "caseDetail": {
-          "failedCaseLists": [],
-          "passedCaseList": []
-        }
-      },
-      "coverageDetail": {
-        "codeCoveragePercentage": "",
-        "fileCoveragePercentage": ""
-      }
-    },
-    "screenshotTest": {
-      "message": "some",
-      "startTime": "123455",
-      "endTime": "123446",
-      "isThisExecuted": true,
-      "compareBranch": "master",
-      "isPassed": true,
-      "result": {
-        "numberOfComponents": 200,
-        "numberOfDiffFiles": 20,
-        "improperDocsList": [],
-        "erroredComponents": []
-      }
-    }
-  }
-}
+{
+  "jobDetails": {
+    "isTriggeredFromGit": true,
+    "isCIPassed": true,
+    "developerName": "GITLAB_USER_NAME",
+    "jobID": "CI_PIPELINE_ID",
+    "branchName": "CI_COMMIT_REF_NAME",
+    "commitMessage": "CI_COMMIT_MESSAGE",
+    "jobURL": "CI_JOB_URL",
+    "isByManual": "CI_JOB_MANUAL",
+    "commitID": "CI_COMMIT_SHA",
+    "executionTime": "Date.now()-Date.now()",
+    "hostName": "kathir-zt252"
+  },
+  "tests": {
+    "unitCase": {
+      "startTime": "123455",
+      "endTime": "123446",
+      "isExecuted": true,
+      "numberOfSuccess": "",
+      "numberOfFails": "",
+      "numberOfCases": "",
+      "numberOfSuites": "",
+      "fileDetail": {
+        "fileName": "sample.spec.js",
+        "caseDetail": {
+          "failedCaseLists": [],
+          "passedCaseList": []
+        }
+      },
+      "coverageDetail": {
+        "codeCoveragePercentage": "",
+        "fileCoveragePercentage": ""
+      }
+    },
+    "modifiedFileUnitCase": {
+      "hasChanges": "true",
+      "startTime": "123455",
+      "endTime": "123446",
+      "isExecuted": true,
+      "isPassed": true,
+      "numberOfSuccess": "",
+      "numberOfFails": "",
+      "numberOfCases": "",
+      "numberOfSuites": "",
+      "fileDetail": {
+        "fileName": "sample.spec.js",
+        "caseDetail": {
+          "failedCaseLists": [],
+          "passedCaseList": []
+        }
+      },
+      "coverageDetail": {
+        "codeCoveragePercentage": "",
+        "fileCoveragePercentage": ""
+      }
+    },
+    "screenshotTest": {
+      "message": "some",
+      "startTime": "123455",
+      "endTime": "123446",
+      "isThisExecuted": true,
+      "compareBranch": "master",
+      "isPassed": true,
+      "result": {
+        "numberOfComponents": 200,
+        "numberOfDiffFiles": 20,
+        "improperDocsList": [],
+        "erroredComponents": []
+      }
+    }
+  }
+}

package/lib/utils/variableConverter.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _windowsModification = require("../loaderUtils/windowsModification");
-
 var _fileHandling = require("../plugins/utils/fileHandling");
 
 var _getOptions = _interopRequireDefault(require("./getOptions"));
 
 var _folderIterator = _interopRequireDefault(require("./folderIterator"));
 
+var _variableConvertorUtils = require("../plugins/variableConvertorUtils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const postcss = require('postcss');
@@ -18,149 +18,39 @@ const fs = require('fs');
 
 const postcssVariableConvertor = require('../postcss-plugins/variableModificationPlugin/index').plugin;
 
-let cwd = process.cwd();
-let src = path.join(cwd, process.argv[2]);
-let dist = path.join(cwd, process.argv[3]);
+const cwd = process.cwd();
+const src = path.join(cwd, process.argv[2]);
+const dist = path.join(cwd, process.argv[3]);
 const options = (0, _getOptions.default)();
-const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_'];
-
-function extractVariableName(val) {
-  return val.replace(/calc\((.+)\)/gi, '$1').replace(/var\((.+)\)/gi, '$1').replace('-1', '').replace('*', '').replace('\n', '').trim();
-}
-
-function isIgnoreValuePresent(ignoreVals, prop) {
-  let present = false;
-  ignoreVals.forEach(issue => {
-    if (prop && prop.includes(issue)) {
-      present = true;
-    }
-  });
-  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) => {
-      const prevNode = rule.nodes[index - 1];
-      const currentNode = rule.nodes[index];
-
-      if (decl.prop && decl.prop.includes('--')) {
-        if (prevNode && prevNode.type === 'comment' && prevNode.text.toLowerCase() === 'variable:ignore') {
-          return;
-        }
-
-        if (isIgnoreValuePresent(ignoreVals, decl.prop)) {
-          return;
-        }
-
-        if (settingsObject[variables[decl.prop]]) {
-          /* if there is no value for property, set it to default so that undefined doesn't get called as key */
-          if (!variables[decl.prop]) {
-            variables[decl.prop] = 'default';
-          }
-
-          const pxReplacement = settingsObject[variables[decl.prop]].replacements.px;
-          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);
-            }
-          });
-          currentNode.value = valArr.join(' ');
-        }
-      }
-    });
-  });
-  return rootOriginal;
-}
 
 function watchHandler(fromPath, toPath) {
-  let css = fs.readFileSync(fromPath, 'utf-8'); // console.log(css);
+  const css = fs.readFileSync(fromPath, 'utf-8'); // console.log(css);
 
   const {
-    css: cssOptions,
-    app: appOptions
+    css: cssOptions
   } = options; // console.log(cssOptions, appOptions);
 
   const {
     cssVariableReplacementConfig: cssVariableConfigFilePath,
-    patterns: cssPatterns
+    patterns: filterArr
   } = cssOptions;
-  const {
-    cssVariableReplacementConfig: appVariableConfigFilePath,
-    patterns: appPatterns
-  } = appOptions;
-  const cssVariableOptions = cssVariableConfigFilePath && cssVariableConfigFilePath !== '' ? cssVariableConfigFilePath : appVariableConfigFilePath;
-  const filterArr = cssOptions && cssPatterns && cssPatterns.cssVariableReplacement && cssPatterns.cssVariableReplacement !== {} ? cssPatterns.cssVariableReplacement : appPatterns.cssVariableReplacement;
   const rootOriginal = postcss.parse(css);
   const variables = {}; // const unassigned = {};
 
-  const rawdata = fs.readFileSync(cssVariableOptions);
-  const data = JSON.parse(rawdata);
+  const rawdata = fs.readFileSync(cssVariableConfigFilePath).toString();
+  const cssVariableOptions = JSON.parse(rawdata);
   const {
     settings: settingsObject // errorLog: errorLogStatus,
     // errorInConsole: errorConsoleStatus,
     // errorsAllowed,
     // strictMode
 
-  } = data;
+  } = cssVariableOptions;
   rootOriginal.walkRules(rule => {
     rule.walkDecls(decl => {
       decl.value.split(' ').forEach(val => {
-        if (val && val.includes('--') && !new RegExp(ignoreVals.join('|'), 'gi').test(val) && decl.prop) {
-          const extractedValue = extractVariableName(val);
+        if (val && val.includes('--') && !new RegExp(_variableConvertorUtils.ignoreVals.join('|'), 'gi').test(val) && decl.prop) {
+          const extractedValue = (0, _variableConvertorUtils.extractVariableName)(val);
 
           if (!variables[extractedValue]) {
             variables[extractedValue] = decl.prop;
@@ -169,23 +59,20 @@ function watchHandler(fromPath, toPath) {
       });
     });
   });
-  const strArray = (0, _windowsModification.windowsModificationFile)(process.cwd()).split('\\');
-  const lastElem = strArray[strArray.length - 1].toString();
 
   if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
     filename: fromPath,
-    filterArr,
-    rootDir: lastElem
+    filterArr
   })) {
     return;
   }
 
-  const convertedCode = variableConverter(rootOriginal, variables, settingsObject).toString(); // if (convertedCode.trim() !== '') {
+  const convertedCode = (0, _variableConvertorUtils.variableConverter)(rootOriginal, variables, settingsObject).toString(); // if (convertedCode.trim() !== '') {
   //   fs.writeFileSync(fromPath, convertedCode);
   // }
   // console.log(convertedCode);
 
-  postcss([postcssVariableConvertor(cssVariableOptions)]).process(convertedCode, {
+  postcss([postcssVariableConvertor(cssVariableConfigFilePath)]).process(convertedCode, {
     from: undefined
   }).then(result => {
     fs.writeFileSync(toPath, result.css);