@zohodesk/react-cli 0.0.1-beta.171 → 0.0.1-beta.173

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

@@ -16,8 +16,8 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let options = (0, _utils.getOptions)();
-let {
+const options = (0, _utils.getOptions)();
+const {
   unstableDepsInverse,
   app: {
     folder,
@@ -27,6 +27,7 @@ let {
     plugins,
     exclude,
     mediaQueryHoverActiveString,
+    cssVariableReplacementConfig,
     cssUniqueness,
     seperateCssModules,
     changeRuntimeChunkChar,
@@ -41,13 +42,13 @@ let {
     crossorigin
   }
 } = options;
-let {
+const {
   disableContextURL
 } = server;
-let appPath = process.cwd();
-let contextURL = disableContextURL ? '' : context;
-let serverUrl = (0, _utils.getServerURL)(server, 'https');
-let output = {
+const appPath = process.cwd();
+const contextURL = disableContextURL ? '' : context;
+const serverUrl = (0, _utils.getServerURL)(server, 'https');
+const output = {
   path: _path.default.join(appPath, outputFolder),
   filename: 'js/[name].js',
   chunkFilename: 'js/[name].js',
@@ -86,9 +87,9 @@ module.exports = {
       test: /\.js$/,
       use: (0, _loaderUtils.getDevJsLoaders)(options),
       include: module => {
-        let srcPath = _path.default.join(appPath, folder);
+        const srcPath = _path.default.join(appPath, folder);
 
-        let depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
+        const depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
 
         if (module.includes(srcPath) || devConsoleExculde && module.includes(depsPath)) {
           return true;
@@ -99,10 +100,10 @@ module.exports = {
     }, seperateCssModules ? {
       test: /\.css$/,
       exclude: /\.module\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, '[local]', false, null)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, '[local]', false, null)
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
       test: /\.tmpl$/,
       use: [{

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

@@ -14,8 +14,8 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let options = (0, _utils.getOptions)();
-let {
+const options = (0, _utils.getOptions)();
+const {
   unstableDepsInverse,
   docs: {
     componentFolder,
@@ -25,6 +25,7 @@ let {
     plugins,
     exclude,
     mediaQueryHoverActiveString,
+    cssVariableReplacementConfig,
     cssHashSelectors,
     classNamePrefix
   },
@@ -32,7 +33,7 @@ let {
     folder
   }
 } = options;
-let appPath = process.cwd();
+const appPath = process.cwd();
 const nameTemplate = (0, _configsAssetsLoaders.createNameTemplate)(enableChunkHash);
 
 module.exports = isSSTest => ({
@@ -74,7 +75,7 @@ module.exports = isSSTest => ({
       exclude: /node_modules/
     }, {
       test: /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
       test: /\.html$/,
       use: {

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

@@ -12,14 +12,15 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let options = (0, _utils.getOptions)();
-let {
+const options = (0, _utils.getOptions)();
+const {
   docs: {
     componentFolder,
     cssUniqueness,
     plugins,
     exclude,
     mediaQueryHoverActiveString,
+    cssVariableReplacementConfig,
     cssHashSelectors,
     enableChunkHash,
     classNamePrefix
@@ -28,7 +29,7 @@ let {
     folder
   }
 } = options;
-let appPath = process.cwd();
+const appPath = process.cwd();
 const nameTemplate = (0, _configsAssetsLoaders.createNameTemplate)(enableChunkHash);
 module.exports = {
   entry: {
@@ -69,7 +70,7 @@ module.exports = {
       exclude: /node_modules/
     }, {
       test: /(\.module)?\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
       test: /\.html$/,
       use: {

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

@@ -17,7 +17,7 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import TerserPlugin from 'terser-webpack-plugin';
-let options = (0, _utils.getOptions)();
+const options = (0, _utils.getOptions)();
 let {
   unstableDepsInverse,
   app: {
@@ -32,6 +32,7 @@ let {
     plugins,
     exclude,
     mediaQueryHoverActiveString,
+    cssVariableReplacementConfig,
     cssUniqueness,
     server: {
       mode
@@ -46,10 +47,10 @@ let {
     crossorigin
   }
 } = options;
-let appPath = process.cwd();
-let isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
+const appPath = process.cwd();
+const isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
 enableChunkHash = !isDevelopment && enableChunkHash;
-let output = {
+const output = {
   path: _path.default.resolve(appPath, outputFolder),
   filename: enableChunkHash ? 'js/[name].[chunkhash:20]_.js' : 'js/[name]_.js',
   chunkFilename: enableChunkHash ? 'js/[name].[chunkhash:20]_.js' : 'js/[name]_.js',
@@ -62,15 +63,15 @@ if (crossorigin) {
 }
 
 if (isDevelopment) {
-  let {
+  const {
     disableContextURL
   } = server;
-  let contextURL = disableContextURL ? '' : context;
-  let serverUrl = (0, _utils.getServerURL)(server, 'https');
+  const contextURL = disableContextURL ? '' : context;
+  const serverUrl = (0, _utils.getServerURL)(server, 'https');
   output.publicPath = `${[serverUrl, contextURL].filter(a => a).join('/')}/`;
 }
 
-let shouldRemovePropTypes = !isDevelopment && removePropTypes;
+const shouldRemovePropTypes = !isDevelopment && removePropTypes;
 module.exports = {
   entry: (0, _common.getEntries)(options, 'production'),
   devtool: isDevelopment ? 'cheap-module-source-map' : enableSMap ? 'hidden-source-map' : 'none',
@@ -134,9 +135,9 @@ module.exports = {
       }].filter(Boolean),
       // include: path.join(appPath, folder)
       include: module => {
-        let srcPath = _path.default.join(appPath, folder);
+        const srcPath = _path.default.join(appPath, folder);
 
-        let depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
+        const depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
 
         if (module.includes(srcPath) || devConsoleExculde && module.includes(depsPath)) {
           return true;
@@ -147,10 +148,10 @@ module.exports = {
     }, seperateCssModules ? {
       test: /\.css$/,
       exclude: /\.module\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, '[local]', false, null)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, cssVariableReplacementConfig, mediaQueryHoverActiveString, '[local]', false, null)
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /\.css$/,
-      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
+      use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
     }, {
       test: /\.jpe?g$|\.gif$|\.png$/,
       use: [{

package/lib/loaderUtils/getCSSLoaders.js

@@ -13,8 +13,10 @@ var _utils = require("../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let options = (0, _utils.getOptions)();
-let isWin = process.platform === 'win32';
+const fs = require('fs');
+
+const options = (0, _utils.getOptions)();
+const isWin = process.platform === 'win32';
 
 function windowsModification(array) {
   return isWin ? array.map(r => r.replace(/\//g, '\\')) : array;
@@ -31,7 +33,7 @@ function excludeEmptyCheckPlugin({
   })] : [];
 }
 
-let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
+const getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
   // console.log('plugins:')
   // console.log(plugins)
   // console.log('exclude:')
@@ -45,10 +47,12 @@ let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlo
   const {
     cssSelectorZipPath
   } = options.impactService;
-  let rtlExcludeLocal = windowsModification(exclude.rtl);
-  let hoverActiveExcludeLocal = windowsModification(exclude.hoverActive);
-  let combinerMediaQueryExcludeLocal = windowsModification(exclude.combinerMediaQuery);
-  let cssLoaderOptions = {
+  fs.writeFileSync('./css_error.log', '');
+  const rtlExcludeLocal = windowsModification(exclude.rtl);
+  const hoverActiveExcludeLocal = windowsModification(exclude.hoverActive);
+  const combinerMediaQueryExcludeLocal = windowsModification(exclude.combinerMediaQuery);
+  const cssVariableReplacementExcludeLocal = windowsModification(exclude.cssVariableReplacement);
+  const cssLoaderOptions = {
     // importLoaders: hasRTL||hoverActive ? 1 : 0,
     importLoaders: 1,
     modules: {},
@@ -61,7 +65,12 @@ let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlo
     cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix);
   }
 
-  const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('postcss-selector-replace')(selectorReplace), ...excludeEmptyCheckPlugin({
+  const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('postcss-selector-replace')(selectorReplace), // ...excludeEmptyCheckPlugin({
+  //   enable: true,
+  //   ignore: [],
+  //   plugins: [require('../postcss-plugins/variablePropertiesCollector').default()]
+  // }),
+  ...excludeEmptyCheckPlugin({
     enable: plugins.hasRTL,
     ignore: rtlExcludeLocal,
     plugins: [require('@zohodesk/postcss-rtl')({
@@ -81,8 +90,11 @@ let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlo
     enable: plugins.hoverActive,
     ignore: hoverActiveExcludeLocal,
     plugins: [require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString)]
-  }) // require('../postcss-plugins/variableModifier')()
-  ].filter(Boolean);
+  }), ...excludeEmptyCheckPlugin({
+    enable: plugins.cssVariableReplacement,
+    ignore: cssVariableReplacementExcludeLocal,
+    plugins: [require('../postcss-plugins/variableModificationPlugin/index')(cssVariableReplacementConfig)]
+  })].filter(Boolean);
   return [cssSelectorZipPath && {
     loader: require.resolve('../loaders/selectorMappingLoader')
   }, {

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;

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

@@ -0,0 +1,247 @@
+"use strict";
+
+const postcss = require('postcss');
+
+const fs = require('fs');
+
+const path = require('path');
+
+const errors = [];
+let allowedErrs = {};
+const convertableProps = {
+  'font-size': true,
+  margin: true,
+  'margin-left': true,
+  'margin-right': true,
+  'margin-top': true,
+  'margin-bottom': true,
+  padding: true,
+  'padding-top': true,
+  'padding-bottom': true,
+  'padding-left': true,
+  'padding-right': true,
+  width: true,
+  'min-width': true,
+  'max-width': true,
+  height: true,
+  'min-height': true,
+  'max-height': true,
+  top: true,
+  bottom: true,
+  left: true,
+  right: true
+};
+const constantValues = {
+  inherit: true,
+  initial: true,
+  auto: true,
+  'fit-content': true,
+  unset: true
+};
+
+function getNumericValue(value) {
+  if (value.includes('var')) {
+    return parseInt(value.replace(/var\(--zd_size(\d+)\)/gi, '$1').replace(/var\(--zd_font_size(\d+)\)/gi, '$1'));
+  } // Not need for this dum loop
+  // allowed.forEach(alwdUnit => {
+  //   if (value.includes(alwdUnit)) {
+  //     return parseInt(value);
+  //   }
+  // });
+
+
+  if (constantValues[value.toLowerCase()]) {
+    return 1;
+  }
+
+  return parseInt(value);
+}
+
+function pxToCalc(value) {
+  const arr = value.split(' ');
+  arr.forEach((val, index) => {
+    ['px'].forEach(unit => {
+      const valWithUnit = new RegExp(`(\\d+)${unit}`, 'gi');
+
+      if (valWithUnit.test(val)) {
+        arr[index] = val.replace(valWithUnit, '(var(--zd_size$1))');
+      }
+    });
+  });
+  return arr.join(' ');
+}
+
+const addError = errstr => {
+  errors.push(`{\n${errstr}\n}\n`);
+};
+
+const errorFunction = (errStr, type) => {
+  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);
+  }
+};
+
+const singleConvertor = (value, changeVal, details, range) => {
+  const {
+    path,
+    filename,
+    decl
+  } = details;
+
+  if (getNumericValue(value) >= range.start && getNumericValue(value) <= range.end || getNumericValue(value) === 0) {
+    let retVal = value.replace(/(\d+)px/gi, changeVal.replace('$$', '$1'));
+
+    if (/^-var/.test(retVal)) {
+      retVal = `calc( ${retVal.substring(1)} * -1 )`;
+    }
+
+    return retVal;
+  } // if(unitErrorVal && unitErrorVal != '0' ){
+  // console.log(value, 'not within range')
+
+
+  errorFunction(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n message : value (${value}) (${typeof value}) not within range (${range.start},${range.end})\r`, 'RANGE_ERROR'); // }
+  // addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n message : value (${value}) not within range (${range.start},${range.end})\r`)
+
+  return value;
+};
+
+module.exports = postcss.plugin('postcss-variable-report', cssVariableReplacementConfig => {
+  const rawdata = fs.readFileSync(cssVariableReplacementConfig);
+  const data = JSON.parse(rawdata);
+  const {
+    errorsAllowed,
+    settings: settingsObject,
+    errorLog: errorLogStatus,
+    errorInConsole: errorConsoleStatus
+  } = data; // const keys = Object.keys(settingsObject);
+
+  allowedErrs = errorsAllowed;
+  const replacementArray = [];
+  Object.keys(settingsObject).forEach(key => {
+    Object.values(settingsObject[key].replacements).forEach(val => {
+      if (!replacementArray.includes(val)) {
+        replacementArray.push(val);
+      }
+    });
+  });
+  let regValStr = '';
+  replacementArray.forEach((val, index) => {
+    if (index !== replacementArray.length - 1) {
+      regValStr += `${val.replace('$$', '\\d+')}|`;
+    } else {
+      regValStr += `${val.replace('$$', '\\d+')}`;
+    }
+  });
+  const valRegex = new RegExp(regValStr, 'gi');
+  return rootOriginal => {
+    rootOriginal.walkRules(rule => {
+      // rule.nodes[-1] = {}
+      // need map, forEach fine less memory
+      rule.nodes.forEach((decl, position) => {
+        // case font-size
+        const commentStr = 'variable:ignore';
+        const prevNode = rule.nodes[position - 1];
+        const fromPath = rootOriginal.source.input.from; // this will be problem for linux and mac use require('path').sep
+        // split not need use slice and lastIndexOf less memory
+
+        const filename = fromPath.split(path.sep).pop();
+
+        if (prevNode && prevNode.type === 'comment' && prevNode.text.toLowerCase().includes(commentStr)) {
+          const errStr = ` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${fromPath} ,\n line : ${decl.source.start.line} ,\n message : Declaration Ignored \r`;
+          errorFunction(errStr, 'DECLARATION_IGNORED');
+          return;
+        }
+
+        if (settingsObject[decl.prop] && !decl.value.includes('var(--')) {
+          const settings = settingsObject[decl.prop]; // console.log(settings)
+
+          const {
+            allowed,
+            range
+          } = settings; // suggestion filter  !decl.value.includes('calc')
+          // Reason below some of logic happen based on this
+
+          const unit = decl.value.toString() // no need round braket since you do not need group for less memory
+          .replace(/\d+/gi, '').replace('var(--zd_size)', 'px').replace('var(--zd_font_size)', 'px').split(' ').filter(x => x !== ''); // unit = unit.replace(unit, unit.replace('-',''))
+          // console.log('unit : ');
+          // console.log(unit);
+
+          unit.forEach((val, index) => {
+            allowed.forEach(alwdVal => {
+              if (val.includes(alwdVal)) {
+                // ## for what purpose
+                unit[index] = val.replace(`-${alwdVal}`, `${alwdVal}`).replace(`-.${alwdVal}`, `${alwdVal}`);
+              }
+            });
+          });
+          let unitError = false;
+          let unitErrorVal = '';
+          unit.forEach(val => {
+            if (!val.includes('calc')) {
+              if (!allowed.includes(val.toString())) {
+                unitError = true;
+                unitErrorVal = val;
+              }
+            }
+          }); // console.log(allowed, replacements, range)
+
+          if (!unitError) {
+            // use variable decl.value.split(' ')
+            if (range) {
+              // console.log('multiple :', decl.value)
+              let newVal = '';
+              decl.value.split(' ').forEach(singleVal => {
+                newVal += `${singleConvertor(singleVal, settings.replacements.px, {
+                  decl,
+                  filename,
+                  path: fromPath
+                }, range)} `;
+              });
+              decl.value = newVal;
+            }
+          } else {
+            if (!decl.value.includes('calc')) {
+              // addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n unit : ${unitErrorVal} ,\n message : ${unitErrorVal} (Unit) Not Allowed \r`);
+              errorFunction(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${fromPath} ,\n line : ${decl.source.start.line} ,\n unit : ${unitErrorVal} ,\n message : ${unitErrorVal} (Unit) Not Allowed \r`, 'UNIT_ERROR');
+            } else {
+              decl.value = pxToCalc(decl.value);
+            }
+          }
+        } else {
+          if (decl.prop && decl.value && !decl.prop.includes('--') && valRegex.test(decl.value) && (settingsObject[decl.prop] || convertableProps[decl.prop]) && decl.value.includes('var') && !decl.value.includes('calc')) {
+            errorFunction(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${fromPath} ,\n line : ${decl.source.start.line} ,\n message : value (${decl.value}) has var in it, kindly check`, 'VARIABLE_PRESENT');
+          }
+        }
+      });
+    }); // console.log(filename)
+    // console.log('Done!')
+    // console.log('----------------------------------------------------------------------------------------------------------------------')
+
+    if (errorLogStatus) {
+      fs.writeFileSync('./css_error.log', '');
+
+      if (errors.length > 0) {
+        errors.forEach(err => {
+          fs.appendFileSync('./css_error.log', err);
+        }); // console.log('----------------------------------------------------------------------------------------------------------------------')
+      }
+    }
+
+    if (errorConsoleStatus) {
+      if (errors.length > 0) {
+        errors.forEach(err => {
+          // fs.appendFileSync('./css_error.log', err);
+          console.log(err);
+        });
+        console.log('----------------------------------------------------------------------------------------------------------------------');
+      }
+    }
+  };
+});

package/lib/postcss-plugins/variableModifier.js

@@ -101,6 +101,7 @@ module.exports = postcss.plugin('postcss-variable-report', () => rootOriginal =>
       rule.walkDecls((decl, position) => {
         // case font-size
         if (!hasIgnoreComment(rule.nodes[position - 1])) {
+          console.log(settings);
           let unit = decl.value.replace(/[0-9]/g, '');
           let settings = numberObject[decl.prop];
           let path = rootOriginal.source.input.from;

package/lib/schemas/index.js

@@ -13,6 +13,7 @@ var _getCurrentBranch = _interopRequireDefault(require("../utils/getCurrentBranc
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// TODO move deprecated options to separate file and manage seperately
 var _default = {
   cliRootPath: null,
   unstableDepsInverse: {
@@ -197,6 +198,9 @@ var _default = {
       cli: 'attr_name'
     },
     publicPaths: false,
+    // TODO: Deprecated
+    hasRTL: false,
+    rtlExclude: [],
     instrumentScript: {
       value: false,
       cli: 'instru_script'
@@ -212,13 +216,16 @@ var _default = {
     plugins: {
       hasRTL: false,
       hoverActive: false,
-      combinerMediaQuery: false
+      combinerMediaQuery: false,
+      cssVariableReplacement: false
     },
     exclude: {
       rtl: [],
       hoverActive: [],
-      combinerMediaQuery: []
+      combinerMediaQuery: [],
+      cssVariableReplacement: []
     },
+    cssVariableReplacementConfig: '',
     seperateCssModules: {
       value: false,
       cli: 'sep_cssmodules'
@@ -292,16 +299,22 @@ var _default = {
     enableChunkHash: false,
     folder: 'src',
     disableES5Transpile: false,
+    // TODO: Deprecated
+    hasRTL: false,
+    rtlExclude: [],
     plugins: {
       hasRTL: false,
       hoverActive: false,
-      combinerMediaQuery: false
+      combinerMediaQuery: false,
+      cssVariableReplacement: false
     },
     exclude: {
       rtl: [],
       hoverActive: [],
-      combinerMediaQuery: []
+      combinerMediaQuery: [],
+      cssVariableReplacement: []
     },
+    cssVariableReplacementConfig: '',
     cssHashSelectors: {
       filenames: [],
       packages: []

package/lib/utils/getOptions.js

@@ -122,7 +122,34 @@ let defaulter = (target, source) => {
   return defaultObject;
 };
 
-global.reactCLIOptions = null;
+global.reactCLIOptions = null; // function selectn(obj, key) {
+//   let temp = obj;
+//   let keys = key.split('.');
+//   for (let i = 0; i < keys.length; i++) {
+//     const element = keys[i];
+//     temp = temp && temp[element];
+//   }
+//   return temp;
+// }
+
+function deprecationSupport(options) {
+  // if (selectn(options, ".app.hasRTL") === true) {
+  if (options.app.hasRTL === true) {
+    options.app.plugins.hasRTL = true;
+  }
+
+  if (options.docs.hasRTL === true) {
+    options.docs.plugins.hasRTL = true;
+  }
+
+  if (options.app.rtlExclude.length > 0) {
+    options.app.exclude.rtl = options.app.rtlExclude;
+  }
+
+  if (options.docs.rtlExclude.length > 0) {
+    options.docs.exclude.rtl = options.docs.rtlExclude;
+  }
+}
 
 let getOptions = () => {
   if (global.reactCLIOptions) {
@@ -142,6 +169,7 @@ let getOptions = () => {
 
   options.npmVersion = getNpmVersion();
   options.cwd = getCWD();
+  deprecationSupport(options);
   options.packageVersion = process.env.npm_package_version;
   global.reactCLIOptions = options;
   return options;