@zohodesk/react-cli 1.0.0-exp.1 → 1.0.1-exp.1

package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js

@@ -24,12 +24,12 @@ const isCss = filename => _path.default.extname(filename) === '.css'; // this  p
 
 class RtlCssPlugin {
   constructor(options = {}) {
-    /**
-     * @typedef {Object} Options
-     * @property  {String} filename [not used]
-     * @property  {String} dirVarName
-     * @property  {Boolean} sourcemap
-     * @property  {Object} config
+    /**
+     * @typedef {Object} Options
+     * @property  {String} filename [not used]
+     * @property  {String} dirVarName
+     * @property  {Boolean} sourcemap
+     * @property  {Object} config
      */
     this.options = {
       filename: options.filename || '[name].rtl.css',

package/lib/plugins/RtlSplitPlugin/RtrSplit.md

@@ -1,30 +1,30 @@
-# RTL Split 
-
-we are doing in build time generating  rtl related css code  by using @zohodesk/postcss-rt npm.
-It was automated, That postcss plugin create rtl reacted css and put them into same file, with css selector [dir=rtl] and ltr realted css with [dir=ltr].
-Here is problem mostly no one need rtl and ltr related css at the same time in browser, 
-we are try to split them  by [dir] and load which type of css is needed.
-For this purpose  we created RTL Split Plugin 
-
-
-# To Try it  out  rtl-ltr split
-### how to use this feature?
-
-  to use this feature use have give the below oprtions
-  `package.json`
-  ```json
-  {
-    /// ...some things
-    "react-cli": {
-      //  ...some things
-      "css": {
-        "enableRTLSplit": true,
-        "templateLabel": "{{--dir}}",// this is for html template css file path dir template
-        "disableMiniFiySelector": false,
-        "dirVarName": "document.dir" // this will be used for download css based on dir  
-      },
-      //  ...some things
-    }
-  }
-  ```
-
+# RTL Split 
+
+we are doing in build time generating  rtl related css code  by using @zohodesk/postcss-rt npm.
+It was automated, That postcss plugin create rtl reacted css and put them into same file, with css selector [dir=rtl] and ltr realted css with [dir=ltr].
+Here is problem mostly no one need rtl and ltr related css at the same time in browser, 
+we are try to split them  by [dir] and load which type of css is needed.
+For this purpose  we created RTL Split Plugin 
+
+
+# To Try it  out  rtl-ltr split
+### how to use this feature?
+
+  to use this feature use have give the below oprtions
+  `package.json`
+  ```json
+  {
+    /// ...some things
+    "react-cli": {
+      //  ...some things
+      "css": {
+        "enableRTLSplit": true,
+        "templateLabel": "{{--dir}}",// this is for html template css file path dir template
+        "disableMiniFiySelector": false,
+        "dirVarName": "document.dir" // this will be used for download css based on dir  
+      },
+      //  ...some things
+    }
+  }
+  ```
+

package/lib/plugins/SelectorPlugin.js

@@ -9,15 +9,21 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _fs = _interopRequireDefault(require("fs"));
 
-var _webpackSources = require("webpack-sources");
+var _windowsModification = require("../loaderUtils/windowsModification");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const path = require('path');
-
-const isCss = filename => path.extname(filename) === '.css';
+function checkFilename(filename, data) {
+  let keyMatch = undefined;
+  Object.keys(data).forEach(key => {
+    if (filename.includes(key)) {
+      keyMatch = key;
+    }
+  });
+  return keyMatch;
+}
 
-function rootConvertor(rootOriginal, defaultSelector, data, chunkFilename, excludeStrings) {
+function rootConvertor(rootOriginal, defaultSelector, data, filename, excludeStrings) {
   rootOriginal.walkRules((rule, index) => {
     const prevNode = rootOriginal.nodes[index - 1];
 
@@ -31,14 +37,14 @@ function rootConvertor(rootOriginal, defaultSelector, data, chunkFilename, exclu
       }
     }
 
-    if (excludeStrings.includes(rule.selector)) {
-      return;
-    }
-
     let ruleArr = rule.selector.split(',');
-    ruleArr.forEach((rule, index) => {
-      if (rule.includes(']')) {
-        if (rule.slice(rule.lastIndexOf(']') + 2).trim() === '') {
+    ruleArr.forEach((ruleStr, index) => {
+      if (excludeStrings.includes(ruleStr.trim())) {
+        return;
+      }
+
+      if (ruleStr.includes(']')) {
+        if (ruleStr.slice(ruleStr.lastIndexOf(']') + 2).trim() === '') {
           return;
         } // console.log(
         //   rule.slice(rule.lastIndexOf(']') + 2).trim(),
@@ -46,22 +52,34 @@ function rootConvertor(rootOriginal, defaultSelector, data, chunkFilename, exclu
         // );
 
 
-        ruleArr[index] = `${rule.slice(0, rule.lastIndexOf(']') + 1).trim()} ${defaultSelector}${rule.slice(rule.lastIndexOf(']') + 2).trim()}`; // console.log(ruleArr[index]);
+        ruleArr[index] = `${ruleStr.slice(0, ruleStr.lastIndexOf(']') + 1).trim()} ${defaultSelector}${ruleStr.slice(ruleStr.lastIndexOf(']') + 2).trim()}`; // console.log(ruleArr[index]);
 
         return;
       }
 
-      ruleArr[index] = data[chunkFilename] ? `${data[chunkFilename].defaultSelector}${rule}` : `${defaultSelector}${rule}`;
+      const keyMatch = checkFilename(filename, data);
+      ruleArr[index] = data[keyMatch] ? `${data[keyMatch].defaultSelector}${ruleStr}` : `${defaultSelector}${ruleStr}`;
     });
     rule.selector = ruleArr.join(',\n'); // console.log(`${rule.selector} converted`);
   });
   return rootOriginal;
 }
 
+function ignoreFile(excludeArr, filename) {
+  let ignore = false;
+  excludeArr.forEach(exclStr => {
+    if (filename.includes(exclStr)) {
+      ignore = true;
+    }
+  });
+  return ignore;
+}
+
 class SelectorPlugin {
   constructor(options = {}) {
     this.optimize = options.optimize;
     this.selectorWeightConfig = options.selectorWeightConfig;
+    this.exclude = options.exclude;
   }
 
   apply(compiler) {
@@ -74,19 +92,47 @@ class SelectorPlugin {
     const rawdata = _fs.default.readFileSync(customFileDetails);
 
     const data = JSON.parse(rawdata);
+    this.exclude = (0, _windowsModification.windowsModification)(this.exclude);
     compiler.hooks.compilation.tap('selector-weight-rewrite', compilation => {
-      compilation.hooks.optimizeChunkAssets.tapAsync('selector-weight-rewrite', (chunks, callback) => {
-        chunks.forEach(chunk => {
-          chunk.files.filter(isCss).forEach(chunkFilename => {
-            const asset = compilation.assets[chunkFilename];
-            const sourceStr = asset.source();
-
-            const rootOriginal = _postcss.default.parse(sourceStr);
-
-            compilation.assets[chunkFilename] = new _webpackSources.RawSource(rootConvertor(rootOriginal, defaultSelector, data, chunkFilename, excludeStrings).toString());
-          });
+      // compilation.hooks.optimizeChunkAssets.tapAsync(
+      //   'selector-weight-rewrite',
+      //   (chunks, callback) => {
+      //     chunks.forEach(chunk => {
+      //       chunk.files.filter(isCss).forEach(chunkFilename => {
+      //         const asset = compilation.assets[chunkFilename];
+      //         const sourceStr = asset.source();
+      //         const rootOriginal = postcss.parse(sourceStr);
+      //         compilation.assets[chunkFilename] = new RawSource(
+      //           rootConvertor(
+      //             rootOriginal,
+      //             defaultSelector,
+      //             data,
+      //             chunkFilename,
+      //             excludeStrings
+      //           ).toString()
+      //         );
+      //       });
+      //     });
+      //     callback();
+      //   }
+      // );
+      compilation.hooks.optimizeModules.tap('selector-weight-rewrite', modules => {
+        const mods = modules.filter(x => x.type.includes('css'));
+        mods.forEach(module => {
+          const rootOriginal = _postcss.default.parse(module.content);
+
+          const filename = module.issuer.resource;
+
+          if (!filename.includes('node_modules')) {
+            if (ignoreFile(this.exclude, filename)) {
+              return;
+            } // console.log(filename);
+
+
+            module.content = //new RawSource(
+            rootConvertor(rootOriginal, defaultSelector, data, filename, excludeStrings).toString(); // );
+          }
         });
-        callback();
       });
     });
   }

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

@@ -26,15 +26,15 @@ 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']; // 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 
 */
 
 function isIgnoreValuePresent(ignoreVals, prop) {
@@ -47,14 +47,14 @@ function isIgnoreValuePresent(ignoreVals, prop) {
   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 
+/*
+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 
 */
 
 
@@ -154,13 +154,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
     */
 
 
@@ -216,19 +216,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 => {
@@ -240,17 +240,17 @@ class VariableConversionCollector {
         });
       }); // -- conversion for the root using rootConvertor --
 
-      /* 
-      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 => {
@@ -262,12 +262,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/cssoPlugin.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _webpackSources = require("webpack-sources");
+
+var _csso = require("csso");
+
+class cssoPlugin {
+  apply(compiler) {
+    compiler.hooks.emit.tap('cssoPlugin', compilation => {
+      Object.keys(compilation.assets).forEach(filename => {
+        if (/\.css$/.test(filename)) {
+          // console.log(filename, ' processed!');
+          try {
+            let asset = compilation.assets[filename].source();
+
+            if (typeof asset !== 'string') {
+              asset = asset.toString();
+            }
+
+            const result = (0, _csso.minify)(asset).css;
+            compilation.assets[filename] = new _webpackSources.RawSource(result);
+          } catch (e) {
+            compilation.errors.push(e);
+          }
+        }
+      });
+    });
+  }
+
+}
+
+exports.default = cssoPlugin;

package/lib/plugins/utils/checkPattern.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkPattern = checkPattern;
+exports.negateArray = negateArray;
+
+function checkPattern(filename, pattern) {
+  let isMatching = false;
+
+  if (pattern === '*') {
+    // console.log('case 3');
+    isMatching = true;
+  } else if (/^!/gi.test(pattern) && filename.includes(pattern)) {
+    // console.log('case 1');
+    isMatching = false;
+  } else if (!/^!/gi.test(pattern) && filename.includes(pattern)) {
+    // console.log('case 2');
+    isMatching = true;
+  }
+
+  return isMatching;
+}
+
+function negateArray(arr) {
+  const temp = [...arr];
+  temp.forEach((x, index) => {
+    if (/^!/gi.test(x)) {
+      arr[index] = x.substring(1);
+    } else {
+      arr[index] = `!${x}`;
+    }
+  });
+  return temp;
+} // const pattern1 = ["*","src/","src/**/avatar","!src/components",];
+// const examplesInputs1 = [
+// "D:/Mywork/desk_client_app/src/components/component.css",
+// "D:/Mywork/desk_client_app/src/components/avatar/avatar.css",
+// "D:/Mywork/desk_client_app/src/components/teamavatar/avatar.css",
+// "D:/Mywork/desk_client_app/src/container/teamavatar/avatar.css",
+// "D:/Mywork/desk_client_app/deskapp/container/teamavatar/avatar.css",
+// ]
+// const pattern2 = ["src/","!src/components","src/components/avatar"];
+// const examplesInputs2 = [
+//     "D:/Mywork/desk_client_app/src/components/component.css",
+//     "D:/Mywork/desk_client_app/src/components/avatar/avatar.css",
+//     "D:/Mywork/desk_client_app/src/components/teamavatar/avatar.css",
+//     "D:/Mywork/desk_client_app/src/container/teamavatar/avatar.css",
+//     "D:/Mywork/desk_client_app/deskapp/container/teamavatar/avatar.css",
+// ]
+// console.log(checkPattern('filename', ["*","src/","!src/components","src/components/avatar"]))
+// console.log(checkPattern(filename, pattern))
+// console.log(checkPattern(filename, pattern))
+// console.log(checkPattern(filename, pattern))
+// console.log(checkPattern(filename, pattern))
+// console.log(checkPattern(filename, pattern))

package/lib/plugins/utils/classHandling.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasPrevNodeIgnore = hasPrevNodeIgnore;
+exports.isAtRule = isAtRule;
+exports.isInsideMediaQuery = isInsideMediaQuery;
+
+function hasPrevNodeIgnore(index, prevNode, ignoreComment) {
+  return index !== 0 && prevNode.type && prevNode.type === 'comment' && prevNode.text.toLowerCase() === ignoreComment;
+}
+
+function isAtRule(rule) {
+  return rule.parent && rule.parent.type === 'atrule';
+}
+
+function isInsideMediaQuery(rule) {
+  let mediaQuery = false;
+
+  if (isAtRule(rule)) {
+    if (rule.parent.name === 'media') {
+      mediaQuery = true;
+    }
+  }
+
+  return mediaQuery;
+}

package/lib/plugins/utils/fileHandling.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterFile = filterFile;
+exports.ignoreFile = ignoreFile;
+
+var _windowsModification = require("../../loaderUtils/windowsModification");
+
+var _checkPattern = require("./checkPattern");
+
+const ignore = require('ignore');
+
+function ignoreFile(excludeArr, filename) {
+  let ignore = false;
+  excludeArr.forEach(exclStr => {
+    if (filename.includes(exclStr)) {
+      ignore = true;
+    }
+  });
+  return ignore;
+}
+
+function checkFile(filename, arr) {
+  let include = false;
+  arr.forEach(val => {
+    if (val.includes('*')) {
+      return true;
+    }
+  });
+}
+
+function filterFile(filename, filterObject, plugins) {
+  // plugins.forEach(x => console.log(x.postcssPlugin));
+  // let acceptedPlugins = Object.keys()
+  let aliasNames = {
+    valueReplacer: 'postcss-value-replacer',
+    selectorReplace: 'postcss-selector-symbol-replace',
+    hasRTL: 'postcss-rtl',
+    combinerMediaQuery: 'postcss-combine-media-query',
+    hoverActive: 'postcss-mobile-hover',
+    cssVariableReplacement: 'postcss-variable-report' //     hoverActive
+    // combinerMediaQuery
+    // rtl
+    // cssVariableReplacement
+    // selectorWeight
+
+  };
+  const finalPlugins = [];
+  Object.keys(filterObject).forEach(key => {
+    // console.log(key, filterObject[key], aliasNames);
+    // console.log(key);
+    plugins.forEach(x => {
+      let include = false;
+
+      if (aliasNames[key] === x.postcssPlugin) {
+        const includeVals = filterObject[key].filter(x => !/^!/gi.test(x));
+        const excludeVals = filterObject[key].filter(x => /^!/gi.test(x)); // console.log(includeVals, excludeVals);
+        // filterObject[key] = windowsModification(filterObject[key]);
+        // filterObject[key].forEach(pattern => {
+        //   // console.log(x.postcssPlugin);
+        //   // console.log(pattern);
+        //   // console.log(
+        //   //   /^!/gi.test(pattern),
+        //   //   filename.includes(pattern),
+        //   //   filename,
+        //   //   pattern
+        //   // );
+        //   // include = checkPattern(filename, pattern);
+        //   // if (pattern === '*') {
+        //   //   // console.log('case 3');
+        //   //   include = true;
+        //   // } else if (/^!/gi.test(pattern) && filename.includes(pattern)) {
+        //   //   // console.log('case 1');
+        //   //   include = false;
+        //   // } else if (!/^!/gi.test(pattern) && filename.includes(pattern)) {
+        //   //   // console.log('case 2');
+        //   //   include = true;
+        //   // }
+        // });
+
+        let rootDir = 'supportapp';
+        const regex = `^(.+?)${rootDir}?\\\\`; // rootDir = rootDir.replace('/', '\\');
+        // console.log(regex, new RegExp(regex, 'gi'), filename.replace(new RegExp(regex, 'gi'), ''));
+
+        const newFilename = filename.replace(new RegExp(regex, 'gi'), ''); // console.log(negateArray(filterObject[key]));
+        // console.log(filterObject[key]);
+
+        const ig = ignore().add(filterObject[key]); // console.log(x.postcssPlugin, new RegExp(regex, 'gi'));
+        // console.log(filterObject[key]);
+        // if (!ig.ignores(newFilename)) {
+        //   finalPlugins.push(x);
+        // }
+        // console.log(ig);
+        // console.log([filename].filter(filePathFilter({ include: includeVals, exclude: excludeVals })));
+        // if (ig.ignores(newFilename)) {
+        // console.log(ig.ignores(newFilename), newFilename);
+        // console.log('include this file', x.postcssPlugin);
+        // }
+        // console.log(x.postcssPlugin, filename, filterObject[key], include);
+        // if (include) {
+        // console.log('included: ', finalPlugins);
+        // console.log(filename);
+        // console.log('-------------------------------------------------------------------------------------------------')
+        // finalPlugins.push(x);
+        // }
+      }
+    });
+  }); // if (include) {
+  //   console.log('before: ', plugins);
+  //   console.log('after: ');
+  //   console.log(finalPlugins);
+  // }
+  // console.log(filename);
+  // console.log(finalPlugins);
+  // console.log(
+  //   '-------------------------------------------------------------------------------------------------'
+  // );
+
+  return finalPlugins; // console.log(filename, filterObject);
+}