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

package/lib/configs/jest.config.js

@@ -17,7 +17,7 @@ const commonConfig = {
   collectCoverage: true,
   moduleDirectories: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
   transform: {
-    '^.+\\.(js|jsx)$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'jsPreprocessor.js'),
+    '^.+\\.(js|jsx|ts|tsx)$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'jsPreprocessor.js'),
     '^.+\\.css$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'cssPreprocessor.js'),
     '^(?!.*\\.(js|jsx|css|json)$)': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'otherFilesPreprocessor.js')
   },
@@ -26,9 +26,9 @@ const commonConfig = {
   //   ...moduleNameMapper,
   //   '\\.(css|less)$': 'identity-obj-proxy'
   // },
-  transformIgnorePatterns: ['/node_modules/(?!(@zohodesk)/)'],
+  transformIgnorePatterns: ['/node_modules/(?!(@zohodesk|@zohodesk-private)/)'],
   // transformIgnorePatterns: ['/node_modules.*?.js$'],
-  moduleFileExtensions: ['js'],
+  moduleFileExtensions: ['js', 'ts', 'tsx'],
   setupFiles: [(0, _fs.existsSync)(appGlobals) && appGlobals, _path.default.resolve(__dirname, '..', 'jest', 'setup.js')].filter(Boolean),
   globals: {
     __DEVELOPMENT__: true,
@@ -52,7 +52,7 @@ module.exports = (...args) => {
     testPathIgnorePatterns: ['/node_modules/', 'docs'],
     unmockedModulePathPatterns: ['__tests__', 'node_modules', '.*'],
     roots: [`<rootDir>/${appFolder}/`],
-    testRegex: '(/__tests__/.*|\\.(test|spec))\\.(jsx|js|json|node)$',
+    testRegex: '(/__tests__/.*|\\.(test|spec))\\.(jsx|js|json|node|ts|tsx)$',
     testResultsProcessor: _path.default.resolve(__dirname, '..', 'jest', 'result.js')
   });
 };

package/lib/configs/libAlias.js

@@ -3,12 +3,45 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.aliasPathCreation = aliasPathCreation;
 exports.libAlias = exports.jestModuleNameMapper = void 0;
