@zohodesk/react-cli 1.1.14-kubernetes → 1.1.15-exp.1

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

@@ -25,10 +25,13 @@ const {
     outputFolder,
     plugins,
     exclude,
+    patterns,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     selectorWeightConfig,
+    prefixConfig,
     cssUniqueness,
+    customClassNamePrefix,
     seperateCssModules,
     changeRuntimeChunkChar,
     // we are going to use this for fonts file name collide in issue in devmode
@@ -38,7 +41,9 @@ const {
     selectorReplace,
     devConsoleExculde,
     sourcemap,
-    crossorigin
+    crossorigin,
+    postCssPluginOrder,
+    externals
   }
 } = options;
 const {
@@ -102,26 +107,34 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,
+        prefixConfig,
+        customClassNamePrefix,
         classNameBlob: '[local]',
         cssUniqueness: false,
-        selectorReplace: null
+        selectorReplace: null,
+        postCssPluginOrder
       })
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /(\.module)?\.css$/,
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,
+        prefixConfig,
         classNameBlob: null,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace,
         cssHashSelectors,
-        classNamePrefix
+        classNamePrefix,
+        postCssPluginOrder
       })
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
       test: /\.tmpl$/,
@@ -142,9 +155,9 @@ module.exports = {
       }
     }].filter(Boolean)
   },
-  externals: {
+  externals: Object.assign({
     ZC: '$ZC'
-  },
+  }, externals),
   resolve: (0, _resolvers.moduleResolver)(options),
   resolveLoader: (0, _resolvers.loaderResolver)(options)
 };

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

@@ -20,13 +20,19 @@ const {
     componentFolder,
     enableChunkHash,
     cssUniqueness,
+    customClassNamePrefix,
     plugins,
     exclude,
+    patterns,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     selectorWeightConfig,
+    prefixConfig,
     cssHashSelectors,
-    classNamePrefix
+    classNamePrefix,
+    selectorReplace,
+    postCssPluginOrder,
+    externals
   },
   app: {
     folder
@@ -77,14 +83,18 @@ module.exports = isSSTest => ({
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,
+        prefixConfig,
         classNameBlob: false,
         cssUniqueness,
-        selectorReplace: null,
+        customClassNamePrefix,
+        selectorReplace,
         cssHashSelectors,
-        classNamePrefix
+        classNamePrefix,
+        postCssPluginOrder
       })
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
       test: /\.html$/,
@@ -95,6 +105,10 @@ module.exports = isSSTest => ({
           interpolate: 'require'
         }
       }
+    }, {
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto'
     }, {
       test: /\.tmpl$/,
       use: [{
@@ -111,9 +125,9 @@ module.exports = isSSTest => ({
       }]
     }]
   },
-  externals: {
+  externals: Object.assign({
     ZC: '$ZC'
-  },
+  }, externals),
   resolve: (0, _resolvers.moduleResolver)(options),
   resolveLoader: (0, _resolvers.loaderResolver)(options)
 });

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

@@ -19,14 +19,19 @@ const {
   docs: {
     componentFolder,
     cssUniqueness,
+    customClassNamePrefix,
     plugins,
     exclude,
+    patterns,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     selectorWeightConfig,
+    prefixConfig,
     cssHashSelectors,
     enableChunkHash,
-    classNamePrefix
+    classNamePrefix,
+    postCssPluginOrder,
+    externals
   },
   app: {
     folder
@@ -77,14 +82,18 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,
+        prefixConfig,
         classNameBlob: false,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace: null,
         cssHashSelectors,
-        classNamePrefix
+        classNamePrefix,
+        postCssPluginOrder
       })
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
       test: /\.html$/,
@@ -112,9 +121,9 @@ module.exports = {
       }]
     }]
   },
-  externals: {
+  externals: Object.assign({
     ZC: '$ZC'
-  },
+  }, externals),
   resolve: (0, _resolvers.moduleResolver)(options),
   resolveLoader: (0, _resolvers.loaderResolver)(options)
 };

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

