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

package/lib/postcss-plugins/SelectorReplace.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function validator(opts) {
+  if (!opts || typeof opts !== 'object') {
+    throw new Error('Always requires argment');
+  }
+
+  const {
+    before,
+    after
+  } = opts;
+
+  if (!before || !after) {
+    throw new Error('Be sure to have "before" and "after" object names');
+  }
+
+  if (!Array.isArray(before) || !Array.isArray(after)) {
+    throw new Error('Objects "before" and "after" must be of type Array');
+  }
+
+  if (before.length !== after.length) {
+    throw new Error('Length of before and after options must be the same');
+  }
+
+  if (before.length === 0) {
+    throw new Error('Array length is 1 or more');
+  }
+
+  before.forEach((beforeOpt, idx) => {
+    const afterOpt = after[idx];
+
+    switch (true) {
+      case typeof beforeOpt === 'string':
+        {
+          if (!typeof afterOpt === 'string') {
+            throw new Error(`The after option ${afterOpt} must be a string. If you want to apply the replace callback function, then use a RegExp for the before option`);
+          }
+
+          break;
+        }
+
+      case beforeOpt instanceof RegExp:
+        {
+          if (!typeof afterOpt === 'string' && !typeof afterOpt === 'function') {
+            throw new Error(`The after option ${afterOpt} must be either a string, or a function`);
+          }
+
+          break;
+        }
+
+      default:
+        throw new Error(`The before option ${beforeOpt} must be either a string, or a RegExp`);
+    }
+  });
+}
+
+module.exports = _postcss.default.plugin('postcss-selector-replace-new', opts => {
+  validator(opts);
+  const {
+    before,
+    after
+  } = opts;
+  return root => {
+    root.walkRules(rule => {
+      before.forEach((beforeOpt, idx) => {
+        const afterOpt = after[idx];
+
+        if (typeof beforeOpt === 'string') {
+          rule.selector = rule.selector.split(beforeOpt).join(afterOpt);
+        } else {
+          rule.selector = rule.selector.replace(beforeOpt, afterOpt);
+        }
+      });
+    });
+  };
+});

package/lib/postcss-plugins/ValueReplacer.js

@@ -18,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 //     }
 //   };
 // });
-// export default 
+// export default
 module.exports = _postcss.default.plugin('postcss-value-replacer', (valueReplacer = {}) => // Work with options here
 root => {
   root.walkDecls(decl => {
@@ -31,16 +31,5 @@ root => {
       }
     }); //console.log({root, roots:root+""}, root+"")
     // Transform CSS AST here
-  }); // root.walkDecls(decl => {
-  //   valueReplacer.forEach(obj => {
-  //     if (
-  //       obj.props.indexOf(decl.prop) !== -1 &&
-  //       obj.values[decl.value] !== undefined
-  //     ) {
-  //       decl.value = obj.values[decl.value];
-  //     }
-  //   });
-  //   //console.log({root, roots:root+""}, root+"")
-  //   // Transform CSS AST here
-  // });
+  });
 });

package/lib/postcss-plugins/__test__/selectorReplace.test.js

@@ -0,0 +1,28 @@
+"use strict";
+
+let settings1 = {
+  selectorReplace: {
+    before: [':root', 'data-mode', 'data-theme'],
+    after: [':global .zohodesk_controlpanel,:global .wms-mainui,:global .wms-hysearch, :global .mcf1ee8b17_overlay,:global .wms-hvalign,  :global .KB_Editor_UploadImage,:global .zdeskEditor_popup, :global .ze_dd, :global .__baseZC_Container__', 'data-desk-mode', 'data-desk-theme']
+  }
+};
+let settings2 = {
+  selectorReplace: {
+    before: [':root', 'data-'],
+    after: [':global .zohodesk_controlpanel,:global .wms-mainui,:global .wms-hysearch, :global .mcf1ee8b17_overlay,:global .wms-hvalign,  :global .KB_Editor_UploadImage,:global .zdeskEditor_popup, :global .ze_dd, :global .__baseZC_Container__', 'test-']
+  }
+}; //error case
+
+let settings3 = {
+  selectorReplace: {
+    before: [':root', 'data-'],
+    after: [':global .zohodesk_controlpanel,:global .wms-mainui,:global .wms-hysearch, :global .mcf1ee8b17_overlay,:global .wms-hvalign,  :global .KB_Editor_UploadImage,:global .zdeskEditor_popup, :global .ze_dd, :global .__baseZC_Container__']
+  }
+}; //error case
+
+let settings4 = {
+  selectorReplace: {
+    before: [':root'],
+    after: [':global .zohodesk_controlpanel,:global .wms-mainui,:global .wms-hysearch, :global .mcf1ee8b17_overlay,:global .wms-hvalign,  :global .KB_Editor_UploadImage,:global .zdeskEditor_popup, :global .ze_dd, :global .__baseZC_Container__', 'test-']
+  }
+}; // here conversion happens for data from one index to another

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

