@zohodesk/react-cli 0.0.1-exp.164.2 → 0.0.1-exp.166.1

package/DOTO.md

@@ -0,0 +1,13 @@
+Things that can be done
+
+1. react-cli total revamp dependency packages version update (must for future (2-4 months) But not problem for now)
+   1. when we do revamp we may can to create a document with full detailed.
+2. react-cli find the chain set for 0.0.1-alpha.113 version (must for future( 20 may 2022 ) But not problem for now) -- DONE
+3. react version update 17 or 18 (must for future (until desk as efc or until get confilct with gc or some kind) But not problem for now)
+   1. if we move react 18, may be I can remove some hacks form virtualizer. we put hacks for batching since react 18 has auto batch we can remove that
+   2. same for react-dnd
+4. react-cli package split (good to have)
+5. efc unification (must for good future (2-4 months) But not problem for now)
+6. i18n build as separate then client build I have some Ideas with some drawbacks (good to have)
+7. react own implmention (good to have and also have a posiblity for Diamonds since it can lead as to some thing great for example preformance enforceing like always PureComponent , built in context optimazation, and issue fix we found in react reorder preformance problem. In my point of view react highly focus on declarative rather then preformance in some places may be there is reason but we may not have a use for that reason, and in some place I need to bend like hell to make what I want)
+8. all repo links and build process and documention for steps

package/README.md

@@ -2,6 +2,31 @@
 
 A CLI tool for build modern web application and libraries
 
+# 0.0.1-exp.166.1
+
+Changes:-
+
+- `__testUtils__/globals.js` to jest is not mantatory
+- disableES5Transpile option libAlias added
+
+# 0.0.1-beta.166
+
+this version has same as `# 0.0.1-exp.164.1`, `# 0.0.1-exp.164.2` and below and some minor changes
+
+- google chorme cors preflight issue fix
+
+# 0.0.1-beta.165
+
+- `valueReplacer` option added in shemas for font name replace related issue handling, for more [details](./docs/ValueReplacer.md)
+- `valuereplacer` option added in react-cli it takes three
+  1. sourceDir
+  2. distDir
+  3. `copyAll` is boolean flag which is for copy all other file or not. "true" means copy all files.
+
+# 0.0.1-exp.164.1
+
+- extra features in custom chunks reffer [this](./docs/CustomChunks.md)
+
 # 0.0.1-exp.164.2
 
 - `devbuild` option add to react cli

package/bin/cli.js

@@ -121,6 +121,15 @@ switch (option) {
       { stdio: 'inherit' }
     );
 
+    process.exit(result.status);
+    break;
+  case 'valuereplacer':
+    result = spawnSync(
+      'node',
+      [require.resolve('../lib/common/valueReplacer')].concat(args),
+      { stdio: 'inherit' }
+    );
+
     process.exit(result.status);
     break;
   case 'app':

package/docs/CustomChunks.md

