@zohodesk/react-cli 1.1.7 → 1.1.8-exp.1

package/lib/plugins/SelectorPlugin.js

@@ -86,20 +86,20 @@ class SelectorPlugin {
           const rootOriginal = _postcss.default.parse(module.content);
 
           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
-              "selectorWeight": [
-                "src",
-                "deskapp",
-                "!node_modules"
-              ]
-               
-              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
+              "selectorWeight": [
+                "src",
+                "deskapp",
+                "!node_modules"
+              ]
+                
+              output : 
+              true or false
             */
 
           if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
@@ -108,21 +108,21 @@ class SelectorPlugin {
           })) {
             return;
           }
-          /*
-           
-          filename : Deskapp.module.css ?
-           data : 
-          {
-              "DeskApp.module.css": {"defaultSelector" : ".desk_app_ui "}
-          }
-             selectorWeightConfig : 
-           defaultSelector : .zoho_desk_ui
-          
-          case filename = 'DeskApp.module.css' ? 
-          data[filename].defaultSelector = '.desk_app_ui' 
-           case filename is different ?
-          defaultSelector = '.zoho_desk_ui'
-           */
+          /*
+           
+          filename : Deskapp.module.css ?
+            data : 
+          {
+              "DeskApp.module.css": {"defaultSelector" : ".desk_app_ui "}
+          }
+              selectorWeightConfig : 
+            defaultSelector : .zoho_desk_ui
+          
+          case filename = 'DeskApp.module.css' ? 
+          data[filename].defaultSelector = '.desk_app_ui' 
+            case filename is different ?
+          defaultSelector = '.zoho_desk_ui'
+            */
 
 
           module.content = selectorWeightPrefixAdder(rootOriginal, data[filename] ? data[filename].defaultSelector : defaultSelector, excludeStrings).toString();

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

@@ -28,14 +28,14 @@ const {
 
 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 --
 
-/*
-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 
+/*
+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 createFolderIfNonExistant(path) {
@@ -95,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
     */
 
 
@@ -153,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 => {
@@ -177,37 +177,37 @@ 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"
-            ]
-             
-            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)({
@@ -223,12 +223,12 @@ class VariableConversionCollector {
         });
       });
     });
-    /*
-      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/fileHandling.js

@@ -6,15 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.isFileNameMatchingPattern = isFileNameMatchingPattern;
 exports.isFileNameMatchingPluginPattern = isFileNameMatchingPluginPattern;
 
-var _windowsModification = require("../../loaderUtils/windowsModification");
-
 var _ignore = _interopRequireDefault(require("ignore"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const path = require('path');
 
-let aliasNames = {
+const aliasNames = {
   valueReplacer: 'postcss-value-replacer',
   selectorReplace: 'postcss-selector-replace-new',
   hasRTL: 'postcss-rtl',
@@ -23,10 +21,10 @@ let aliasNames = {
   cssVariableReplacement: 'postcss-variable-report',
   composeMinification: 'postcss-compose-plugin'
 };
-/*
-
-unique scenario
-
+/*
+
+unique scenario
+
 */
 // export function filterFileCssUniqueness(filename, filterObj) {
 //   let rootDir = 'supportapp';