+
+var _utils = require("../utils");
+
+var _path = _interopRequireDefault(require("path"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 // the reason for alias at the time was code tree shaking
 // tree shaking was most compactable with ES module system
 // FIXME: But there is a posiblity when these  package  does not have lib,
 //  app will work because of alias, But may be jest won't work because of not alais
 //  So need to think about use alais in jest 
+const appPath = process.cwd();
+const {
+  alias,
+  app
+} = (0, _utils.getOptions)();
+const {
+  disableES5Import
+} = app;
+
+function aliasPathCreation(customAlias) {
+  if (customAlias == null) {
+    return {};
+  }
+
+  const newAlias = {};
+  Object.keys(customAlias).forEach(key => {
+    if (customAlias[key].startsWith('.')) {
+      newAlias[key] = _path.default.resolve(appPath, customAlias[key]);
+    } else {
+      newAlias[key] = customAlias[key];
+    }
+  });
+  return newAlias;
+}
+
 const libAlias = {
   '@zohodesk/components/lib': '@zohodesk/components/es',
   // '@zohodesk/zc-custom/lib': '@zohodesk/zc-custom/es',
@@ -31,8 +64,9 @@ const libAlias = {
 // '^@components(.*)$': '<rootDir>/src/components$1',
 
 exports.libAlias = libAlias;
-const jestModuleNameMapper = Object.keys(libAlias).reduce((previousValue, key) => {
-  previousValue[`^${key}(.*)$`] = `${libAlias[key]}$1`;
+const totalAlias = disableES5Import ? Object.assign({}, libAlias, aliasPathCreation(alias)) : aliasPathCreation(alias);
+const jestModuleNameMapper = Object.keys(totalAlias).reduce((previousValue, key) => {
+  previousValue[`^${key}(.*)$`] = `${totalAlias[key]}$1`;
   return previousValue;
 }, {});
 exports.jestModuleNameMapper = jestModuleNameMapper;

package/lib/configs/resolvers.js

@@ -19,8 +19,9 @@ var _client_packages_group = require("@zohodesk/client_packages_group");
 function moduleResolver(options) {
   const {
     moduleResolvePath,
-    disableES5Transpile
+    disableES5Import
   } = options.app;
+  const customAlias = options.alias;
   let required = moduleResolvePath && (0, _requireLocalOrGlobal.requireLocal)(moduleResolvePath);
 
   if (!required) {
@@ -32,9 +33,11 @@ function moduleResolver(options) {
   }
 
   const nodeModulesPath = required ? required.nodeModulesPath : _client_packages_group.nodeModulesPath;
+  const totalAlias = disableES5Import ? Object.assign({}, _libAlias.libAlias, (0, _libAlias.aliasPathCreation)(customAlias)) : (0, _libAlias.aliasPathCreation)(customAlias);
   return {
-    modules: [nodeModulesPath, _constants.cliNodemodulesPath, 'node_modules'].filter(Boolean),
-    alias: disableES5Transpile ? _libAlias.libAlias : {} // alias: { ...libAlias, ...clientDependenies }
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    modules: [nodeModulesPath, _constants.cliNodeModulesPath, 'node_modules'].filter(Boolean),
+    alias: totalAlias // alias: { ...libAlias, ...clientDependenies }
 
   };
 }
@@ -45,7 +48,7 @@ function loaderResolver(options) {
     unstableDepsInverse
   } = options;
   return {
-    modules: unstableDepsInverse ? ['node_modules', _constants.cliNodemodulesPath] : [_constants.cliNodemodulesPath, 'node_modules'] // alias:  libAlias
+    modules: unstableDepsInverse ? ['node_modules', _constants.cliNodeModulesPath] : [_constants.cliNodeModulesPath, 'node_modules'] // alias:  libAlias
 
   };
 }

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
@@ -39,8 +40,13 @@ const {
     selectorReplace,
     devConsoleExculde,
     sourcemap,
-    crossorigin
-  }
+    crossorigin,
+    postCssPluginOrder,
+    externals,
+    enableMjsLoader,
+    displayClassName
+  },
+  enableTypeScript
 } = options;
 const {
   disableContextURL
@@ -97,7 +103,11 @@ module.exports = {
 
         return false;
       }
-    }, seperateCssModules ? {
+    }, enableMjsLoader ? {
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto'
+    } : null, seperateCssModules ? {
       test: /\.css$/,
       exclude: /\.module\.css$/,
       use: (0, _loaderUtils.getCSSLoaders)({
@@ -107,9 +117,12 @@ module.exports = {
         mediaQueryHoverActiveString,
         cssVariableReplacementConfig,
         selectorWeightConfig,
+        customClassNamePrefix,
         classNameBlob: '[local]',
         cssUniqueness: false,
-        selectorReplace: null
+        selectorReplace: null,
+        postCssPluginOrder,
+        displayClassName
       })
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /(\.module)?\.css$/,
@@ -122,9 +135,12 @@ module.exports = {
         selectorWeightConfig,
         classNameBlob: null,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace,
         cssHashSelectors,
-        classNamePrefix
+        classNamePrefix,
+        postCssPluginOrder,
+        displayClassName
       })
     }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
       test: /\.tmpl$/,
@@ -134,7 +150,11 @@ module.exports = {
           minimize: true
         }
       }]
-    }, {
+    }, enableTypeScript ? {
+      test: /\.ts$|\.tsx$/,
+      use: 'ts-loader',
+      include: _path.default.join(appPath, folder)
+    } : null, {
       test: /\.worker.js$/,
       use: {
         loader: require.resolve('../loaders/workerLoader.js'),
@@ -145,9 +165,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,6 +20,7 @@ const {
     componentFolder,
     enableChunkHash,
     cssUniqueness,
+    customClassNamePrefix,
     plugins,
     exclude,
     patterns,
@@ -27,7 +28,10 @@ const {
     cssVariableReplacementConfig,
     selectorWeightConfig,
     cssHashSelectors,
-    classNamePrefix
+    classNamePrefix,
+    selectorReplace,
+    postCssPluginOrder,
+    externals
   },
   app: {
     folder
@@ -84,9 +88,11 @@ module.exports = isSSTest => ({
         selectorWeightConfig,
         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$/,
@@ -117,9 +123,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,6 +19,7 @@ const {
   docs: {
     componentFolder,
     cssUniqueness,
+    customClassNamePrefix,
     plugins,
     exclude,
     patterns,
@@ -27,7 +28,9 @@ const {
     selectorWeightConfig,
     cssHashSelectors,
     enableChunkHash,
-    classNamePrefix
+    classNamePrefix,
+    postCssPluginOrder,
+    externals
   },
   app: {
     folder
@@ -84,9 +87,11 @@ module.exports = {
         selectorWeightConfig,
         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$/,
@@ -114,9 +119,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

@@ -14,6 +14,8 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
 
 var _resolvers = require("./resolvers");
 
+var _babelPresetReactOption = _interopRequireDefault(require("../babel/babel-option-utils/babel-preset-react-option"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import TerserPlugin from 'terser-webpack-plugin';
@@ -34,6 +36,8 @@ const {
     cssVariableReplacementConfig,
     selectorWeightConfig,
     cssUniqueness,
+    displayClassName,
+    customClassNamePrefix,
     server: {
       mode
     },
@@ -44,8 +48,11 @@ const {
     selectorReplace,
     removePropTypes,
     devConsoleExculde,
-    crossorigin
-  }
+    crossorigin,
+    postCssPluginOrder,
+    externals
+  },
+  enableTypeScript
 } = options;
 let {
   enableChunkHash
@@ -124,8 +131,13 @@ module.exports = {
             }
           } : {
             modules: false
-          }], require.resolve('@babel/preset-react')],
-          plugins: disableES5Transpile ? [removeAttribute ? require.resolve('../utils/removeAttributes') : false, require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), require.resolve('@babel/plugin-proposal-object-rest-spread'), devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
+          }], (0, _babelPresetReactOption.default)({
+            disableES5Transpile
+          }), enableTypeScript ? require.resolve('@babel/preset-typescript') : null].filter(Boolean),
+          plugins: disableES5Transpile ? [removeAttribute ? require.resolve('../utils/removeAttributes') : false, require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), // require.resolve(
+          //   '@babel/plugin-proposal-object-rest-spread'
+          // ), REMOVING IT, BECAUSE WE ALREADY SUPPORT SPREAD SYNTAX FROM LIBRARIES.
+          shouldRemovePropTypes ? [require.resolve('babel-plugin-transform-react-remove-prop-types'), removePropTypes] : false, devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
             exclude: ['error', 'log']
           }] : null].filter(Boolean) : [removeAttribute ? require.resolve('../utils/removeAttributes') : false, shouldRemovePropTypes ? [require.resolve('babel-plugin-transform-react-remove-prop-types'), removePropTypes] : false, [require.resolve('@babel/plugin-transform-runtime'), {
             helpers: true,
@@ -160,7 +172,10 @@ module.exports = {
         mediaQueryHoverActiveString,
         classNameBlob: '[local]',
         cssUniqueness: false,
-        selectorReplace: null
+        customClassNamePrefix,
+        selectorReplace: null,
+        postCssPluginOrder,
+        displayClassName
       })
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /\.css$/,
@@ -173,9 +188,12 @@ module.exports = {
         selectorWeightConfig,
         classNameBlob: false,
         cssUniqueness,
+        customClassNamePrefix,
         selectorReplace,
         cssHashSelectors,
-        classNamePrefix
+        classNamePrefix,
+        postCssPluginOrder,
+        displayClassName
       })
     }, {
       test: /\.jpe?g$|\.gif$|\.png$/,
@@ -208,7 +226,7 @@ module.exports = {
         }
       }]
     }, {
-      test: /\.ogg$/,
+      test: /\.ogg|\.mp3$/,
       use: [{
         loader: 'file-loader',
         options: {
@@ -223,7 +241,11 @@ module.exports = {
           minimize: false
         }
       }]
-    }, {
+    }, enableTypeScript ? {
+      test: /\.ts$|\.tsx$/,
+      use: 'ts-loader',
+      include: _path.default.join(appPath, folder)
+    } : null, {
       test: /\.worker.js$/,
       use: {
         loader: require.resolve('../loaders/workerLoader.js'),
@@ -234,9 +256,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/jest/preProcessors/jsPreprocessor.js

@@ -4,7 +4,32 @@ var _babelJest = _interopRequireDefault(require("babel-jest"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const getOptions = require('../../../lib/utils/getOptions').default;
+
+const {
+  enableTypeScript,
+  babelCustomizationForLibrary
+} = getOptions();
+const {
+  babelPlugins
+} = babelCustomizationForLibrary;
+const resolvedPlugins = [];
+babelPlugins.forEach(plugin => {
+  if (Array.isArray(plugin)) {
+    resolvedPlugins.push([require.resolve(plugin[0]), plugin[1]]);
+  } else {
+    resolvedPlugins.push(require.resolve(plugin));
+  }
+});
+const presets = [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')];
+
+if (enableTypeScript) {
+  presets.push(require.resolve('@babel/preset-typescript'));
+}
+
+const defaultPlugins = [require.resolve('babel-plugin-transform-dynamic-import')];
+const plugins = [...defaultPlugins, ...resolvedPlugins];
 module.exports = _babelJest.default.createTransformer({
-  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')],
-  plugins: [require.resolve('babel-plugin-transform-dynamic-import')]
+  presets: presets,
+  plugins: plugins
 });

package/lib/loaderUtils/configsAssetsLoaders.js

@@ -19,7 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const ImageExtRegex = /\.jpe?g$|\.gif$|\.png|\.webp$/;
 const FontExtRegex = /\.woff2|\.woff$|\.ttf$|\.eot$/;
 const SVGExtRegex = /\.svg$/;
-const AudioExtRegex = /\.ogg$/;
+const AudioExtRegex = /\.ogg|\.mp3$/;
 const VidioExtRegex = /\.mp4|\.webm$/;
 
 function createLoaderOptionQueryString(loaderName, nameTemplate, limit = 1000) {

package/lib/loaderUtils/getCSSLoaders.js

@@ -18,6 +18,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const fs = require('fs');
 
 const options = (0, _utils.getOptions)();
+const defaultPostCssPluginOrder = ['valueReplacer', 'selectorReplace', 'hasRTL', 'hoverActive', 'combinerMediaQuery', 'cssVariableReplacement', 'selectorWeight', 'minifier', 'composeMinification'];
+
+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 {
@@ -29,7 +43,10 @@ const getCSSLoaders = optionsObj => {
     cssUniqueness,
     selectorReplace,
     cssHashSelectors,
-    classNamePrefix
+    classNamePrefix,
+    postCssPluginOrder,
+    customClassNamePrefix,
+    displayClassName
   } = optionsObj;
   const {
     devCssFileBountry
@@ -50,11 +67,12 @@ const getCSSLoaders = optionsObj => {
   if (classNameBlob) {
     cssLoaderOptions.modules.localIdentName = classNameBlob;
   } else {
-    cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, patterns);
-  } // console.log('selector weight config : ', selectorWeightConfig);
+    cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, customClassNamePrefix, patterns, displayClassName);
+  }
 
+  const pluginOrder = calculatePostCssPluginOrder(postCssPluginOrder, Object.keys(plugins).filter(x => plugins[x] === true)); // console.log('selector weight config : ', selectorWeightConfig);
 
-  let postcssPlugins = [plugins.valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), plugins.selectorReplace && require('../postcss-plugins/SelectorReplace')(selectorReplace), plugins.hasRTL && require('@zohodesk/postcss-rtl')({
+  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;
@@ -62,7 +80,10 @@ const getCSSLoaders = optionsObj => {
 
       return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
     }
-  }), 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)].filter(Boolean);
+  }), 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.composeMinification &&
+  //   require('../postcss-plugins/composePlugin')()
+  ].filter(Boolean);
   return [cssSelectorZipPath && {
     loader: require.resolve('../loaders/selectorMappingLoader')
   }, {
@@ -136,13 +157,16 @@ const getCSSLoaders = optionsObj => {
         
         [ postcssPlugins that are implemented ]
           */
-        postcssPlugins = (0, _fileHandling.isFileNameMatchingPattern)({
+        //  console.log(params.resourcePath);
+        //  console.log(postcssPlugins);
+        const finalPostcssPlugins = (0, _fileHandling.isFileNameMatchingPattern)({
           filename: params.resourcePath,
           filterObject: patterns,
-          plugins: postcssPlugins
+          plugins: postcssPlugins,
+          order: pluginOrder
         }); // postcssPlugins that are allowed
 
-        return postcssPlugins.length > 0 ? postcssPlugins : [require('../postcss-plugins/EmptyPlugin')()];
+        return finalPostcssPlugins.length > 0 ? finalPostcssPlugins : [require('../postcss-plugins/EmptyPlugin')()];
       }
     }
   } : null, plugins.composeMinification ? {

package/lib/loaderUtils/getDevJsLoaders.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _path = _interopRequireDefault(require("path"));
 
+var _babelPresetReactOption = _interopRequireDefault(require("../babel/babel-option-utils/babel-preset-react-option"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 let getDevJsLoaders = options => {
@@ -16,6 +18,7 @@ let getDevJsLoaders = options => {
       instrumentScript,
       devConsoleExculde
     },
+    enableTypeScript,
     esLint: {
       enable: enableEslint
     }
@@ -40,8 +43,11 @@ let getDevJsLoaders = options => {
         }
       } : {
         modules: false
-      }], require.resolve('@babel/preset-react')],
-      plugins: disableES5Transpile ? [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), require.resolve('@babel/plugin-proposal-object-rest-spread'), devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
+      }], (0, _babelPresetReactOption.default)({
+        disableES5Transpile
+      }), enableTypeScript ? require.resolve('@babel/preset-typescript') : null].filter(Boolean),
+      plugins: disableES5Transpile ? [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), // require.resolve('@babel/plugin-proposal-object-rest-spread'),
+      devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
         exclude: ['error', 'log']
       }] : null].filter(Boolean) : [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), require.resolve('@babel/plugin-proposal-object-rest-spread'), devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
         exclude: ['error', 'log']