upgrade to react-script@2

Author: smmoosavi

package.json

@@ -3,19 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "monkey-react-scripts": "0.1.1",
-    "node-sass": "^4.7.2",
+    "@babel/plugin-proposal-decorators": "^7.1.0",
+    "monkey-react-scripts": "0.1.2",
+    "node-sass": "^4.9.3",
     "postcss-inline-rtl": "^0.9.8",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-scripts": "1.1.4",
-    "sass-loader": "^7.1.0",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "react-scripts": "2.0.3",
     "webpack-visualizer-plugin": "^0.1.11"
   },
   "scripts": {
     "start": "monkey-react-scripts start",
     "build": "monkey-react-scripts build",
     "test": "monkey-react-scripts test --env=jsdom"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

src/SampleDecorator.js

@@ -16,10 +16,12 @@ function withRedBorder(Cmp) {
 }
 
 @withRedBorder
-export class Sample extends Component {
+class Sample extends Component {
   render () {
     return (<div>Sample With Decorator</div>)
   }
 }
 
 Sample.propTypes = {}
+
+export {Sample}

webpack-helpers/babelPatch.js

@@ -3,8 +3,11 @@ const {findRule} = require('./utils');
 module.exports.babelPatch = function babelPatch(webpackConfig, isDevelopment) {
     // find babel rule
     const babelRule = findRule(webpackConfig, (rule) => {
-        return ('' + rule.test === '' + /\.(js|jsx|mjs)$/)
+        return ('' + rule.test === '' + /\.(js|jsx)$/)
     });
     const plugins = babelRule.options.plugins || [];
-    babelRule.options.plugins = [...plugins, 'transform-decorators-legacy']
+    babelRule.options.plugins = [
+        ...plugins,
+        ["@babel/plugin-proposal-decorators", {legacy: true}],
+    ]
 };

webpack-helpers/cssPatch.js

@@ -0,0 +1,25 @@
+const {findRules} = require('./utils')
+
+module.exports.cssPatch = function cssPatch(webpackConfig, isDevelopment) {
+    const cssRules = findRules(webpackConfig, (rule) => {
+        return (
+            '' + rule.test === '' + /\.css$/ ||
+            '' + rule.test === '' + /\.module\.css$/ ||
+            '' + rule.test === '' + /\.(scss|sass)$/ ||
+            '' + rule.test === '' + /\.module\.(scss|sass)$/
+        )
+    });
+
+    cssRules.forEach((cssRule) => {
+        const cssLoaders = isDevelopment ? cssRule.use : cssRule.loader
+        cssLoaders.forEach((loader) => {
+            if (loader.options && loader.options.ident === 'postcss') {
+                const postCssLoader = loader
+                const postCssFunction = postCssLoader.options.plugins
+                postCssLoader.options.plugins = () => {
+                    return [...postCssFunction(), require('postcss-inline-rtl')]
+                }
+            }
+        });
+    });
+}

webpack-helpers/sassPatch.js

@@ -1,11 +1,16 @@
 module.exports.findRule = function findRule(webpackConfig, callback) {
-    const rules = webpackConfig.module.rules[1].oneOf;
+    const rules = webpackConfig.module.rules[3].oneOf;
     const index = rules.findIndex(callback);
     if (index === -1) throw Error('Loader not found');
     return rules[index]
 };
 
-module.exports.addRule = function addRule (webpackConfig, rule) {
+module.exports.findRules = function findRule(webpackConfig, callback) {
+    const rules = webpackConfig.module.rules[3].oneOf;
+    return rules.filter(callback);
+};
+
+module.exports.addRule = function addRule(webpackConfig, rule) {
     const rules = webpackConfig.module.rules[1].oneOf
     rules.splice(rules.length - 1, 0, rule) // add before exclude rule
 }

webpack-helpers/utils.js

@@ -1,9 +1,9 @@
 const {pluginsPatch} = require('./webpack-helpers/pluginsPatch');
 const {babelPatch} = require('./webpack-helpers/babelPatch');
-const {sassPatch} = require('./webpack-helpers/sassPatch');
+const {cssPatch} = require('./webpack-helpers/cssPatch');
 
 module.exports = function (webpackConfig, isDevelopment) {
     pluginsPatch(webpackConfig, isDevelopment)
     babelPatch(webpackConfig, isDevelopment)
-    sassPatch(webpackConfig, isDevelopment)
+    cssPatch(webpackConfig, isDevelopment)
 };