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

package/lib/plugins/SelectorPlugin.js

@@ -9,77 +9,55 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _fs = _interopRequireDefault(require("fs"));
 
+var _classHandling = require("./utils/classHandling");
+
+var _fileHandling = require("./utils/fileHandling");
+
 var _windowsModification = require("../loaderUtils/windowsModification");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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, filename, excludeStrings) {
+function selectorWeightPrefixAdder(rootOriginal, selector, excludeStrings) {
   rootOriginal.walkRules((rule, index) => {
     const prevNode = rootOriginal.nodes[index - 1];
 
-    if (index !== 0 && prevNode.type && prevNode.type === 'comment' && prevNode.text.toLowerCase() === 'updateselector:ignore') {
+    if ((0, _classHandling.hasPrevNodeIgnore)(index, prevNode, 'updateselector:ignore')) {
       return;
     }
 
-    if (rule.parent && rule.parent.type === 'atrule') {
-      if (rule.parent.name !== 'media') {
-        return;
-      }
+    if (!(0, _classHandling.isInsideMediaQuery)(rule)) {
+      return;
     }
 
-    let ruleArr = rule.selector.split(',');
-    ruleArr.forEach((ruleStr, index) => {
-      if (excludeStrings.includes(ruleStr.trim())) {
+    const selectorArr = rule.selector.split(',');
+    selectorArr.forEach((singleSelectorStr, index) => {
+      if (excludeStrings.includes(singleSelectorStr.trim())) {
         return;
       }
 
-      if (ruleStr.includes(']')) {
-        if (ruleStr.slice(ruleStr.lastIndexOf(']') + 2).trim() === '') {
+      if (singleSelectorStr.includes(']')) {
+        if (singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 2).trim() === '') {
           return;
-        } // console.log(
-        //   rule.slice(rule.lastIndexOf(']') + 2).trim(),
-        //   rule.slice(rule.lastIndexOf(']') + 2).trim() !== ''
-        // );
-
-
-        ruleArr[index] = `${ruleStr.slice(0, ruleStr.lastIndexOf(']') + 1).trim()} ${defaultSelector}${ruleStr.slice(ruleStr.lastIndexOf(']') + 2).trim()}`; // console.log(ruleArr[index]);
+        }
 
+        selectorArr[index] = `${singleSelectorStr.slice(0, singleSelectorStr.lastIndexOf(']') + 1).trim()} ${selector}${singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 2).trim()}`;
         return;
       }
 
-      const keyMatch = checkFilename(filename, data);
-      ruleArr[index] = data[keyMatch] ? `${data[keyMatch].defaultSelector}${ruleStr}` : `${defaultSelector}${ruleStr}`;
+      selectorArr[index] = `${selector}${singleSelectorStr}`;
     });
-    rule.selector = ruleArr.join(',\n'); // console.log(`${rule.selector} converted`);
+    rule.selector = selectorArr.join(',\n');
   });
   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;
+    this.patterns = options.patterns;
+    this.rootDir = options.patternsRootDir;
   }
 
   apply(compiler) {
@@ -94,44 +72,54 @@ class SelectorPlugin {
     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.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(); // );
+          /*
+              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"
+              ]
+                rootDir : patternsRootDir : 'supportapp'
+              
+              output : 
+              true or false
+            */
+
+          if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
+            filename,
+            filterArr: this.patterns.selectorWeight,
+            rootDir: this.rootDir
+          })) {
+            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'
+            */
+
+
+          module.content = selectorWeightPrefixAdder(rootOriginal, data[filename] ? data[filename].defaultSelector : defaultSelector, excludeStrings).toString();
         });
       });
     });

package/lib/plugins/VariableConversionCollector.js

@@ -9,6 +9,8 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _ErrorHandler = require("../postcss-plugins/variableModificationPlugin/ErrorHandler");
 
+var _fileHandling = require("./utils/fileHandling");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { RawSource } from 'webpack-sources';
@@ -62,7 +64,7 @@ function extractVariableName(val) {
   return val.replace(/calc\((.+)\)/gi, '$1').replace(/var\((.+)\)/gi, '$1').replace('-1', '').replace('*', '').replace('\n', '').trim();
 }
 
