CSS improvements

.gitignore

@@ -8,7 +8,6 @@
 
 # production
 /build
-src/styles/*.css
 /.env
 
 # deployment

.vscode/settings.json

@@ -4,5 +4,20 @@
   "files.insertFinalNewline": true,
   "liveServer.settings.file": "/index.html",
   "liveServer.settings.NoBrowser": true,
-  "liveServer.settings.root": "/build"
+  "liveServer.settings.root": "/build",
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  // Collapse generated files into their sources
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.expand": true,
+  "explorer.fileNesting.patterns": {
+    "*.module.css": "${capture}.module.css.d.ts",
+    "*.module.scss": "${capture}.module.scss.d.ts"
+  },
+  // Mark generated files as read-only
+  "files.readonlyInclude": {
+    "src/**/*.module.css.d.ts": true,
+    "src/**/*.module.scss.d.ts": true
+  }
 }

package.json

@@ -183,6 +183,7 @@
     "timers-browserify": "^2.0.12",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.1.0",
+    "unplugin-typed-css-modules": "^1.1.0",
     "url": "^0.11.1",
     "vitest": "^3.2.4",
     "webpack-bundle-analyzer": "^4.9.0"

rsbuild.config.ts

@@ -5,6 +5,7 @@ import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSass } from '@rsbuild/plugin-sass';
 import { pluginSvgr } from '@rsbuild/plugin-svgr';
+import pluginTypedCssModules from 'unplugin-typed-css-modules/rspack';
 
 const { publicVars, rawPublicVars } = loadEnv({ prefixes: ['REACT_APP_'] });
 