@@ -0,0 +1,26 @@
+# Custom Chunks
+
+In react-cli we provide options to create custom chunks.  
+This Custom Chunk Option is array of Object
+that Object keys are
+
+- `pattern` regex pattern as string
+- `name` chunk name
+- `size` is count which is minmum chunk dublicated or need in chunks
+
+> Since 0.0.1-exp.164.1
+
+extra features in custom chunks :-
+for more details [SplitChunkPlugin](https://webpack.js.org/plugins/split-chunks-plugin/) webpack
+
+- `minChunks`: `minChunks` is alies of `size` default value is `2`,
+- `rules`: `rules` is same as `pattern` with some easy hooks
+  - use `/` for both windows and linux we will replace internally
+  - for `.*` we need to use `*`
+  - we can consider rules as regex when the `rules-string` has any of these `*`, `^`, `$`. So if you want regex then kindly use `*` in your `rules-string` for force regex
+- `chunks`: by this option we can specify , default value is `all`,
+- `priority`: priority default value is `-10 * (index + 2)`,
+- `enforce`: enforce default value is true,
+- `maxSize`: maxSize, default value is 0,
+- `minSize`: minSize, default value is 20000,
+  includeDepenency: includeDepenency default value is false

package/docs/TODOS.md

@@ -0,0 +1,10 @@
+we need to fix all the warning print while install react-cli
+
+1.  npm WARN deprecated `babel-eslint@10.1.0`: babel-eslint is now `@babel/eslint-parser`. This package will no longer receive updates.
+    to resolve this warning use https://tjaddison.com/blog/2021/03/updating-babel-eslint-to-babeleslint-parser-for-react-apps/
+
+2.  npm WARN deprecated eslint-loader@4.0.2: This loader has been deprecated. Please use eslint-webpack-plugin.  
+    for this warning we need to confirm `is eslint-loader need while build` it's simplely waste of time if you ask me.
+3.  gitlab@14.2.2: The gitlab package has found a new home in the @gitbeaker organization. For the latest gitlab node library, check out @gitbeaker/node
+    for this warning we need to check with gitbeaker and impact team as well.
+4.  `fsevents@1.2.13` and `chokidar@2.1.8` these are just dependent packages need to check parent package of this package

package/docs/ValueReplacer.md

@@ -0,0 +1,60 @@
+# value replacer
+
+<!-- file paths
+  1. src/postcss-plugins/ValueReplacer.js
+  2. src/common/valueReplacer.js
+ -->
+
+this option is array of objects which will have a two keys
+new option `valueReplacer` added for replace css property value while build running
+
+- this option is array of object, that object two keys
+  1. `props` key for array of property names
+  2. `values` key is object ,this object key contents will be replaced as value content
+- this option wiil be work for below
+
+  - `start`
+  - `docs`
+  - `nowatchstart`
+  - `devbuild`
+  - `build:library:es`
+  - `build:component:es`
+  - `build:library:cmjs`
+  - `build:component:cmjs`
+    Example data:-
+
+  ```json
+  {
+    "react-cli": {
+      "css": {
+        "valueReplacer": [
+          {
+            "props": ["font", "font-family"],
+            "values": {
+              "zdfonts-rCallBar": "zdf-rCallBar_1",
+              "zdfonts-rPuvi": "zdf-rPuvi_1"
+            }
+            // ,suffix: '0'
+          }
+        ]
+      }
+    }
+  }
+  ```
+
+  Example Replace:-
+  before replace
+
+  ```css
+  .some-selector {
+    font: zdfonts-rCallBar !important;
+  }
+  ```
+
+  after replace
+
+  ```css
+  .some-selector {
+    font: zdf-rCallBar_1 !important;
+  }
+  ```

package/docs/warnings_while_install.txt

@@ -0,0 +1,35 @@
+npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
+npm WARN deprecated eslint-loader@4.0.2: This loader has been deprecated. Please use eslint-webpack-plugin
+npm WARN deprecated gitlab@14.2.2: The gitlab package has found a new home in the @gitbeaker organization. For the latest gitlab node library, check out @gitbeaker/node. A full list of the features can be found here: https://github.com/jdalrymple/gitbeaker#readme
+npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
+npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
+npm WARN deprecated webdriverio@4.14.4: outdated version, please use @next
+npm WARN deprecated mkdirp@0.3.5: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
+npm WARN deprecated cross-spawn-async@1.0.1: cross-spawn no longer requires a build toolchain, use it instead
+npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
+npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
+npm WARN deprecated har-validator@5.1.5: this library is no longer supported
+npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
+npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
+npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
+npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
+npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
+npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/chokidar/node_modules/fsevents):
+npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules/jest-haste-map/node_modules/fsevents):
+npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/nodemon/node_modules/chokidar/node_modules/fsevents):
+npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/watchpack/node_modules/chokidar/node_modules/fsevents):
+npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+npm WARN check2@1.0.0 No description
+npm WARN check2@1.0.0 No repository field.
+
++ @zohodesk/react-cli@0.0.1-beta.165
+updated 1 package and audited 1899 packages in 51.509s
+
+21 packages are looking for funding
+  run `npm fund` for details
+
+found 42 vulnerabilities (2 low, 20 moderate, 8 high, 12 critical)
+  run `npm audit fix` to fix them, or `npm audit` for details

package/lib/common/splitChunks.js

@@ -7,9 +7,11 @@ exports.default = void 0;
 
 var _path = _interopRequireDefault(require("path"));
 
+var _os = _interopRequireDefault(require("os"));
+
 var _utils = require("../utils");
 
-var _os = _interopRequireDefault(require("os"));
+var _testPattern = require("./testPattern");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -47,30 +49,75 @@ let defaultChunks = {
     chunks: 'all',
     minChunks: 1,
     test: isReact,
+    enforce: true,
+    // priority: 10
     priority: -10
   },
   vendor: {
     name: 'vendor',
     chunks: 'all',
+    // chunks: 'initial',
     minChunks: 1,
     test: isVendor,
+    // priority: 19,
     priority: -10
   }
 };
 let customChunksConfig = {};
