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

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/configs/webpack.dev.config.js

@@ -16,8 +16,8 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let options = (0, _utils.getOptions)();
-let {
+const options = (0, _utils.getOptions)();
+const {
   unstableDepsInverse,
   app: {
     folder,
@@ -27,6 +27,7 @@ let {
     plugins,
     exclude,
     mediaQueryHoverActiveString,
+    cssVariableReplacementConfig,
     cssUniqueness,
     seperateCssModules,
     changeRuntimeChunkChar,
@@ -41,13 +42,13 @@ let {
     crossorigin
   }
 } = options;
-let {
+const {
   disableContextURL
 } = server;
-let appPath = process.cwd();
-let contextURL = disableContextURL ? '' : context;
-let serverUrl = (0, _utils.getServerURL)(server, 'https');
-let output = {
+const appPath = process.cwd();
+const contextURL = disableContextURL ? '' : context;
+const serverUrl = (0, _utils.getServerURL)(server, 'https');
+const output = {
   path: _path.default.join(appPath, outputFolder),
   filename: 'js/[name].js',
   chunkFilename: 'js/[name].js',
@@ -86,9 +87,9 @@ module.exports = {
       test: /\.js$/,
       use: (0, _loaderUtils.getDevJsLoaders)(options),
       include: module => {
-        let srcPath = _path.default.join(appPath, folder);
+        const srcPath = _path.default.join(appPath, folder);
 
-        let depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
+        const depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
 
         if (module.includes(srcPath) || devConsoleExculde && module.includes(depsPath)) {
           return true;
@@ -99,10 +100,10 @@ module.exports = {
     }, seperateCssModules ? {
       test: /\.css$/,
       exclude: /\.module\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, '[local]', false, null)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, '[local]', false, null)
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
       test: /\.tmpl$/,
       use: [{

package/lib/configs/webpack.docs.config.js

@@ -14,8 +14,8 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let options = (0, _utils.getOptions)();
-let {
+const options = (0, _utils.getOptions)();
+const {
   unstableDepsInverse,
   docs: {
     componentFolder,
@@ -25,6 +25,7 @@ let {
     plugins,
     exclude,
     mediaQueryHoverActiveString,
+    cssVariableReplacementConfig,
     cssHashSelectors,
     classNamePrefix
   },
@@ -32,7 +33,7 @@ let {
     folder
   }
 } = options;
-let appPath = process.cwd();
+const appPath = process.cwd();
 const nameTemplate = (0, _configsAssetsLoaders.createNameTemplate)(enableChunkHash);
 
 module.exports = isSSTest => ({
@@ -74,7 +75,7 @@ module.exports = isSSTest => ({
       exclude: /node_modules/
     }, {
       test: /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
       test: /\.html$/,
       use: {

package/lib/configs/webpack.impact.config.js

@@ -12,14 +12,15 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let options = (0, _utils.getOptions)();
-let {
+const options = (0, _utils.getOptions)();
+const {
   docs: {
     componentFolder,
     cssUniqueness,
     plugins,
     exclude,
     mediaQueryHoverActiveString,
+    cssVariableReplacementConfig,
     cssHashSelectors,
     enableChunkHash,
     classNamePrefix
@@ -28,7 +29,7 @@ let {
     folder
   }
 } = options;
-let appPath = process.cwd();
+const appPath = process.cwd();
 const nameTemplate = (0, _configsAssetsLoaders.createNameTemplate)(enableChunkHash);
 module.exports = {
   entry: {
@@ -69,7 +70,7 @@ module.exports = {
       exclude: /node_modules/
     }, {
       test: /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
       test: /\.html$/,
       use: {

package/lib/configs/webpack.prod.config.js

@@ -17,7 +17,7 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import TerserPlugin from 'terser-webpack-plugin';
-let options = (0, _utils.getOptions)();
+const options = (0, _utils.getOptions)();
 let {
   unstableDepsInverse,
   app: {
@@ -32,6 +32,7 @@ let {
     plugins,
     exclude,
     mediaQueryHoverActiveString,
+    cssVariableReplacementConfig,
     cssUniqueness,
     server: {
       mode
@@ -46,10 +47,10 @@ let {
     crossorigin
   }
 } = options;
-let appPath = process.cwd();
-let isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
+const appPath = process.cwd();
+const isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
 enableChunkHash = !isDevelopment && enableChunkHash;
-let output = {
+const output = {
   path: _path.default.resolve(appPath, outputFolder),
   filename: enableChunkHash ? 'js/[name].[chunkhash:20]_.js' : 'js/[name]_.js',
   chunkFilename: enableChunkHash ? 'js/[name].[chunkhash:20]_.js' : 'js/[name]_.js',
@@ -62,15 +63,15 @@ if (crossorigin) {
 }
 
 if (isDevelopment) {
-  let {
+  const {
     disableContextURL
   } = server;
-  let contextURL = disableContextURL ? '' : context;
-  let serverUrl = (0, _utils.getServerURL)(server, 'https');
+  const contextURL = disableContextURL ? '' : context;
+  const serverUrl = (0, _utils.getServerURL)(server, 'https');
   output.publicPath = `${[serverUrl, contextURL].filter(a => a).join('/')}/`;
 }
 
-let shouldRemovePropTypes = !isDevelopment && removePropTypes;
+const shouldRemovePropTypes = !isDevelopment && removePropTypes;
 module.exports = {
   entry: (0, _common.getEntries)(options, 'production'),
   devtool: isDevelopment ? 'cheap-module-source-map' : enableSMap ? 'hidden-source-map' : 'none',
@@ -134,9 +135,9 @@ module.exports = {
       }].filter(Boolean),
       // include: path.join(appPath, folder)
       include: module => {
-        let srcPath = _path.default.join(appPath, folder);
+        const srcPath = _path.default.join(appPath, folder);
 
-        let depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
+        const depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
 
         if (module.includes(srcPath) || devConsoleExculde && module.includes(depsPath)) {
           return true;
@@ -147,10 +148,10 @@ module.exports = {
     }, seperateCssModules ? {
       test: /\.css$/,
       exclude: /\.module\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, '[local]', false, null)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, cssVariableReplacementConfig, mediaQueryHoverActiveString, '[local]', false, null)
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
     }, {
       test: /\.jpe?g$|\.gif$|\.png$/,
       use: [{

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

@@ -13,8 +13,10 @@ var _utils = require("../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let options = (0, _utils.getOptions)();
-let isWin = process.platform === 'win32';
+const fs = require('fs');
+
+const options = (0, _utils.getOptions)();
+const isWin = process.platform === 'win32';
 
 function windowsModification(array) {
   return isWin ? array.map(r => r.replace(/\//g, '\\')) : array;
@@ -31,7 +33,7 @@ function excludeEmptyCheckPlugin({
   })] : [];
 }
 
-let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
+const getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
   // console.log('plugins:')
   // console.log(plugins)
   // console.log('exclude:')
@@ -45,10 +47,12 @@ let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlo
   const {
     cssSelectorZipPath
   } = options.impactService;
-  let rtlExcludeLocal = windowsModification(exclude.rtl);
-  let hoverActiveExcludeLocal = windowsModification(exclude.hoverActive);
-  let combinerMediaQueryExcludeLocal = windowsModification(exclude.combinerMediaQuery);
-  let cssLoaderOptions = {
+  fs.writeFileSync('./css_error.log', '');
+  const rtlExcludeLocal = windowsModification(exclude.rtl);
+  const hoverActiveExcludeLocal = windowsModification(exclude.hoverActive);
+  const combinerMediaQueryExcludeLocal = windowsModification(exclude.combinerMediaQuery);
+  const cssVariableReplacementExcludeLocal = windowsModification(exclude.cssVariableReplacement);
+  const cssLoaderOptions = {
     // importLoaders: hasRTL||hoverActive ? 1 : 0,
     importLoaders: 1,
     modules: {},
@@ -61,7 +65,12 @@ let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlo
     cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix);
   }
 
-  const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('postcss-selector-replace')(selectorReplace), ...excludeEmptyCheckPlugin({
+  const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('postcss-selector-replace')(selectorReplace), // ...excludeEmptyCheckPlugin({
+  //   enable: true,
+  //   ignore: [],
+  //   plugins: [require('../postcss-plugins/variablePropertiesCollector').default()]
+  // }),
+  ...excludeEmptyCheckPlugin({
     enable: plugins.hasRTL,
     ignore: rtlExcludeLocal,
     plugins: [require('@zohodesk/postcss-rtl')({
@@ -81,8 +90,11 @@ let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlo
     enable: plugins.hoverActive,
     ignore: hoverActiveExcludeLocal,
     plugins: [require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString)]
-  }) // require('../postcss-plugins/variableModifier')()
-  ].filter(Boolean);
+  }), ...excludeEmptyCheckPlugin({
+    enable: plugins.cssVariableReplacement,
+    ignore: cssVariableReplacementExcludeLocal,
+    plugins: [fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index')(cssVariableReplacementConfig)]
+  })].filter(Boolean);
   return [cssSelectorZipPath && {
     loader: require.resolve('../loaders/selectorMappingLoader')
   }, {

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 === '') {

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorHandler = void 0;
+
+class ErrorHandler {
+  constructor(allowedErrs) {
+    this.errors = [];
+    this.allowedErrs = allowedErrs;
+  }
+
+  addError(errstr) {
+    this.errors.push(`{\n${errstr}\n}\n`);
+  }
+
+  errorFunction(errStr, type) {
+    const {
+      addError,
+      allowedErrs
+    } = this;
+
+    if (type === 'DECLARATION_IGNORED' && allowedErrs.DECLARATION_IGNORED) {
+      addError(errStr);
+    } else if (type === 'UNIT_ERROR' && allowedErrs.UNIT_ERROR) {
+      addError(errStr);
+    } else if (type === 'RANGE_ERROR' && allowedErrs.RANGE_ERROR) {
+      addError(errStr);
+    } else if (type === 'VARIABLE_PRESENT' && allowedErrs.VARIABLE_PRESENT) {
+      addError(errStr);
+    }
+  }
+
+}
+
+exports.ErrorHandler = ErrorHandler;