@zohodesk/react-cli 0.0.1-beta.174 → 0.0.1-beta.175

package/README.md

@@ -2,6 +2,13 @@
 
 A CLI tool for build modern web application and libraries
 
+# 0.0.1-beta.175
+**Issue Fix:-**
+  * When we use "hoverActive" @import in css not working issue fixed
+
+**Features:**  
+ * `minifiy` option supported for minimize index.html file in during build time. You can use this option as "react-cli.app.htmlTemplate.minify" the  options are same as https://github.com/jantimon/html-webpack-plugin#minification
+
 # 0.0.1-beta.174
 
 cli has been updated to fix compose issue faced when classname:hover exists and classname does not before compose

package/lib/pluginUtils/configHtmlWebpackPlugins.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configHtmlWebpackPlugins = configHtmlWebpackPlugins;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+var _htmlWebpackInjectAttributesPlugin = _interopRequireDefault(require("html-webpack-inject-attributes-plugin"));
+
+var _common = require("../common");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const defaultHTMLMiniFyOption = {
+  collapseWhitespace: true,
+  minifyCSS: true,
+  minifyJS: true,
+  keepClosingSlash: true,
+  removeComments: false,
+  removeRedundantAttributes: true,
+  removeScriptTypeAttributes: true,
+  removeStyleLinkTypeAttributes: true,
+  useShortDoctype: true
+};
+
+function configHtmlWebpackPlugins(plugins, {
+  enableChunkHash = false,
+  folder,
+  inject,
+  crossorigin,
+  hasEFC,
+  minify: minifyHtmlOptions = false
+}) {
+  const optionsHtmlWebpack = {
+    chunksSortMode: 'none',
+    filename: enableChunkHash ? 'index.[templatehash:20].html' : 'index.html',
+    template: _path.default.join(process.cwd(), folder, 'index.html'),
+    minify: minifyHtmlOptions === true ? defaultHTMLMiniFyOption : minifyHtmlOptions === null ? false : minifyHtmlOptions,
+    // : typeof minifyHtmlOptions === 'object'
+    // ? minifyHtmlOptions
+    // : minifyHtmlOptions,,
+    templateParameters: _common.templateParameters,
+    scriptLoading: 'defer',
+    inject: inject
+  };
+  console.log({
+    optionsHtmlWebpack
+  });
+
+  if (hasEFC) {
+    optionsHtmlWebpack.excludeChunks = ['efc', 'widget'];
+  }
+
+  plugins.push(new _htmlWebpackPlugin.default(optionsHtmlWebpack));
+  crossorigin && plugins.push(new _htmlWebpackInjectAttributesPlugin.default({
+    crossorigin: 'anonymous'
+  }));
+}

package/lib/pluginUtils/getDevPlugins.js

