Use vite to replace webpack

src/components/rich_content/rich_content.jsx

@@ -3,7 +3,8 @@ import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_con
 import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
 import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
 import StillImage from 'src/components/still-image/still-image.vue'
-import MentionsLine, { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.vue'
+import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
+import { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.js'
 import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
 
 import './rich_content.scss'

src/components/settings_modal/tabs/appearance_tab.js

@@ -2,7 +2,8 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
-import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
+import { defaultHorizontalUnits } from '../helpers/unit_setting.js'
 import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
 import Preview from './theme_tab/theme_preview.vue'
 import FontControl from 'src/components/font_control/font_control.vue'

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -221,12 +221,15 @@ export default {
 
     // ## Components stuff
     // Getting existing components
-    const componentsContext = require.context('src', true, /\.style.js(on)?$/)
-    const componentKeysAll = componentsContext.keys()
+    const componentsContext = import.meta.glob(
+      ['/src/**/*.style.js', '/src/**/*.style.json'],
+      { eager: true }
+    )
+    const componentKeysAll = Object.keys(componentsContext)
     const componentsMap = new Map(
       componentKeysAll
         .map(
-          key => [key, componentsContext(key).default]
+          key => [key, componentsContext[key].default]
         ).filter(([, component]) => !component.virtual && !component.notEditable)
     )
     exports.componentsMap = componentsMap

src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue

@@ -22,4 +22,4 @@
 </template>
 
 <script src="./status_bookmark_folder_menu.js"></script>
-<stlye src="./status_bookmark_folder_menu.scss" />
+<style src="./status_bookmark_folder_menu.scss" />

src/components/timeline_menu/timeline_menu.js

@@ -1,8 +1,8 @@
 import Popover from '../popover/popover.vue'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import { mapState } from 'vuex'
-import { ListsMenuContent } from '../lists_menu/lists_menu_content.vue'
-import { BookmarkFoldersMenuContent } from '../bookmark_folders_menu/bookmark_folders_menu_content.vue'
+import ListsMenuContent from '../lists_menu/lists_menu_content.vue'
+import BookmarkFoldersMenuContent from '../bookmark_folders_menu/bookmark_folders_menu_content.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { TIMELINES } from 'src/components/navigation/navigation.js'
 import { filterNavigation } from 'src/components/navigation/filter.js'

src/components/update_notification/update_notification.js

@@ -1,7 +1,5 @@
 import Modal from 'src/components/modal/modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import pleromaTan from 'src/assets/pleromatan_apology.png'
-import pleromaTanFox from 'src/assets/pleromatan_apology_fox.png'
 import pleromaTanMask from 'src/assets/pleromatan_apology_mask.png'
 import pleromaTanFoxMask from 'src/assets/pleromatan_apology_fox_mask.png'
 
@@ -14,6 +12,9 @@ library.add(
 
 export const CURRENT_UPDATE_COUNTER = 1
 
+const pleromaTan = '/static/pleromatan_apology.png'
+const pleromaTanFox = '/static/pleromatan_apology_fox.png'
+
 const UpdateNotification = {
   data () {
     return {