@zohodesk/react-cli 1.1.0 → 1.1.2-9.exp.3

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _ValueReplacer = _interopRequireDefault(require("../ValueReplacer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-use-before-define */
+describe('postcss value replacer tests', () => {
+  it('is creating value replaced code', () => {
+    const cssInputStr = `.abc{ cursor : text }`;
+    const cssOutputStr = `.abc{ cursor : --textCursor }`;
+    const cssOptions = [{
+      props: ['font', 'font-family', 'cursor'],
+      values: {
+        'zdf-': 'zd-react-app-',
+        '^text$': '--textCursor'
+      }
+    }];
+    const result = runValueReplacerForCssString(cssInputStr, cssOptions);
+    expect(result.css).toEqual(cssOutputStr);
+  });
+});
+describe('postcss value replacer tests', () => {
+  it('is creating value replaced code', () => {
+    const cssInputStr = `.def{ cursor : var(--textBoxCursor) }`;
+    const cssOutputStr = `.def{ cursor : var(--textBoxCursor) }`;
+    const cssOptions = [{
+      props: ['font', 'font-family', 'cursor'],
+      values: {
+        'zdf-': 'zd-react-app-',
+        '^text$': '--textCursor'
+      }
+    }];
+    const result = runValueReplacerForCssString(cssInputStr, cssOptions);
+    expect(result.css).toEqual(cssOutputStr);
+  });
+});
+
+function runValueReplacerForCssString(cssInputStr, cssOptions) {
+  return (0, _postcss.default)([(0, _ValueReplacer.default)(cssOptions)]).process(cssInputStr);
+}

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

@@ -89,11 +89,16 @@ function pxToCalc(value) {
       }
     });
   });
-  console.log(arr.join(' '));
   return arr.join(' ');
 }
 
