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

package/README.md

@@ -2,11 +2,33 @@
 
 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
+
+**Issue Fix:-**
+ * In react-cli version `0.0.1-beta.173`, when we use `start` command throws error issue fixed
+ * while using `cssVariableReplacementOptions`, compose issue faced in css files, when classname:hover exists and classname does not exist issue fixed
+
+**Feature:-** 
+* `react-cli.test.classnameFormat` option added to change CssModules (Ex: import style from "./a.module.css" ) className transform template unittest case.  
+    `classnameFormat` default value `[classname]` you can customize it. Example: `[classname]-[hash]`
+
+**Changes:-**
+* `jsonFile_test_*.json` files deleted after they used.
+
 # 0.0.1-beta.173
 
 Conversion for Variables from Variables to px in Supportapp completed (`variableIgnore.js` && `pxParserPostcss.js` to be referred to), and px to custom variables through the new `variableModificationPlugin`. Error Log generation can also be converted on enabling
 
-Features: 
+**Features:** 
 1. variables are converted from px to custom variables ( options are consumed from `cssVariableReplacementOptions.json` present in source folder )
 2. To enable the error log generation `errorLog` is to be made `true` in `cssVariableReplacementOptions.json` ( it will take a little longer than usual build time )
 3. To enable the console display of errors that are generated, `errorInConsole` is to be made `true` in `cssVariableReplacementOptions.json`
@@ -82,6 +104,10 @@ Changes:-
 1. `enableChunkHash` option enabled for dev mode, use it as `react-cli.app.enableChunkHash` in `package.json`
 2. `--enable_efc=true` option added to enable efc by terminal
 3. unwanted pem files removed
+# 0.0.1-exp.167.1
+Features:-
+ * In docs we have added `Description` for Component Props- check out it in `PropTypes` tab
+
 
 # 0.0.1-beta.167
 

package/lib/configs/jest.config.js

@@ -8,17 +8,11 @@ var _libAlias = require("./libAlias");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let appPath = process.cwd(); //   '^@root(.*)$': '<rootDir>/src$1',
-// '^@components(.*)$': '<rootDir>/src/components$1',
-
-let moduleNameMapper = Object.keys(_libAlias.libAlias).reduce((previousValue, key) => {
-  previousValue[`^${key}(.*)$`] = `${_libAlias.libAlias[key]}$1`;
-  return previousValue;
-}, {});
+const appPath = process.cwd();
 
 const appGlobals = _path.default.resolve(appPath, '__testUtils__', 'globals.js');
 