@@ -29,10 +29,13 @@ const {
     server,
     plugins,
     exclude,
+    patterns,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
     selectorWeightConfig,
+    prefixConfig,
     cssUniqueness,
+    customClassNamePrefix,
     server: {
       mode
     },
@@ -43,7 +46,9 @@ const {
     selectorReplace,
     removePropTypes,
     devConsoleExculde,
-    crossorigin
+    crossorigin,
+    postCssPluginOrder,
+    externals
   }
 } = options;
 let {
@@ -153,26 +158,34 @@ module.exports = {
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
         cssVariableReplacementConfig,
         selectorWeightConfig,
+        prefixConfig,
         mediaQueryHoverActiveString,
         classNameBlob: '[local]',
         cssUniqueness: false,
-        selectorReplace: null
+        customClassNamePrefix,
+        selectorReplace: null,
+        postCssPluginOrder
       })
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /\.css$/,
       use: (0, _loaderUtils.getCSSLoaders)({
         plugins,
         exclude,
+        patterns,
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,
+        prefixConfig,
         classNameBlob: false,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace,
         cssHashSelectors,
-        classNamePrefix
+        classNamePrefix,
+        postCssPluginOrder
       })
     }, {
       test: /\.jpe?g$|\.gif$|\.png$/,
@@ -231,9 +244,9 @@ module.exports = {
       }
     }].filter(Boolean)
   },
-  externals: {
+  externals: Object.assign({
     ZC: '$ZC'
-  },
+  }, externals),
   resolve: (0, _resolvers.moduleResolver)(options),
   resolveLoader: (0, _resolvers.loaderResolver)(options)
 };

package/lib/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.cliRootPath = exports.cliNodemodulesPath = exports.appPath = exports.CONFIG_ROOT = exports.BASE_CONFIG_KEY = void 0;
+exports.cliRootPath = exports.cliNodeModulesPath = exports.appPath = exports.CONFIG_ROOT = exports.BASE_CONFIG_KEY = void 0;
 
 var _path = _interopRequireDefault(require("path"));
 
@@ -18,10 +18,10 @@ exports.cliRootPath = cliRootPath;
 const CONFIG_ROOT = 'react-cli';
 exports.CONFIG_ROOT = CONFIG_ROOT;
 
-const cliNodemodulesPath = _path.default.resolve(cliRootPath, 'node_modules'); // export const babelrcPath = join(cliRootPath, '.babelrc');
+const cliNodeModulesPath = _path.default.resolve(cliRootPath, 'node_modules'); // export const babelrcPath = join(cliRootPath, '.babelrc');
 
 
-exports.cliNodemodulesPath = cliNodemodulesPath;
+exports.cliNodeModulesPath = cliNodeModulesPath;
 const appPath = process.cwd(); // export const appInitialHTMLTemplatePath = path.join(
 //   process.cwd(),
 //   'src',

package/lib/deprecationLogger.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deprecateMessage = deprecateMessage;
+exports.deprecateOption = deprecateOption;
+exports.deprecationLoggerEnd = deprecationLoggerEnd;
+
+var _logger = require("./logger");
+
+function deprecateMessage(message) {
+  // eslint-disable-next-line no-use-before-define
+  deprecationLoggerStart();
+  (0, _logger.messageLogger)('\x1b[36m%s\x1b[0m', message);
+}
+
+function printLine() {
+  deprecateMessage('\n!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! \n ');
+}
+
+let isFirstDeprecation = false;
+
+function deprecateOption(previousObjPath = '', newObjPath = '', message = '') {
+  deprecateMessage(`Please move "${previousObjPath.split('.').join(' > ')}" to "${newObjPath.split('.').join(' > ')}" following option ${message}`);
+}
+
+function deprecationLoggerStart() {
+  if (!isFirstDeprecation) {
+    isFirstDeprecation = true;
+    printLine();
+  }
+}
+
+function deprecationLoggerEnd() {
+  if (isFirstDeprecation) {
+    isFirstDeprecation = false;
+    printLine();
+  }
+}

package/lib/loaderUtils/configsAssetsLoaders.js

@@ -79,39 +79,39 @@ function createNameTemplate(enableChunkHash) {
   const ext = `${enableChunkHash ? '.[hash:20]' : ''}.[ext]`;
   return `[name]${ext}`;
 }
-/*
-export function createImageAndFontsAndSVGLoaders(enableChunkHash) {
-  const nameTemplate = createNameTemplate(enableChunkHash);
-  return [
-    configImageLoader(nameTemplate),
-    configFontLoader(nameTemplate),
-    configSVGLoader(nameTemplate),
-    configAudioLoader(nameTemplate)
-  ];
-}
+/*
+export function createImageAndFontsAndSVGLoaders(enableChunkHash) {
+  const nameTemplate = createNameTemplate(enableChunkHash);
+  return [
+    configImageLoader(nameTemplate),
+    configFontLoader(nameTemplate),
+    configSVGLoader(nameTemplate),
+    configAudioLoader(nameTemplate)
+  ];
+}
 */
 