-function rootConvertor(rootOriginal, variables, settingsObject) {
+function variableConvertor(rootOriginal, variables, settingsObject) {
   rootOriginal.walkRules(rule => {
     rule.nodes.forEach((decl, index) => {
       const prevNode = rule.nodes[index - 1];
@@ -118,10 +120,12 @@ class VariableConversionCollector {
   constructor(options = {}) {
     this.optimize = options.optimize;
     this.filename = options.cssVariableReplacementConfig;
-    this.fileHandler();
+    this.patterns = options.patterns;
+    this.rootDir = options.patternsRootDir;
+    this.initializeFiles();
   }
 
-  fileHandler() {
+  initializeFiles() {
     createFolderIfNonExistant('./.cli/logs/');
     createFolderIfNonExistant('./.cli/config/variables/');
     createFolderIfNonExistant('./.cli/config/selectorWeight/');
@@ -131,7 +135,8 @@ class VariableConversionCollector {
 
   apply(compiler) {
     const variables = {};
-    const unassigned = {};
+    const unassigned = {}; // console.log(windowsModification([this.filename])[0]);
+
     const rawdata = fs.readFileSync(this.filename);
     const data = JSON.parse(rawdata);
     const {
@@ -238,7 +243,7 @@ class VariableConversionCollector {
             });
           }
         });
-      }); // -- conversion for the root using rootConvertor --
+      }); // -- conversion for the root using variableConvertor --
 
       /* 
       input : 
@@ -256,9 +261,35 @@ class VariableConversionCollector {
       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
+          */
+
+          if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
+            filename,
+            filterArr: this.patterns.cssVariableReplacement,
+            rootDir: this.rootDir
+          })) {
+            return;
+          }
+
           const rootOriginal = _postcss.default.parse(module.content);
 
-          module.content = rootConvertor(rootOriginal, variables, settingsObject).toString();
+          module.content = variableConvertor(rootOriginal, variables, settingsObject).toString();
         });
       });
     });
@@ -292,29 +323,7 @@ class VariableConversionCollector {
         if (a.type < b.type) {
           return -1;
         }
-      }); // variable constructed now to be written in a json file
-      // const newVars = Object.keys(variables)
-      //   //Filter Object with key contanis "NAME"
-      //   .filter(key => variables[key].includes('--'))
-      //   .reduce(
-      //     (obj, key) =>
-      //       Object.assign(obj, {
-      //         [key]: variables[key]
-      //       }),
-      //     {}
-      //   );
-      // console.log('new variables: ', newVars);
-      // try {
-      //   fs.writeFileSync('./variableMapping.json', JSON.stringify(variables));
-      // } catch (err) {
-      //   console.log(err);
-      // }
-      // fs.writeFile('./variableMapping.json', JSON.stringify(variables), err => {
-      //   if (err) {
-      //     throw err;
-      //   }
-      //   console.log('variable mapping file generated.');
-      // });
+      });
 
       if (errorConsoleStatus) {
         const errorHandler = new _ErrorHandler.ErrorHandler();

package/lib/plugins/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "CleanUpStatsPlugin", {
     return _CleanupStatsPlugin.default;
   }
 });