-let commonConfig = {
+const commonConfig = {
   coverageReporters: ['json', 'html', 'json-summary', 'text'],
   collectCoverage: true,
   moduleDirectories: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
@@ -27,9 +21,11 @@ let commonConfig = {
     '^.+\\.css$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'cssPreprocessor.js'),
     '^(?!.*\\.(js|jsx|css|json)$)': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'otherFilesPreprocessor.js')
   },
-  moduleNameMapper: { ...moduleNameMapper,
-    '\\.(css|less)$': 'identity-obj-proxy'
-  },
+  moduleNameMapper: _libAlias.jestModuleNameMapper,
+  // moduleNameMapper: {
+  //   ...moduleNameMapper,
+  //   '\\.(css|less)$': 'identity-obj-proxy'
+  // },
   transformIgnorePatterns: ['/node_modules/(?!(@zohodesk)/)'],
   // transformIgnorePatterns: ['/node_modules.*?.js$'],
   moduleFileExtensions: ['js'],
@@ -42,7 +38,7 @@ let commonConfig = {
 };
 
 module.exports = (...args) => {
-  let [appFolder, forCommittedFiles = false] = args;
+  const [appFolder, forCommittedFiles = false] = args;
 
   if (forCommittedFiles) {
     return Object.assign({}, commonConfig, {

package/lib/configs/libAlias.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.libAlias = void 0;
+exports.libAlias = exports.jestModuleNameMapper = void 0;
 // the reason for alias at the time was code tree shaking
 // tree shaking was most compactable with ES module system
 // FIXME: But there is a posiblity when these  package  does not have lib,
@@ -27,5 +27,12 @@ const libAlias = {
   '@zohodesk/timetracker/lib': '@zohodesk/timetracker/es',
   '@zohodesk/variables/lib': '@zohodesk/variables/es',
   '@zohodesk/virtualizer/lib': '@zohodesk/virtualizer/es'
-};
-exports.libAlias = libAlias;
+}; //   '^@root(.*)$': '<rootDir>/src$1',
+// '^@components(.*)$': '<rootDir>/src/components$1',
+
+exports.libAlias = libAlias;
+const jestModuleNameMapper = Object.keys(libAlias).reduce((previousValue, key) => {
+  previousValue[`^${key}(.*)$`] = `${libAlias[key]}$1`;
+  return previousValue;
+}, {});
+exports.jestModuleNameMapper = jestModuleNameMapper;

package/lib/jest/preProcessors/cssPreprocessor.js

@@ -6,23 +6,32 @@ var _postcssHashClassname = _interopRequireDefault(require("postcss-hash-classna
 
 var _fs = _interopRequireDefault(require("fs"));
 
+var _utils = require("../../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 let count = 0;
+const options = (0, _utils.getOptions)();
+const {
+  classnameFormat
+} = options.test;
 module.exports = {
   process: function (src) {
     count++;
-    let opts = {
+    const opts = {
       hashType: 'md5',
-      digestType: 'base32'
+      digestType: 'base32',
+      maxLength: 6,
+      type: '.json',
+      classnameFormat: classnameFormat,
+      outputName: `jsonFile_test_${count}`
     };
-    opts.maxLength = 6;
-    opts.type = '.json';
-    opts.outputName = `jsonFile_test_${count}`;
-    let processor = (0, _postcss.default)([(0, _postcssHashClassname.default)(opts)]);
+    const processor = (0, _postcss.default)([(0, _postcssHashClassname.default)(opts)]);
     processor.process(src).css;
 
-    let jsonMap = _fs.default.readFileSync(`jsonFile_test_${count}.json`, 'UTF-8');
+    const jsonMap = _fs.default.readFileSync(`jsonFile_test_${count}.json`, 'UTF-8');
+
+    _fs.default.unlinkSync(`jsonFile_test_${count}.json`);
 
     return `module.exports =${jsonMap}`;
   }

package/lib/loaderUtils/getCSSLoaders.js

@@ -93,7 +93,7 @@ const getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, cssVariabl
   }), ...excludeEmptyCheckPlugin({
     enable: plugins.cssVariableReplacement,
     ignore: cssVariableReplacementExcludeLocal,
-    plugins: [require('../postcss-plugins/variableModificationPlugin/index')(cssVariableReplacementConfig)]
+    plugins: [fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index')(cssVariableReplacementConfig)]
   })].filter(Boolean);
   return [cssSelectorZipPath && {
     loader: require.resolve('../loaders/selectorMappingLoader')

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

@@ -33,9 +33,24 @@ function isHoverPresent(atrule) {
   return hoverPresent;
 }
 
+function checkForUsualClass(root, sel) {
+  let present = false;
+  sel.split(',').forEach(value => {
+    if (value.includes('hover')) {
+      const valueNoHover = value.replace(':hover', '').trim();
+      root.walkRules(rule => {
+        if (rule.selector === valueNoHover) {
+          present = true;
+        }
+      });
+    }
+  });
+  return present;
+}
+
 module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHoverActiveString => rootOriginal => {
   const hoverRules = [];
-  let positionsObj = {};
+  const positionsObj = {};
   hoverMedQuerySuffix = mediaQueryHoverActiveString.hover;
   hoverNoneMedQuerySuffix = mediaQueryHoverActiveString.none;
 
@@ -145,16 +160,16 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
     if (rule.parent.params !== undefined && !rule.parent.params.includes('hover')) {
       //console.log(hovMed, actMed);
       let newSelector = '';
-      let {
+      const {
         hovMed,
         actMed
       } = getPositionsOfHoverAndActiveMedQueries(rule.parent);
-      let hovQueries = [];
-      let actQueries = [];
+      const hovQueries = [];
+      const actQueries = [];
       rule.selector.split(/\s*,\s*/).forEach(_subrule => {
-        let subrule = _subrule.trim();
+        const subrule = _subrule.trim();
 
-        let clone = rule.clone();
+        const clone = rule.clone();
 
         if (subrule.includes('hover')) {
           clone.selector = subrule;
@@ -172,13 +187,13 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
       });
 
       if (hovQueries.length > 0) {
-        let clone = rule.clone();
+        const clone = rule.clone();
         clone.selector = hovQueries.join(',');
         hovMed.append(clone);
       }
 
       if (actQueries.length > 0) {
-        let clone = rule.clone();
+        const clone = rule.clone();
         clone.selector = actQueries.join(',');
         actMed.append(clone.clone({
           selector: clone.selector.replace(/:hover/gi, ':active')
@@ -197,7 +212,7 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
 
   function mediaQuery(rule, index) {
     if (rule.parent.params !== undefined && !rule.parent.params.includes('hover')) {
-      let {
+      const {
         hovMed,
         actMed
       } = getPositionsOfHoverAndActiveMedQueries(rule.parent);
@@ -219,9 +234,9 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
   function commaQuery(rule, index) {
     //console.log("comma" , rule.selector.split('\n'));
     let newSelector = '';
-    let hovQueries = [];
+    const hovQueries = [];
     rule.selector.split(/\s*,\s*/).forEach(_subrule => {
-      let subrule = _subrule.trim();
+      const subrule = _subrule.trim();
 
       if (subrule.includes('hover')) {
         // hoverRules.push({ rule: clone, index });
@@ -232,7 +247,7 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
     });
 
     if (hovQueries.length > 0) {
-      let clone = rule.clone();
+      const clone = rule.clone();
       clone.selector = hovQueries.join(',');
       hoverRules.push({
         rule: clone,
@@ -241,7 +256,9 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
     }
 
     if (handleHoverAndHoverActiveIgnore(index)) {
-      rule.selector = newSelector.substring(0, newSelector.length - 2).trim();
+      if (checkForUsualClass(rootOriginal, rule.selector)) {
+        rule.selector = newSelector.substring(0, newSelector.length - 2).trim();
+      }
     }
 
     if (rule.selector === '') {
@@ -358,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/postcss-plugins/variableModificationPlugin/index.js

@@ -134,9 +134,9 @@ module.exports = postcss.plugin('postcss-variable-report', cssVariableReplacemen
   let regValStr = '';
   replacementArray.forEach((val, index) => {
     if (index !== replacementArray.length - 1) {
-      regValStr += `${val.replace('$$', '\\d+')}|`;
+      regValStr += `${val.replace('$$', '\\d+').replace('(', '\\(').replace(')', '\\)')}|`;
     } else {
-      regValStr += `${val.replace('$$', '\\d+')}`;
+      regValStr += `${val.replace('$$', '\\d+').replace('(', '\\(').replace(')', '\\)')}`;
     }
   });
   const valRegex = new RegExp(regValStr, 'gi');

package/lib/schemas/index.js

@@ -253,6 +253,7 @@ var _default = {
       replaceText: '//<!--AssetsFromBuild -->'
     },
     htmlTemplate: {
+      minify: null,
       inject: true
     },
     removePropTypes: false,
@@ -325,6 +326,7 @@ var _default = {
     }
   },
   test: {
+    classnameFormat: '[classname]',
     srcBranch: {
       value: 'master',
       cli: 'src_branch'
@@ -342,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'
     },
@@ -365,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'
     },
@@ -403,7 +403,7 @@ var _default = {
       cli: 'path_to_sub_projs'
     },
     tokenGit: {
-      value: 'YbByNJ3yURAm92Lhx4vW',
+      value: '',
       cli: 'git_token'
     },
     changesOnly: {
@@ -584,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.173",
+  "version": "0.0.1-beta.175",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",
@@ -78,7 +78,6 @@
     "html-webpack-inject-attributes-plugin": "1.0.6",
     "html-webpack-plugin": "4.3.0",
     "http-proxy-middleware": "1.0.5",
-    "identity-obj-proxy": "3.0.0",
     "jest": "26.4.0",
     "jsdom": "16.4.0",
     "loader-utils": "2.0.0",
@@ -93,7 +92,6 @@
     "postcss": "7.0.32",
     "postcss-combine-media-query": "1.0.1",
     "postcss-hash-classname": "0.4.0",
-    "postcss-import": "14.1.0",
     "postcss-loader": "3.0.0",
     "postcss-mobile-hover": "1.0.2",
     "postcss-selector-replace": "1.0.2",

package/templates/docs/css/style.css

@@ -660,8 +660,8 @@ section {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   word-wrap: normal;
+  word-break: break-word;
   border-right: 1px solid #ebedf0;
   padding: 16px 24px;
   text-align: left;

package/templates/docs/index.html

@@ -438,6 +438,7 @@
 							Components[propComName].propTypes) ||
 						{};
 					let currentCompProps = Object.keys(propsObj) || [];
+					let currentCompPropsDescription = window.componentList && window.componentList[propComName] && window.componentList[propComName].propsDescription || (Components[propComName] && Components[propComName].propsDescription) || {};
 					let currentCompDefault = Window.componentList && window.componentList[propComName] && window.componentList[propComName].defaultProps || (Components[propComName] && Components[propComName].defaultProps) || {};
 					let componentsObj=componentObj && this.filter(Object.keys(componentObj),'').map((item,i)=>{
 						return ({key:item,value:componentObj[item],length:Object.keys(componentObj[item]).length})
@@ -767,6 +768,7 @@
 																<span className="brR">Type</span>
 																<span className="brR">isRequired</span>
 																<span className="brR ">Default Props</span>
+																<span className="brR ">Description</span>
 															</div>
 															{
 																currentCompProps.map((value, i) => {
@@ -796,9 +798,15 @@
 																			</span>
 																			<span className="defaultProps">
 																				<div className="bn">
-																					{JSON.stringify(currentCompDefault[value])}
+																					{JSON.stringify(currentCompDefault[value] || '')}
 																				</div>
 																			</span>
+																			<span className="defaultProps">
+																				<div className="bn">
+																					{JSON.stringify(currentCompPropsDescription[value] || '')}
+																				</div>
+																			</span>  
+
 																		</div>
 																	);
 																})