Merge pull request #1483 from bcgov/feature/sassUpgrade

Sass fixes and library updates

services/tenant-ui/frontend/package.json

@@ -16,9 +16,9 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@intlify/unplugin-vue-i18n": "^4.0.0",
-    "@jsonforms/vue": "^3.4.1",
-    "@jsonforms/vue-vanilla": "^3.4.1",
+    "@intlify/unplugin-vue-i18n": "^6.0.3",
+    "@jsonforms/vue": "^3.5.1",
+    "@jsonforms/vue-vanilla": "^3.5.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "axios": "^1.7.7",
@@ -33,34 +33,33 @@
     "primevue": "^3.53.0",
     "qrcode.vue": "^3.6.0",
     "vue": "^3.5.12",
-    "vue-i18n": "^9.13.1",
+    "vue-i18n": "^11.0.1",
     "vue-json-pretty": "^2.4.0",
     "vue-router": "^4.4.5",
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "^3.0.0",
     "@pinia/testing": "^0.1.7",
-    "@types/dompurify": "^3.0.5",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-vue": "^5.1.5",
-    "@vitest/coverage-v8": "^2.1.4",
+    "@vitest/coverage-v8": "^3.0.2",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^8.57.0",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-prettier": "^5.2.2",
     "eslint-plugin-vue": "^9.31.0",
     "flat": "^6.0.1",
-    "glob": "^11.0.0",
-    "jsdom": "^25.0.1",
+    "glob": "^11.0.1",
+    "jsdom": "^26.0.0",
     "msw": "^2.6.4",
     "prettier": "^3.3.3",
-    "sass": "^1.80.7",
+    "sass": "^1.83.4",
     "typescript": "^5.6.3",
-    "vite": "^5.4.11",
-    "vitest": "^2.1.4",
+    "vite": "^6.0.7",
+    "vitest": "^3.0.2",
     "vue-tsc": "^2.1.10",
     "whatwg-fetch": "^3.6.20"
   }

services/tenant-ui/frontend/src/assets/_theme.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@forward 'variables.scss';
 
 :root {
   --surface-a: #ffffff;

services/tenant-ui/frontend/src/assets/layout.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@use 'variables.scss' as *; // Import variables as global
 
 // General application layout and styles for the 'containing' components (nav, content, etc)
 

services/tenant-ui/frontend/src/assets/primevueOverrides/buttons.scss

@@ -1,4 +1,4 @@
-@import '../variables.scss';
+@use '../variables.scss' as *;
 
 button {
   &.p-button {

services/tenant-ui/frontend/src/assets/primevueOverrides/datatable.scss

@@ -1,4 +1,4 @@
-@import '../variables.scss';
+@use '../variables.scss' as *;
 
 // Data Tables
 .p-datatable {

services/tenant-ui/frontend/src/assets/primevueOverrides/formFields.scss

@@ -1,4 +1,4 @@
-@import '../variables.scss';
+@use '../variables.scss' as *;
 
 // Specific to form text fields, layout, spacing, etc
 // inputs/textareas etc

services/tenant-ui/frontend/src/assets/primevueOverrides/inputSwitch.scss

@@ -1,6 +1,5 @@
 @use "sass:color";
-
-@import '../variables.scss';
+@use '../variables.scss' as *;
 
 // Input Switches
 .p-inputswitch {

services/tenant-ui/frontend/src/assets/primevueOverrides/panels.scss

@@ -1,4 +1,4 @@
-@import '../variables.scss';
+@use '../variables.scss' as *;
 
 // The Accordion and its tabs
 .p-accordion {

services/tenant-ui/frontend/src/assets/primevueOverrides/primevueOverrides.scss

@@ -1,5 +1,5 @@
-@import 'buttons.scss';
-@import 'datatable.scss';
-@import 'formFields.scss';
-@import 'inputSwitch.scss';
-@import 'panels.scss';
+@forward 'buttons.scss';
+@forward 'datatable.scss';
+@forward 'formFields.scss';
+@forward 'inputSwitch.scss';
+@forward 'panels.scss';

services/tenant-ui/frontend/src/assets/style.scss

@@ -1,8 +1,10 @@
-@import 'primevue/resources/themes/lara-light-blue/theme.css'; // includes '~primevue/resources/themes/nova/theme.css'
-@import 'layout.scss';
-@import 'tenantuiComponents.scss';
-@import 'primevueOverrides/primevueOverrides.scss';
-@import 'toast.scss';
+@forward 'primevue/resources/themes/lara-light-blue/theme.css'; // includes '~primevue/resources/themes/nova/theme.css'
+@forward 'layout.scss';
+@forward 'tenantuiComponents.scss';
+@forward 'primevueOverrides/primevueOverrides.scss';
+@forward 'toast.scss';
+@forward 'variables.scss';
+@use 'variables.scss' as *;
 
 // General HTML
 html,

services/tenant-ui/frontend/src/assets/tenantuiComponents.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@use 'variables.scss' as *;
 // For styling UI pieces that we are adding to the Tenant UI ourselves
 
 // The chip that displays api response statuses etc

services/tenant-ui/frontend/src/assets/toast.scss

@@ -1,26 +1,8 @@
-@import 'variables.scss';
+@forward "vue-toastification/dist/index.css";
+@use 'variables.scss' as *;
 // For overriding the Vue-Toastification library
 // https://github.com/Maronato/vue-toastification/blob/main/src/scss/_variables.scss
 
-// Override the variables or import a file that overrides them
-$vt-color-error: $tenant-ui-status-red-background;
-$vt-text-color-error: $tenant-ui-status-red-color;
-$vt-color-success: #76c078;
-$vt-text-color-success: white;
-$vt-color-info: #b3e5fc;
-$vt-text-color-info: #0c5ea0;
-$vt-color-warning: $tenant-ui-status-amber-background;
-$vt-text-color-warning: $tenant-ui-status-amber-color;
-
-// Import the regular Vue Toastification stylesheets (or create your own)
-@import 'vue-toastification/src/scss/_variables';
-@import 'vue-toastification/src/scss/_toastContainer';
-@import 'vue-toastification/src/scss/_toast';
-@import 'vue-toastification/src/scss/_closeButton';
-@import 'vue-toastification/src/scss/_progressBar';
-@import 'vue-toastification/src/scss/_icon';
-@import 'vue-toastification/src/scss/animations/_bounce';
-
 // Some custom styling
 .Vue-Toastification__toast {
   border-left-width: 15px;

services/tenant-ui/frontend/src/components/LoginForm.vue

@@ -220,7 +220,6 @@ const handleSubmit = async (isFormValid: boolean) => {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/variables.scss';
 .tab-container {
   &::v-deep(.p-tabview-panels) {
     padding: 0;

services/tenant-ui/frontend/src/components/profile/issuance/Endorser.vue

@@ -136,7 +136,6 @@ const showNotActiveWarn = computed(
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/variables.scss';
 .inactive-endorser {
   color: $tenant-ui-text-warning;
 }

services/tenant-ui/frontend/src/components/profile/issuance/PublicDid.vue

@@ -99,7 +99,6 @@ const hasPublicDid = computed(() => !!publicDid.value && !!publicDid.value.did);
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/variables.scss';
 .p-datatable {
   border-top: 1px solid $tenant-ui-panel-border-color;
 }

services/tenant-ui/frontend/vite.config.ts

@@ -41,7 +41,7 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: `@import "@/assets/variables.scss";`,
+        additionalData: `@use "@/assets/variables.scss" as *;`,
         api: 'modern-compiler',
       },
     },