@zohodesk/react-cli 1.1.10 → 1.1.11-exp.2

package/README.md

@@ -44,6 +44,66 @@ Now to run app
 
 # Change Logs
 
+# 1.1.11-exp.2 (11-8-2023)
+
+**Changes**
+- Added more customization support for `stats.json` output.
+- Disabling `bundle-analyser` stats report for our customized stats output based on a flag.
+
+# 1.1.11-exp.1 (8-8-2023)
+
+**Changes** 
+
+- Added a new config `stats` to  control stats file generation.
+
+**Features:-**
+
+- Generating stats.json file for the build assets only in production mode. To use this feature we need to add `stats > enable` or cli flags `enable_stats`.
+
+# 1.1.11 (4-8-2023)
+
+**Changes**
+
+- we have renamed our default config file as `react-cli.config.js` instead of `build.config.js`. But we still support `build.config.js` we will remove it in later major version.
+
+- Prop-type, Prop description, Default Props support for docs given.
+- Docs and Docs_Code UI updated.
+
+**Features:-**
+
+- custom classname prefix for separate packages now supported.
+- to use custom classnames for specific patterns, we use the following pattern in `app > customClassNamePrefix` or `docs > customClassNamePrefix` :
+
+```
+"customClassNamePrefix" : [
+  {
+    "enable": true,
+    "prefix": "[required-prefix]",
+    "patterns":[
+      "**/[path-name]/**/*.css"
+    ]
+  }
+]
+```
+
+For example,
+
+```
+"customClassNamePrefix": [
+  {
+    "enable": true,
+    "prefix": "zdSvg",
+    "patterns": [
+      "**/@zohodesk/svg/**/*.css"
+    ]
+  },
+],
+```
+
+**Issue Fix:**
+
+- typo fix, (../src/common/runPreProcess.js) to (../lib/common/runPreProcess.js) in cli.js our code.
+
 # 1.1.10 (2-8-2023)
 
 **Issue Fix:**
@@ -213,8 +273,8 @@ Now to run app
 
 **Breaking Changes:**
 
-- We have remove ssl certificate for security reasons.  
-  So default https server won't run.  
+- We have remove ssl certificate for security reasons.
+  So default https server won't run.
   In order to make it work as before you need to specify two things
   1. install `@zohodesk-private/client_dev_cert`
   2. `react-cli.app.server.httpsCerts` option example `"httpsCerts": "@zohodesk-private/client_dev_cert"`
@@ -230,8 +290,8 @@ Now to run app
 
 **Breaking Changes:**
 
-- We have remove ssl certificate for security reasons.  
-  So default https server won't run.  
+- We have remove ssl certificate for security reasons.
+  So default https server won't run.
   In order to make it work as before you need to specify two things
   1. install `@zohodesk-private/client_dev_cert`
   2. `react-cli.app.server.httpsCerts` option example `"httpsCerts": "@zohodesk-private/client_dev_cert"`
@@ -248,8 +308,8 @@ Now to run app
 
 **Breaking Changes:**
 
-- We have remove ssl certificate for security reasons.  
-  So default https server won't run.  
+- We have remove ssl certificate for security reasons.
+  So default https server won't run.
   In order to make it work as before you need to specify two things
   1. install `@zohodesk-private/client_dev_cert`
   2. `react-cli.app.server.httpsCerts` option example `"httpsCerts": "@zohodesk-private/client_dev_cert"`
@@ -315,8 +375,8 @@ cli has been updated to fix compose issue faced when classname:hover exists and
 
 **Feature:-**
 
-- `react-cli.test.classnameFormat` option added to change CssModules (Ex: import style from "./a.module.css" ) className transform template unittest case.  
-   `classnameFormat` default value `[classname]` you can customize it. Example: `[classname]-[hash]`
+- `react-cli.test.classnameFormat` option added to change CssModules (Ex: import style from "./a.module.css" ) className transform template unittest case.
+  `classnameFormat` default value `[classname]` you can customize it. Example: `[classname]-[hash]`
 
 **Changes:-**
 
