Fixed build errors and numerous sass compiler warnings

Author: Igor Biryukov

package.json

@@ -48,7 +48,7 @@
     "@vitejs/plugin-vue": "^4.4.0",
     "sass": "^1.69.5",
     "typescript": "^5.2.2",
-    "vite": "^4.5.0",
+    "vite": "^7.2.4",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vue-tsc": "^2.0.29"
   },

src/WidgetWrapper.vue

@@ -17,7 +17,7 @@ defineProps<{
 
 <style scoped lang="scss">
 
-@import "@/assets/variables";
+@use "@/assets/variables" as *;
 
 .wrapper {
   display: flex;

src/assets/mixins.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 // Breakpoints
 @mixin respond-to($breakpoint, $direction) {
   @if $direction == max {
@@ -20,7 +21,7 @@
   $transition: ();
 
   @each $property in $properties {
-    $transition: append(
+    $transition: list.append(
       $transition,
       ($property 0.15s linear),
       $separator: comma

src/common/helpers/parseStyles.ts

@@ -0,0 +1,23 @@
+export function parseStyles(input?: Record<string, string> | string): Record<string, string> {
+  const result: Record<string, string> = {};
+  if (!input) return result;
+
+  if (typeof input !== 'string') return input;
+
+  const declarations = input.split(';');
+
+  for (const declaration of declarations) {
+    const colonIndex = declaration.indexOf(':');
+    if (colonIndex !== -1) {
+      const property = declaration.substring(0, colonIndex).trim();
+      const value = declaration.substring(colonIndex + 1).trim();
+
+      if (property && value) {
+        const camelCaseProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+        result[camelCaseProperty] = value;
+      }
+    }
+  }
+
+  return result;
+}

src/common/types/props.ts

@@ -4,5 +4,5 @@ export interface CommonProps {
   id?: string;
   attrs?: object;
   classes?: StyleValue;
-  style?: Record<string, string>;
+  style?: Record<string, string> | string;
 }

src/components/hive-autocomplete/hive-autocomplete.vue

@@ -164,7 +164,7 @@ const updateCurrentValueAutocomplteHandler = (value: Value | undefined) => {
 </template>
 
 <style scoped lang="scss">
-@import '@/assets/variables.scss';
+@use '@/assets/variables.scss' as *;
 
 $drop-down-z_menu: 1;
 $border-width: 1px;

src/components/hive-badge/hive-badge.vue

@@ -39,7 +39,7 @@ const isFlashing = computed(() => {
 </template>
 
 <style scoped lang="scss">
-@import '@/assets/variables.scss';
+@use '@/assets/variables.scss' as *;
 
 .badge {
   display: flex;

src/components/hive-button/hive-button.vue

@@ -29,7 +29,7 @@ useOnMount(emit);
 </template>
 
 <style scoped lang="scss">
-@import '@/assets/variables.scss';
+@use '@/assets/variables.scss' as *;
 $height: var(--height, calc($common-widget-height + 2px));
 .hive-button {
   cursor: pointer;

src/components/hive-checkbox-group/hive-checkbox-group.vue

@@ -111,7 +111,7 @@ watch(
 </template>
 
 <style scoped lang="scss">
-@import '@/assets/variables.scss';
+@use '@/assets/variables.scss' as *;
 
 $gap: 15px;
 

src/components/hive-checkbox/hive-checkbox.vue

@@ -88,7 +88,7 @@ if (Array.isArray(props.option)) {
 </template>
 
 <style scoped lang="scss">
-@import '@/assets/variables.scss';
+@use '@/assets/variables.scss' as *;
 
 $gap: 15px;