-const singleConvertor = (value, changeVal, details, range) => {
+const singleConvertor = ({
+  value,
+  changeVal,
+  details,
+  range,
+  allowed
+}) => {
   const {
     path,
     filename,
@@ -107,7 +112,15 @@ const singleConvertor = (value, changeVal, details, range) => {
     }
   }
 
+  if (allowed && allowed.includes(decl.value) && decl.value.toString() !== '0') {
+    return decl.value;
+  }
+
   if (getNumericValue(value) >= range.start && getNumericValue(value) <= range.end || getNumericValue(value) === 0) {
+    if (value.trim() === '0px') {
+      return '0';
+    }
+
     let retVal = value.replace(/(\d+)px/gi, changeVal.replace('$$', '$1'));
 
     if (/^-var/.test(retVal)) {
@@ -162,6 +175,7 @@ module.exports = {
     });
     const valRegex = new RegExp(regValStr, 'gi');
     return rootOriginal => {
+      // console.log(rootOriginal.source.input.from, 'passed through variable Plugin');
       rootOriginal.walkRules(rule => {
         // rule.nodes[-1] = {}
         // need map, forEach fine less memory
@@ -200,6 +214,9 @@ module.exports = {
             .replace(/\d+/gi, '').replace('var(--zd_size)', 'px').replace('var(--zd_font_size)', 'px').replace('rect(', '').replace(')', '').replace('px,', 'px').replace(',', '').split(' ').filter(x => x !== ''); // unit = unit.replace(unit, unit.replace('-',''))
             // console.log('unit : ');
             // console.log(unit);
+            // if (decl.prop === 'height') {
+            //   console.log(decl.prop, unit, 'case 1');
+            // }
 
             unit.forEach((val, index) => {
               allowed.forEach(alwdVal => {
@@ -219,21 +236,49 @@ module.exports = {
                   unitErrorVal = val;
                 }
               }
-            }); // console.log(allowed, replacements, range)
+            }); // if (decl.prop === 'height') {
+            //   console.log(decl.prop, unitErrorVal, unitError, unit, 'case 2');
+            // }
+            // console.log(allowed, replacements, range)
 
             if (!unitError) {
-              // use variable decl.value.split(' ')
-              if (range) {
+              let calcValue = false;
+
+              if (decl.value.includes('calc')) {
+                decl.value = pxToCalc(decl.value);
+                calcValue = true;
+              } // use variable decl.value.split(' ')
+
+
+              if (range && !calcValue) {
                 // console.log('multiple :', decl.value)
+                const tempVal = decl.value; // if (decl.prop === 'height') {
+                //   console.log(decl.prop, tempVal, decl.value, allowed, 'case 3');
+                // }
+                // if (decl.prop === 'height') {
+                //   console.log('allowed!', decl.prop, decl.value, allowed);
+                // }
+
                 let newVal = '';
-                decl.value.split(' ').forEach(singleVal => {
-                  newVal += `${singleConvertor(singleVal, settings.replacements.px, {
-                    decl,
-                    filename,
-                    path: fromPath
-                  }, range)} `;
+                let splitValues = decl.value.split(' ');
+                splitValues = splitValues.filter(val => val.trim() !== '');
+                splitValues = splitValues.map(val => val.replace(/\r|\t|\n/gi, ''));
+                splitValues.forEach(singleVal => {
+                  newVal += `${singleConvertor({
+                    value: singleVal,
+                    changeVal: settings.replacements.px,
+                    details: {
+                      decl,
+                      filename,
+                      path: fromPath
+                    },
+                    range,
+                    allowed
+                  })} `;
                 });
-                decl.value = newVal;
+                decl.value = newVal; // if (decl.prop === 'height') {
+                //   console.log(decl.prop, tempVal, newVal, 'case 4');
+                // }
               }
             } else {
               if (!decl.value.includes('calc')) {
@@ -272,15 +317,22 @@ module.exports = {
               const valArr = decl.value.split(' ');
               const settings = settingsObject[decl.prop];
               const {
-                range
+                range,
+                allowed
               } = settings;
               const convertedVals = valArr.map(val => {
                 if (val.includes('px')) {
-                  const convertedVal = singleConvertor(val, settings.replacements.px, {
-                    decl,
-                    filename,
-                    path: fromPath
-                  }, range);
+                  const convertedVal = singleConvertor({
+                    value: val,
+                    changeVal: settings.replacements.px,
+                    details: {
+                      decl,
+                      filename,
+                      path: fromPath
+                    },
+                    range,
+                    allowed
+                  });
                   return convertedVal ? convertedVal : val;
                 }
 

package/lib/schemas/index.js

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // TODO move deprecated options to separate file and manage seperately
 var _default = {
-  cliRootPath: null,
+  alias: null,
   unstableDepsInverse: {
     value: false,
     cli: 'unstable_deps_inverse'
@@ -36,6 +36,9 @@ var _default = {
       cli: 'stop_nodemon'
     }
   },
+  resourceHints: {
+    allowPrefetchingMultipleChunks: false
+  },
   i18n: {
     chunkSplitEnable: {
       value: false,
@@ -49,6 +52,10 @@ var _default = {
     propertiesFolder: null
   },
   css: {
+    cssOrderControler: {
+      enable: false,
+      className: 'customCss'
+    },
     enableRTLSplit: false,
     valueReplacer: null,
     //valueReplacer: [
@@ -63,7 +70,39 @@ var _default = {
     // ],
     templateLabel: '{{--dir}}',
     disableMiniFiySelector: false,
-    dirVarName: 'document.dir'
+    dirVarName: 'document.dir',
+    selectorReplace: {
+      before: [],
+      after: []
+    },
+    plugins: null,
+    // @type  {Boolean | Array}
+    postCssPluginOrder: null,
+    patterns: {
+      valueReplacer: [],
+      selectorReplace: [],
+      hoverActive: [],
+      combinerMediaQuery: [],
+      hasRTL: [],
+      cssVariableReplacement: [],
+      selectorWeight: [],
+      cssUniqueness: [],
+      composeMinification: []
+    },
+    exclude: {
+      rtl: [],
+      hoverActive: [],
+      combinerMediaQuery: [],
+      cssVariableReplacement: [],
+      selectorWeight: [],
+      hasRTL: []
+    },
+    cssVariableReplacementConfig: '',
+    selectorWeightConfig: {
+      defaultSelector: '',
+      customFileDetails: '',
+      excludeStrings: []
+    }
   },
   efc: {
     hasEFC: {
@@ -91,10 +130,23 @@ var _default = {
     cssDirStatement: null
   },
   app: {
+    generateHtml: {
+      value: true,
+      cli: 'generate_html'
+    },
+    displayClassName: {
+      value: false,
+      cli: 'display_class_name'
+    },
     moduleResolvePath: {
       value: '@zohodesk/client_packages_group',
       cli: 'module_resolve_path'
     },
+    enableMjsLoader: {
+      value: false,
+      cli: 'enableMjsLoader'
+    },
+    customClassNamePrefix: [],
     // this option only for impact testing
     devCssFileBountry: {
       value: '',
@@ -180,6 +232,7 @@ var _default = {
       none: '(hover: none)'
     },
     disableES5Transpile: false,
+    disableES5Import: false,
     isReactMig: false,
     hasWidget: false,
     hasEFC: {
@@ -228,17 +281,8 @@ var _default = {
       value: true,
       cli: 'enable_smaphook'
     },
-    plugins: {
-      valueReplacer: false,
-      selectorReplace: false,
-      hasRTL: false,
-      hoverActive: false,
-      combinerMediaQuery: false,
-      cssVariableReplacement: false,
-      selectorWeight: false,
-      minifier: false,
-      composeMinification: false
-    },
+    plugins: null,
+    postCssPluginOrder: null,
     patterns: {
       valueReplacer: [],
       selectorReplace: [],
@@ -255,7 +299,8 @@ var _default = {
       hoverActive: [],
       combinerMediaQuery: [],
       cssVariableReplacement: [],
-      selectorWeight: []
+      selectorWeight: [],
+      hasRTL: []
     },
     cssVariableReplacementConfig: '',
     selectorWeightConfig: {
@@ -291,9 +336,14 @@ var _default = {
     },
     htmlTemplate: {
       minify: null,
-      inject: true
+      inject: true,
+      customScriptLoadingStrategey: {
+        enable: false,
+        options: null
+      }
     },
     removePropTypes: false,
+    customChunksBaseConfig: null,
     customChunks: [{
       name: 'styles',
       pattern: '\\.css$'
@@ -309,9 +359,11 @@ var _default = {
     sourcemap: {
       cli: 'source_map',
       value: 'cheap-eval-source-map'
-    }
+    },
+    externals: null
   },
   docs: {
+    externals: null,
     server: {
       iphost: (0, _getIp.default)(),
       host: (0, _os.hostname)(),
@@ -329,6 +381,7 @@ var _default = {
       hover: 'all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)',
       none: '(hover: none)'
     },
+    customClassNamePrefix: [],
     componentFolder: 'src',
     cssUniqueness: {
       value: true,
@@ -343,16 +396,14 @@ var _default = {
       value: true,
       cli: 'react_live'
     },
-    rtlExclude: [],
-    plugins: {
-      rtl: false,
-      hoverActive: false,
-      combinerMediaQuery: false,
-      cssVariableReplacement: false,
-      selectorWeight: false,
-      minifier: false,
-      composeMinification: false
+    enableMDParser: {
+      value: true,
+      cli: 'markdown_parser'
     },
+    rtlExclude: [],
+    selectorReplace: null,
+    plugins: null,
+    postCssPluginOrder: null,
     patterns: {
       valueReplacer: [],
       selectorReplace: [],
@@ -360,14 +411,16 @@ var _default = {
       combinerMediaQuery: [],
       hasRTL: [],
       cssVariableReplacement: [],
-      selectorWeight: []
+      selectorWeight: [],
+      cssUniqueness: []
     },
     exclude: {
       rtl: [],
       hoverActive: [],
       combinerMediaQuery: [],
       cssVariableReplacement: [],
-      selectorWeight: []
+      selectorWeight: [],
+      hasRTL: []
     },
     cssVariableReplacementConfig: '',
     selectorWeightConfig: {
@@ -694,6 +747,22 @@ var _default = {
       cli: 'module_mode'
     },
     disableES5Transpile: true
+  },
+  stats: {
+    enable: {
+      value: false,
+      cli: 'enable_stats'
+    },
+    fileName: null,
+    options: null,
+    excludeKeys: null
+  },
+  babelCustomizationForLibrary: {
+    babelPlugins: []
+  },
+  enableTypeScript: {
+    value: false,
+    cli: 'enable_typescript'
   }
 };
 exports.default = _default;

package/lib/servers/getCliPath.js

@@ -5,19 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getCliPath = getCliPath;
 
-var _path = _interopRequireDefault(require("path"));
+var _path = require("path");
 
 var _os = require("os");
 
 var _fs = require("fs");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _constants = require("../constants");
 
-const appPath = process.cwd();
-const isNodeModuleUnderAppFolder = __dirname.indexOf(appPath) !== -1;
 const isWindows = (0, _os.platform)().toLowerCase() === 'win32';
 
-const _getCliPath = !isNodeModuleUnderAppFolder ? libName => _path.default.join(__dirname, '..', '..', 'node_modules', '.bin', libName) : libName => libName;
+const _getCliPath = libName => (0, _path.join)(_constants.cliNodeModulesPath, '.bin', libName);
 
 const suffixExt = isWindows ? '.cmd' : '';
 

package/lib/servers/requireLocalOrGlobal.js

@@ -25,7 +25,7 @@ function requireLocalOrGlobal(moduleName, opts = {}) {
   const {
     local = true
   } = opts;
-  const isRelativePath = moduleName === '.'; // NOTE: if starts with . then it only mean local
+  const isRelativePath = moduleName[0] === '.'; // NOTE: if starts with . then it only mean local
 
   if (isRelativePath) {
     global = false;

package/lib/utils/cssClassNameGenerate.js

@@ -38,14 +38,35 @@ const isSelectorPackage = (resourcePath, packages) => {
   return isValid;
 };
 
+function patternBasedClass({
+  customClassNamePrefix,
+  context,
+  relativePath,
+  localName
+}) {
+  let newName = null;
+  customClassNamePrefix.forEach(obj => {
+    if (obj.enable) {
+      if (obj.patterns && obj.prefix && (0, _fileHandling.isFileNameMatchingPluginPattern)({
+        filename: context.resourcePath,
+        filterArr: obj.patterns
+      })) {
+        const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
+        newName = `${obj.prefix}${h}`;
+      }
+    }
+  });
+  return newName;
+}
+
 var _default = (unique = true, {
   filenames,
   packages
-}, classNamePrefix, patterns) => (context, localIdentName, localName) => {
+}, classNamePrefix, customClassNamePrefix, patterns, displayClassName) => (context, localIdentName, localName) => {
   // console.log(patterns, context.resourcePath);
-  // NOTE:  in build macine we use date as folder path.
+  // NOTE:  in build machine we use date as folder path.
   // So every time we create new build there is path will alway different
-  // in order to minmaze that problem we try in relative path;
+  // in order to minimize that problem we try in relative path;
   // console.log('context.resourcePath', context.resourcePath, context);
   // let contextResourcePath = context.resourcePath;
   const filePaths = context.resourcePath.split(_path.default.sep);
@@ -53,7 +74,8 @@ var _default = (unique = true, {
   const [fileNameWithoutExt] = fileName.split('.');
   const cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase();
 
-  const relativePath = _path.default.relative(context.rootContext, context.resourcePath);
+  const relativePath = _path.default.relative(context.rootContext, context.resourcePath); // console.log('customClassNamePrefix', customClassNamePrefix);
+
   /*
     input : 
     context.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
@@ -70,6 +92,11 @@ var _default = (unique = true, {
   */
 
 
+  if (displayClassName) {
+    return `${fileNameWithoutExt}__${localName}`;
+  } //  return cleanFileName
+
+
   if (context.resourcePath.endsWith('.plain.css')) {
     return localName;
   }
@@ -86,7 +113,18 @@ var _default = (unique = true, {
   if (unique) {
     const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
     return `${classNamePrefix}${h}`;
-  } //css file has casesensitive selector issue so can't toLowerCase
+  }
+
+  const patternClass = patternBasedClass({
+    customClassNamePrefix,
+    context,
+    relativePath,
+    localName
+  });
+
+  if (patternClass) {
+    return patternClass;
+  } //css file has case sensitive selector issue so can't toLowerCase
   //let local = localName.toLowerCase()
 
 

package/lib/utils/deprecationSupport.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deprecationSupport = deprecationSupport;
+
+var _path = _interopRequireDefault(require("path"));
+
+var deprecationHandlers = _interopRequireWildcard(require("../deprecationLogger"));
+
+var _windowsModification = require("../loaderUtils/windowsModification");
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+let {
+  deprecateMessage,
+  deprecateOption,
+  deprecationLoggerEnd
+} = deprecationHandlers;
+
+function modifyCssArr(arr) {
+  return arr.map(x => {
+    const includeCss = !x.startsWith('!');
+    const modifier = includeCss ? '/*.css' : '';
+    const filePath = x.replace(/^!/, ''); // Remove the "!" symbol if present
+
+    return (0, _windowsModification.windowsModificationFile)(_path.default.join(includeCss ? '**' : '!**', filePath, '**', modifier));
+  });
+}
+
+const defaultPostCssPluginOptions = {
+  valueReplacer: null,
+  hasRTL: false,
+  selectorReplace: null,
+  hoverActive: false,
+  combinerMediaQuery: false,
+  cssVariableReplacement: false,
+  selectorWeight: false,
+  minifier: false,
+  composeMinification: false
+};
+
+function deprecationSupport(options, disableDeprecationWarning) {
+  if (disableDeprecationWarning) {
+    /* eslint-disable no-empty-function */
+    deprecateMessage = () => {};
+
+    deprecateOption = () => {};
+
+    deprecationLoggerEnd = () => {};
+    /* eslint-enable no-empty-function */
+
+  }
+
+  options.app.plugins = options.app.plugins || defaultPostCssPluginOptions;
+  options.docs.plugins = options.docs.plugins || defaultPostCssPluginOptions;
+  options.css.plugins = options.css.plugins || defaultPostCssPluginOptions; // if (selectn(options, ".app.hasRTL") === true) {
+
+  if (options.app.hasRTL === true) {
+    deprecateOption('app.hasRTL', 'app.plugins.hasRTL');
+    options.app.plugins.hasRTL = true;
+  }
+
+  if (options.docs.hasRTL === true) {
+    deprecateOption('docs.hasRTL', 'docs.plugins.hasRTL');
+    options.docs.plugins.hasRTL = true;
+  }
+
+  if (options.app.selectorReplace !== null && options.app.plugins && (options.app.plugins.selectorReplace === null || options.app.plugins.selectorReplace === undefined)) {
+    deprecateMessage('when you use app.selectorReplace mention enable or disable app.plugins.selectorReplace by setting value to true or false');
+    options.app.plugins.selectorReplace = true;
+  }
+
+  if (options.docs.selectorReplace !== null && options.docs.plugins && (options.docs.plugins.selectorReplace === null || options.docs.plugins.selectorReplace === undefined)) {
+    deprecateMessage('when you use docs.selectorReplace mention enable or disable docs.plugins.selectorReplace by setting value to true or false');
+    options.docs.plugins.selectorReplace = true;
+  }
+
+  if (options.css.valueReplacer !== null && options.css.plugins && (options.app.plugins.valueReplacer === null || options.app.plugins.valueReplacer === undefined)) {
+    deprecateMessage('when you use app.valueReplacer mention enable or disable app.plugins.valueReplacer by setting value to true or false');
+    options.app.plugins.valueReplacer = true;
+  }
+
+  if (!options.app.patterns) {
+    options.app.patterns = {};
+  }
+
+  function handleRTL(rtlExclude, rtl, hasRTL, type) {
+    if (rtlExclude && rtlExclude.length > 0) {
+      options[type].patterns.hasRTL = modifyCssArr(rtlExclude);
+      deprecateOption(`${type}.rtlExclude`, `${type}.patterns.hasRTL`);
+    }
+
+    if (rtl && rtl.length > 0) {
+      options[type].patterns.hasRTL = modifyCssArr(rtl);
+      deprecateOption(`${type}.exclude.rtl`, `${type}.patterns.hasRTL`);
+    }
+
+    if (hasRTL && hasRTL.length > 0) {
+      options[type].patterns.hasRTL = modifyCssArr(hasRTL);
+      deprecateOption(`${type}.exclude.hasRTL`, `${type}.patterns.hasRTL`);
+    }
+  }
+
+  function addExcludesToPattern(patterns, exclude, type) {
+    Object.keys(defaultPostCssPluginOptions).forEach(key => {
+      if (!exclude[key] || exclude[key].length === 0) {
+        return;
+      }
+
+      if (patterns[key].length === 0) {
+        deprecateOption(`${type}.exclude.${key}`, `${type}.patterns.${key}`);
+        let tempArr = exclude[key];
+        tempArr = tempArr.map(x => _path.default.join('!**', x, '**')); // Since patterns[key] is empty we need to wildcard for allow all others.
+
+        tempArr.unshift('*');
+        patterns[key] = tempArr;
+      } else if (exclude[key].length > 0 && patterns[key].length > 0) {
+        deprecateOption(`${type}.exclude.${key}`, `${type}.patterns.${key}`, ` And Since you have used ${type}.patterns.${key} we won't use ${type}.exclude.${key}. So please make appropriate changes`);
+      }
+    });
+  }
+
+  handleRTL(options.app.rtlExclude, options.app.exclude.rtl, options.app.exclude.hasRTL, 'app');
+  handleRTL(options.docs.rtlExclude, options.docs.exclude.rtl, options.docs.exclude.hasRTL, 'docs');
+  addExcludesToPattern(options.app.patterns, options.app.exclude, 'app');
+  addExcludesToPattern(options.docs.patterns, options.docs.exclude, 'docs');
+  deprecationLoggerEnd();
+}

package/lib/utils/getFileType.js

@@ -45,5 +45,5 @@ function isVideoFileExt(ext) {
 }
 
 function isAudioFileExt(ext) {
-  return ext === '.ogg';
+  return ext === '.ogg' || ext === '.mp3';
 }