Initial Vite Commit

app/javascript/widget/components/AgentTypingBubble.vue

@@ -27,7 +27,8 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
+
 .agent-message-wrap {
   position: sticky;
   bottom: $space-smaller;

app/javascript/widget/components/Banner.vue

@@ -31,16 +31,19 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
+
 .banner {
   color: $color-white;
   font-size: $font-size-default;
   font-weight: $font-weight-bold;
   padding: $space-slab;
   text-align: center;
+
   &.success {
     background: $color-success;
   }
+
   &.error {
     background: $color-error;
   }

app/javascript/widget/components/ChatFooter.vue

@@ -162,7 +162,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
 
 .branding {
   align-items: center;

app/javascript/widget/components/ChatInputWrap.vue

@@ -58,7 +58,7 @@ import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 
-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
 export default {
   name: 'ChatInputWrap',
@@ -176,8 +176,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
+@import 'widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/mixins.scss';
 
 .chat-message--input {
   align-items: center;

app/javascript/widget/components/ChatMessage.vue

@@ -55,7 +55,7 @@ export default {
 </style>
 
 <style lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
 
 .chat-bubble .message-content,
 .chat-bubble.user {

app/javascript/widget/components/ConversationWrap.vue

@@ -119,8 +119,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
+@import 'widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/mixins.scss';
 
 .conversation--container {
   display: flex;
@@ -132,6 +132,7 @@ export default {
   &.light-scheme {
     color-scheme: light;
   }
+
   &.dark-scheme {
     color-scheme: dark;
   }

app/javascript/widget/components/FileBubble.vue

@@ -83,7 +83,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
 
 .file {
   .icon-wrap {
@@ -112,6 +112,7 @@ export default {
   .link-wrap {
     line-height: 1;
   }
+
   .meta {
     padding-right: $space-smaller;
   }

app/javascript/widget/components/Form/PhoneInput.vue

@@ -284,7 +284,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
+
 .phone-input--wrap {
   .phone-input {
     height: 2.8rem;

app/javascript/widget/components/HeaderActions.vue

@@ -121,7 +121,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
 
 .actions {
   button {
@@ -136,6 +136,7 @@ export default {
   .close-button {
     display: none;
   }
+
   .rn-close-button {
     display: block !important;
   }

app/javascript/widget/components/ImageBubble.vue

@@ -35,7 +35,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
 
 .image {
   display: block;

app/javascript/widget/components/PreChat/Form.vue

@@ -317,7 +317,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
+
 ::v-deep {
   .wrapper[data-type='checkbox'] {
     .formulate-input-wrapper {
@@ -330,6 +331,7 @@ export default {
       }
     }
   }
+
   @media (prefers-color-scheme: dark) {
     .wrapper {
       .formulate-input-element--date,
@@ -340,6 +342,7 @@ export default {
       }
     }
   }
+
   .wrapper[data-type='textarea'] {
     .formulate-input-element--textarea {
       textarea {
@@ -347,6 +350,7 @@ export default {
       }
     }
   }
+
   .pre-chat-header-message {
     .link {
       color: $color-woot;

app/javascript/widget/components/UnreadMessage.vue

@@ -106,7 +106,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
+
 .chat-bubble {
   max-width: 85%;
   padding: $space-normal;
@@ -119,10 +120,12 @@ export default {
   text-align: left;
   padding-bottom: $space-small;
   font-size: $font-size-small;
+
   .agent--name {
     font-weight: $font-weight-medium;
     margin-left: $space-smaller;
   }
+
   .company--name {
     color: $color-light-gray;
     margin-left: $space-smaller;

app/javascript/widget/components/UnreadMessageList.vue

@@ -99,7 +99,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables';
+@import 'widget/assets/scss/variables';
 
 .unread-wrap {
   width: 100%;
@@ -146,6 +146,7 @@ export default {
       color: $color-body;
     }
   }
+
   .is-background-light {
     color: $color-body !important;
   }

app/javascript/widget/components/UserAvatar.vue

@@ -28,8 +28,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
+@import 'widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/mixins.scss';
 
 .user-avatar {
   @include light-shadow;

app/javascript/widget/components/UserMessageBubble.vue

@@ -36,7 +36,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
 
 .chat-bubble.user::v-deep {
   p code {

app/javascript/widget/components/dropdown/DropdownMenu.vue

@@ -75,7 +75,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
 
 .menu-content {
   width: max-content;

app/javascript/widget/components/dropdown/DropdownMenuItem.vue

@@ -52,14 +52,16 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
 
 .menu-item {
   margin-left: $zero !important;
   outline: none;
+
   &:last-child {
     border-bottom: none;
   }
+
   &:disabled {
     cursor: not-allowed;
   }

app/javascript/widget/components/layouts/ViewWithHeader.vue

@@ -142,8 +142,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables';
-@import '~widget/assets/scss/mixins';
+@import 'widget/assets/scss/variables';
+@import 'widget/assets/scss/mixins';
 
 .custom-header-shadow {
   @include shadow-large;

app/javascript/widget/components/template/Article.vue

@@ -47,7 +47,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
 
 .article-item {
   border-bottom: 1px solid $color-border;

app/javascript/widget/components/template/EmailInput.vue

@@ -112,7 +112,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
 
 .email-input-group {
   display: flex;

app/javascript/widget/components/template/IntegrationCard.vue

@@ -83,7 +83,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
 
 .video-call--container {
   position: fixed;