@zohodesk/react-cli 0.0.1-beta.168 → 0.0.1-beta.170

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "jsxSingleQuote": true
+}

package/README.md

@@ -2,6 +2,51 @@
 
 A CLI tool for build modern web application and libraries
 
+# 0.0.1-beta.170
+
+this version has same as `0.0.1-exp.169.1`, `0.0.1-exp.169.2`
+
+# 0.0.1-exp.169.2
+
+1. flags are converted to one variable 'plugin' and used in getCssLoaders.js.
+2. files for exclusion can be put in seperate arrays in 'exclude' present in package.json.
+3. `combinerMq` has been converted to `combinerMediaQuery` for clarity.
+
+# 0.0.1-exp.169.1
+
+File support added for mp4 for docs dev and prod mode
+
+# 0.0.1-beta.169
+
+this version has same as `0.0.1-exp.168.1`, `0.0.1-exp.168.2`, `0.0.1-exp.168.3` and below and some minor changes
+
+1. `--efc_version=v3` flag added for change efc version via commmand line option
+2. `hoverActive` flag added for conversion from usual hover to @media(hover:hover) and @media(hover:none) queries for hover support in mobile.
+3. `combinerMq` flag added for combination of the media queries that might be appended or existing media queries that are duplicates to create one media query with all rules put together.
+
+# 0.0.1-exp.168.3
+
+Changes :
+
+1.  code optimization ( made functions for the hoverActive cases making it more easier to access)
+2.  handled `hover:ignore`, `active:ignore`, `hoverActive:ignore` cases for usual queries and media queries
+
+# 0.0.1-exp.168.2
+
+Changes :
+
+1. hoverActive case handled with postcss `hover:hover` media query and `hover:none` media query is added
+2. flag for hoverActive used to add/remove postcss changes
+
+# 0.0.1-exp.168.1
+
+Changes:-
+
+1. `cliRootPath` option removed `react-cli.app.cliRootPath` in `package.json`
+   Due to the reason we updated our logic to find package's executable path.
+2. `--efc_output_file=efc-sdk-[version].js` option added to modify efc output file by terminal
+3. added logic to print error message during command run, Previously when executable not found error messages not printed
+
 # 0.0.1-beta.168
 
 Changes:-
@@ -157,7 +202,7 @@ this version has same as `# 0.0.1-exp.164.1`, `# 0.0.1-exp.164.2` and below and
 
 # 0.0.1-exp.159
 
-- isse fix:-
+- issue fix:-
   - when rtl ltr css split enable manifest json css filename keys comes with hash .
 
 # 0.0.1-beta.158

package/bin/cli.js

@@ -1,19 +1,26 @@
 #!/usr/bin/env node
 
 const path = require('path');
-const os = require('os');
 const { existsSync } = require('fs');
-const { spawnSync, spawn } = require('child_process');
+const { spawnSync: _spawnSync, spawn } = require('child_process');
 const { getOptions } = require('../lib/utils/index.js');
 
 const { log } = require('../lib/utils');
+const { getCliPath } = require('../lib/servers/getCliPath.js');
 //initPreCommitHook();
 
 const options = getOptions();
 
+function spawnSync(...args) {
+  const result = _spawnSync(...args);
+  if (result.error) {
+    console.error(result.error);
+  }
+  return result;
+}
+
 const { esLint: esLintOptions } = options || {};
 const { preprocess } = options;