@@ -36,7 +36,6 @@ class ErrorHandler {
 
   errorFunction(errObj) {
     if (errObj.type && this.allowedErrs[errObj.type] && errObj.decl.prop && errObj.decl.value) {
-      console.log(this.allowedErrs[errObj.type]);
       this[errObj.type](errObj);
     }
   }

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

@@ -10,8 +10,6 @@ const {
   ErrorHandler
 } = require('./ErrorHandler');
 
-const errors = [];
-const errorTable = [];
 const errHandler = new ErrorHandler();
 const convertableProps = {
   'font-size': true,
@@ -121,7 +119,7 @@ const singleConvertor = (value, changeVal, details, range) => {
   // console.log(value, 'not within range')
 
 
-  let errObj = {
+  const errObj = {
     decl,
     type: 'RANGE_ERROR',
     filename,
@@ -129,25 +127,7 @@ const singleConvertor = (value, changeVal, details, range) => {
     path: path
   };
   errHandler.errorTable.push(errObj);
-  errHandler.errorFunction(errObj); // errorFunction(
-  //   {
-  //     decl,
-  //     type: 'RANGE_ERROR',
-  //     filename,
-  //     message: `value (${value}) (${typeof value}) not within range (${
-  //       range.start
-  //     },${range.end})\r`,
-  //     path: path
-  //   },
-  //   'RANGE_ERROR'
-  // );
-  // }
-  // addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n message : value (${value}) not within range (${range.start},${range.end})\r`)
-  //   return value;
-  // } else {
-  //   console.log('++++++++++++++++++++++rect val!', value);
-  // }
-
+  errHandler.errorFunction(errObj);
   return;
 };
 
@@ -195,7 +175,7 @@ module.exports = {
           // }
 
           if (prevNode && prevNode.type === 'comment' && prevNode.text.toLowerCase().includes(commentStr)) {
-            let errObj = {
+            const errObj = {
               decl,
               type: 'DECLARATION_IGNORED',
               filename,
@@ -258,7 +238,7 @@ module.exports = {
             } else {
               if (!decl.value.includes('calc')) {
                 // addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n unit : ${unitErrorVal} ,\n message : ${unitErrorVal} (Unit) Not Allowed \r`);
-                let errObj = {
+                const errObj = {
                   decl,
                   filename,
                   unitErrorVal: unitErrorVal,
@@ -288,27 +268,29 @@ module.exports = {
               }
             }
           } else {
-            if (decl.value && decl.value.includes('px') && decl.value.includes('var(--') && settingsObject[decl.prop]) {
-              let valArr = decl.value.split(' ');
-              let settings = settingsObject[decl.prop];
+            if (settingsObject[decl.prop] && decl.value && decl.value.includes('px') && decl.value.includes('var(--')) {
+              const valArr = decl.value.split(' ');
+              const settings = settingsObject[decl.prop];
               const {
                 range
               } = settings;
-              valArr.forEach((val, index) => {
+              const convertedVals = valArr.map(val => {
                 if (val.includes('px')) {
-                  let convertedVal = singleConvertor(val, settings.replacements.px, {
+                  const convertedVal = singleConvertor(val, settings.replacements.px, {
                     decl,
                     filename,
                     path: fromPath
                   }, range);
-                  valArr[index] = convertedVal ? convertedVal : val;
+                  return convertedVal ? convertedVal : val;
                 }
+
+                return val;
               });
-              decl.value = valArr.join(' ');
+              decl.value = convertedVals.join(' ');
             }
 
             if (decl.prop && decl.value && !decl.prop.includes('--') && valRegex.test(decl.value) && (settingsObject[decl.prop] || convertableProps[decl.prop]) && decl.value.includes('var') && !decl.value.includes('calc')) {
-              let errObj = {
+              const errObj = {
                 decl,
                 type: 'VARIABLE_PRESENT',
                 filename,

package/lib/postcss-plugins/variableModifier.js

@@ -101,7 +101,7 @@ module.exports = postcss.plugin('postcss-variable-report', () => rootOriginal =>
       rule.walkDecls((decl, position) => {
         // case font-size
         if (!hasIgnoreComment(rule.nodes[position - 1])) {
-          console.log(settings);
+          // console.log(settings)
           let unit = decl.value.replace(/[0-9]/g, '');
           let settings = numberObject[decl.prop];
           let path = rootOriginal.source.input.from;

package/lib/schemas/index.js

@@ -222,12 +222,28 @@ var _default = {
       cli: 'enable_smaphook'
     },
     plugins: {
+      valueReplacer: false,
+      selectorReplace: false,
       hasRTL: false,
       hoverActive: false,
       combinerMediaQuery: false,
       cssVariableReplacement: false,
-      selectorWeight: false
+      selectorWeight: false,
+      minifier: false,
+      composeMinification: false
     },
+    patterns: {
+      valueReplacer: [],
+      selectorReplace: [],
+      hoverActive: [],
+      combinerMediaQuery: [],
+      hasRTL: [],
+      cssVariableReplacement: [],
+      selectorWeight: [],
+      cssUniqueness: [],
+      composeMinification: []
+    },
+    patternsRootDir: '',
     exclude: {
       rtl: [],
       hoverActive: [],
@@ -235,6 +251,10 @@ var _default = {
       cssVariableReplacement: [],
       selectorWeight: []
     },
+    include: {
+      cssVariableReplacement: [],
+      selectorWeight: []
+    },
     cssVariableReplacementConfig: '',
     selectorWeightConfig: {
       defaultSelector: '',
@@ -319,11 +339,22 @@ var _default = {
     hasRTL: false,
     rtlExclude: [],
     plugins: {
-      hasRTL: false,
+      rtl: false,
       hoverActive: false,
       combinerMediaQuery: false,
       cssVariableReplacement: false,
-      selectorWeight: false
+      selectorWeight: false,
+      minifier: false
+    },
+    patternsRootDir: '',
+    patterns: {
+      valueReplacer: [],
+      selectorReplace: [],
+      hoverActive: [],
+      combinerMediaQuery: [],
+      hasRTL: [],
+      cssVariableReplacement: [],
+      selectorWeight: []
     },
     exclude: {
       rtl: [],

package/lib/servers/server.js

@@ -204,8 +204,8 @@ if (httpsOptions) {
         port: http2Port
       }, 'htt' + 'ps')}${contextURL}/`, 'http2 server');
     });
-  } else {
-    (0, _utils.log)("Your node version didn't adopted http2 support. Kindly update that to 8 LTS or above you can engage the http2");
+  } else if (httpsOptions) {
+    (0, _utils.log)('Your node version didn\'t adopted http2 support. Kindly update that to 8 LTS or above you can engage the http2');
   }
 }
 

package/lib/utils/cssClassNameGenerate.js

@@ -9,6 +9,8 @@ var _os = _interopRequireDefault(require("os"));
 
 var _path = _interopRequireDefault(require("path"));
 
+var _fileHandling = require("../plugins/utils/fileHandling");
+
 var _getHash = _interopRequireDefault(require("./getHash"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -39,17 +41,47 @@ let isSelectorPackage = (resourcePath, packages) => {
 var _default = (unique = true, {
   filenames,
   packages
-}, classNamePrefix) => (context, localIdentName, localName) => {
+}, classNamePrefix, patterns, rootDir) => (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
+  */
+
 
   if (context.resourcePath.endsWith('.plain.css')) {
     return localName;
   }
+
+  if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
+    filename: context.resourcePath,
+    filterArr: patterns.cssUniqueness,
+    rootDir
+  })) {
+    return `${classNamePrefix}-${cleanFileName}-${localName}`;
+  }
   /* old production mode start without breaking so added. may be removed in future*/
 
 
@@ -58,14 +90,10 @@ var _default = (unique = true, {
     return `${classNamePrefix}${h}`;
   }
   /* old production mode end*/
-
-
-  let filePaths = context.resourcePath.split(_path.default.sep);
-  let fileName = filePaths[filePaths.length - 1];
-  let [fileNameWithoutExt] = fileName.split('.');
-  let cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase(); //css file has casesensitive selector issue so can't toLowerCase
+  //css file has casesensitive selector issue so can't toLowerCase
   //let local = localName.toLowerCase()
 
+
   if (isSelectorPackage(context.resourcePath, packages) || filenames.indexOf(cleanFileName) !== -1) {
     let h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
     return `${classNamePrefix}${h}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.0.1-exp.1",
+  "version": "1.0.2-exp.1",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",
@@ -58,6 +58,7 @@
     "compression": "1.7.4",
     "copy-webpack-plugin": "5.1.2",
     "css-loader": "4.2.1",
+    "csso": "^5.0.5",
     "escodegen": "2.0.0",
     "eslint": "7.6.0",
     "eslint-html-reporter": "0.7.4",
@@ -74,6 +75,7 @@
     "html-webpack-inject-attributes-plugin": "1.0.6",
     "html-webpack-plugin": "4.3.0",
     "http-proxy-middleware": "1.0.5",
+    "ignore": "^5.2.4",
     "jest": "26.4.0",
     "jsdom": "16.4.0",
     "loader-utils": "2.0.0",
@@ -88,7 +90,6 @@
     "postcss-hash-classname": "0.4.0",
     "postcss-loader": "3.0.0",
     "postcss-mobile-hover": "1.0.2",
-    "postcss-selector-replace": "1.0.2",
     "react-test-renderer": "16.13.1",
     "redis": "3.0.2",
     "redux-mock-store": "1.5.4",

package/lib/plugins/composeCommonPlugin.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _postcss = _interopRequireDefault(require("postcss"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class ComposeCommonPlugin {
-  constructor(options = {}) {
-    this.optimize = options.optimize;
-  }
-
-  apply(compiler) {
-    compiler.hooks.compilation.tap('OptimizeJSPlugin', compilation => {
-      compilation.hooks.optimizeModules.tap('OptimizeMods', modules => {
-        modules.forEach(module => {
-          console.log(module);
-        });
-      });
-    });
-  }
-
-}
-
-var _default = ComposeCommonPlugin;
-exports.default = _default;

package/lib/plugins/cssoPlugin.js

@@ -1,37 +0,0 @@
-"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

@@ -1,57 +0,0 @@
-"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))