@@ -48,48 +46,43 @@ unique scenario
 function isFileNameMatchingPattern({
   filename,
   filterObject,
-  plugins
+  plugins,
+  order
 }) {
+  const pluginObj = {};
+  plugins.forEach(p => {
+    pluginObj[p.postcssPlugin] = p;
+  });
   const finalPlugins = [];
-  Object.keys(filterObject).forEach(key => {
-    plugins.forEach(x => {
-      if (aliasNames[key] === x.postcssPlugin) {
-        const ig = (0, _ignore.default)({
-          allowRelativePaths: true
-        }).add(filterObject[key]);
-
-        if (ig.ignores(filename)) {
-          finalPlugins.push(x);
-        }
+  order.forEach(key => {
+    const p = pluginObj[aliasNames[key]];
+    const pluginSpecificFilter = filterObject[key];
+
+    if (!pluginSpecificFilter || pluginSpecificFilter.length === 0) {
+      finalPlugins.push(p);
+    } else {
+      // eslint-disable-next-line no-use-before-define
+      const isMatching = isFilePathMatchingPattern(filename, pluginSpecificFilter);
+
+      if (isMatching) {
+        finalPlugins.push(p);
       }
-    });
-  }); // console.log(filename);
+    }
+  });
+  return finalPlugins;
+}
 
-  return finalPlugins; // console.log(filename, filterObject);
+function isFilePathMatchingPattern(filePath, patterns) {
+  const ig = (0, _ignore.default)({
+    allowRelativePaths: true
+  }).add(patterns);
+  return ig.ignores(filePath);
 }
 
 function isFileNameMatchingPluginPattern({
   filename,
-  filterArr // =process.cwd()
-
+  filterArr
 }) {
-  // console.log(rootDir);
-  let include = true; // console.log(rootDir);
-  // const regex = `^(.+?)${rootDir}?\\\\`;
-  // console.log(plugin);
-
-  const newFilename = path.relative(path.parse(process.cwd()).base, filename); // const newFilename = windowsModificationFile(filename).replace(
-  //   new RegExp(regex, 'gi'),
-  //   ''
-  // );
-
-  const ig = (0, _ignore.default)({
-    allowRelativePaths: true
-  }).add(filterArr);
-
-  if (!ig.ignores(newFilename)) {
-    include = false;
-  }
-
-  return include;
+  const newFilename = path.relative(path.parse(process.cwd()).base, filename);
+  return isFilePathMatchingPattern(newFilename, filterArr);
 }

package/lib/plugins/variableConvertorUtils.js

@@ -12,15 +12,15 @@ 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 
+/*
+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;

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
  */
 
 

package/lib/postcss-plugins/__test__/test1Input.css

@@ -1,39 +1,39 @@
-/*Hover_active:ignore*/
-g,a:hover{
-	color : red
-}
-/*Hover:ignore*/
-h:hover{
-background : yellow
-}
-
-/* Hover_active:ignore */
-g,d+e:hover{
-	color : black
-}
-
-g,d e:hover{
-	color : black
-}
-
-@media screen and (max-width:61.25em){
-  /* Hover_active:ignore */
-  a,b,a:hover, b:hover{
-  background-color : blue
-  }
-  a + b,a:hover + b:hover{
-  background-color : blue
-  }
-  a b:hover{
-  background-color : blue
-  }
-  
-  .cc:hover {
-    color: red;
-  }
-
-  c:hover{
-  color : red
-  }
-  
+/*Hover_active:ignore*/
+g,a:hover{
+	color : red
+}
+/*Hover:ignore*/
+h:hover{
+background : yellow
+}
+
+/* Hover_active:ignore */
+g,d+e:hover{
+	color : black
+}
+
+g,d e:hover{
+	color : black
+}
+
+@media screen and (max-width:61.25em){
+  /* Hover_active:ignore */
+  a,b,a:hover, b:hover{
+  background-color : blue
+  }
+  a + b,a:hover + b:hover{
+  background-color : blue
+  }
+  a b:hover{
+  background-color : blue
+  }
+  
+  .cc:hover {
+    color: red;
+  }
+
+  c:hover{
+  color : red
+  }
+  
 }

package/lib/postcss-plugins/__test__/test1Output.css

@@ -1,39 +1,39 @@
-/*Hover_active:ignore*/
-g,a:hover{
-	color : red
-}
-/*Hover:ignore*/
-h:hover{
-background : yellow
-}
-
-/* Hover_active:ignore */
-g,d+e:hover{
-	color : black
-}
-
-g,d e:hover{
-	color : black
-}
-
-@media screen and (max-width:61.25em){
-  /* Hover_active:ignore */
-  a,b,a:hover, b:hover{
-  background-color : blue
-  }
-  a + b,a:hover + b:hover{
-  background-color : blue
-  }
-  a b:hover{
-  background-color : blue
-  }
-  
-  .cc:hover {
-    color: red;
-  }
-
-  c:hover{
-  color : red
-  }
-  
+/*Hover_active:ignore*/
+g,a:hover{
+	color : red
+}
+/*Hover:ignore*/
+h:hover{
+background : yellow
+}
+
+/* Hover_active:ignore */
+g,d+e:hover{
+	color : black
+}
+
+g,d e:hover{
+	color : black
+}
+
+@media screen and (max-width:61.25em){
+  /* Hover_active:ignore */
+  a,b,a:hover, b:hover{
+  background-color : blue
+  }
+  a + b,a:hover + b:hover{
+  background-color : blue
+  }
+  a b:hover{
+  background-color : blue
+  }
+  
+  .cc:hover {
+    color: red;
+  }
+
+  c:hover{
+  color : red
+  }
+  
 }

package/lib/postcss-plugins/hoverActivePlugin.js

@@ -4,9 +4,9 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * we have give support for ignore(exclude) comments
- * These are the comments' keyword
+/**
+ * we have give support for ignore(exclude) comments
+ * These are the comments' keyword
  */
 const hoverIgnoreQuery = 'Hover:ignore',
       activeIgnoreQuery = 'Active:ignore',