-/*
-export function createLoaderOptionObject(
-  loaderName,
-  nameTemplate,
-  fallback,
-  limit = 1000
-) {
-  return {
-    loader: loaderName,
-    options: {
-      limit,
-      name: nameTemplate,
-      fallback
-    }
-  };
-}
-
-function configLoaderObject(filter, loaderAndOptions) {
-  return {
-    test: filter,
-    use: loaderAndOptions
-  };
-}
+/*
+export function createLoaderOptionObject(
+  loaderName,
+  nameTemplate,
+  fallback,
+  limit = 1000
+) {
+  return {
+    loader: loaderName,
+    options: {
+      limit,
+      name: nameTemplate,
+      fallback
+    }
+  };
+}
+
+function configLoaderObject(filter, loaderAndOptions) {
+  return {
+    test: filter,
+    use: loaderAndOptions
+  };
+}
 */

package/lib/loaderUtils/getCSSLoaders.js

@@ -11,41 +11,43 @@ var _cssClassNameGenerate = _interopRequireDefault(require("../utils/cssClassNam
 
 var _utils = require("../utils");
 
-var _windowsModification = require("./windowsModification");
+var _fileHandling = require("../plugins/utils/fileHandling");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const fs = require('fs');
 
 const options = (0, _utils.getOptions)();
+const defaultPostCssPluginOrder = ['valueReplacer', 'selectorReplace', 'hasRTL', 'hoverActive', 'combinerMediaQuery', 'cssVariableReplacement', 'selectorWeight', 'minifier', 'composeMinification', 'autoPrefixer'];
 
-function excludeEmptyCheckPlugin({
-  enable,
-  ignore,
-  plugins
-}) {
-  return enable ? ignore.length === 0 ? plugins : [require('../postcss-plugins/ExcludePlugin')({
-    ignore,
-    plugins
-  })] : [];
+function calculatePostCssPluginOrder(postCssPluginOrder, pluginOrder) {
+  // if(typeof postCssPluginOrder === Boolean)
+  if (Array.isArray(postCssPluginOrder)) {
+    return postCssPluginOrder;
+  }
+
+  if (postCssPluginOrder) {
+    return pluginOrder;
+  }
+
+  return defaultPostCssPluginOrder.filter(value => pluginOrder.includes(value));
 }
 
 const getCSSLoaders = optionsObj => {
   const {
     plugins,
-    exclude,
+    patterns,
     mediaQueryHoverActiveString,
     cssVariableReplacementConfig,
+    prefixConfig,
     classNameBlob,
     cssUniqueness,
     selectorReplace,
     cssHashSelectors,
-    classNamePrefix
-  } = optionsObj; // console.log('plugins:')
-  // console.log(plugins)
-  // console.log('exclude:')
-  // console.log(exclude)
-
+    classNamePrefix,
+    postCssPluginOrder,
+    customClassNamePrefix
+  } = optionsObj;
   const {
     devCssFileBountry
   } = options.app;
@@ -55,10 +57,6 @@ const getCSSLoaders = optionsObj => {
   const {
     cssSelectorZipPath
   } = options.impactService;
-  const rtlExcludeLocal = (0, _windowsModification.windowsModification)(exclude.rtl);
-  const hoverActiveExcludeLocal = (0, _windowsModification.windowsModification)(exclude.hoverActive);
-  const combinerMediaQueryExcludeLocal = (0, _windowsModification.windowsModification)(exclude.combinerMediaQuery);
-  const cssVariableReplacementExcludeLocal = (0, _windowsModification.windowsModification)(exclude.cssVariableReplacement);
   const cssLoaderOptions = {
     // importLoaders: hasRTL||hoverActive ? 1 : 0,
     importLoaders: 1,
@@ -69,35 +67,26 @@ const getCSSLoaders = optionsObj => {
   if (classNameBlob) {
     cssLoaderOptions.modules.localIdentName = classNameBlob;
   } else {
-    cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix);
-  } // console.log('selector weight config : ', selectorWeightConfig);
+    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(require('autoprefixer'));
+  // console.log(require('autoprefixer')());
+  // console.log('selector weight config : ', selectorWeightConfig);
 
-  const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('postcss-selector-replace')(selectorReplace), ...excludeEmptyCheckPlugin({
-    enable: plugins.hasRTL,
-    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
+  const postcssPlugins = [plugins.valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), plugins.hasRTL && require('@zohodesk/postcss-rtl')({
+    addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
+      if (prefix === '[dir]') {
+        return selector;
       }
-    })]
-  }), ...excludeEmptyCheckPlugin({
-    enable: plugins.combinerMediaQuery,
-    ignore: combinerMediaQueryExcludeLocal,
-    plugins: [require('postcss-combine-media-query')]
-  }), ...excludeEmptyCheckPlugin({
-    enable: plugins.hoverActive,
-    ignore: hoverActiveExcludeLocal,
-    plugins: [require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString)]
-  }), ...excludeEmptyCheckPlugin({
-    enable: plugins.cssVariableReplacement,
-    ignore: cssVariableReplacementExcludeLocal,
-    plugins: [fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index').plugin(cssVariableReplacementConfig)]
-  })].filter(Boolean);
+
+      return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
+    }
+  }), plugins.selectorReplace && require('../postcss-plugins/SelectorReplace')(selectorReplace), plugins.combinerMediaQuery && require('postcss-combine-media-query')(), plugins.hoverActive && require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString), plugins.cssVariableReplacement && fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index').plugin(cssVariableReplacementConfig), plugins.autoPrefixer && require('../postcss-plugins/AutoPrefixer')(prefixConfig) // require('autoprefixer')({ flexbox: true, grid: false })
+  // ,
+  // plugins.composeMinification &&
+  //   require('../postcss-plugins/composePlugin')()
+  ].filter(Boolean);
   return [cssSelectorZipPath && {
     loader: require.resolve('../loaders/selectorMappingLoader')
   }, {
@@ -117,10 +106,74 @@ const getCSSLoaders = optionsObj => {
     loader: 'postcss-loader',
     options: {
       ident: 'postcss',
-      plugins: function () {
-        return postcssPlugins;
+      plugins: function (params) {
+        // console.log('check here : ', params.resourcePath);
+        // getCSSLoaders for all postcss filtering
+
+        /*
+        input : 
+        params.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+        patterns : [
+            // include all files
+           "valueReplacer": [ 
+              "*"
+            ],
+            // include all files
+            "selectorReplace": [
+              "*"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "hoverActive": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "combinerMediaQuery": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "hasRTL": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "cssVariableReplacement": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "selectorWeight": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include all files
+            "cssUniqueness": [
+              "*"
+            ]
+        ],
+        
+        [ postcssPlugins that are implemented ]
+            */
+        //  console.log(params.resourcePath);
+        //  console.log(postcssPlugins);
+        const finalPostcssPlugins = (0, _fileHandling.isFileNameMatchingPattern)({
+          filename: params.resourcePath,
+          filterObject: patterns,
+          plugins: postcssPlugins,
+          order: pluginOrder
+        }); // postcssPlugins that are allowed
+
+        return finalPostcssPlugins.length > 0 ? finalPostcssPlugins : [require('../postcss-plugins/EmptyPlugin')()];
       }
     }
+  } : null, plugins.composeMinification ? {
+    loader: require.resolve('../loaders/composeLoader')
   } : null].filter(Boolean);
 };
 

package/lib/loaderUtils/tests/windowsModification.test.js

@@ -0,0 +1,10 @@
+"use strict";
+
+const {
+  windowsModificationFile
+} = require('../windowsModification');
+
+const tests = ['D:\\MyWork\\React Build\\desk_client_app\\jsapps\\supportapp\\src\\components\\Accessibility\\Accessibility.module.css', 'D:/MyWork/React Build/desk_client_app/jsapps/supportapp/src/components/Accessibility/Accessibility.module.css', 'desk_client_app\\jsapps\\supportapp\\src\\components\\Accessibility\\Accessibility.module.css', 'desk_client_app/jsapps/supportapp/src/components/Accessibility/Accessibility.module.css', 'src\\components\\Accessibility\\Accessibility.module.css', 'src/components/Accessibility/Accessibility.module.css', 'Accessibility.module.css', ''];
+tests.forEach(test => {
+  console.log(windowsModificationFile(test));
+});

package/lib/loaderUtils/windowsModification.js

@@ -4,8 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.windowsModification = windowsModification;
+exports.windowsModificationFile = windowsModificationFile;
 const isWin = process.platform === 'win32';
 
 function windowsModification(array) {
   return isWin ? array && Array.isArray(array) && array.map(r => r.replace(/\//g, '\\')) : array;
-}
+}
+
+function windowsModificationFile(filename) {
+  return isWin ? filename.replace(/\//g, '\\') : filename;
+} // module.exports = { windowsModification, windowsModificationFile };