chore: setup css module

Author: aprosail

.vscode/settings.json

@@ -14,10 +14,14 @@
   // "explorer.fileNesting.expand": false,
   "explorer.fileNesting.patterns": {
     "tsconfig.json": "tsconfig.tsbuildinfo",
+    "next.config.ts": "next-env.d.ts",
     "package.json": "pnpm-lock.yaml",
-    "readme.md": "license"
+    "readme.md": "license, contributing.md"
   },
 
+  // Support ts plugin including css modules.
+  "typescript.tsdk": "node_modules/typescript/lib",
+
   // Code spell checker (require recommended extensions).
   "cSpell.ignorePaths": [
     ".next",

CONTRIBUTING.md

@@ -0,0 +1,11 @@
+# Contributing to VibeSpecifier Code
+
+WIP.
+
+## Environment Setup
+
+If you are using VSCode as code editor (also the recommended code editor for this project), select the `typescript` version of this project from `node_modules`, rather than using the default `typescript` version in VSCode, or the [CSS Module Plugin for TypeScript](https://www.npmjs.com/package/typescript-plugin-css-modules) might not work, which will cause inconvenience when using CSS Modules.
+
+1. Open any TypeScript file in VSCode in this repository.
+2. Open the command panel (usually ⇧⌘P or Shift+Ctrl+P) and search for the `TypeScript: Select TypeScript Version...` command.
+3. Select `Use Workspace Version` instead of `Use VSCode Version`.

app/global.scss

@@ -0,0 +1,28 @@
+body {
+  margin: 0;
+  height: 100vh;
+  overflow: hidden;
+  user-select: none;
+  font-family: sans-serif;
+}
+
+// Adaptive theme at root.
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+
+  $light-foreground: #232526;
+  $light-background: #fefdfa;
+  $dark-foreground: #cdcbca;
+  $dark-background: #212323;
+
+  @media (prefers-color-scheme: light) {
+    --foreground: #{$light-foreground};
+    --background: #{$light-background};
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --foreground: #{$dark-foreground};
+    --background: #{$dark-background};
+  }
+}

app/layout.tsx

@@ -1,3 +1,4 @@
+import "@app/global.scss"
 import { Metadata } from "next"
 import { ReactNode } from "react"
 

app/page.tsx

@@ -1,3 +1,5 @@
+import utils from "@components/utils.module.scss"
+
 export default function Home() {
-  return <div>Placeholder</div>
+  return <div className={utils.placeholder}>Placeholder</div>
 }

components/utils.module.scss

@@ -0,0 +1,16 @@
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.placeholder {
+  @extend .container;
+  @extend .center;
+}

package.json

@@ -22,6 +22,7 @@
     "oxlint": "^1.14.0",
     "prettier": "^3.6.2",
     "prettier-plugin-sh": "^0.18.0",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.2",
+    "typescript-plugin-css-modules": "^5.2.0"
   }
 }