@zohodesk/react-cli 0.0.1-exp.169.2 → 0.0.1-exp.175.0

package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js

@@ -24,12 +24,12 @@ const isCss = filename => _path.default.extname(filename) === '.css'; // this  p
 
 class RtlCssPlugin {
   constructor(options = {}) {
-    /**
-     * @typedef {Object} Options
-     * @property  {String} filename [not used]
-     * @property  {String} dirVarName
-     * @property  {Boolean} sourcemap
-     * @property  {Object} config
+    /**
+     * @typedef {Object} Options
+     * @property  {String} filename [not used]
+     * @property  {String} dirVarName
+     * @property  {Boolean} sourcemap
+     * @property  {Object} config
      */
     this.options = {
       filename: options.filename || '[name].rtl.css',
@@ -60,24 +60,16 @@ class RtlCssPlugin {
           chunk.files.filter(isCss).forEach(chunkFilename => {
             const asset = compilation.assets[chunkFilename];
             const sourceStr = asset.source();
-
-            try {
-              const {
-                ltr,
-                rtl
-              } = (0, _RTLSplitPlugin.separateRtlAndLtr)(sourceStr, this.rtlSplitOptions); // const result = rtlcss
-              //   .configure(config)
-              //   .process(asset.source(), postcssOptions);
-
-              const assetFilename = chunkFilename.replace('.ltr.', '.rtl.');
-              compilation.assets[chunkFilename] = new _webpackSources.RawSource(ltr);
-              compilation.assets[assetFilename] = new _webpackSources.RawSource(rtl);
-            } catch (error) {
-              let arr = Array.from(chunk.modulesIterable).map(x => x.resource).filter(x => /\.css$/.test(x));
-              console.log(chunkFilename); // console.log(arr);
-
-              console.log(arr.length);
-            }
+            const {
+              ltr,
+              rtl
+            } = (0, _RTLSplitPlugin.separateRtlAndLtr)(sourceStr, this.rtlSplitOptions); // const result = rtlcss
+            //   .configure(config)
+            //   .process(asset.source(), postcssOptions);
+
+            const assetFilename = chunkFilename.replace('.ltr.', '.rtl.');
+            compilation.assets[chunkFilename] = new _webpackSources.RawSource(ltr);
+            compilation.assets[assetFilename] = new _webpackSources.RawSource(rtl);
           });
         });
         callback();

package/lib/plugins/RtlSplitPlugin/RtrSplit.md

@@ -1,30 +1,30 @@
-# RTL Split 
-
-we are doing in build time generating  rtl related css code  by using @zohodesk/postcss-rt npm.
-It was automated, That postcss plugin create rtl reacted css and put them into same file, with css selector [dir=rtl] and ltr realted css with [dir=ltr].
-Here is problem mostly no one need rtl and ltr related css at the same time in browser, 
-we are try to split them  by [dir] and load which type of css is needed.
-For this purpose  we created RTL Split Plugin 
-
-
-# To Try it  out  rtl-ltr split
-### how to use this feature?
-
-  to use this feature use have give the below oprtions
-  `package.json`
-  ```json
-  {
-    /// ...some things
-    "react-cli": {
-      //  ...some things
-      "css": {
-        "enableRTLSplit": true,
-        "templateLabel": "{{--dir}}",// this is for html template css file path dir template
-        "disableMiniFiySelector": false,
-        "dirVarName": "document.dir" // this will be used for download css based on dir  
-      },
-      //  ...some things
-    }
-  }
-  ```
-
+# RTL Split 
+
+we are doing in build time generating  rtl related css code  by using @zohodesk/postcss-rt npm.
+It was automated, That postcss plugin create rtl reacted css and put them into same file, with css selector [dir=rtl] and ltr realted css with [dir=ltr].
+Here is problem mostly no one need rtl and ltr related css at the same time in browser, 
+we are try to split them  by [dir] and load which type of css is needed.
+For this purpose  we created RTL Split Plugin 
+
+
+# To Try it  out  rtl-ltr split
+### how to use this feature?
+
+  to use this feature use have give the below oprtions
+  `package.json`
+  ```json
+  {
+    /// ...some things
+    "react-cli": {
+      //  ...some things
+      "css": {
+        "enableRTLSplit": true,
+        "templateLabel": "{{--dir}}",// this is for html template css file path dir template
+        "disableMiniFiySelector": false,
+        "dirVarName": "document.dir" // this will be used for download css based on dir  
+      },
+      //  ...some things
+    }
+  }
+  ```
+

package/lib/plugins/ServiceWorkerPlugin.js

@@ -51,11 +51,11 @@ class ServiceWorkerPlugin {
         if (err) {
           throw new Error(err);
         } else {
-          /* const extractedChunks = compilation.chunks.filter(chunk => {
-            if ('canBeInitial' in chunk) {
-              return chunk.canBeInitial();
-            }
-            return chunk.isInitial();
+          /* const extractedChunks = compilation.chunks.filter(chunk => {
+            if ('canBeInitial' in chunk) {
+              return chunk.canBeInitial();
+            }
+            return chunk.isInitial();
           }); */
           // let [js, css, , , i18nPublicPath] = this.publicPaths;
           // let initialChunkUrls = [];
@@ -64,10 +64,10 @@ class ServiceWorkerPlugin {
           let entrypoint = compilation.entrypoints.get('main');
           let initialChunkUrls = entrypoint.getFiles();
           const cssDirTemplate = '@dir@';
-          /**
-           * NOTE:
-           *  if chunkSplitEnable is false means,
-           *    serviceWorker will get i18n files path for html
+          /**
+           * NOTE:
+           *  if chunkSplitEnable is false means,
+           *    serviceWorker will get i18n files path for html
            */
 
           let initalI18nAssets = chunkSplitEnable ? entrypoint.chunks.filter(chunk => _I18nKeysIdentifer.default.isChunkHasI18n(chunk)).map(chunk => (0, _getI18nFileUrlPathTemplate.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, '@locale@')) : [];

package/lib/plugins/TPHashMappingPlugin.js

@@ -15,10 +15,10 @@ var _crypto = _interopRequireDefault(require("crypto"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * Plugin that generates hash for the provided list of third party files
- * Map the provided key with the file hash and add it to the list of exisiting global constants.
- * Plugin in turn uses the defineplugin to generate global constants. 
+/**
+ * Plugin that generates hash for the provided list of third party files
+ * Map the provided key with the file hash and add it to the list of exisiting global constants.
+ * Plugin in turn uses the defineplugin to generate global constants. 
  */
 class TPHashMappingPlugin {
   constructor(options) {

package/lib/postcss-plugins/RTLSplitPlugin.js

@@ -38,11 +38,11 @@ function selectorMinifySameDir(selector, direction) {
   const regex = getRegex(direction);
   return selector.replace(regex, '').trim();
 }
-/**
- * this funtion will remove given rule,
- *  if given selector and it's previous sibiling rule selector  are same
- * current rule properties will move to previous sibiling rule.
- * @param {Rule} rule current rule
+/**
+ * this funtion will remove given rule,
+ *  if given selector and it's previous sibiling rule selector  are same
+ * current rule properties will move to previous sibiling rule.
+ * @param {Rule} rule current rule
  */
 
 
@@ -57,11 +57,11 @@ function mergeIfSameSelector(rule) {
     rule.remove();
   }
 }
-/**
- * this funtion will remove given rule,
- *  if given selector and it's previous sibiling rule selector  are same
- * current rule properties will move to previous sibiling rule.
- * @param {Rule} rule current rule
+/**
+ * this funtion will remove given rule,
+ *  if given selector and it's previous sibiling rule selector  are same
+ * current rule properties will move to previous sibiling rule.
+ * @param {Rule} rule current rule
  */
 
 

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

@@ -1,39 +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
-  }
-  
+/*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

@@ -1,39 +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
-  }
-  
+/*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

@@ -4,9 +4,9 @@ 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
+/**
+ * we have give support for ignore(exclude) comments
+ * These are the comments' keyword
  */
 const hoverIgnoreQuery = 'Hover:ignore',
       activeIgnoreQuery = 'Active:ignore',
@@ -14,7 +14,8 @@ const hoverIgnoreQuery = 'Hover:ignore',
 const medHoverIgnoreQuery = 'MedHover:ignore',
       medActiveIgnoreQuery = 'MedActive:ignore',
       medHoverActiveIgnoreQuery = 'MedHoverActive:ignore';
-const hoverMedQuerySuffix = '(min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)';
+let hoverMedQuerySuffix = '';
+let hoverNoneMedQuerySuffix = '';
 const ruleIgnoreCommentRegex = /(Hover:ignore|Active:ignore|HoverActive:ignore)/g;
 const mediaQueryIgnoreCommentRegex = /(MedHover:ignore|MedActive:ignore|MedHoverActive:ignore)/g;
 
@@ -32,9 +33,26 @@ function isHoverPresent(atrule) {
   return hoverPresent;
 }
 
-module.exports = _postcss.default.plugin('postcss-mobile-hover', opts => rootOriginal => {
+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;
 
   function isRuleHasIgnoreComment(index, type) {
     const prevNode = rootOriginal.nodes[index - 1];
@@ -72,8 +90,8 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', opts => rootOri
 
   function getPositionsOfHoverAndActiveMedQueries(parent) {
     const allNodes = rootOriginal.nodes;
-    const hoverMediaQuery = `${parent.params} and all and ${hoverMedQuerySuffix}`;
-    const hoverNoneMediaQuery = `${parent.params} and (hover: none)`;
+    const hoverMediaQuery = `${parent.params} and ${hoverMedQuerySuffix}`;
+    const hoverNoneMediaQuery = `${parent.params} and ${hoverNoneMedQuerySuffix}`;
     const positions = {
       hovMed: allNodes[positionsObj[hoverMediaQuery]],
       actMed: allNodes[positionsObj[hoverNoneMediaQuery]]
@@ -142,16 +160,16 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', opts => rootOri
     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;
@@ -169,13 +187,13 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', opts => rootOri
       });
 
       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')
@@ -194,7 +212,7 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', opts => rootOri
 
   function mediaQuery(rule, index) {
     if (rule.parent.params !== undefined && !rule.parent.params.includes('hover')) {
-      let {
+      const {
         hovMed,
         actMed
       } = getPositionsOfHoverAndActiveMedQueries(rule.parent);
@@ -216,9 +234,9 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', opts => rootOri
   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 });
@@ -229,7 +247,7 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', opts => rootOri
     });
 
     if (hovQueries.length > 0) {
-      let clone = rule.clone();
+      const clone = rule.clone();
       clone.selector = hovQueries.join(',');
       hoverRules.push({
         rule: clone,
@@ -238,7 +256,9 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', opts => rootOri
     }
 
     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 === '') {
@@ -248,8 +268,8 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', opts => rootOri
 
 
   rootOriginal.walkAtRules(atrule => {
-    const hoverQuery = `${atrule.params} and all and ${hoverMedQuerySuffix}`;
-    const activeQuery = `${atrule.params} and (hover: none)`;
+    const hoverQuery = `${atrule.params} and ${hoverMedQuerySuffix}`;
+    const activeQuery = `${atrule.params} and ${hoverNoneMedQuerySuffix}`;
 
     if (isHoverPresent(atrule)) {
       if (!positionsObj[hoverQuery] && !positionsObj[activeQuery]) {
@@ -308,13 +328,13 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', opts => rootOri
     // hover
     const hoverQuery = rootOriginal.append({
       name: 'media',
-      params: `all and ${hoverMedQuerySuffix}`
+      params: `${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)'
+      params: `${hoverNoneMedQuerySuffix}`
     }).last; // Loop through the hover rules and apply them to each of the media
     // queries
     // eslint-disable-next-line no-labels
@@ -355,11 +375,15 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', opts => rootOri
         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/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;