@@ -15,10 +15,6 @@ var _lodashWebpackPlugin = _interopRequireDefault(require("lodash-webpack-plugin
 
 var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plugin"));
 
-var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
-
-var _htmlWebpackInjectAttributesPlugin = _interopRequireDefault(require("html-webpack-inject-attributes-plugin"));
-
 var _I18nSplitPlugin = _interopRequireDefault(require("../plugins/I18nSplitPlugin"));
 
 var _RequireVariablePublicPlugin = _interopRequireDefault(require("../plugins/RequireVariablePublicPlugin"));
@@ -29,14 +25,14 @@ var _webpack = _interopRequireDefault(require("webpack"));
 
 var _plugins = require("../plugins");
 
-var _common = require("../common");
-
 var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
 
+var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let getDevPlugins = (options, publicPath) => {
-  let {
+const getDevPlugins = (options, publicPath) => {
+  const {
     app: {
       tpFolder,
       folder,
@@ -68,7 +64,7 @@ let getDevPlugins = (options, publicPath) => {
   const hasEFC = newOptionForEnableEFC || prevOptionForEnableEFC;
   const cssLTRFileNameTempalte = enableRTLSplit ? 'css/[name].ltr.css' : 'css/[name].css';
   const cssRTLFileNameTempalte = 'css/[name].rtl.css';
-  let plugins = [new _plugins.CleanUpStatsPlugin(), new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.IgnorePlugin(/^\.\/domain$/, /moment$/), new _webpack.default.DefinePlugin({
+  const plugins = [new _plugins.CleanUpStatsPlugin(), new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.IgnorePlugin(/^\.\/domain$/, /moment$/), new _webpack.default.DefinePlugin({
     __CLIENT__: true,
     __TEST__: false,
     __SERVER__: false,
@@ -126,7 +122,7 @@ let getDevPlugins = (options, publicPath) => {
       propertiesFolder: i18n.propertiesFolder
     }));
   } else {
-    let i18nPath = _path.default.join(process.cwd(), context, 'i18n');
+    const i18nPath = _path.default.join(process.cwd(), context, 'i18n');
 
     if (_fs.default.existsSync(i18nPath)) {
       plugins.push(new _copyWebpackPlugin.default([{
@@ -146,20 +142,16 @@ let getDevPlugins = (options, publicPath) => {
     collections: true,
     shorthands: true
   }));
+  (0, _configHtmlWebpackPlugins.configHtmlWebpackPlugins)(plugins, {
+    enableChunkHash: false,
+    folder,
+    minify: false,
+    inject,
+    crossorigin,
+    hasEFC
+  });
 
   if (hasEFC) {
-    plugins.push(new _htmlWebpackPlugin.default({
-      chunksSortMode: 'none',
-      filename: 'index.html',
-      template: _path.default.join(process.cwd(), folder, 'index.html'),
-      excludeChunks: ['efc', 'widget'],
-      templateParameters: _common.templateParameters,
-      scriptLoading: 'defer',
-      inject: inject
-    }));
-    crossorigin && plugins.push(new _htmlWebpackInjectAttributesPlugin.default({
-      crossorigin: 'anonymous'
-    }));
     plugins.push(new _plugins.EFCPlugin({
       isDevelopment: true,
       i18nManifestFileName,
@@ -171,18 +163,6 @@ let getDevPlugins = (options, publicPath) => {
       localeAttr: efcLocaleAttr // outputFile: 'zohodesk-efc-sdk-latest.js',
 
     }));
-  } else {
-    plugins.push(new _htmlWebpackPlugin.default({
-      chunksSortMode: 'none',
-      filename: 'index.html',
-      template: _path.default.join(process.cwd(), folder, 'index.html'),
-      templateParameters: _common.templateParameters,
-      scriptLoading: 'defer',
-      inject: inject
-    }));
-    crossorigin && plugins.push(new _htmlWebpackInjectAttributesPlugin.default({
-      crossorigin: 'anonymous'
-    }));
   }
 
   plugins.push(new _plugins.I18NInjectIntoIndexPlugin({

package/lib/pluginUtils/getProdPlugins.js

@@ -21,24 +21,22 @@ var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plu
 
 var _I18nSplitPlugin = _interopRequireDefault(require("../plugins/I18nSplitPlugin"));
 
-var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
-
-var _htmlWebpackInjectAttributesPlugin = _interopRequireDefault(require("html-webpack-inject-attributes-plugin"));
-
 var _copyWebpackPlugin = _interopRequireDefault(require("copy-webpack-plugin"));
 
 var _plugins = require("../plugins");
 
-var _common = require("../common");
-
 var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
 
+var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // eslint-disable-next-line no-unused-vars
-let getProdPlugins = (options, publicPath = '') => {
+const getProdPlugins = (options, publicPath = '') => {
   let {
-    enableChunkHash,
+    enableChunkHash
+  } = options.app;
+  const {
     manifestFileName,
     bundleAnalyze,
     optimize,
@@ -56,13 +54,15 @@ let getProdPlugins = (options, publicPath = '') => {
     hasShadowDOM,
     resourceHints,
     serviceWorker,
-    htmlTemplate: {
-      inject
-    },
+    htmlTemplate,
     tpHashMapping,
     cdnMapping,
     crossorigin
   } = options.app;
+  const {
+    inject,
+    minify: minifyHtmlOptions
+  } = htmlTemplate;
   const {
     i18n
   } = options;
@@ -79,9 +79,9 @@ let getProdPlugins = (options, publicPath = '') => {
   const hashTempalate = enableChunkHash ? '.[chunkhash:20]_' : '';
   const cssLTRFileNameTempalte = `css/[name]${hashTempalate}${enableRTLSplit ? '.ltr' : ''}.css`;
   const cssRTLFileNameTempalte = `css/[name]${hashTempalate}.rtl.css`;
-  let isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
+  const isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
   enableChunkHash = !isDevelopment && enableChunkHash;
-  let plugins = [new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.IgnorePlugin(/^\.\/locale$/, /moment$/), new _webpack.default.DefinePlugin({
+  const plugins = [new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.IgnorePlugin(/^\.\/locale$/, /moment$/), new _webpack.default.DefinePlugin({
     __TEST__: false,
     __DEVELOPMENT__: false,
     __LOCAL_PRODUCTION__: isDevelopment,
@@ -132,7 +132,7 @@ let getProdPlugins = (options, publicPath = '') => {
       propertiesFolder: i18n.propertiesFolder
     }));
   } else {
-    let i18nPath = _path.default.join(process.cwd(), context, 'i18n');
+    const i18nPath = _path.default.join(process.cwd(), context, 'i18n');
 
     if (_fs.default.existsSync(i18nPath)) {
       plugins.push(new _copyWebpackPlugin.default([{
@@ -148,21 +148,16 @@ let getProdPlugins = (options, publicPath = '') => {
     to: `./${tpFolder}/`,
     toType: 'dir'
   }]));
+  (0, _configHtmlWebpackPlugins.configHtmlWebpackPlugins)(plugins, {
+    enableChunkHash,
+    folder,
+    inject,
+    minify: minifyHtmlOptions,
+    crossorigin,
+    hasEFC
+  });
 
   if (hasEFC) {
-    plugins.push(new _htmlWebpackPlugin.default({
-      chunksSortMode: 'none',
-      filename: enableChunkHash ? 'index.[templatehash:20].html' : 'index.html',
-      template: _path.default.join(process.cwd(), folder, 'index.html'),
-      excludeChunks: ['efc', 'widget'],
-      minify: false,
-      templateParameters: _common.templateParameters,
-      scriptLoading: 'defer',
-      inject: inject
-    }));
-    crossorigin && plugins.push(new _htmlWebpackInjectAttributesPlugin.default({
-      crossorigin: 'anonymous'
-    }));
     plugins.push(new _plugins.EFCPlugin({
       isDevelopment,
       serverUrl: publicPath,
@@ -175,19 +170,6 @@ let getProdPlugins = (options, publicPath = '') => {
       localeAttr: efcLocaleAttr,
       cdnVariableName: cdnMapping.isCdnEnabled ? cdnMapping.variableName : null
     }));
-  } else {
-    plugins.push(new _htmlWebpackPlugin.default({
-      chunksSortMode: 'none',
-      filename: enableChunkHash ? 'index.[templatehash:20].html' : 'index.html',
-      template: _path.default.join(process.cwd(), folder, 'index.html'),
-      minify: false,
-      templateParameters: _common.templateParameters,
-      scriptLoading: 'defer',
-      inject: inject
-    }));
-    crossorigin && plugins.push(new _htmlWebpackInjectAttributesPlugin.default({
-      crossorigin: 'anonymous'
-    }));
   }
 
   plugins.push(new _plugins.I18NInjectIntoIndexPlugin({
@@ -201,7 +183,7 @@ let getProdPlugins = (options, publicPath = '') => {
   }));
 
   if (publicPaths && !isDevelopment && !cdnMapping.isCdnEnabled) {
-    let {
+    const {
       callback
     } = publicPaths;
     plugins.push(callback ? new _plugins.PublicPathCallbackPlugin({
@@ -255,7 +237,7 @@ let getProdPlugins = (options, publicPath = '') => {
   }
 
   if (!isDevelopment && serviceWorker.enableSw) {
-    let {
+    const {
       filePath,
       fileName = 'sw.js',
       exitPath = '/',

package/lib/postcss-plugins/hoverActivePlugin.js

@@ -375,11 +375,15 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
         hoverRule.rule.remove();
       }
     }
-  }
+  } // rootOriginal.walkAtRules(atrule => {
+  //   if (
+  //     (atrule !== undefined &&
+  //       atrule.nodes !== undefined &&
+  //       atrule.nodes.length === 0) ||
+  //     atrule.nodes === undefined
+  //   ) {
+  //     atrule.remove();
+  //   }
+  // });
 
-  rootOriginal.walkAtRules(atrule => {
-    if (atrule !== undefined && atrule.nodes !== undefined && atrule.nodes.length === 0 || atrule.nodes === undefined) {
-      atrule.remove();
-    }
-  });
 });

package/lib/schemas/index.js

@@ -253,6 +253,7 @@ var _default = {
       replaceText: '//<!--AssetsFromBuild -->'
     },
     htmlTemplate: {
+      minify: null,
       inject: true
     },
     removePropTypes: false,
@@ -343,7 +344,6 @@ var _default = {
       cli: 'branch_name'
     },
     impactServerDomain: {
-      //value: 'ht' + 'tp://desk-qa-impact.tsi.zohocorpin.com:8080',
       value: 'ht' + 'tp://desk-automation.csez.zohocorpin.com:8080',
       cli: 'impact_server_domain'
     },
@@ -366,7 +366,6 @@ var _default = {
       cli: 'service_name'
     },
     impactServerDomain: {
-      //value: 'ht' + 'tp://desk-qa-impact.tsi.zohocorpin.com:8080',
       value: 'ht' + 'tp://desk-automation.csez.zohocorpin.com:8080',
       cli: 'impact_server_domain'
     },
@@ -404,7 +403,7 @@ var _default = {
       cli: 'path_to_sub_projs'
     },
     tokenGit: {
-      value: 'YbByNJ3yURAm92Lhx4vW',
+      value: '',
       cli: 'git_token'
     },
     changesOnly: {
@@ -585,7 +584,6 @@ var _default = {
     },
     impactServerDomain: {
       value: 'ht' + 'tp://desk-automation.csez.zohocorpin.com:8080',
-      //value: 'ht' + 'tp://desk-qa-impact.tsi.zohocorpin.com:8080',
       cli: 'impact_server_domain'
     },
     impactRun: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "0.0.1-beta.174",
+  "version": "0.0.1-beta.175",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",