-customChunks.map(({
+customChunks.map((obj, index) => ({
+  name: obj.name,
+  pattern: obj.pattern,
+  minChunks: obj.minChunks || obj.size || 2,
+  rules: obj.rules,
+  // includeDepenency: obj.includeDepenency || false,
+  priority: obj.priority || -10 * (index + 2),
+  enforce: obj.enforce || true,
+  maxSize: obj.maxSize,
+  // || 0,
+  minSize: obj.minSize,
+  // || 20000,
+  chunks: obj.chunks || 'all'
+})).map(({
   name,
   pattern,
-  size = 2
-}, index) => customChunksConfig[name] = {
-  name,
-  test: new RegExp(isWindows ? pattern.replace(/\//g, '\\') : pattern),
-  chunks: 'all',
-  enforce: true,
-  minChunks: size,
-  priority: -10 * (index + 2)
+  minChunks,
+  rules,
+  priority,
+  // includeDepenency,
+  enforce,
+  minSize,
+  maxSize,
+  chunks = 'all'
+}) => {
+  let obj = {
+    name,
+    test: rules ? m => {
+      const {
+        userRequest
+      } = m;
+      return (0, _testPattern.testPattern)(userRequest, rules); // return (
+      //   pkgs.some(p => isRelated(userRequest, p)) ||
+      //   (includeDepenency && isDependency(m, pkgs))
+      // );
+    } : new RegExp(isWindows ? pattern.replace(/\//g, '\\') : pattern),
+    chunks,
+    enforce,
+    minChunks,
+    priority
+  };
+
+  if (minSize !== undefined) {
+    obj.minSize = minSize;
+  }
+
+  if (maxSize !== undefined) {
+    obj.maxSize = maxSize;
+  }
+
+  return customChunksConfig[name] = obj;
 });
 var _default = {
+  minSize: 12000,
   cacheGroups: Object.assign({
     default: false,
     vendors: false

package/lib/common/testPattern.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDependency = isDependency;
+exports.isRelatedPackage = exports.isRelated = void 0;
+exports.testPattern = testPattern;
+
+var _path = require("path");
+
+// in our development we only use windows, mac and linux
+const isWindows = _path.sep !== '/'; // this function  will  return true if pattern matched
+
+function _testPattern(req, pattern) {
+  let modifyedPattern = pattern;
+
+  if (/[*.$^]/.test(modifyedPattern)) {
+    if (isWindows) {
+      // modifyedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
+      modifyedPattern = modifyedPattern.replace(/\//g, '\\\\');
+    }
+
+    modifyedPattern = modifyedPattern.replace(/\./g, '\\.').replace(/\*/g, '.*');
+    const re = new RegExp(modifyedPattern);
+    return re.test(req);
+  }
+
+  if (isWindows) {
+    // modifyedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
+    modifyedPattern = modifyedPattern.replace(/\//g, '\\');
+  }
+
+  return req.indexOf(modifyedPattern) !== -1;
+}
+
+function testPattern(req, pattern) {
+  if (!req || !pattern) {
+    return false;
+  }
+
+  if (Array.isArray(pattern)) {
+    // eslint-disable-next-line no-unused-vars
+    return pattern.every(p => testPattern(req, p));
+  }
+
+  if (pattern[0] === '!') {
+    return !_testPattern(req, pattern.slice(1));
+  }
+
+  return _testPattern(req, pattern);
+}
+
+const isRelated = (req, item) => req && req.indexOf(item) !== -1; // export const isRelated = (req, item) => testPattern(req, item);
+
+
+exports.isRelated = isRelated;
+
+const isRelatedPackage = (req, item) => isRelated(req, `node_modules${_path.sep}${item}${_path.sep}`) !== -1; // export const isRelated = (req, item) => testPattern(req, item);
+
+
+exports.isRelatedPackage = isRelatedPackage;
+
+function isDependency(m, excludeList) {
+  // let reasons = m.reasons.map(r => r.module.userRequest);
+  // m.reasons.some(r => !r.module || !r.module.userRequest) && console.log(m.reasons);
+  return m.reasons.some(r => excludeList.some(item => r.module && isRelated(r.module.userRequest, item)));
+} // export function queryHandler(conditions, pattern) {
+// }

package/lib/common/valueReplacer.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _folderIterator = _interopRequireDefault(require("../utils/folderIterator"));
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const cwd = process.cwd();
+
+const src = _path.default.join(cwd, process.argv[2]);
+
+const dist = _path.default.join(cwd, process.argv[3]);
+
+const docopy = process.argv[4] === 'true';
+const {
+  css: {
+    valueReplacer
+  }
+} = (0, _utils.getOptions)();
+
+if (!_fs.default.existsSync(dist)) {
+  _fs.default.mkdirSync(dist, {
+    recursive: true
+  });
+}
+
+(0, _folderIterator.default)(src, dist, docopy ? false : ['.css'], false, (fromPath, toPath) => {
+  //console.log({ fromPath: fromPath, toPath: toPath });
+  let css = _fs.default.readFileSync(fromPath);
+
+  if (docopy && !fromPath.endsWith('.css')) {
+    //console.log(toPath,'....');
+    _fs.default.writeFileSync(toPath, css);
+
+    return;
+  }
+
+  (0, _postcss.default)([valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer)]).process(css, {
+    from: fromPath,
+    to: toPath
+  }).then(result => {
+    _fs.default.writeFile(toPath, result.css, () => true);
+
+    if (result.map) {
+      _fs.default.writeFile(`${toPath}.map`, result.map, () => true);
+    }
+  });
+});

package/lib/configs/jest.config.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _fs = require("fs");
+
 var _path = _interopRequireDefault(require("path"));
 
 var _libAlias = require("./libAlias");
@@ -13,6 +15,9 @@ let moduleNameMapper = Object.keys(_libAlias.libAlias).reduce((previousValue, ke
   previousValue[`^${key}(.*)$`] = `${_libAlias.libAlias[key]}$1`;
   return previousValue;
 }, {});
+
+const appGlobals = _path.default.resolve(appPath, '__testUtils__', 'globals.js');
+
 let commonConfig = {
   coverageReporters: ['json', 'html', 'json-summary', 'text'],
   collectCoverage: true,
@@ -28,7 +33,7 @@ let commonConfig = {
   transformIgnorePatterns: ['/node_modules/(?!(@zohodesk)/)'],
   // transformIgnorePatterns: ['/node_modules.*?.js$'],
   moduleFileExtensions: ['js'],
-  setupFiles: [_path.default.resolve(appPath, '__testUtils__', 'globals.js'), _path.default.resolve(__dirname, '..', 'jest', 'setup.js')],
+  setupFiles: [(0, _fs.existsSync)(appGlobals) && appGlobals, _path.default.resolve(__dirname, '..', 'jest', 'setup.js')].filter(Boolean),
   globals: {
     __DEVELOPMENT__: true,
     __DOCS__: false,

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

@@ -8,6 +8,8 @@ var _pluginUtils = require("../pluginUtils");
 
 var _loaderUtils = require("../loaderUtils");
 
+var _libAlias = require("./libAlias");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 let options = (0, _utils.getOptions)();
@@ -21,46 +23,47 @@ let {
     classNamePrefix
   },
   app: {
-    folder
+    folder,
+    disableES5Transpile
   }
 } = options;
 let appPath = process.cwd();
 
 module.exports = isSSTest => ({
   entry: {
-    main: [_path.default.resolve(__dirname, "..", "hooks", "docsProptypeHook.js"), _path.default.join(appPath, componentFolder, "index.js")],
-    vendor: ["react", "react-dom", "redux", "react-redux"]
+    main: [_path.default.resolve(__dirname, '..', 'hooks', 'docsProptypeHook.js'), _path.default.join(appPath, componentFolder, 'index.js')],
+    vendor: ['react', 'react-dom', 'redux', 'react-redux']
   },
-  devtool: "none",
-  mode: "development",
+  devtool: 'none',
+  mode: 'development',
   output: {
-    path: _path.default.join(appPath, "build"),
-    filename: "js/[name].js",
-    publicPath: "/docs/",
-    library: "Component",
-    libraryTarget: "umd"
+    path: _path.default.join(appPath, 'build'),
+    filename: 'js/[name].js',
+    publicPath: '/docs/',
+    library: 'Component',
+    libraryTarget: 'umd'
   },
   plugins: (0, _pluginUtils.getDocsPlugins)(isSSTest, options),
   module: {
     rules: [{
       test: /\.js$/,
       use: [{
-        loader: "babel-loader",
+        loader: 'babel-loader',
         options: {
-          presets: [[require.resolve("@babel/preset-env"), {
+          presets: [[require.resolve('@babel/preset-env'), {
             modules: false
-          }], require.resolve("@babel/preset-react")],
-          plugins: [[require.resolve("@babel/plugin-transform-runtime"), {
+          }], require.resolve('@babel/preset-react')],
+          plugins: [[require.resolve('@babel/plugin-transform-runtime'), {
             helpers: true,
             regenerator: false
-          }], require.resolve("@babel/plugin-syntax-dynamic-import"), require.resolve("@babel/plugin-syntax-object-rest-spread")],
+          }], require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('@babel/plugin-syntax-object-rest-spread')],
           cacheDirectory: true
         }
       }],
       include: _path.default.join(appPath, folder)
     }, {
       test: /\.docs\.js$/,
-      use: require.resolve("../loaders/docsLoader.js"),
+      use: require.resolve('../loaders/docsLoader.js'),
       include: _path.default.join(appPath, folder),
       exclude: /node_modules/
     }, {
@@ -68,29 +71,29 @@ module.exports = isSSTest => ({
       use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
     }, {
       test: /\.jpe?g$|\.gif$|\.png$/,
-      use: ["url-loader?limit=1000&name=./images/[name].[ext]"]
+      use: ['url-loader?limit=1000&name=./images/[name].[ext]']
     }, {
       test: /\.woff2|\.woff$|\.ttf$|\.eot$/,
-      use: ["url-loader?limit=1000&name=./fonts/[name].[ext]"]
+      use: ['url-loader?limit=1000&name=./fonts/[name].[ext]']
     }, {
       test: /\.svg$/,
-      use: ["url-loader?limit=1&name=./fonts/[name].[ext]"]
+      use: ['url-loader?limit=1&name=./fonts/[name].[ext]']
     }, {
       test: /\.html$/,
       use: {
-        loader: "html-loader",
+        loader: 'html-loader',
         options: {
-          attrs: [":data-src"],
-          interpolate: "require"
+          attrs: [':data-src'],
+          interpolate: 'require'
         }
       }
     }, {
       test: /\.ogg$/,
-      use: ["file-loader?name=./fonts/[name].[ext]"]
+      use: ['file-loader?name=./fonts/[name].[ext]']
     }, {
       test: /\.tmpl$/,
       use: [{
-        loader: "html-loader",
+        loader: 'html-loader',
         options: {
           minimize: {
             removeComments: true,
@@ -104,12 +107,13 @@ module.exports = isSSTest => ({
     }]
   },
   externals: {
-    ZC: "$ZC"
+    ZC: '$ZC'
   },
   resolve: {
-    modules: [_path.default.resolve(__dirname, "..", "..", "node_modules"), "node_modules"]
+    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
+    alias: disableES5Transpile ? _libAlias.libAlias : {}
   },
   resolveLoader: {
-    modules: [_path.default.resolve(__dirname, "..", "..", "node_modules"), "node_modules"]
+    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
   }
 });

package/lib/loaderUtils/getCSSLoaders.js

@@ -20,6 +20,9 @@ let getCSSLoaders = (hasRTL, rtlExclude, classNameBlob, cssUniqueness, selectorR
   const {
     devCssFileBountry
   } = options.app;
+  const {
+    valueReplacer
+  } = options.css;
   const {
     cssSelectorZipPath
   } = options.impactService;
@@ -36,6 +39,18 @@ 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')({
+    ignore: rtlExcludeLocal,
+    plugins: [require('@zohodesk/postcss-rtl')({
+      addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
+        if (prefix === '[dir]') {
+          return selector;
+        }
+
+        return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
+      }
+    })]
+  })].filter(Boolean);
   return [cssSelectorZipPath && {
     loader: require.resolve('../loaders/selectorMappingLoader')
   }, {
@@ -51,23 +66,12 @@ let getCSSLoaders = (hasRTL, rtlExclude, classNameBlob, cssUniqueness, selectorR
     options: {
       devCssFileBountry
     }
-  }, hasRTL || selectorReplace ? {
+  }, postcssPlugins.length > 0 ? {
     loader: 'postcss-loader',
     options: {
       ident: 'postcss',
       plugins: function () {
-        return [selectorReplace && require('postcss-selector-replace')(selectorReplace), hasRTL && require('../postcss-plugins/ExcludeRTLPlugin')({
-          ignore: rtlExcludeLocal,
-          plugins: [require('@zohodesk/postcss-rtl')({
-            addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
-              if (prefix === '[dir]') {
-                return selector;
-              }
-
-              return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
-            }
-          })]
-        })].filter(Boolean);
+        return postcssPlugins;
       }
     }
   } : null].filter(Boolean);

package/lib/postcss-plugins/ValueReplacer.js

@@ -0,0 +1,46 @@
+"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) => {
+//     const inputFile = root.source.input.file;
+//     let isIgnoredFile= opts.ignore.some(file => inputFile.indexOf(file)!==-1);
+//     if (!isIgnoredFile) {
+//       const handler = response =>
+//         response.messages.forEach(msg => result.messages.push(msg));
+//       return postcss(plugins)
+//         .process(root, { from: undefined })
+//         .then(handler);
+//     }
+//   };
+// });
+// export default 
+module.exports = _postcss.default.plugin('postcss-value-replacer', (valueReplacer = {}) => // Work with options here
+root => {
+  root.walkDecls(decl => {
+    valueReplacer.forEach(obj => {
+      if (obj.props.indexOf(decl.prop) !== -1) {
+        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];
+      }
+    }); //console.log({root, roots:root+""}, root+"")
+    // Transform CSS AST here
+  }); // root.walkDecls(decl => {
+  //   valueReplacer.forEach(obj => {
+  //     if (
+  //       obj.props.indexOf(decl.prop) !== -1 &&
+  //       obj.values[decl.value] !== undefined
+  //     ) {
+  //       decl.value = obj.values[decl.value];
+  //     }
+  //   });
+  //   //console.log({root, roots:root+""}, root+"")
+  //   // Transform CSS AST here
+  // });
+});

package/lib/schemas/index.js

@@ -44,6 +44,17 @@ var _default = {
   },
   css: {
     enableRTLSplit: false,
+    valueReplacer: null,
+    //valueReplacer: [
+    //   {
+    //     props: ['font', 'font-family'],
+    //     values: {
+    //       'zdfonts-rCallBar': 'zdfonts-rCallBar01',
+    //       'zdfonts-rCall': 'zdfonts-rCallBar02'
+    //     }
+    //     // ,suffix: '0'
+    //   }
+    // ],
     templateLabel: '{{--dir}}',
     disableMiniFiySelector: false,
     dirVarName: 'document.dir'

package/lib/servers/server.js

@@ -99,9 +99,16 @@ app.use((0, _HMRMiddleware.default)(compiler, {
   path: '/sockjs-node/info'
 }));
 app.use((req, res, next) => {
-  res.setHeader('Access-Control-Allow-Origin', '*');
+  //console.log('origin', req.get('origin'));
+  res.setHeader('Access-Control-Allow-Origin', req.get('origin') || '*'); // res.setHeader('Access-Control-Allow-Origin', req.get('origin'));
+
+  res.setHeader('Access-Control-Allow-Private-Network', true);
+  res.setHeader('Access-Control-Allow-Credentials', true);
   next();
 }).use(`${contextURL}/fonts`, _express.default.static(`${context}/fonts`));
+app.options('/*', (req, res) => {
+  res.send('Ok');
+});
 app.use('/wms/*', (req, res) => {
   res.sendFile(_path.default.join(__dirname, '..', '..', 'templates', 'wms', 'index.html'));
 });
@@ -197,6 +204,6 @@ app.listen(httpPort, err => {
   (0, _utils.log)(`Listening at ${(0, _utils.getServerURL)({
     host,
     domain,
-    port: httpPort
+    port: port
   }, 'ht' + 'tp')}${contextURL}/`);
 });

package/npm8.md

@@ -0,0 +1,9 @@
+# npm 8 change related things
+
+1. in npm run script config options `:` not working (properly|correctly), So we need to use `_` in the place of `:`
+   For Example:
+   - `--app:port` wouldn't work we have to do like this `--app_port`
+   - `--clone:proj:name` wouldn't work we have to do like this `----clone_proj_name`
+
+@zohodes/react-cli or fz-react-cli regardless of what cli you use.
+So, we need to change all package.json script which is using this (`:`) we need to change as (`_`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "0.0.1-exp.164.2",
+  "version": "0.0.1-exp.166.1",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",