@@ -123,6 +124,7 @@ export default defineConfig({
 
       config.plugins = [
         ...config.plugins,
+        pluginTypedCssModules({ scss: true }),
         new InjectManifest({
           swSrc: './src/service-worker.ts',
           swDest: 'service-worker.js',

src/index.tsx

@@ -1,5 +1,6 @@
 import 'src/i18n/i18n';
 import 'src/styles/index.scss';
+import 'src/styles/main.css';
 
 import { Button, OverlaysProvider } from '@blueprintjs/core';
 import { setModulesStaticURL } from 'js-slang/dist/modules/loader';

src/pages/login/NusLogin.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/global';
+@use '../../styles/global' as *;
 
 .container {
   display: flex;

src/pages/login/NusLogin.module.scss.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "Application__main": string;
+  "badge": string;
+  "badge-tag": string;
+  "body": string;
+  "bp6-overlay": string;
+  "bp6-popover-content": string;
+  "bp6-tag": string;
+  "buttons-wrapper": string;
+  "container": string;
+  "header": string;
+  "logo": string;
+  "outlined": string;
+  "row": string;
+  "text-center": string;
+  "unpadded": string;
+  "WorkspaceParent": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/pages/welcome/Welcome.module.scss.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "fullpage": string;
+  "fullpage-content": string;
+  "text-left": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/Academy.module.scss

@@ -1,4 +1,4 @@
-@import '_global';
+@use 'variables' as *;
 
 .Academy {
   height: 100%;

src/styles/Academy.module.scss.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "Academy": string;
+  "Academy-switching-courses": string;
+  "listing-xp": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/AchievementCommentCard.module.scss.d.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "assessment-comments": string;
+  "assessment-feedback": string;
+  "box-comment": string;
+  "feedback-list": string;
+  "question-header": string;
+  "to-assessment-button": string;
+  "xp": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/Chatbot.module.scss.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "assistant": string;
+  "bot-area": string;
+  "bot-button": string;
+  "bot-container": string;
+  "button-clean": string;
+  "button-container": string;
+  "button-send": string;
+  "chat-container": string;
+  "chat-message": string;
+  "control-container": string;
+  "input-count": string;
+  "input-count-container": string;
+  "iSA": string;
+  "tips-box": string;
+  "tips-message": string;
+  "user": string;
+  "user-input": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/ConfigureControls.module.scss.d.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "confirm-assign-text": string;
+  "confirm-assign-voting": string;
+  "current-voting-status": string;
+  "reassign-voting-warning": string;
+  "voting-status-text": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/ConfirmDialog.module.scss.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "ConfirmDialog": string;
+  "large-button": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/ContextMenu.module.scss

@@ -1,4 +1,4 @@
-@import '_global';
+@use 'variables' as *;
 
 .context-menu {
   background-color: $cadet-color-1;

src/styles/ContextMenu.module.scss.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "context-menu": string;
+  "context-menu-item": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/Contributors.module.scss

@@ -1,4 +1,4 @@
-@import '_global';
+@use 'variables' as *;
 
 // Styling components of the ContributorsDetails
 

src/styles/Contributors.module.scss.d.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "containerPermalink": string;
+  "contributors": string;
+  "contributorsDetails": string;
+  "description": string;
+  "dot": string;
+  "evenWider": string;
+  "hallOfFame": string;
+  "inPermalink": string;
+  "leadership": string;
+  "outsideDetails": string;
+  "repoDetailsPermalink": string;
+  "wider": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/Draggable.module.scss.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "clickable": string;
+  "draggable": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/FileSystemView.module.scss

@@ -1,4 +1,4 @@
-@import '_global';
+@use 'variables' as *;
 
 .file-system-view-container {
   width: 100%;

src/styles/FileSystemView.module.scss.d.ts

@@ -0,0 +1,20 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "file-system-view-container": string;
+  "file-system-view-directory-node-container": string;
+  "file-system-view-empty-space": string;
+  "file-system-view-error": string;
+  "file-system-view-file-name": string;
+  "file-system-view-input": string;
+  "file-system-view-list-container": string;
+  "file-system-view-node-container": string;
+  "file-system-view-spinner": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/Grading.module.scss

@@ -1,4 +1,4 @@
-@import '_global';
+@use 'variables' as *;
 
 .grading-overview-unfilterable-btns,
 .grading-overview-filterable-btns {

src/styles/Grading.module.scss.d.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "grading-badge": string;
+  "grading-cell-align-left": string;
+  "grading-def-cell": string;
+  "grading-def-cell-pointer": string;
+  "grading-def-cell-selectable": string;
+  "grading-default-headers": string;
+  "grading-filter-btn": string;
+  "grading-filter-btn-on": string;
+  "grading-left-align": string;
+  "grading-overview-filterable-btns": string;
+  "grading-overview-unfilterable-btns": string;
+  "grading-table-col-icons": string;
+  "grading-table-header-individual": string;
+  "grading-table-rows": string;
+  "grading-xp-cell": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/GradingBadges.module.scss

@@ -1,4 +1,4 @@
-@import '_global';
+@use 'variables' as *;
 
 .grading-badge {
   border-radius: 9999px;

src/styles/GradingBadges.module.scss.d.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "grading-badge": string;
+  "grading-badge-lg": string;
+  "grading-badge-md": string;
+  "grading-badge-sm": string;
+  "grading-badge-text": string;
+  "grading-badge-xl": string;
+  "grading-badge-xs": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/Login.module.scss

@@ -1,4 +1,4 @@
-@import '_global';
+@use 'variables' as *;
 
 .Login {
   background-size: cover;

src/styles/Login.module.scss.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "Login": string;
+  "login-header": string;
+  "login-icon": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/NavigationBar.module.scss

@@ -1,4 +1,4 @@
-@import '_global';
+@use 'variables' as *;
 
 .primary-navbar {
   background: #141e30; /* fallback for old browsers */

src/styles/NavigationBar.module.scss.d.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+// WARNING: THIS FILE IS AUTO GENERATED, PLEASE DO NOT EDIT IT MANUALLY.
+// prettier-ignore
+export type Styles = {
+  "primary-navbar": string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;