fix: use webpack for dev-server to keep consistent css-module classnames

There's an inconsistency between webpack and next turbo's `localIdentName`

This also improves the hot-loading

fixes #440

README.md

@@ -222,7 +222,7 @@ with a specified value. As an example, if you want to always show the subline in
 the following rule:
 
 ```css
-[class^="subline__Logo"] {
+[class^="Logo_subline"] {
   display: block;
   opacity: 1;
 }

package.json

@@ -5,7 +5,7 @@
     "techradar": "./bin/techradar.js"
   },
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build:icons": "npx @svgr/cli --typescript --no-dimensions --no-prettier --out-dir src/components/Icons -- src/icons",
     "build:data": "tsx scripts/buildData.ts",
     "build": "next build",

postcss.config.js

@@ -1,23 +1,17 @@
 module.exports = {
-  plugins:
+  plugins: [
-    process.env.NODE_ENV === "production"
+    "postcss-nested",
-      ? [
+    [
-          "postcss-nested",
+      "postcss-preset-env",
-          [
+      {
-            "postcss-preset-env",
+        autoprefixer: {
-            {
+          flexbox: "no-2009",
-              autoprefixer: {
+        },
-                flexbox: "no-2009",
+        stage: 3,
-              },
+        features: {
-              stage: 3,
+          "custom-properties": false,
-              features: {
+        },
-                "custom-properties": false,
+      },
-              },
+    ],
-            },
+  ],
-          ],
-        ]
-      : [
-          // No transformations in development
-          // because it won't affect turbo
-        ],
 };