-let { cliRootPath } = options;
 const {
   ignoreFilePaths: esLintIgnorePaths,
   fix: esLintFix,
@@ -21,27 +28,10 @@ const {
   reportPath: reportPath
 } = esLintOptions || {};
 
-const isWindows = os.platform().toLowerCase() === 'win32';
-
 const [, , option] = process.argv;
 const args = process.argv.slice(3);
 const appPath = process.cwd();
 
-const isNodeModuleUnderAppFolder = __dirname.indexOf(appPath) !== -1;
-
-if (!cliRootPath) {
-  cliRootPath = path.join(__dirname, '..');
-}
-
-const _getCliPath = !isNodeModuleUnderAppFolder
-  ? libName => path.join(cliRootPath, 'node_modules', '.bin', libName)
-  : libName => libName;
-const suffixExt = isWindows ? '.cmd' : '';
-
-function getCliPath(libName) {
-  return _getCliPath(libName) + suffixExt;
-}
-
 const webpack = getCliPath('webpack');
 
 const nodemon = getCliPath('nodemon');

package/docs/HoverActive.md

@@ -0,0 +1,12 @@
+# hover active css handling
+
+In general we write css with some hover in it.  
+But In mobile there is no hover and some times this hover css may do something messy some thing like we may need to click a button we need to click it double time.
+
+To handle this behaviour we write a postcss plugin
+
+PostCSS plugin that transforms :hover selectors to :active on devices where a mouse isn't the primary input mechanism.
+
+when we write hover css it will have some problem in mobile devices the reason was in mobile device ther is no mouse
+
+for this we have to handle that as

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

@@ -24,8 +24,8 @@ let {
     context,
     server,
     outputFolder,
-    rtlExclude,
-    hasRTL,
+    plugins,
+    exclude,
     cssUniqueness,
     seperateCssModules,
     changeRuntimeChunkChar,
@@ -98,11 +98,11 @@ module.exports = {
     }, seperateCssModules ? {
       test: /\.css$/,
       exclude: /\.module\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, '[local]', false, null)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, '[local]', false, null)
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
-    }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, 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: [{
         loader: 'html-loader',

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

@@ -22,8 +22,8 @@ let {
     disableES5Transpile,
     enableChunkHash,
     cssUniqueness,
-    hasRTL,
-    rtlExclude,
+    plugins,
+    exclude,
     cssHashSelectors,
     classNamePrefix
   },
@@ -73,8 +73,8 @@ module.exports = isSSTest => ({
       exclude: /node_modules/
     }, {
       test: /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
-    }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, 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: {
         loader: 'html-loader',

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

@@ -17,8 +17,8 @@ let {
   docs: {
     componentFolder,
     cssUniqueness,
-    hasRTL,
-    rtlExclude,
+    plugins,
+    exclude,
     cssHashSelectors,
     enableChunkHash,
     classNamePrefix
@@ -68,8 +68,8 @@ module.exports = {
       exclude: /node_modules/
     }, {
       test: /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
-    }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, 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: {
         loader: 'html-loader',

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

@@ -12,6 +12,8 @@ var _loaderUtils = require("../loaderUtils");
 
 var _libAlias = require("./libAlias");
 
+var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import TerserPlugin from 'terser-webpack-plugin';
@@ -27,8 +29,8 @@ let {
     removeAttribute,
     enableSMap,
     server,
-    hasRTL,
-    rtlExclude,
+    plugins,
+    exclude,
     cssUniqueness,
     server: {
       mode
@@ -144,10 +146,10 @@ module.exports = {
     }, seperateCssModules ? {
       test: /\.css$/,
       exclude: /\.module\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, '[local]', false, null)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, '[local]', false, null)
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
     }, {
       test: /\.jpe?g$|\.gif$|\.png$/,
       use: [{
@@ -158,7 +160,7 @@ module.exports = {
           fallback: _path.default.join(__dirname, '..', 'loaders', 'fileLoader.js')
         }
       }]
-    }, {
+    }, (0, _configsAssetsLoaders.configVideoLoaderObj)(enableChunkHash ? './images/[name].[hash:20].[ext]' : './images/[name].[ext]'), {
       test: /\.woff2|\.woff$|\.ttf$|\.eot$/,
       use: [{
         loader: 'url-loader',

package/lib/loaderUtils/configsAssetsLoaders.js

@@ -7,12 +7,20 @@ exports.configAudioLoader = configAudioLoader;
 exports.configFontLoader = configFontLoader;
 exports.configImageLoader = configImageLoader;
 exports.configSVGLoader = configSVGLoader;
+exports.configVideoLoader = configVideoLoader;
+exports.configVideoLoaderObj = configVideoLoaderObj;
 exports.createNameTemplate = createNameTemplate;
+
+var _path = _interopRequireDefault(require("path"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 // function getLoaderOptionQueryString(params) {
 const ImageExtRegex = /\.jpe?g$|\.gif$|\.png$/;
 const FontExtRegex = /\.woff2|\.woff$|\.ttf$|\.eot$/;
 const SVGExtRegex = /\.svg$/;
 const AudioExtRegex = /\.ogg$/;
+const VidioExtRegex = /\.mp4$/;
 
 function createLoaderOptionQueryString(loaderName, nameTemplate, limit = 1000) {
   return `${loaderName}?limit=${limit}&name=${nameTemplate}`;
@@ -46,6 +54,27 @@ function configAudioLoader(nameTemplate) {
   };
 }
 
+function configVideoLoader(nameTemplate) {
+  return {
+    test: VidioExtRegex,
+    use: createLoaderOptionQueryString('url-loader', `./images/${nameTemplate}`, 1)
+  };
+}
+
+function configVideoLoaderObj(nameTemplate) {
+  return {
+    test: VidioExtRegex,
+    use: {
+      loader: 'url-loader',
+      options: {
+        limit: 1000,
+        name: nameTemplate,
+        fallback: _path.default.join(__dirname, '..', 'loaders', 'fileLoader.js')
+      }
+    }
+  };
+}
+
 function createNameTemplate(enableChunkHash) {
   const ext = `${enableChunkHash ? '.[hash:20]' : ''}.[ext]`;
   return `[name]${ext}`;

package/lib/loaderUtils/getCSSLoaders.js

@@ -16,7 +16,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 let options = (0, _utils.getOptions)();
 let isWin = process.platform === 'win32';
 
-let getCSSLoaders = (hasRTL, rtlExclude, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
+function windowsModification(array) {
+  return isWin ? array.map(r => r.replace(/\//g, '\\')) : array;
+}
+
+function excludeEmptyCheckPlugin({
+  enable,
+  ignore,
+  plugins
+}) {
+  return enable ? ignore.length == 0 ? plugins : [require('../postcss-plugins/ExcludePlugin')({
+    ignore,
+    plugins
+  })] : [];
+}
+
+let getCSSLoaders = (plugins, exclude, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
+  // console.log('plugins:')
+  // console.log(plugins)
+  // console.log('exclude:')
+  // console.log(exclude)
   const {
     devCssFileBountry
   } = options.app;
@@ -26,9 +45,12 @@ let getCSSLoaders = (hasRTL, rtlExclude, classNameBlob, cssUniqueness, selectorR
   const {
     cssSelectorZipPath
   } = options.impactService;
-  let rtlExcludeLocal = isWin ? rtlExclude.map(r => r.replace(/\//g, '\\')) : rtlExclude;
+  let rtlExcludeLocal = windowsModification(exclude.rtl);
+  let hoverActiveExcludeLocal = windowsModification(exclude.hoverActive);
+  let combinerMediaQueryExcludeLocal = windowsModification(exclude.combinerMediaQuery);
   let cssLoaderOptions = {
-    importLoaders: hasRTL ? 1 : 0,
+    // importLoaders: hasRTL||hoverActive ? 1 : 0,
+    importLoaders: 1,
     modules: {},
     sourceMap: true
   };
@@ -39,7 +61,8 @@ let getCSSLoaders = (hasRTL, rtlExclude, classNameBlob, cssUniqueness, selectorR
     cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix);
   }
 
-  const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('postcss-selector-replace')(selectorReplace), hasRTL && require('../postcss-plugins/ExcludeRTLPlugin')({
+  const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('postcss-selector-replace')(selectorReplace), ...excludeEmptyCheckPlugin({
+    enable: plugins.hasRTL,
     ignore: rtlExcludeLocal,
     plugins: [require('@zohodesk/postcss-rtl')({
       addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
@@ -50,7 +73,16 @@ let getCSSLoaders = (hasRTL, rtlExclude, classNameBlob, cssUniqueness, selectorR
         return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
       }
     })]
-  })].filter(Boolean);
+  }), ...excludeEmptyCheckPlugin({
+    enable: plugins.combinerMediaQuery,
+    ignore: combinerMediaQueryExcludeLocal,
+    plugins: [require('postcss-combine-media-query')]
+  }), ...excludeEmptyCheckPlugin({
+    enable: plugins.hoverActive,
+    ignore: hoverActiveExcludeLocal,
+    plugins: [require('../postcss-plugins/hoverActivePlugin')]
+  }) // require('../postcss-plugins/variableModifier')()
+  ].filter(Boolean);
   return [cssSelectorZipPath && {
     loader: require.resolve('../loaders/selectorMappingLoader')
   }, {

package/lib/plugins/I18nSplitPlugin/I18nSplit.md

@@ -3,84 +3,93 @@
 generaly we have manage our all I18n keys and values as language specific i18n files and then we download all i18n in initial page load.
 
 ### what is the problem with this?.
+
 the problem is i18n file keep get's grown it will affect the the inital page load and critial rendering path.
 So, We have decide to create a plugin for split i18n per chunk's of js vise.
 
 ### what is i18n split?
-  it is like code split for i18n.
-  we will collect i18n from js chunk and we will create separate i18n chunk per js chunk,
-   with this we already load Js chunks are on demand and now we also download i18n also ondemand with this the initial and forthere actions.
-  when js download's we will download i18n with it.  
 
-###  How to we going to i18n split?
-  we will read the js chunk and collect I18n keys form it,
-  then we will create i18n chunk files with these used keys.
+it is like code split for i18n.
+we will collect i18n from js chunk and we will create separate i18n chunk per js chunk,  
+ with this we already load Js chunks are on demand and now we also download i18n also ondemand with this the initial and forthere actions.  
+ when js download's we will download i18n with it.
+
+### How to we going to i18n split?
+
+we will read the js chunk and collect I18n keys form it,  
+ then we will create i18n chunk files with these used keys.
 
 ### how do you collect i18n keys from js files?
-  we will traverse the js file's AST (static analysis) and find i18 keys,
-  we will concider all string which is in jsResource file as i18n keys.
-  and you can tell dynamic i18n key by js comments,
-  Like Below:- 
-  ```js
-  fetch("tickets?view=view1").then(data => {
-    // I18n support.ticketsEmpty
-    // I18n support.viewNotFount
-    // I18n support.permissionDenied
-    let text = getI18nValue(data.i18nkey);
-  })
-  ```
+
+we will traverse the js file's AST (static analysis) and find i18 keys,  
+ we will concider all string which is in jsResource file as i18n keys.  
+ and you can tell dynamic i18n key by js comments,  
+ Like Below:-
+
+```js
+fetch('tickets?view=view1').then(data => {
+  // I18n support.ticketsEmpty
+  // I18n support.viewNotFount
+  // I18n support.permissionDenied
+  let text = getI18nValue(data.i18nkey);
+});
+```
 
 ### is there any posiblity for unwanted keys in some chunk?
-  Yes, there is two posiblity
-  1. js comment , if you write js comment but it is  not needed then it will be add into i18n chunk
-    `To Resolve` we currently do not have perfect idea for this, But we can check this  by chunk size limit.
-    `idea's will be welcome`
-  2. like we said "we will concider all string which is in jsResource file as i18n keys",
-     So if you use string not for i18n but it was in jsResource then it will be add into i18n chunk.
-     `To Resolve` this  problem we can use some  kinda prefix or something. 
+
+Yes, there is two posiblity
+
+1. js comment , if you write js comment but it is not needed then it will be add into i18n chunk  
+   `To Resolve` we currently do not have perfect idea for this, But we can check this by chunk size limit.  
+   `idea's will be welcome`
+2. like we said "we will concider all string which is in jsResource file as i18n keys",  
+   So if you use string not for i18n but it was in jsResource then it will be add into i18n chunk.  
+   `To Resolve` this problem we can use some kinda prefix or something.
 
 ### how do we downlowd and give to app?
-  we have over write defualt webpack requireEnsure (every dynamic chunk requests are done by that function) function.
-  and we parlarly dowload i18n files. and we ask jsonFunction, to our plugin.
-So we send i18nkeys , when it was download,
-you must store all i18n keys, we give asycrnsly by that function download in that patticular.
+
+we have over write defualt webpack requireEnsure (every dynamic chunk requests are done by that function) function.  
+ and we parlarly dowload i18n files. and we ask jsonFunction, to our plugin.  
+So we send i18nkeys , when it was download,  
+you must store all i18n keys, we give asycrnsly by that function download in that patticular.  
 so you must store and update (like append or assign) everytime that function call.
 
 ### how to use this feature?
-  to use this feature use have give the below oprtions
-  `package.json`
-  ```json
-  {
-    /// ...some things
-    "react-cli": {
-      //  ...some things
-      "i18n": {   
-        "chunkSplitEnable": true,
-        "jsResource": "./deskapp/properties/JSResources.properties",
-        "localeVarName": "window.userInfo.langCode",
-        "jsonpFunc": "window.loadI18nChunk",
-        "templateLabel": "{{--user-locale}}",// this is  for html template i18n file path locate template
-        "propertiesFolder": "./deskapp/properties"
-      },
-      //  ...some things
+
+to use this feature use have give the below oprtions  
+ `package.json`
+
+```json
+{
+  /// ...some things
+  "react-cli": {
+    //  ...some things
+    "i18n": {
+      "chunkSplitEnable": true,
+      "jsResource": "./deskapp/properties/JSResources.properties",
+      "localeVarName": "window.userInfo.langCode",
+      "jsonpFunc": "window.loadI18nChunk",
+      "templateLabel": "{{--user-locale}}", // this is  for html template i18n file path locate template
+      "propertiesFolder": "./deskapp/properties"
     }
+    //  ...some things
   }
-  ```
-
+}
+```
 
 <!-- not need below -->
-<!-- 
+<!--we have added new feature for css to write logic to how hover related css work in hoverhover and a
 
 ### is there any problems with static analysis?
-  Yes, 
+  Yes,
 
 ### how do we use dynamic i18n key?
 
-  and we will download i18n file with 
+  and we will download i18n file with
 
   and when js chunk download's then we will download i18n as need.
   we all know in our app we loading i18n as one single big file for each locale(language).
-  we are going to split i18n as per js chunk, and when js chunk download's then we will download i18n as need. 
-  
-  
+  we are going to split i18n as per js chunk, and when js chunk download's then we will download i18n as need.
+
+
   -->

package/lib/postcss-plugins/{ExcludeRTLPlugin.js → ExcludePlugin.js}

@@ -4,7 +4,7 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-module.exports = _postcss.default.plugin('postcss-exclude-rtl-files', opts => {
+module.exports = _postcss.default.plugin('postcss-exclude-files', opts => {
   const {
     plugins
   } = opts;

package/lib/postcss-plugins/__test__/hoverActivePlugin.spec.js

@@ -0,0 +1,22 @@
+"use strict";
+
+const fs = require('fs');
+
+const postcss = require('postcss');
+
+function expectRunPostCss(inputFile, outputfile, cb) {
+  const inputStr = fs.readFileSync(inputFile, 'utf-8');
+  postcss(plugins).process(inputStr, {
+    from,
+    to
+  }).then(result => {
+    expect(result.css).toBe(fs.readFileSync(outputfile, 'utf-8'));
+    cb();
+  });
+}
+
+describe('To Check Hover active postcss Plugin  ', () => {
+  test('should handle normal rule hover', cb => {
+    expectRunPostCss('test1Input.css', 'test1Output.css', cb);
+  });
+});

package/lib/postcss-plugins/__test__/test1Input.css

@@ -0,0 +1,39 @@
+/*Hover_active:ignore*/
+g,a:hover{
+	color : red
+}
+/*Hover:ignore*/
+h:hover{
+background : yellow
+}
+
+/* Hover_active:ignore */
+g,d+e:hover{
+	color : black
+}
+
+g,d e:hover{
+	color : black
+}
+
+@media screen and (max-width:61.25em){
+  /* Hover_active:ignore */
+  a,b,a:hover, b:hover{
+  background-color : blue
+  }
+  a + b,a:hover + b:hover{
+  background-color : blue
+  }
+  a b:hover{
+  background-color : blue
+  }
+  
+  .cc:hover {
+    color: red;
+  }
+
+  c:hover{
+  color : red
+  }
+  
+}

package/lib/postcss-plugins/__test__/test1Output.css

@@ -0,0 +1,39 @@
+/*Hover_active:ignore*/
+g,a:hover{
+	color : red
+}
+/*Hover:ignore*/
+h:hover{
+background : yellow
+}
+
+/* Hover_active:ignore */
+g,d+e:hover{
+	color : black
+}
+
+g,d e:hover{
+	color : black
+}
+
+@media screen and (max-width:61.25em){
+  /* Hover_active:ignore */
+  a,b,a:hover, b:hover{
+  background-color : blue
+  }
+  a + b,a:hover + b:hover{
+  background-color : blue
+  }
+  a b:hover{
+  background-color : blue
+  }
+  
+  .cc:hover {
+    color: red;
+  }
+
+  c:hover{
+  color : red
+  }
+  
+}

package/lib/postcss-plugins/hoverActivePlugin.js

@@ -0,0 +1,365 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * we have give support for ignore(exclude) comments
+ * These are the comments' keyword
+ */
+const hoverIgnoreQuery = 'Hover:ignore',
+      activeIgnoreQuery = 'Active:ignore',
+      hoverActiveIgnoreQuery = 'HoverActive:ignore';
+const medHoverIgnoreQuery = 'MedHover:ignore',
+      medActiveIgnoreQuery = 'MedActive:ignore',
+      medHoverActiveIgnoreQuery = 'MedHoverActive:ignore';
+const hoverMedQuerySuffix = '(min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)';
+const ruleIgnoreCommentRegex = /(Hover:ignore|Active:ignore|HoverActive:ignore)/g;
+const mediaQueryIgnoreCommentRegex = /(MedHover:ignore|MedActive:ignore|MedHoverActive:ignore)/g;
+
+function isComment(node) {
+  return node && node.type === 'comment' && node.text !== undefined;
+}
+
+function isHoverPresent(atrule) {
+  let hoverPresent = false;
+  atrule.walkRules(rule => {
+    if (rule.selector.includes('hover')) {
+      hoverPresent = true;
+    }
+  });
+  return hoverPresent;
+}
+
+module.exports = _postcss.default.plugin('postcss-mobile-hover', () => rootOriginal => {
+  const hoverRules = [];
+  let positionsObj = {};
+
+  function isRuleHasIgnoreComment(index, type) {
+    const prevNode = rootOriginal.nodes[index - 1];
+
+    if (isComment(prevNode)) {
+      return prevNode.text === type;
+    }
+
+    return false;
+  }
+
+  function isMediaQueryHasIgnoreComment(node, type) {
+    if (isComment(node)) {
+      return node.text === type;
+    }
+
+    return false;
+  }
+
+  function hasIgnoreComment({
+    index,
+    atrule,
+    type
+  }) {
+    if (type.match(mediaQueryIgnoreCommentRegex)) {
+      return isMediaQueryHasIgnoreComment(atrule.nodes[index - 1], type.slice(3));
+    }
+
+    if (type.match(ruleIgnoreCommentRegex)) {
+      return isRuleHasIgnoreComment(index, type);
+    }
+
+    return false;
+  }
+
+  function getPositionsOfHoverAndActiveMedQueries(parent) {
+    const allNodes = rootOriginal.nodes;
+    const hoverMediaQuery = `${parent.params} and all and ${hoverMedQuerySuffix}`;
+    const hoverNoneMediaQuery = `${parent.params} and (hover: none)`;
+    const positions = {
+      hovMed: allNodes[positionsObj[hoverMediaQuery]],
+      actMed: allNodes[positionsObj[hoverNoneMediaQuery]]
+    };
+    return positions;
+  }
+
+  function handleMedHoverAndHoverActiveIgnore(atrule, index) {
+    return !hasIgnoreComment({
+      atrule,
+      index,
+      type: medHoverIgnoreQuery
+    }) && !hasIgnoreComment({
+      atrule,
+      index,
+      type: medHoverActiveIgnoreQuery
+    });
+  }
+
+  function handleMedActiveAndHoverActiveIgnore(atrule, index) {
+    return !hasIgnoreComment({
+      atrule,
+      index,
+      type: medActiveIgnoreQuery
+    }) && !hasIgnoreComment({
+      atrule,
+      index,
+      type: medHoverActiveIgnoreQuery
+    });
+  }
+
+  function handleHoverAndHoverActiveIgnore(index) {
+    return !hasIgnoreComment({
+      index,
+      type: hoverIgnoreQuery
+    }) && !hasIgnoreComment({
+      index,
+      type: hoverActiveIgnoreQuery
+    });
+  }
+
+  function handleActiveAndHoverActiveIgnore(index) {
+    return !hasIgnoreComment({
+      index,
+      type: activeIgnoreQuery
+    }) && !hasIgnoreComment({
+      index,
+      type: hoverActiveIgnoreQuery
+    });
+  }
+
+  function handleAllIgnoreCases(index) {
+    return !hasIgnoreComment({
+      index,
+      type: activeIgnoreQuery
+    }) && !hasIgnoreComment({
+      index,
+      type: hoverIgnoreQuery
+    }) && !hasIgnoreComment({
+      index,
+      type: hoverActiveIgnoreQuery
+    });
+  }
+
+  function mediaCommaQuery(rule, index) {
+    if (rule.parent.params !== undefined && !rule.parent.params.includes('hover')) {
+      //console.log(hovMed, actMed);
+      let newSelector = '';
+      let {
+        hovMed,
+        actMed
+      } = getPositionsOfHoverAndActiveMedQueries(rule.parent);
+      let hovQueries = [];
+      let actQueries = [];
+      rule.selector.split(/\s*,\s*/).forEach(_subrule => {
+        let subrule = _subrule.trim();
+
+        let clone = rule.clone();
+
+        if (subrule.includes('hover')) {
+          clone.selector = subrule;
+
+          if (handleMedHoverAndHoverActiveIgnore(rule.parent, index)) {
+            hovQueries.push(subrule);
+          }
+
+          if (handleMedActiveAndHoverActiveIgnore(rule.parent, index)) {
+            actQueries.push(subrule);
+          }
+        } else {
+          newSelector += `${subrule}, `;
+        }
+      });
+
+      if (hovQueries.length > 0) {
+        let clone = rule.clone();
+        clone.selector = hovQueries.join(',');
+        hovMed.append(clone);
+      }
+
+      if (actQueries.length > 0) {
+        let clone = rule.clone();
+        clone.selector = actQueries.join(',');
+        actMed.append(clone.clone({
+          selector: clone.selector.replace(/:hover/gi, ':active')
+        }));
+      }
+
+      if (handleMedHoverAndHoverActiveIgnore(rule.parent, index)) {
+        rule.selector = newSelector.substring(0, newSelector.length - 2);
+      }
+
+      if (rule.selector === '') {
+        rule.remove();
+      }
+    }
+  }
+
+  function mediaQuery(rule, index) {
+    if (rule.parent.params !== undefined && !rule.parent.params.includes('hover')) {
+      let {
+        hovMed,
+        actMed
+      } = getPositionsOfHoverAndActiveMedQueries(rule.parent);
+
+      if (rule.selector.includes('hover') && hovMed !== undefined && rule.parent.type === 'atrule') {
+        if (handleMedHoverAndHoverActiveIgnore(rule.parent, index)) {
+          hovMed.append(rule);
+        }
+
+        if (handleMedActiveAndHoverActiveIgnore(rule.parent, index)) {
+          actMed.append(rule.clone({
+            selector: rule.selector.replace(/:hover/gi, ':active')
+          }));
+        }
+      }
+    }
+  }
+
+  function commaQuery(rule, index) {
+    //console.log("comma" , rule.selector.split('\n'));
+    let newSelector = '';
+    let hovQueries = [];
+    rule.selector.split(/\s*,\s*/).forEach(_subrule => {
+      let subrule = _subrule.trim();
+
+      if (subrule.includes('hover')) {
+        // hoverRules.push({ rule: clone, index });
+        hovQueries.push(subrule);
+      } else {
+        newSelector += `${subrule}, `;
+      }
+    });
+
+    if (hovQueries.length > 0) {
+      let clone = rule.clone();
+      clone.selector = hovQueries.join(',');
+      hoverRules.push({
+        rule: clone,
+        index
+      });
+    }
+
+    if (handleHoverAndHoverActiveIgnore(index)) {
+      rule.selector = newSelector.substring(0, newSelector.length - 2).trim();
+    }
+
+    if (rule.selector === '') {
+      rule.remove();
+    }
+  } // Start by identifying all :hover rules
+
+
+  rootOriginal.walkAtRules(atrule => {
+    const hoverQuery = `${atrule.params} and all and ${hoverMedQuerySuffix}`;
+    const activeQuery = `${atrule.params} and (hover: none)`;
+
+    if (isHoverPresent(atrule)) {
+      if (!positionsObj[hoverQuery] && !positionsObj[activeQuery]) {
+        rootOriginal.append({
+          name: 'media',
+          params: hoverQuery
+        });
+        positionsObj[hoverQuery] = rootOriginal.nodes.length - 1;
+        rootOriginal.append({
+          name: 'media',
+          params: activeQuery
+        });
+        positionsObj[activeQuery] = rootOriginal.nodes.length - 1;
+      }
+    }
+  });
+  rootOriginal.walkRules(/:hover/i, (rule, index) => {
+    // media hover query with ',' ' ' '+'
+    // console.log("media query" , rule.selector)
+    if (rule.parent.type === 'atrule' && rule.selector.includes(',')) {
+      //console.log("media comma", rule.selector)
+      mediaCommaQuery(rule, index);
+    } else {
+      // plus, space and other media queries
+      //console.log("media", rule.selector)
+      mediaQuery(rule, index);
+    } // usual hover query
+
+
+    if (!rule.selector.match(/,+| +|\++/g) && rule.parent !== undefined && rule.parent.name === undefined) {
+      hoverRules.push({
+        rule,
+        index
+      });
+    } //usual hover query with ',' ' ' '+'
+
+
+    if (rule.selector.match(/,+| +|\++/g) && rule.parent.name === undefined) {
+      if (rule.selector.includes(',')) {
+        commaQuery(rule, index);
+      } else if (rule.selector.match(/ +|\++/g)) {
+        //console.log("plus or space" , rule.selector);
+        if (rule.selector.includes('hover')) {
+          hoverRules.push({
+            rule,
+            index
+          }); //rule.remove();
+        }
+      }
+    }
+  }); // If there are any :hover rules in the input, then create media queries
+  // to automatically translate it into :active on touch-based devices
+
+  if (hoverRules.length > 0) {
+    // Create a media query targetting devices that actually support
+    // hover
+    const hoverQuery = rootOriginal.append({
+      name: 'media',
+      params: `all and ${hoverMedQuerySuffix}`
+    }).last; // Create a media query targetting devices that don't support hover
+    // (ie. devices where we should fall back to :active instead)
+
+    const activeQuery = rootOriginal.append({
+      name: 'media',
+      params: '(hover: none)'
+    }).last; // Loop through the hover rules and apply them to each of the media
+    // queries
+    // eslint-disable-next-line no-labels
+
+    outerLoop: for (const hoverRule of hoverRules) {
+      // determine if the rule has been nested inside another media
+      // query; in that case bail out as we have no way of reliably
+      // nesting these queries
+      let parentRule = hoverRule.rule.parent;
+
+      while (parentRule) {
+        if (parentRule.type === 'atrule' && parentRule.name === 'media') {
+          // eslint-disable-next-line no-labels
+          continue outerLoop;
+        }
+
+        parentRule = parentRule.parent;
+      } // Push a clone of the :hover rule 'as is' to queries where we
+      // expect the user's device to support hover
+      // ieQuery.append(hoverRule.clone());
+
+
+      if (handleHoverAndHoverActiveIgnore(hoverRule.index)) {
+        hoverQuery.append(hoverRule.rule.clone());
+      } // Push a clone of the :hover rule, where we transform the
+      // selector to :active to the query targetting devices that
+      // don't support hover
+
+
+      if (handleActiveAndHoverActiveIgnore(hoverRule.index)) {
+        activeQuery.append(hoverRule.rule.clone({
+          selector: hoverRule.rule.selector.replace(/:hover/gi, ':active')
+        }));
+      } // remove legacy rule from output
+
+
+      if (handleAllIgnoreCases(hoverRule.index)) {
+        hoverRule.rule.remove();
+      }
+    }
+  }
+
+  rootOriginal.walkAtRules(atrule => {
+    if (atrule !== undefined && atrule.nodes !== undefined && atrule.nodes.length === 0 || atrule.nodes === undefined) {
+      atrule.remove();
+    }
+  });
+});

package/lib/postcss-plugins/variableModifier.js

@@ -0,0 +1,243 @@
+"use strict";
+
+const postcss = require('postcss');
+
+const path = require('path');
+
+const fs = require('fs');
+
+function populateArray(start, end) {
+  let temp = [];
+
+  for (var i = start; i < end; i++) {
+    temp.push(i);
+  }
+
+  return temp;
+}
+
+let allwdVars = {
+  'font-size': ['px', 'em']
+};
+let numberObject = {
+  'font-size': {
+    allowed: ['px', 'em'],
+    replacements: {
+      px: 'var(--zd_font_size$$)',
+      em: 'var(--zd_font_size$$em)'
+    },
+    //[5,10,15,20,25],
+    available: populateArray(0, 251),
+    replacementValues: {
+      px: [],
+      em: []
+    }
+  },
+  'margin': {
+    allowed: ['px'],
+    replacements: {
+      px: 'var(--zd_size$$)'
+    },
+    available: populateArray(-250, 251),
+    replacementValues: {
+      px: []
+    }
+  },
+  'margin-left': {
+    allowed: ['px'],
+    replacements: {
+      px: 'var(--zd_size$$)'
+    },
+    available: populateArray(-250, 251),
+    replacementValues: {
+      px: []
+    }
+  },
+  'margin-right': {
+    allowed: ['px'],
+    replacements: {
+      px: 'var(--zd_size$$)'
+    },
+    available: populateArray(-250, 251),
+    replacementValues: {
+      px: []
+    }
+  },
+  'margin-top': {
+    allowed: ['px'],
+    replacements: {
+      px: 'var(--zd_size$$)'
+    },
+    available: populateArray(-250, 251),
+    replacementValues: {
+      px: []
+    }
+  },
+  'margin-bottom': {
+    allowed: ['px'],
+    replacements: {
+      px: 'var(--zd_size$$)'
+    },
+    available: populateArray(-250, 251),
+    replacementValues: {
+      px: []
+    }
+  }
+};
+
+function hasIgnoreComment(node) {
+  return node ? node.type == 'comment' ? node.text == 'Variable:Ignore' ? true : false : false : false;
+}
+
+let errors = [];
+module.exports = postcss.plugin('postcss-variable-report', () => rootOriginal => {
+  // console.log('inside postcss plugin')
+  // fs.writeFile('./css_error.log', '\r\nLog File: \r\n\r\n', (err) => {
+  //    if(err)console.log(err);
+  // });
+  // console.log(rootOriginal.source.input.file);
+  if (!rootOriginal.source.input.file.includes('css_error')) {
+    rootOriginal.walkRules(rule => {
+      rule.walkDecls((decl, position) => {
+        // case font-size
+        if (!hasIgnoreComment(rule.nodes[position - 1])) {
+          let unit = decl.value.replace(/[0-9]/g, '');
+          let settings = numberObject[decl.prop];
+          let path = rootOriginal.source.input.from;
+          let filename = path.split('\\');
+          filename = filename[filename.length - 1];
+
+          if (decl.prop === 'font-size' || decl.prop === 'margin-left' || decl.prop === 'margin-right' || decl.prop === 'margin-top' || decl.prop === 'margin-bottom') {
+            let {
+              allowed,
+              replacements,
+              available
+            } = settings;
+
+            if (!rootOriginal.source.input.from.includes('node_modules')) {
+              if (unit != 0) {
+                if (allowed.includes(unit)) {
+                  // console.log(available, parseInt(decl.value))
+                  if (available.includes(parseInt(decl.value))) {
+                    // replacementValues[unit].push({[decl.value] : replacements[unit].replace('$$', parseInt(decl.value))})
+                    decl.value = replacements[unit].replace('$$', parseInt(decl.value)); //console.log("replacements:")
+                  } else {
+                    let err = {
+                      prop: decl.prop,
+                      value: decl.value,
+                      filename,
+                      filepath: rootOriginal.source.input.from,
+                      line: decl.source.start.line,
+                      unit,
+                      message: 'value not available consider others'
+                    };
+                    errors.push(err);
+                  }
+                } else {
+                  let err = {
+                    prop: decl.prop,
+                    value: decl.value,
+                    filename,
+                    filepath: rootOriginal.source.input.from,
+                    line: decl.source.start.line,
+                    unit,
+                    message: 'Unit not supported'
+                  };
+                  errors.push(err);
+                }
+              }
+            }
+          } else if (decl.prop === 'margin') {
+            let {
+              allowed,
+              replacements,
+              available
+            } = settings; //console.log(decl.prop + "  " + decl.value)
+
+            let valArr = decl.value.split(' '); //console.log(valArr)
+            //console.log(allowed, replacements, available)
+
+            let hasError = false;
+            let newVal = '';
+            valArr.forEach(val => {
+              let unit = val.replace(parseInt(val), '');
+              let numVal = parseInt(val);
+
+              if (unit != 0) {
+                if (allowed.includes(unit)) {
+                  if (available.includes(numVal)) {
+                    if (numVal >= 0) {
+                      if (!hasError) {
+                        newVal += replacements[unit].replace('$$', numVal) + " ";
+                      }
+                    } else {
+                      if (!hasError) {
+                        newVal += `calc(${replacements[unit].replace('$$', numVal * -1)} * -1)` + " ";
+                      }
+                    }
+                  } else {
+                    hasError = true;
+                    let err = {
+                      prop: decl.prop,
+                      value: numVal,
+                      filename,
+                      filepath: rootOriginal.source.input.from,
+                      line: decl.source.start.line,
+                      unit,
+                      message: 'value not available consider others'
+                    };
+                    errors.push(err);
+                  }
+                } else {
+                  hasError = true;
+                  let err = {
+                    prop: decl.prop,
+                    value: decl.value,
+                    filename,
+                    filepath: rootOriginal.source.input.from,
+                    line: decl.source.start.line,
+                    unit,
+                    message: 'Unit not supported'
+                  };
+                  errors.push(err);
+                }
+              }
+            });
+
+            if (!hasError) {
+              decl.value = newVal;
+            }
+          }
+        }
+      });
+    }); //fs.writeFile('./src/trial.json', JSON.stringify(variables) ,(err) =>{
+    //    if(err)console.log(err);
+    //    else{
+    //        console.log('updated successfully');
+    //    }
+    // })
+    // console.log(errors)
+
+    let errorArr = [];
+    errors.forEach(errStr => {
+      errorArr.push(` prop: ${errStr.prop} ,\n value : ${errStr.value} ,\n filename : ${errStr.filename} ,\n filepath : ${errStr.filepath} ,\n line : ${errStr.line} ,\n unit : ${errStr.unit} ,\n message : ${errStr.message} \r`);
+    }); //fs.writeFile('./css_error.log','', (err) =>{
+    //    if(err){
+    //        console.log(err);
+    //    }
+    //});
+    // errorArr.forEach(err => {
+    //   let data = `\n{\n${err}\n},\n`;
+    //   //fs.appendFile('./css_error.log',data,(err)=>{
+    //   //    if(err){
+    //   //       console.log(err);
+    //   //    }
+    //   //})
+    // });
+    // fs.writeFileSync('./css_error.log','');
+    //  errorArr.forEach(err => {
+    //    let data = `\n{\n${err}\n},\n`;
+    //    fs.appendFileSync('./css_error.log',data);
+    //  });
+  }
+});

package/lib/schemas/index.js

@@ -71,8 +71,14 @@ var _default = {
     },
     createSDkFile: false,
     nameScope: 'ZOHODESK',
-    version: 'default',
-    outputFile: 'zohodesk-efc-sdk-[version].js',
+    version: {
+      value: 'stable',
+      cli: 'efc_version'
+    },
+    outputFile: {
+      value: 'efc-sdk-[version].js',
+      cli: 'efc_output_file'
+    },
     templateFilePath: '',
     localeAttr: 'data-efc-locale',
     localeDefaultValue: 'en_US',
@@ -199,8 +205,16 @@ var _default = {
       value: true,
       cli: 'enable_smaphook'
     },
-    hasRTL: false,
-    rtlExclude: [],
+    plugins: {
+      hasRTL: false,
+      hoverActive: false,
+      combinerMediaQuery: false
+    },
+    exclude: {
+      rtl: [],
+      hoverActive: [],
+      combinerMediaQuery: []
+    },
     seperateCssModules: {
       value: false,
       cli: 'sep_cssmodules'
@@ -270,8 +284,16 @@ var _default = {
     enableChunkHash: false,
     folder: 'src',
     disableES5Transpile: false,
-    hasRTL: false,
-    rtlExclude: [],
+    plugins: {
+      hasRTL: false,
+      hoverActive: false,
+      combinerMediaQuery: false
+    },
+    exclude: {
+      rtl: [],
+      hoverActive: [],
+      combinerMediaQuery: []
+    },
     cssHashSelectors: {
       filenames: [],
       packages: []

package/lib/servers/getCliPath.js

@@ -9,16 +9,20 @@ var _path = _interopRequireDefault(require("path"));
 
 var _os = require("os");
 
+var _fs = require("fs");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let appPath = process.cwd();
+const appPath = process.cwd();
 const isNodeModuleUnderAppFolder = __dirname.indexOf(appPath) !== -1;
-let isWindows = (0, _os.platform)().toLowerCase() === 'win32';
+const isWindows = (0, _os.platform)().toLowerCase() === 'win32';
 
 const _getCliPath = !isNodeModuleUnderAppFolder ? libName => _path.default.join(__dirname, '..', '..', 'node_modules', '.bin', libName) : libName => libName;
 
 const suffixExt = isWindows ? '.cmd' : '';
 
 function getCliPath(libName) {
-  return _getCliPath(libName) + suffixExt;
+  const cliPath = _getCliPath(libName + suffixExt);
+
+  return (0, _fs.existsSync)(cliPath) ? cliPath : libName + suffixExt;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "0.0.1-beta.168",
+  "version": "0.0.1-beta.170",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",
@@ -91,8 +91,11 @@
     "nodemon": "2.0.4",
     "optimize-js": "1.0.3",
     "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",
     "prop-types": "15.7.2",
     "react": "16.13.1",