@zohodesk/react-cli 0.0.1-exp.175.1 → 0.0.1-exp.176.2

package/lib/postcss-plugins/RTLSplitPlugin.js

@@ -5,23 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.separateRtlAndLtr = separateRtlAndLtr;
 exports.separateSingleDir = separateSingleDir;
+
 var postcss = _interopRequireWildcard(require("postcss"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const oppositeDir = {
   ltr: 'rtl',
   rtl: 'ltr'
 };
+
 function compareSelector(selector1, selector2) {
   // console.log({ selector1, selector2 }, selector1 === selector2);
   return selector1 === selector2;
 }
+
 const directionRegexs = {
   ltr: /\[dir=ltr\]/,
   rtl: /\[dir=rtl\]/
 };
+
 const getRegex = dir => directionRegexs[dir];
+
 const getOppositeRegex = dir => getRegex(oppositeDir[dir]);
+
 function selectorMinifySameDir(selector, direction) {
   // NOTE: if this rule is same dir as current need
   //  then we can just remove that [dir=ltr] or [dir=rtl]
@@ -29,16 +38,18 @@ 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
  */
+
+
 function mergeIfSameSelector(rule) {
   // NOTE: to merge dublicate selector rules
   const prev = rule.prev();
+
   if (prev && compareSelector(prev.selector, rule.selector)) {
     rule.each(decl => {
       prev.append(decl);
@@ -46,25 +57,27 @@ 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
  */
+
+
 function removeIfOppsiteDirRule(rule, direction, rootOptions) {
   // console.log({ rule, type: rule.type });
-  const selectors = rule.selector.split(/\s*,\s*/);
-
-  // NOTE: if we use opposite dir selector as custom override reason,
+  const selectors = rule.selector.split(/\s*,\s*/); // NOTE: if we use opposite dir selector as custom override reason,
   //  and compain normal selector with it, In this  case
   //  we just a have to remove that selector only not full rule
+
   const oppositeDirRegex = getOppositeRegex(direction);
   let remainingSelectors = selectors.filter(selector => !oppositeDirRegex.test(selector));
+
   if (!rootOptions.disableMiniFiySelector) {
     remainingSelectors = remainingSelectors.map(selector => selectorMinifySameDir(selector, direction));
   }
+
   if (remainingSelectors.length) {
     rule.selector = remainingSelectors.join(', ');
   } else {
@@ -72,14 +85,17 @@ function removeIfOppsiteDirRule(rule, direction, rootOptions) {
     rule.remove();
   }
 }
+
 function removeIfOppsiteDirKeyframe(rule, direction) {
   let name = rule.params;
   let keyFrameDirName = name.slice(name.lastIndexOf('-') + 1);
+
   if (keyFrameDirName === oppositeDir[direction]) {
     // console.log({ m: 'removed', keyFrameName: rule.params });
     rule.remove();
   }
 }
+
 function separateSingleDir(root, direction, rootOptions) {
   root.walkRules(rule => {
     removeIfOppsiteDirRule(rule, direction, rootOptions);
@@ -90,14 +106,15 @@ function separateSingleDir(root, direction, rootOptions) {
   });
   return root;
 }
+
 function separateRtlAndLtr(css, rootOptions) {
   // let processor = postcss([]).process(css);
-  let root = postcss.parse(css);
-  // let { root } = processor;
+  let root = postcss.parse(css); // let { root } = processor;
   // console.log(processor, root);
   // NOTE: I did first rtl then ltr , Because  for ltr I use original root ref
-  const rtlRoot = separateSingleDir(root.clone(), 'rtl', rootOptions);
-  // console.log('############################');
+
+  const rtlRoot = separateSingleDir(root.clone(), 'rtl', rootOptions); // console.log('############################');
+
   const ltrRoot = separateSingleDir(root, 'ltr', rootOptions);
   return {
     ltrRoot,
@@ -105,11 +122,8 @@ function separateRtlAndLtr(css, rootOptions) {
     ltr: ltrRoot.toString(),
     rtl: rtlRoot.toString()
   };
-}
-
-// NOTE: to test in https://astexplorer.net/
+} // NOTE: to test in https://astexplorer.net/
 // you can test with sample input https://astexplorer.net/#/gist/a892a509eb585099355ef53ef094f836/1ca70d5f7af3b88ca4910296e12f118e9712c874
-
 // export default postcss.plugin('postcss-rtl-remove', (options = {}) =>
 //   // Work with options here
 //   root => {
@@ -118,7 +132,6 @@ function separateRtlAndLtr(css, rootOptions) {
 //     // root.append(postcss.comment({ text: 'comment' }));
 //     root.append(postcss.comment({ text: 'this  is  spliting part ' }));
 //     root.append(rtlRoot);
-
 //     //console.log({root, roots:root+""}, root+"")
 //     // Transform CSS AST here
 //   }

package/lib/postcss-plugins/ValueReplacer.js

@@ -1,7 +1,9 @@
 "use strict";
 
 var _postcss = _interopRequireDefault(require("postcss"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 // module.exports = postcss.plugin('postcss-value-replacer', opts => {
 //   const { plugins } = opts;
 //   return (root, result) => {
@@ -17,8 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 //   };
 // });
 // export default 
-module.exports = _postcss.default.plugin('postcss-value-replacer', (valueReplacer = {}) =>
-// Work with options here
+module.exports = _postcss.default.plugin('postcss-value-replacer', (valueReplacer = {}) => // Work with options here
 root => {
   root.walkDecls(decl => {
     valueReplacer.forEach(obj => {
@@ -26,15 +27,11 @@ root => {
         let ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
         ks.forEach(k => {
           decl.value = decl.value.replace(k, obj.values[k]);
-        });
-        //decl.value = obj.values[decl.value];
+        }); //decl.value = obj.values[decl.value];
       }
-    });
-    //console.log({root, roots:root+""}, root+"")
+    }); //console.log({root, roots:root+""}, root+"")
     // Transform CSS AST here
-  });
-
-  // root.walkDecls(decl => {
+  }); // root.walkDecls(decl => {
   //   valueReplacer.forEach(obj => {
   //     if (
   //       obj.props.indexOf(decl.prop) !== -1 &&

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

@@ -1,7 +1,9 @@
 "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, {
@@ -12,6 +14,7 @@ function expectRunPostCss(inputFile, outputfile, cb) {
     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

@@ -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
+  }
+  
 }