feat: auto eanble css modules by using [name].module.* naming convention

README.md

@@ -394,12 +394,12 @@ import config from "./config";
 
 ### Styles
 
-The starter supports CSS, SASS and [CSS modules](https://github.com/css-Modules/css-Modules) is enabled by default. I use [PostCSS](https://github.com/postcss/postcss-loader) plugin to parse CSS and add autoprefixer to your stylesheet. You can access your stylesheet with two ways.
+The starter supports CSS, SASS and [CSS modules](https://github.com/css-Modules/css-Modules) is auto enabled for all files the `[name].module.*` naming convention. I use [PostCSS](https://github.com/postcss/postcss-loader) plugin to parse CSS and add autoprefixer to your stylesheet. You can access your stylesheet with two ways.
 
 With CSS modules:
 
 ```js
-import styles from "./styles.scss";
+import styles from "./styles.module.scss";
 
 // ...
 
@@ -412,7 +412,7 @@ return (
 );
 ```
 
-Without CSS modules (you need to turn off CSS modules from the `./tools/webpack/config.babel.js`):
+Without CSS modules:
 
 ```js
 import "./styles.scss";

package.json

@@ -148,7 +148,7 @@
     "@typescript-eslint/parser": "^3.9.1",
     "babel-loader": "^8.1.0",
     "compression-webpack-plugin": "^5.0.0",
-    "css-loader": "^3.6.0",
+    "css-loader": "^4.2.1",
     "eslint": "^7.7.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",

src/app/index.tsx

@@ -8,7 +8,7 @@ import logo from "../static/logo.svg";
 import config from "../config";
 // Import your global styles here
 import "normalize.css/normalize.css";
-import styles from "./styles.scss";
+import styles from "./styles.module.scss";
 
 interface Route {
   route: { routes: RouteProps[] };

src/app/styles.scss → src/app/styles.module.scss

@@ -1,8 +1,8 @@
-@import '../theme/variables';
+@import "../theme/variables";
 
 body {
   background-color: $color-dark-gray;
-  font-family: 'Helvetica-Light', Helvetica, Arial, sans-serif;
+  font-family: "Helvetica-Light", Helvetica, Arial, sans-serif;
 }
 
 .App {

src/components/Info/index.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from "react";
 
 import { User } from "../../services/jsonPlaceholder";
-import styles from "./styles.scss";
+import styles from "./styles.module.scss";
 
 interface Props {
   item: User;

src/components/List/index.tsx

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import { Link } from "react-router-dom";
 
 import { User } from "../../services/jsonPlaceholder";
-import styles from "./styles.scss";
+import styles from "./styles.module.scss";
 
 interface Props {
   items: User[];

src/components/Loading/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import styles from "./styles.scss";
+import styles from "./styles.module.scss";
 
 export default (): JSX.Element => (
   <div className={styles.Loading}>

src/pages/Home/Home.tsx

@@ -5,7 +5,7 @@ import { Helmet } from "react-helmet";
 import { AppState } from "../../store";
 import { fetchUserListIfNeed } from "../../store/userList";
 import { List } from "../../components";
-import styles from "./styles.scss";
+import styles from "./styles.module.scss";
 
 const Home = (): JSX.Element => {
   const dispatch = useDispatch();

src/pages/NotFound/index.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from "react";
 import { Helmet } from "react-helmet";
 
-import styles from "./styles.scss";
+import styles from "./styles.module.scss";
 
 interface Props {
   staticContext?: { status: string };

src/pages/UserInfo/UserInfo.tsx

@@ -5,7 +5,7 @@ import { Helmet } from "react-helmet";
 import { AppState } from "../../store";
 import { fetchUserDataIfNeed } from "../../store/userData";
 import { Info } from "../../components";
-import styles from "./styles.scss";
+import styles from "./styles.module.scss";
 
 type Props = {
   match: Record<string, any>;

src/server/devServer.ts

@@ -12,9 +12,7 @@ export default (app: Express): void => {
     headers: { "Access-Control-Allow-Origin": "*" },
     stats: "minimal",
     serverSideRender: true,
-    watchOptions: {
-      ignored: /node_modules/,
-    },
+    watchOptions: { ignored: /node_modules/ },
   });
 
   app.use(instance);

tools/webpack/config.babel.js

@@ -13,9 +13,6 @@ import PnpWebpackPlugin from "pnp-webpack-plugin";
 const nodeEnv = process.env.NODE_ENV || "development";
 const isDev = nodeEnv === "development";
 
-// Enable/disable css modules here
-const USE_CSS_MODULES = true;
-
 // Setup the plugins for development/production
 const getPlugins = () => {
   // Common
@@ -99,11 +96,11 @@ const getStyleLoaders = (sass = false) => {
       loader: "css",
       options: {
         importLoaders: sass ? 2 : 1,
-        modules: USE_CSS_MODULES && {
+        modules: {
+          auto: true,
           localIdentName: isDev ? "[name]__[local]" : "[hash:base64:5]",
-          context: path.resolve(process.cwd(), "src"),
+          localIdentContext: path.resolve(process.cwd(), "src"),
         },
-        sourceMap: isDev,
       },
     },
     { loader: "postcss", options: { sourceMap: isDev } },

yarn.lock

@@ -3690,24 +3690,24 @@ css-declaration-sorter@^4.0.1:
     postcss "^7.0.1"
     timsort "^0.3.0"
 
-css-loader@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645"
-  integrity sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==
+css-loader@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.2.1.tgz#9f48fd7eae1219d629a3f085ba9a9102ca1141a7"
+  integrity sha512-MoqmF1if7Z0pZIEXA4ZF9PgtCXxWbfzfJM+3p+OYfhcrwcqhaCRb74DSnfzRl7e024xEiCRn5hCvfUbTf2sgFA==
   dependencies:
-    camelcase "^5.3.1"
+    camelcase "^6.0.0"
     cssesc "^3.0.0"
     icss-utils "^4.1.1"
-    loader-utils "^1.2.3"
+    loader-utils "^2.0.0"
     normalize-path "^3.0.0"
     postcss "^7.0.32"
     postcss-modules-extract-imports "^2.0.0"
-    postcss-modules-local-by-default "^3.0.2"
+    postcss-modules-local-by-default "^3.0.3"
     postcss-modules-scope "^2.2.0"
     postcss-modules-values "^3.0.0"
     postcss-value-parser "^4.1.0"
     schema-utils "^2.7.0"
-    semver "^6.3.0"
+    semver "^7.3.2"
 
 css-modules-require-hook@^4.2.3:
   version "4.2.3"
@@ -9371,7 +9371,7 @@ postcss-modules-local-by-default@^1.0.1:
     css-selector-tokenizer "^0.7.0"
     postcss "^6.0.1"
 
-postcss-modules-local-by-default@^3.0.2:
+postcss-modules-local-by-default@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz#bb14e0cc78279d504dbdcbfd7e0ca28993ffbbb0"
   integrity sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==