fix: building warnings

mfrederic · Dec 23, 2024 · ec5f4b9 · ec5f4b9
1 parent 69e6ce6
commit ec5f4b9
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 34 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -2,6 +2,7 @@
   "name": "realt-properties-map-frontend",
   "version": "1.7.1",
   "license": "Apache-2.0",
+  "type": "module",
   "scripts": {
     "dev": "PORT=3010 vite",
     "build": "vite build",

diff --git a/frontend/postcss.config.cjs → frontend/postcss.config.js b/frontend/postcss.config.cjs → frontend/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     'tailwindcss': {},
     'postcss-preset-mantine': {},

diff --git a/frontend/src/components/Map/MapWrapper.scss b/frontend/src/components/Map/MapWrapper.scss
@@ -1,4 +1,4 @@
-@use '../../theme/variables.scss' as *;
+@forward '../../theme/variables';
 
 .map {
   height: 100vh;

diff --git a/frontend/src/components/PropertyPanel/propertyPanelContent.scss b/frontend/src/components/PropertyPanel/propertyPanelContent.scss
@@ -1,65 +1,65 @@
-@use '../../theme/variables' as *;
+@forward '../../theme/variables';
 
 .red-property {
-  color: $red;
+  color: var(--red);
 }
 
 .green-property {
-  color: $green;
+  color: var(--green);
 }
 
 .yellow-property {
-  color: $yellow;
+  color: var(--yellow);
 }
 
 .singleFamily-icon {
-  color: $singleFamily;
+  color: var(--singleFamily);
 }
 
 .multiFamily-icon {
-  color: $multiFamily;
+  color: var(--multiFamily);
   background-image: linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.1) 50%);
   background-size: 10px 10px;
 }
 
 .duplex-icon {
-  color: $duplex;
+  color: var(--duplex);
 }
 
 .condominium-icon {
-  color: $condominium;
+  color: var(--condominium);
 }
 
 .mixedUse-icon {
-  color: $mixedUse;
+  color: var(--mixedUse);
   background-image: linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.1) 50%);
   background-size: 10px 10px;
 }
 
 .quadplex-icon {
-  color: $quadplex;
+  color: var(--quadplex);
 }
 
 .commercial-icon {
-  color: $commercial;
+  color: var(--commercial);
 }
 
 .sfrPortfolio-icon {
-  color: $sfrPortfolio;
+  color: var(--sfrPortfolio);
   background-image: linear-gradient(90deg, transparent 50%, rgba(0,0,0,0.1) 50%);
   background-size: 10px 10px;
 }
 
 .mfrPortfolio-icon {
-  color: $mfrPortfolio;
+  color: var(--mfrPortfolio);
   background-image: linear-gradient(0deg, transparent 50%, rgba(0,0,0,0.1) 50%);
   background-size: 10px 10px;
 }
 
 .loan-icon {
-  color: $loan;
+  color: var(--loan);
 }
 
 .stack-icon {
-  color: $stack;
+  color: var(--stack);
 }
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
@@ -1,4 +1,4 @@
-@use './theme/variables.scss' as *;
+@forward './theme/variables';
 
 @tailwind base;
 @tailwind components;

diff --git a/frontend/src/theme/variables.scss b/frontend/src/theme/variables.scss
@@ -1,15 +1,17 @@
-$red: #f44336;
-$green: #43a047;
-$yellow: #fdd835;
+:root {
+  --red: #f44336;
+  --green: #43a047;
+  --yellow: #fdd835;
 
-$singleFamily: #1e88e5;
-$multiFamily: #43a047;
-$duplex: #ff9800;
-$condominium: #9c27b0;
-$mixedUse: #e91e63;
-$quadplex: #fdd835;
-$commercial: #f44336;
-$sfrPortfolio: #795548;
-$mfrPortfolio: #009688;
-$loan: #673ab7;
-$stack: #757575;
+  --singleFamily: #1e88e5;
+  --multiFamily: #43a047;
+  --duplex: #ff9800;
+  --condominium: #9c27b0;
+  --mixedUse: #e91e63;
+  --quadplex: #fdd835;
+  --commercial: #f44336;
+  --sfrPortfolio: #795548;
+  --mfrPortfolio: #009688;
+  --loan: #673ab7;
+  --stack: #757575;
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import * as sass from 'sass-embedded'
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
   server: {
@@ -14,6 +14,15 @@ export default defineConfig({
     global: 'window',
   },
   css: {
-    postcss: './postcss.config.cjs'
+    preprocessorOptions: {
+      scss: {
+        implementation: sass,
+        sassOptions: {
+          style: 'expanded',
+          sourceMap: true,
+        }
+      }
+    },
+    postcss: './postcss.config.js'
   }
 })