@@ -335,7 +395,7 @@ For an more information and reference, refer to `[details](https://zgit.csez.zoh
 
 # 0.0.1-beta.172
 
-We have renamed some options, For Our future features convenience.  
+We have renamed some options, For Our future features convenience.
 We have given fallback support.
 Deprecation Warnings:-
 
@@ -413,7 +473,7 @@ Features:-
 
 # 0.0.1-beta.167.1
 
-In this version we merged changes from [0.0.1-betaa.138.1](#0.0.1-betaa.138.1).  
+In this version we merged changes from [0.0.1-betaa.138.1](#0.0.1-betaa.138.1).
 and with [0.0.1-beta.167](#0.0.1-beta.167) version changes.
 
 # 0.0.1-beta.167
@@ -1321,3 +1381,7 @@ impact servise related changes:-
 - prod string error fix
 - efc build support
 - single style tag support
+
+```
+
+```

package/bin/cli.js

@@ -6,7 +6,7 @@ const getOptions = require('../lib/utils/getOptions.js').default;
 
 const { log } = require('../lib/utils/log.js');
 const { getCliPath } = require('../lib/servers/getCliPath.js');
-const { runPreProcess } = require('../src/common/runPreProcess.js');
+const { runPreProcess } = require('../lib/common/runPreProcess.js');
 //initPreCommitHook();
 
 const [, , option] = process.argv;

package/lib/common/runPreProcess.js

@@ -1,16 +1,21 @@
 "use strict";
 
-const path = require('path');
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.runPreProcess = runPreProcess;
 
-const {
-  existsSync
-} = require('fs');
+var _path = _interopRequireWildcard(require("path"));
 
-const {
-  spawn
-} = require('child_process');
+var _fs = require("fs");
 
-exports.runPreProcess = function runPreProcess({
+var _child_process = require("child_process");
+
+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 runPreProcess({
   options,
   option,
   nodemon,
@@ -19,17 +24,17 @@ exports.runPreProcess = function runPreProcess({
   const {
     preprocess
   } = options;
-  const preprocessorPath = preprocess.runner ? path.join(process.cwd(), preprocess.runner) : '';
+  const preprocessorPath = preprocess.runner ? _path.default.join(process.cwd(), preprocess.runner) : '';
   const preprocessCli = preprocess.stopNodemon ? 'node' : nodemon;
 
-  if (preprocessorPath && existsSync(preprocessorPath)) {
-    const preprocessorDirPath = path.dirname(preprocessorPath);
+  if (preprocessorPath && (0, _fs.existsSync)(preprocessorPath)) {
+    const preprocessorDirPath = (0, _path.dirname)(preprocessorPath);
     const watchOptions = preprocessCli === nodemon ? ['--watch', preprocessorDirPath] : []; // eslint-disable-next-line default-case
 
     switch (option) {
       case 'start':
       case 'docs':
-        spawn(preprocessCli, [preprocessorPath, ...watchOptions], {
+        (0, _child_process.spawn)(preprocessCli, [preprocessorPath, ...watchOptions], {
           stdio: 'inherit',
           cwd: preprocessorDirPath
         }); // NOTE:  it's ok if we not close this here
@@ -53,7 +58,7 @@ exports.runPreProcess = function runPreProcess({
         {
           const result = spawnSync(preprocessCli, [preprocessorPath, ...watchOptions], {
             stdio: 'inherit',
-            cwd: path.dirname(preprocessorPath)
+            cwd: preprocessorDirPath
           });
           process.exit(result.status);
           break;
@@ -63,4 +68,4 @@ exports.runPreProcess = function runPreProcess({
     console.error(`preProcessor not exists ${preprocessorPath}`);
     process.exit(0);
   }
-};
+}

package/lib/configs/webpack.css.umd.config.js

@@ -23,7 +23,8 @@ let {
       folder,
       publicPath,
       cssHashSelectors,
-      classNamePrefix
+      classNamePrefix,
+      customClassNamePrefix
     }
   },
   packageVersion
@@ -83,7 +84,7 @@ module.exports = {
         loader: 'css-loader',
         options: {
           modules: {
-            getLocalIdent: (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix)
+            getLocalIdent: (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, customClassNamePrefix)
           }
         }
       }]

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

@@ -30,6 +30,7 @@ const {
     cssVariableReplacementConfig,
     selectorWeightConfig,
     cssUniqueness,
+    customClassNamePrefix,
     seperateCssModules,
     changeRuntimeChunkChar,
     // we are going to use this for fonts file name collide in issue in devmode
@@ -108,6 +109,7 @@ module.exports = {
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,
+        customClassNamePrefix,
         classNameBlob: '[local]',
         cssUniqueness: false,
         selectorReplace: null,
@@ -124,6 +126,7 @@ module.exports = {
         selectorWeightConfig,
         classNameBlob: null,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace,
         cssHashSelectors,
         classNamePrefix,

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

@@ -20,6 +20,7 @@ const {
     componentFolder,
     enableChunkHash,
     cssUniqueness,
+    customClassNamePrefix,
     plugins,
     exclude,
     patterns,
@@ -86,6 +87,7 @@ module.exports = isSSTest => ({
         selectorWeightConfig,
         classNameBlob: false,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace,
         cssHashSelectors,
         classNamePrefix,

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

@@ -19,6 +19,7 @@ const {
   docs: {
     componentFolder,
     cssUniqueness,
+    customClassNamePrefix,
     plugins,
     exclude,
     patterns,
@@ -85,6 +86,7 @@ module.exports = {
         selectorWeightConfig,
         classNameBlob: false,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace: null,
         cssHashSelectors,
         classNamePrefix,

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

@@ -34,6 +34,7 @@ const {
     cssVariableReplacementConfig,
     selectorWeightConfig,
     cssUniqueness,
+    customClassNamePrefix,
     server: {
       mode
     },
@@ -161,6 +162,7 @@ module.exports = {
         mediaQueryHoverActiveString,
         classNameBlob: '[local]',
         cssUniqueness: false,
+        customClassNamePrefix,
         selectorReplace: null,
         postCssPluginOrder
       })
@@ -175,6 +177,7 @@ module.exports = {
         selectorWeightConfig,
         classNameBlob: false,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace,
         cssHashSelectors,
         classNamePrefix,

package/lib/loaderUtils/getCSSLoaders.js

@@ -44,7 +44,8 @@ const getCSSLoaders = optionsObj => {
     selectorReplace,
     cssHashSelectors,
     classNamePrefix,
-    postCssPluginOrder
+    postCssPluginOrder,
+    customClassNamePrefix
   } = optionsObj;
   const {
     devCssFileBountry
@@ -65,7 +66,7 @@ const getCSSLoaders = optionsObj => {
   if (classNameBlob) {
     cssLoaderOptions.modules.localIdentName = classNameBlob;
   } else {
-    cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, patterns);
+    cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, customClassNamePrefix, patterns);
   }
 
   const pluginOrder = calculatePostCssPluginOrder(postCssPluginOrder, Object.keys(plugins).filter(x => plugins[x] === true)); // console.log('selector weight config : ', selectorWeightConfig);

package/lib/logger.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.errorLogger = errorLogger;
 exports.messageLogger = messageLogger;
+exports.verboseLogger = verboseLogger;
 exports.warnLogger = warnLogger;
 
+/* eslint-disable no-console */
 function messageLogger(...args) {
   console.log(...args);
 }
@@ -17,4 +19,9 @@ function errorLogger(...args) {
 
 function warnLogger(...args) {
   console.warn(...args);
+}
+
+function verboseLogger(...args) {
+  // TODO: need to be remove when publish happens
+  process.env.VERBOSE === 'true' && console.log('\x1b[33m [verbose] \x1b[0m', ...args);
 }

package/lib/pluginUtils/getProdPlugins.js

@@ -35,6 +35,8 @@ var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
 
 var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
 
+var _StatsPlugin = _interopRequireDefault(require("../plugins/StatsPlugin"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // eslint-disable-next-line no-unused-vars
@@ -88,6 +90,12 @@ const getProdPlugins = (options, publicPath = '') => {
     templateFilePath,
     localeAttr: efcLocaleAttr
   } = options.efc;
+  const {
+    enable: enableStats,
+    options: statsOptions,
+    excludeKeys: statsOutputExcludeKeys,
+    fileName: statsFileName
+  } = options.stats;
   const hasEFC = newOptionForEnableEFC || prevOptionForEnableEFC;
   const hashTempalate = enableChunkHash ? '.[chunkhash:20]_' : '';
   const cssLTRFileNameTempalte = `css/[name]${hashTempalate}${enableRTLSplit ? '.ltr' : ''}.css`;
@@ -227,9 +235,9 @@ const getProdPlugins = (options, publicPath = '') => {
     if (bundleAnalyze) {
       pluginsArr.push(new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
         analyzerMode: 'static',
-        generateStatsFile: true,
+        generateStatsFile: !enableStats,
         openAnalyzer: false,
-        statsOptions: {
+        statsOptions: enableStats ? null : {
           source: false,
           normal: true,
           chunks: false,
@@ -288,6 +296,11 @@ const getProdPlugins = (options, publicPath = '') => {
 
 
   customAttributes.enable && pluginsArr.push(new _CustomAttributePlugin.CustomAttributePlugin(customAttributes));
+  enableStats && pluginsArr.push(new _StatsPlugin.default({
+    statsOptions,
+    statsOutputExcludeKeys,
+    statsFileName
+  }));
   return pluginsArr;
 };
 

package/lib/plugins/StatsPlugin.js

@@ -0,0 +1,174 @@
+"use strict";
+
+const fs = require('fs');
+
+const path = require('path');
+
+const {
+  Readable
+} = require('stream');
+
+const pluginName = 'stats-plugin';
+const statsSchema = {
+  all: false,
+  children: false,
+  source: false,
+  assets: true,
+  chunks: true,
+  chunkGroups: true,
+  chunkOrigins: true,
+  chunkModules: true,
+  entrypoints: true,
+  modules: true,
+  moduleTrace: true,
+  outputPath: true,
+  performance: true,
+  reasons: true
+};
+
+class StatsPlugin {
+  constructor({
+    statsOptions = {},
+    statsOutputExcludeKeys = [],
+    statsFileName = 'stats.json'
+  }) {
+    this.excludeKeysInStat = statsOutputExcludeKeys;
+    this.statsOptions = Object.assign({}, statsSchema, statsOptions);
+    this.statsFileName = statsFileName;
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tap(pluginName, stats => {
+      const statsJson = stats.toJson(this.statsOptions);
+      this.emitStats(statsJson);
+    });
+  }
+
+  transform(statsJson) {
+    return Object.keys(statsJson).reduce((acc, cur) => {
+      if (this.excludeKeysInStat.includes(cur)) {
+        return acc;
+      }
+
+      acc[cur] = statsJson[cur];
+      return acc;
+    }, {});
+  }
+
+  emitStats(statsJson) {
+    const {
+      outputPath
+    } = statsJson;
+    const transformedStatsJson = this.transform(statsJson);
+    const stringifiedJson = typeof statsJson === 'object' ? JSON.stringify(transformedStatsJson) : transformedStatsJson;
+    fs.writeFile(path.join(outputPath, this.statsFileName), stringifiedJson, err => {
+      if (err) {
+        throw err;
+      }
+    });
+  }
+
+} // class StatsSerializeStream extends Readable {
+//   constructor(stats) {
+//     super();
+//     this._indentLevel = 0;
+//     this._stringifier = this._stringify(stats);
+//   }
+//   get _indent() {
+//     return '  '.repeat(this._indentLevel);
+//   }
+//   _read() {
+//     let readMore = true;
+//     while (readMore) {
+//       const { value, done } = this._stringifier.next();
+//       if (done) {
+//         this.push(null);
+//         readMore = false;
+//       } else {
+//         readMore = this.push(value);
+//       }
+//     }
+//   }
+//   *_stringify(obj) {
+//     if (
+//       typeof obj === 'string' ||
+//       typeof obj === 'number' ||
+//       typeof obj === 'boolean' ||
+//       obj === null
+//     ) {
+//       yield JSON.stringify(obj);
+//     } else if (Array.isArray(obj)) {
+//       yield '[';
+//       this._indentLevel++;
+//       let isFirst = true;
+//       for (let item of obj) {
+//         if (item === undefined) {
+//           item = null;
+//         }
+//         yield `${isFirst ? '' : ','}\n${this._indent}`;
+//         yield* this._stringify(item);
+//         isFirst = false;
+//       }
+//       this._indentLevel--;
+//       yield obj.length ? `\n${this._indent}]` : ']';
+//     } else {
+//       yield '{';
+//       this._indentLevel++;
+//       let isFirst = true;
+//       const entries = Object.entries(obj);
+//       for (const [itemKey, itemValue] of entries) {
+//         if (itemValue === undefined) {
+//           continue;
+//         }
+//         yield `${isFirst ? '' : ','}\n${this._indent}${JSON.stringify(
+//           itemKey
+//         )}: `;
+//         yield* this._stringify(itemValue);
+//         isFirst = false;
+//       }
+//       this._indentLevel--;
+//       yield entries.length ? `\n${this._indent}}` : '}';
+//     }
+//   }
+// }
+// function writeStats(stats, filepath) {
+//   return new Promise((resolve, reject) => {
+//     new StatsSerializeStream(stats)
+//       .on('end', resolve)
+//       .on('error', reject)
+//       .pipe(fs.createWriteStream(filepath));
+//   });
+// }
+// class StatsStremPlugin {
+//   constructor({ statsOptions = {}, statsOutputExcludeKeys = [] }) {
+//     this.excludeKeysInStat = statsOutputExcludeKeys;
+//     this.statsOptions = Object.assign({}, statsSchema, statsOptions);
+//   }
+//   apply(compiler) {
+//     compiler.hooks.done.tap(pluginName, stats => {
+//       const statsJson = stats.toJson(this.statsOptions);
+//       this.emitStats(statsJson);
+//     });
+//   }
+//   transform(statsJson) {
+//     return Object.keys(statsJson).reduce((acc, cur) => {
+//       if (this.excludeKeysInStat.includes(cur)) {
+//         return acc;
+//       }
+//       acc[cur] = statsJson[cur];
+//       return acc;
+//     }, {});
+//   }
+//   emitStats(statsJson) {
+//     const { outputPath } = statsJson;
+//     const transformedStatsJson = this.transform(statsJson);
+//     // const stringifiedJson =
+//     //   typeof statsJson === 'object'
+//     //     ? JSON.stringify(transformedStatsJson)
+//     //     : transformedStatsJson;
+//     writeStats(transformedStatsJson, outputPath + 'jos-stats.json');
+//   }
+// }
+
+
+module.exports = StatsPlugin;

package/lib/schemas/index.js

@@ -15,7 +15,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // TODO move deprecated options to separate file and manage seperately
 var _default = {
-  cliRootPath: null,
   unstableDepsInverse: {
     value: false,
     cli: 'unstable_deps_inverse'
@@ -130,6 +129,7 @@ var _default = {
       value: '@zohodesk/client_packages_group',
       cli: 'module_resolve_path'
     },
+    customClassNamePrefix: [],
     // this option only for impact testing
     devCssFileBountry: {
       value: '',
@@ -357,6 +357,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,
@@ -722,6 +723,14 @@ var _default = {
       cli: 'module_mode'
     },
     disableES5Transpile: true
+  },
+  stats: {
+    enable: {
+      value: false,
+      cli: 'enable_stats'
+    },
+    fileName: undefined,
+    options: undefined
   }
 };
 exports.default = _default;

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) => (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,
@@ -86,7 +108,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()