+Object.defineProperty(exports, "ComposeMinificationPlugin", {
+  enumerable: true,
+  get: function () {
+    return _ComposeMinification.default;
+  }
+});
 Object.defineProperty(exports, "EFCPlugin", {
   enumerable: true,
   get: function () {
@@ -33,6 +39,12 @@ Object.defineProperty(exports, "ManifestPlugin", {
     return _ManifestPlugin.default;
   }
 });
+Object.defineProperty(exports, "MinifyPlugin", {
+  enumerable: true,
+  get: function () {
+    return _MinifyPlugin.default;
+  }
+});
 Object.defineProperty(exports, "ModuleStatsPlugin", {
   enumerable: true,
   get: function () {
@@ -99,12 +111,6 @@ Object.defineProperty(exports, "TPHashMappingPlugin", {
     return _TPHashMappingPlugin.default;
   }
 });
-Object.defineProperty(exports, "UglifyCSSPlugin", {
-  enumerable: true,
-  get: function () {
-    return _UglifyCSSPlugin.default;
-  }
-});
 Object.defineProperty(exports, "UnusedFilesFindPlugin", {
   enumerable: true,
   get: function () {
@@ -126,10 +132,12 @@ var _OptimizeJSPlugin = _interopRequireDefault(require("./OptimizeJSPlugin"));
 
 var _ResourceHintsPlugin = _interopRequireDefault(require("./ResourceHintsPlugin"));
 
-var _UglifyCSSPlugin = _interopRequireDefault(require("./UglifyCSSPlugin"));
+var _MinifyPlugin = _interopRequireDefault(require("./MinifyPlugin"));
 
 var _ManifestPlugin = _interopRequireDefault(require("./ManifestPlugin"));
 
+var _ComposeMinification = _interopRequireDefault(require("./ComposeMinification"));
+
 var _CleanupStatsPlugin = _interopRequireDefault(require("./CleanupStatsPlugin"));
 
 var _EFCPlugin = _interopRequireDefault(require("./EFCPlugin"));

package/lib/plugins/utils/classHandling.js

@@ -8,7 +8,7 @@ exports.isAtRule = isAtRule;
 exports.isInsideMediaQuery = isInsideMediaQuery;
 
 function hasPrevNodeIgnore(index, prevNode, ignoreComment) {
-  return index !== 0 && prevNode.type && prevNode.type === 'comment' && prevNode.text.toLowerCase() === ignoreComment;
+  return index !== 0 && prevNode && prevNode.type && prevNode.type === 'comment' && prevNode.text.toLowerCase() === ignoreComment;
 }
 
 function isAtRule(rule) {
@@ -16,13 +16,5 @@ function isAtRule(rule) {
 }
 
 function isInsideMediaQuery(rule) {
-  let mediaQuery = false;
-
-  if (isAtRule(rule)) {
-    if (rule.parent.name === 'media') {
-      mediaQuery = true;
-    }
-  }
-
-  return mediaQuery;
+  return isAtRule(rule) && rule.parent && rule.parent.name === 'media' ? true : false;
 }

package/lib/plugins/utils/fileHandling.js

@@ -3,120 +3,90 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.filterFile = filterFile;
-exports.ignoreFile = ignoreFile;
+exports.isFileNameMatchingPattern = isFileNameMatchingPattern;
+exports.isFileNameMatchingPluginPattern = isFileNameMatchingPluginPattern;
 
 var _windowsModification = require("../../loaderUtils/windowsModification");
 
-var _checkPattern = require("./checkPattern");
+var _ignore = _interopRequireDefault(require("ignore"));
 
-const ignore = require('ignore');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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;
-    }
-  });
-}
+let aliasNames = {
+  valueReplacer: 'postcss-value-replacer',
+  selectorReplace: 'postcss-selector-replace-new',
+  hasRTL: 'postcss-rtl',
+  combinerMediaQuery: 'postcss-combine-media-query',
+  hoverActive: 'postcss-mobile-hover',
+  cssVariableReplacement: 'postcss-variable-report',
+  composeMinification: 'postcss-compose-plugin'
+};
+/*
+
+unique scenario
+
+*/
+// export function filterFileCssUniqueness(filename, filterObj) {
+//   let rootDir = 'supportapp';
+//   let include = false;
+//   const regex = `^(.+?)${rootDir}?\\\\`;
+//   const newFilename = windowsModificationFile(filename).replace(
+//     new RegExp(regex, 'gi'),
+//     ''
+//   );
+//   Object.keys(filterObj).forEach(key => {
+//     const ig = ignore().add(filterObj[key]);
+//     if (ig.ignores(newFilename)) {
+//       include = true;
+//     }
+//   });
+//   return include;
+// }
 
-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
+function isFileNameMatchingPattern({
+  filename,
+  filterObject,
+  plugins,
+  rootDir
+}) {
+  const finalPlugins = []; // console.log(rootDir);
 
-  };
-  const finalPlugins = [];
+  const regex = `^(.+?)${rootDir}?\\\\`;
+  const newFilename = (0, _windowsModification.windowsModificationFile)(filename).replace(new RegExp(regex, 'gi'), '');
   Object.keys(filterObject).forEach(key => {
-    // console.log(key, filterObject[key], aliasNames);
-    // console.log(key);
     plugins.forEach(x => {
-      let include = false;
-
+      // console.log(key, x.postcssPlugin);
       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 = (0, _ignore.default)().add(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 (ig.ignores(newFilename)) {
+          // console.log(newFilename);
+          finalPlugins.push(x);
+        }
       }
     });
-  }); // if (include) {
-  //   console.log('before: ', plugins);
-  //   console.log('after: ');
-  //   console.log(finalPlugins);
-  // }
-  // console.log(filename);
+  }); // console.log(filename);
   // console.log(finalPlugins);
-  // console.log(
-  //   '-------------------------------------------------------------------------------------------------'
-  // );
+  // console.log('----------------------------------------------------------------------')
 
   return finalPlugins; // console.log(filename, filterObject);
+}
+
+function isFileNameMatchingPluginPattern({
+  filename,
+  filterArr,
+  rootDir
+}) {
+  let include = true; // console.log(rootDir);
+
+  const regex = `^(.+?)${rootDir}?\\\\`; // console.log(plugin);
+
+  const newFilename = (0, _windowsModification.windowsModificationFile)(filename).replace(new RegExp(regex, 'gi'), '');
+  const ig = (0, _ignore.default)().add(filterArr);
+
+  if (!ig.ignores(newFilename)) {
+    include = false;
+  }
+
+  return include;
 }

package/lib/plugins/utils/tests/fileHandling.test.js

@@ -0,0 +1,30 @@
+"use strict";
+
+const ignore = require('ignore');
+
+const ignoreArr1 = ['src', '!src\\components', 'src\\Accessibility'];
+const ignoreArr2 = ['src\\', '!node_modules\\'];
+const ignoreArr3 = ['*'];
+
+const {
+  windowsModificationFile
+} = require('../../../../lib/loaderUtils/windowsModification');
+
+const files = ['D:\\MyWork\\React Build\\desk_client_app\\jsapps\\supportapp\\src\\components\\Accessibility\\Accessibility.module.css', 'D:\\MyWork\\React Build\\desk_client_app\\jsapps\\supportapp\\src\\components\\Avatar\\Avatar.module.css', 'D:/MyWork/React Build/desk_client_app/jsapps/supportapp/src/components/Accessibility/Accessibility.module.css', 'D:/MyWork/React Build/desk_client_app/jsapps/supportapp/src/components/Accessibility/AccessibilityNavigation.module.css', 'desk_client_app\\jsapps\\supportapp\\src\\components\\Test.module.css', 'desk_client_app\\jsapps\\supportapp\\src\\components\\Accessibility\\Accessibility.module.css', 'desk_client_app/jsapps/supportapp/src/components/Accessibility/Accessibility.module.css', 'src\\components\\Accessibility\\Accessibility.module.css', 'src/components/Accessibility/Accessibility.module.css', 'Accessibility.module.css', ''];
+const ignore1 = ignore().add(ignoreArr1);
+const ignore2 = ignore().add(ignoreArr2);
+const ignore3 = ignore().add(ignoreArr3);
+files.forEach(file => {
+  // console.log(file);
+  const rootDir = 'supportapp';
+  const regex = `^(.+?)${rootDir}?\\\\`;
+  const newFilename = windowsModificationFile(file).replace(new RegExp(regex, 'gi'), '');
+  console.log(newFilename);
+
+  if (newFilename.trim() !== '') {
+    console.log(ignore1.ignores(newFilename));
+    console.log(ignore2.ignores(newFilename));
+    console.log(ignore3.ignores(newFilename));
+    console.log('--------------------------------------------------------------------');
+  }
+});

package/lib/postcss-plugins/EmptyPlugin.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = _postcss.default.plugin('postcss-empty', () => (root, result) => {// console.log(root.source.input.from, result);
+});

package/lib/postcss-plugins/ExcludePlugin.js

@@ -10,7 +10,7 @@ module.exports = _postcss.default.plugin('postcss-exclude-files', opts => {
   } = opts;
   return (root, result) => {
     const inputFile = root.source.input.file;
-    let isIgnoredFile = opts.ignore.some(file => inputFile.indexOf(file) !== -1);
+    const isIgnoredFile = opts.ignore.some(file => inputFile.indexOf(file) !== -1);
 
     if (!isIgnoredFile) {
       const handler = response => response.messages.forEach(msg => result.messages.push(msg));