Add global styles & update webpack config

package.json

@@ -39,18 +39,23 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/register": "^7.17.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+    "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
     "@types/jest": "^27.4.1",
     "@types/node": "^16.11.26",
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.1",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",
+    "autoprefixer": "^10.4.7",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.4",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^10.2.4",
     "core-js": "^3.22.0",
     "cross-env": "^7.0.3",
+    "css-loader": "^6.7.1",
+    "cssnano": "^5.1.10",
+    "dotenv-webpack": "^7.1.0",
     "eslint": "^8.13.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -64,11 +69,20 @@
     "fork-ts-checker-webpack-plugin": "^7.2.6",
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
+    "less": "^4.1.2",
+    "less-loader": "^11.0.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "path": "^0.12.7",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^7.0.0",
     "prettier": "^2.6.2",
     "pretty-quick": "^3.1.3",
     "react-refresh": "^0.12.0",
     "resolve-url-loader": "^5.0.0",
+    "sass": "^1.52.1",
+    "sass-loader": "^13.0.0",
+    "sass-resources-loader": "^2.2.5",
+    "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.1",
     "ts-loader": "^9.2.8",
     "typescript": "^4.6.3",

src/index.tsx

@@ -4,6 +4,9 @@ import { createRoot } from 'react-dom/client';
 // Components.
 import App from '@/app';
 
+// Global styles.
+import '@/styles/styles.scss';
+
 const rootElement = document.getElementById('root');
 const root = createRoot(rootElement as Element);
 

src/styles/_global.scss

@@ -0,0 +1,23 @@
+:root {
+  --color-background: #f5f5f9;
+  --color-scrollbar: rgb(224, 224, 224);
+  --color-scrollbar-hover: #bbb;
+}
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background: var(--color-background);
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-scrollbar);
+  border-radius: 10px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background: var(--color-background);
+  border-radius: 10px;
+}

src/styles/styles.scss

@@ -0,0 +1 @@
+@import 'global';

webpack-config/plugins.js

@@ -1,11 +1,15 @@
 import { join } from 'path';
-import { DefinePlugin, ProvidePlugin } from 'webpack';
+
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
+import Dotenv from 'dotenv-webpack';
 import ESLintWebpackPlugin from 'eslint-webpack-plugin';
