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 AOEpeople#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:
- process.env.NODE_ENV === "production"
- ? [
- "postcss-nested",
- [
- "postcss-preset-env",
- {
- autoprefixer: {
- flexbox: "no-2009",
- },
- stage: 3,
- features: {
- "custom-properties": false,
- },
- },
- ],
- ]
- : [
- // No transformations in development
- // because it won't affect turbo
- ],
+ plugins: [
+ "postcss-nested",
+ [
+ "postcss-preset-env",
+ {
+ autoprefixer: {
+ flexbox: "no-2009",
+ },
+ stage: 3,
+ features: {
+ "custom-properties": false,
+ },
+ },
+ ],
+ ],
 };