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

package/lib/plugins/ServiceWorkerPlugin.js

@@ -51,11 +51,11 @@ class ServiceWorkerPlugin {
         if (err) {
           throw new Error(err);
         } else {
-          /* const extractedChunks = compilation.chunks.filter(chunk => {
-            if ('canBeInitial' in chunk) {
-              return chunk.canBeInitial();
-            }
-            return chunk.isInitial();
+          /* const extractedChunks = compilation.chunks.filter(chunk => {
+            if ('canBeInitial' in chunk) {
+              return chunk.canBeInitial();
+            }
+            return chunk.isInitial();
           }); */
           // let [js, css, , , i18nPublicPath] = this.publicPaths;
           // let initialChunkUrls = [];
@@ -64,10 +64,10 @@ class ServiceWorkerPlugin {
           let entrypoint = compilation.entrypoints.get('main');
           let initialChunkUrls = entrypoint.getFiles();
           const cssDirTemplate = '@dir@';
-          /**
-           * NOTE:
-           *  if chunkSplitEnable is false means,
-           *    serviceWorker will get i18n files path for html
+          /**
+           * NOTE:
+           *  if chunkSplitEnable is false means,
+           *    serviceWorker will get i18n files path for html
            */
 
           let initalI18nAssets = chunkSplitEnable ? entrypoint.chunks.filter(chunk => _I18nKeysIdentifer.default.isChunkHasI18n(chunk)).map(chunk => (0, _getI18nFileUrlPathTemplate.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, '@locale@')) : [];

package/lib/plugins/TPHashMappingPlugin.js

@@ -15,10 +15,10 @@ var _crypto = _interopRequireDefault(require("crypto"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * Plugin that generates hash for the provided list of third party files
- * Map the provided key with the file hash and add it to the list of exisiting global constants.
- * Plugin in turn uses the defineplugin to generate global constants. 
+/**
+ * Plugin that generates hash for the provided list of third party files
+ * Map the provided key with the file hash and add it to the list of exisiting global constants.
+ * Plugin in turn uses the defineplugin to generate global constants. 
  */
 class TPHashMappingPlugin {
   constructor(options) {

package/lib/plugins/VariableConversionCollector.js

@@ -11,12 +11,13 @@ var _ErrorHandler = require("../postcss-plugins/variableModificationPlugin/Error
 
 var _fileHandling = require("./utils/fileHandling");
 
+var _variableConvertorUtils = require("./variableConvertorUtils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { RawSource } from 'webpack-sources';
 const fs = require('fs');
 
-const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_'];
 let variablesRead = {};
 
 const {
@@ -25,134 +26,18 @@ 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'];
-
-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 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']; // -- to convert the hyphen values to values --
 
-  const num1 = parts[0].trim(); // Parse the second part as a number
+/*
+input : 
+var(--zdt_uploadlist_default_width)
+output : 
+--zdt_uploadlist_default_width
 
-  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 --
-
-/*
-issues eg : 
-issues = ['--zd_size', '--zd_font_size', '--size', '--size_'];
-input : 
---zd_size
-output : 
-true
-comment : 
-do not execute when --zd_size comes as prop 
+comment : 
+to make the variable object using the output as key and decl.prop such as font-size as value 
 */
 
-
-function isIgnoreValuePresent(ignoreVals, prop) {
-  let present = false;
-  ignoreVals.forEach(issue => {
-    if (prop && prop.includes(issue)) {
-      present = true;
-    }
-  });
-  return present;
-} // -- to convert the hyphen values to values --
-
-/*
-input : 
-var(--zdt_uploadlist_default_width)
-output : 
---zdt_uploadlist_default_width
-
-comment : 
-to make the variable object using the output as key and decl.prop such as font-size as value 
-*/
-
-
-function extractVariableName(val) {
-  return val.replace(/calc\((.+)\)/gi, '$1').replace(/var\((.+)\)/gi, '$1').replace('-1', '').replace('*', '').replace('\n', '').trim();
-}
-
-function variableConvertor(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 createFolderIfNonExistant(path) {
   if (!fs.existsSync(path)) {
     fs.mkdirSync(path, {
@@ -171,8 +56,7 @@ class VariableConversionCollector {
   constructor(options = {}) {
     this.optimize = options.optimize;
     this.filename = options.cssVariableReplacementConfig;
-    this.patterns = options.patterns;
-    this.rootDir = options.patternsRootDir; // console.log(options.patterns, this.patterns);
+    this.patterns = options.patterns; // console.log(options.patterns, this.patterns);
 
     this.initializeFiles();
   }
@@ -211,13 +95,13 @@ class VariableConversionCollector {
         }
       };
     }
-    /* 
-    purpose of tap : to create a variable object such as:
-    {
-      --zdt_uploadlist_default_width : width,
-      --zdt_uploadlist_default_height : height,
-    }
-    which will help in the conversion further
+    /* 
+    purpose of tap : to create a variable object such as:
+    {
+      --zdt_uploadlist_default_width : width,
+      --zdt_uploadlist_default_height : height,
+    }
+    which will help in the conversion further
     */
 
 
@@ -240,8 +124,8 @@ class VariableConversionCollector {
             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;
@@ -269,19 +153,19 @@ class VariableConversionCollector {
                 });
               });
             });
-            /*
-             current value example: 
-             {
-                --zdt_uploadlist_default_width : --zd_upload_width,
-                --zd_upload_width : width
-             }
-             expected value : 
-             {
-               --zdt_uploadlist_default_width : width,
-               --zd_upload_width : width
-             }
-            
-             conversion is done in the while loop below
+            /*
+             current value example: 
+             {
+                --zdt_uploadlist_default_width : --zd_upload_width,
+                --zd_upload_width : width
+             }
+             expected value : 
+             {
+               --zdt_uploadlist_default_width : width,
+               --zd_upload_width : width
+             }
+            
+             conversion is done in the while loop below
             */
 
             Object.keys(variables).forEach(key => {
@@ -293,60 +177,58 @@ class VariableConversionCollector {
         });
       }); // -- conversion for the root using variableConvertor --
 
-      /* 
-      input : 
-      .a{
-        padding : 20px 
-      }
-      output :
-      // on settingObject file : 
-      { padding : { replacements : { px : 'zd_size$$' }}} 
-      .a{
-        padding : zd_size20;
-      }
+      /* 
+      input : 
+      .a{
+        padding : 20px 
+      }
+      output :
+      // on settingObject file : 
+      { padding : { replacements : { px : 'zd_size$$' }}} 
+      .a{
+        padding : zd_size20;
+      }
       */
 
       compilation.hooks.optimizeModules.tap('VariableConversionCollector', modules => {
         const mods = modules.filter(x => x.type.includes('css'));
         mods.forEach(module => {
           const filename = module.issuer.resource;
-          /*
-            input : 
-            filename : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
-          
-              patterns.cssVariableReplacement: 
-            // include src folder, include deskapp folder, exclude node modules
-            "cssVariableReplacement": [
-              "src",
-              "deskapp",
-              "!node_modules"
-            ]
-              rootDir : patternsRootDir : 'supportapp'
-            
-            output : 
-            true or false
+          /*
+            input : 
+            filename : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+          
+             patterns.cssVariableReplacement: 
+            // include src folder, include deskapp folder, exclude node modules
+            "cssVariableReplacement": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ]
+             
+            output : 
+            true or false
           */
 
           if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
             filename,
-            filterArr: this.patterns.cssVariableReplacement,
-            rootDir: this.rootDir
+            filterArr: this.patterns.cssVariableReplacement
           })) {
             return;
           }
 
           const rootOriginal = _postcss.default.parse(module.content);
 
-          module.content = variableConvertor(rootOriginal, variables, settingsObject).toString();
+          module.content = (0, _variableConvertorUtils.variableConverter)(rootOriginal, variables, settingsObject).toString();
         });
       });
     });
-    /*
-      purpose of tap : to display the errors encountered so far 
-      input : 
-      all css files 
-      output : 
-      all errors that are present in the errTable arr
+    /*
+      purpose of tap : to display the errors encountered so far 
+      input : 
+      all css files 
+      output : 
+      all errors that are present in the errTable arr
     */
 
     compiler.hooks.afterEmit.tap('error-display', () => {

package/lib/plugins/utils/classHandling.js

@@ -5,10 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.hasPrevNodeIgnore = hasPrevNodeIgnore;
 exports.isAtRule = isAtRule;
+exports.isComment = isComment;
+exports.isCommentContentSame = isCommentContentSame;
 exports.isInsideMediaQuery = isInsideMediaQuery;
+exports.isThisComment = isThisComment;
+
+function isComment(node) {
+  return node && node.type && node.type === 'comment';
+}
+
+function isCommentContentSame(node, content) {
+  return node.text.toLowerCase() === content;
+}
+
+function isThisComment(node, ignoreComment) {
+  return isComment(node) && isCommentContentSame(node, ignoreComment);
+}
 
 function hasPrevNodeIgnore(index, prevNode, ignoreComment) {
-  return index !== 0 && prevNode && prevNode.type && prevNode.type === 'comment' && prevNode.text.toLowerCase() === ignoreComment;
+  return index !== 0 && isThisComment(prevNode, ignoreComment);
 }
 
 function isAtRule(rule) {

package/lib/plugins/utils/fileHandling.js

@@ -23,10 +23,10 @@ let aliasNames = {
   cssVariableReplacement: 'postcss-variable-report',
   composeMinification: 'postcss-compose-plugin'
 };
-/*
-
-unique scenario
-
+/*
+
+unique scenario
+
 */
 // export function filterFileCssUniqueness(filename, filterObj) {
 //   let rootDir = 'supportapp';
@@ -48,13 +48,12 @@ unique scenario
 function isFileNameMatchingPattern({
   filename,
   filterObject,
-  plugins,
-  rootDir
+  plugins
 }) {
   const finalPlugins = []; // console.log(rootDir);
   // const regex = `^(.+?)${rootDir}?\\\\`;
 
-  const newFilename = path.relative(rootDir, filename); //windowsModificationFile(filename).replace(
+  const newFilename = path.relative(path.parse(process.cwd()).base, filename); //windowsModificationFile(filename).replace(
   //   new RegExp(regex, 'gi'),
   //   ''
   // );
@@ -83,14 +82,15 @@ function isFileNameMatchingPattern({
 
 function isFileNameMatchingPluginPattern({
   filename,
-  filterArr,
-  rootDir
+  filterArr // =process.cwd()
+
 }) {
+  // console.log(rootDir);
   let include = true; // console.log(rootDir);
   // const regex = `^(.+?)${rootDir}?\\\\`;
   // console.log(plugin);
 
-  const newFilename = path.relative(rootDir, filename); // const newFilename = windowsModificationFile(filename).replace(
+  const newFilename = path.relative(path.parse(process.cwd()).base, filename); // const newFilename = windowsModificationFile(filename).replace(
   //   new RegExp(regex, 'gi'),
   //   ''
   // );

package/lib/plugins/variableConvertorUtils.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractVariableName = extractVariableName;
+exports.ignoreVals = void 0;
+exports.variableConverter = variableConverter;
+
+var _classHandling = require("./utils/classHandling");
+
+const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_']; // const avoidProps = [];
+// -- is issue IO --
+
+/*
+issues eg : 
+issues = ['--zd_size', '--zd_font_size', '--size', '--size_'];
+input : 
+--zd_size
+output : 
+true
+comment : 
+do not execute when --zd_size comes as prop 
+*/
+
+exports.ignoreVals = ignoreVals;
+
+function extractVariableName(val) {
+  return val.replace(/calc\((.+)\)/gi, '$1').replace(/var\((.+)\)/gi, '$1').replace('-1', '').replace('*', '').replace('\n', '').trim();
+}
+
+function isIgnoreValuePresent(ignoreVals, prop) {
+  return ignoreVals.some(ignoreVal => prop && prop.includes(ignoreVal)); // let present = false;
+  // return ignoreVals.forEach(issue => {
+  //   if (prop && prop.includes(issue)) {
+  //     present = true;
+  //   }
+  // });
+  // return present;
+}
+
+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 convertCalcValue(pxReplacement, parsedValue) {
+  Object.keys(parsedValue).forEach(key => {
+    if (parsedValue[key].includes('px')) {
+      parsedValue[key] = pxReplacement.replace('$$', parsedValue[key].replace('px', ''));
+    }
+  });
+  return parsedValue;
+}
+
+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 ((0, _classHandling.isThisComment)(prevNode, 'variable:ignore') // 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;
+}

package/lib/postcss-plugins/RTLSplitPlugin.js

@@ -37,11 +37,11 @@ function selectorMinifySameDir(selector, direction) {
   const regex = getRegex(direction);
   return selector.replace(regex, '').trim();
 }
-/**
- * this funtion will remove given rule,
- *  if given selector and it's previous sibiling rule selector  are same
- * current rule properties will move to previous sibiling rule.
- * @param {Rule} rule current rule
+/**
+ * this funtion will remove given rule,
+ *  if given selector and it's previous sibiling rule selector  are same
+ * current rule properties will move to previous sibiling rule.
+ * @param {Rule} rule current rule
  */
 
 
@@ -56,11 +56,11 @@ function mergeIfSameSelector(rule) {
     rule.remove();
   }
 }
-/**
- * this funtion will remove given rule,
- *  if given selector and it's previous sibiling rule selector  are same
- * current rule properties will move to previous sibiling rule.
- * @param {Rule} rule current rule
+/**
+ * this funtion will remove given rule,
+ *  if given selector and it's previous sibiling rule selector  are same
+ * current rule properties will move to previous sibiling rule.
+ * @param {Rule} rule current rule
  */