-import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
-import { rootDir, isDev, isDevServer, isProd, mode } from './utils';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { DefinePlugin, ProvidePlugin } from 'webpack';
+
+import { isDev, isDevServer, isProd, mode, rootDir } from './utils';
 
 /**
  * Automatic load modules instead of having to import them anywhere.
@@ -18,9 +22,7 @@ export const providePlugin = new ProvidePlugin({});
  * @see https://webpack.js.org/plugins/define-plugin/
  */
 export const definePlugin = new DefinePlugin({
-  'process.env': {
-    NODE_ENV: JSON.stringify(mode),
-  },
+  'process.env.NODE_ENV': JSON.stringify(mode),
   IS_PROD: isProd,
   IS_DEV: isDev,
   IS_DEV_SERVER: isDevServer,
@@ -69,5 +71,23 @@ export const forkTsCheckerWebpackPlugin = new ForkTsCheckerWebpackPlugin({
   async: isDev,
   typescript: {
     configFile: join(rootDir, '/tsconfig.json'),
+    memoryLimit: 4096,
   },
 });
+
+/**
+ * Mini css plugin
+ * @see https://webpack.js.org/plugins/mini-css-extract-plugin/
+ */
+export const miniCssExtractPlugin = new MiniCssExtractPlugin({
+  // Options similar to the same options in webpackOptions.output
+  // both options are optional
+  filename: '[name].[contenthash].css',
+  chunkFilename: '[id].[contenthash].css',
+});
+
+/**
+ * Dot env plugin webpack
+ * @see https://github.com/mrsteele/dotenv-webpack
+ */
+export const dotEnvPlugin = new Dotenv({});

webpack-config/rules.js

@@ -1,5 +1,18 @@
 import { join } from 'path';
-import { rootDir } from './utils';
+
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+import { isProd, rootDir } from './utils';
+
+/**
+ * Resource list for sass-resource-loader
+ * @see https://github.com/shakacode/sass-resources-loader
+ * @example
+ *  [
+ *      path.resolve(__dirname, '../src/foo.scss'),
+ *  ]
+ */
+const sassResourceItems = [];
 
 /**
  * @see https://webpack.js.org/guides/typescript/#loader
@@ -55,3 +68,190 @@ export const fontsRule = {
   test: /\.(woff(2)?|eot|ttf|otf|)$/i,
   type: 'asset/inline',
 };
+
+/***
+ * Using MiniCssExtractPlugin in production or style-loader in development
+ * @see https://webpack.js.org/plugins/mini-css-extract-plugin/#root
+ * @see https://webpack.js.org/loaders/style-loader/#root
+ */
+const miniCssExtractLoader = isProd
+  ? {
+      loader: MiniCssExtractPlugin.loader,
+      options: {
+        esModule: false,
+      },
+    }
+  : {
+      loader: 'style-loader',
+      options: {
+        esModule: false,
+      },
+    };
+
+const postCssLoader = {
+  loader: 'postcss-loader',
+  options: {
+    postcssOptions: {
+      plugins: ['autoprefixer', isProd ? 'cssnano' : null],
+    },
+    sourceMap: true,
+  },
+};
+
+/**
+ * @see https://webpack.js.org/loaders/sass-loader/#problems-with-url
+ */
+const resolveUrlLoader = {
+  loader: 'resolve-url-loader',
+  options: {
+    sourceMap: true,
+  },
+};
+
+const typingsCssModulesLoader = {
+  loader: '@teamsupercell/typings-for-css-modules-loader',
+  options: {
+    banner: '// autogenerated by typings-for-css-modules-loader. \n// Please do not change this file!',
+    formatter: 'prettier',
+  },
+};
+
+const cssModulesSupportLoaderItems = [
+  miniCssExtractLoader,
+  typingsCssModulesLoader,
+  {
+    loader: 'css-loader',
+    options: {
+      esModule: false,
+      modules: {
+        exportLocalsConvention: 'camelCaseOnly',
+        localIdentName: '[local]__[contenthash:base64:5]',
+      },
+    },
+  },
+];
+
+/**
+ * @see https://webpack.js.org/loaders/less-loader/#root
+ */
+export const lessLoader = {
+  loader: 'less-loader',
+  options: {
+    sourceMap: true,
+    lessOptions: {
+      javascriptEnabled: true,
+    },
+  },
+};
+
+const cssLoaderItems = [
+  miniCssExtractLoader,
+  {
+    loader: 'css-loader',
+  },
+];
+
+/**
+ * CSS Rule
+ */
+export const cssRule = {
+  test: /\.css$/,
+  use: [
+    miniCssExtractLoader,
+    {
+      loader: 'css-loader',
+    },
+    postCssLoader,
+  ],
+};
+
+/**
+ * LESS Rule
+ */
+export const lessRules = [
+  {
+    test: /\.module.less$/,
+    use: [...cssModulesSupportLoaderItems, postCssLoader, resolveUrlLoader, lessLoader],
+  },
+  {
+    test: /\.less$/,
+    exclude: /\.module.less$/,
+    use: [...cssLoaderItems, postCssLoader, resolveUrlLoader, lessLoader],
+  },
+];
+
+/**
+ * SASS Rule
+ */
+export const sassRules = [
+  {
+    test: /\.module\.s([ca])ss$/,
+    use: [
+      ...cssModulesSupportLoaderItems,
+      postCssLoader,
+      resolveUrlLoader,
+      {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: true,
+          implementation: require('sass'), // Prefer `dart-sassRules`
+        },
+      },
+    ],
+  },
+  {
+    test: /\.s([ca])ss$/,
+    exclude: /\.module.scss$/,
+    use: [
+      ...cssLoaderItems,
+      postCssLoader,
+      resolveUrlLoader,
+      {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: true,
+          implementation: require('sass'), // Prefer `dart-sassRules`
+        },
+      },
+    ],
+  },
+];
+
+/**
+ * SVG Rule
+ */
+export const svgRule = [
+  /**
+   * Using @svgr/webpack for handling svg files in react components
+   * @see https://react-svgr.com/docs/webpack/
+   */
+  {
+    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+    issuer: /\.[jt]sx$/,
+    use: [
+      {
+        loader: 'babel-loader',
+        options: {
+          configFile: join(rootDir, '/.babelrc.js'),
+        },
+      },
+      {
+        loader: '@svgr/webpack',
+        options: {
+          babel: false,
+          icon: true,
+        },
+      },
+    ],
+  },
+
+  /**
+   * Using file-loader for handling svg files
+   * @see https://webpack.js.org/guides/asset-modules/
+   */
+  {
+    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+    issuer: { not: [/\.[jt]sx$/] },
+    type: 'asset/inline',
+  },
+];

webpack-config/utils.js

@@ -8,3 +8,4 @@ export const mode = process.env.NODE_ENV ?? 'production';
 export const isDevServer = process.env.WEBPACK_IS_DEV_SERVER === 'true';
 export const isProd = mode === 'production';
 export const isDev = !isProd;
+export const PORT = 3000;