perf(webpack): improve css/sass/scss compilations, remove unused entrypoints

Author: purfectliterature

client/app/__test__/setup.js

@@ -14,8 +14,6 @@ import './mocks/matchMedia';
 
 Enzyme.configure({ adapter: new Adapter() });
 
-require('@babel/polyfill');
-
 const timeZone = 'Asia/Singapore';
 const intlCache = createIntlCache();
 const intl = createIntl({ locale: 'en', timeZone }, intlCache);

client/css-includes.json

@@ -0,0 +1,8 @@
+[
+  "app/theme/index.css",
+  "node_modules/rc-slider/assets",
+  "node_modules/react-image-crop/dist/ReactCrop.css",
+  "node_modules/react-tooltip/dist/react-tooltip.min.css",
+  "app/lib/components/core/fields/CKEditor.css",
+  "app/lib/components/core/fields/AceEditor.css"
+]

client/postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
     ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),

client/webpack.common.js

@@ -11,18 +11,12 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 
 const packageJSON = require('./package.json');
+const cssIncludes = require('./css-includes.json');
 
 const ENV_DIR = process.env.BABEL_ENV === 'e2e-test' ? './.env.test' : './.env';
 
 module.exports = {
-  entry: {
-    coursemology: [
-      '@babel/polyfill',
-      'jquery',
-      './app/index',
-      './app/lib/moment-timezone',
-    ],
-  },
+  entry: './app/index.tsx',
   output: {
     path: join(__dirname, 'build'),
     publicPath: '/',
@@ -78,31 +72,12 @@ module.exports = {
     rules: [
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-        include: [
-          resolve(__dirname, 'node_modules/rc-slider/assets'),
-          resolve(
-            __dirname,
-            'node_modules/react-image-crop/dist/ReactCrop.css',
-          ),
-          resolve(
-            __dirname,
-            'node_modules/react-tooltip/dist/react-tooltip.min.css',
-          ),
-          resolve(__dirname, 'app/lib/components/core/fields/CKEditor.css'),
-          resolve(__dirname, 'app/lib/components/core/fields/AceEditor.css'),
+        use: [
+          'style-loader',
+          { loader: 'css-loader', options: { sourceMap: false } },
+          'postcss-loader',
         ],
-      },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
-        include: [resolve(__dirname, 'app/theme/index.css')],
-      },
-      {
-        test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
-        include: [resolve(__dirname, 'app/lib/styles')],
-        exclude: /node_modules/,
+        include: cssIncludes.map((path) => resolve(__dirname, path)),
       },
       {
         test: /\.scss$/,
@@ -111,15 +86,16 @@ module.exports = {
           {
             loader: 'css-loader',
             options: {
-              importLoaders: 1,
+              sourceMap: false,
               modules: {
                 localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
               },
             },
           },
+          'postcss-loader',
           'sass-loader',
         ],
-        exclude: [/node_modules/, resolve(__dirname, 'app/lib/styles')],
+        exclude: [/node_modules/],
       },
       {
         test: /\.(csv|png|svg)$/i,