Change how theme style packs are loaded

Load the `common` style pack, and then charge the style pack for the current
skin, independent from any selected JS pack.

app/javascript/flavours/glitch/common.js

@@ -0,0 +1,12 @@
+import Rails from '@rails/ujs';
+import 'font-awesome/css/font-awesome.css';
+
+export function start() {
+  require.context('@/images/', true);
+
+  try {
+    Rails.start();
+  } catch (e) {
+    // If called twice
+  }
+}

app/javascript/flavours/glitch/packs/application.js

@@ -1,8 +1,12 @@
 import 'packs/public-path';
+
+import { start } from 'flavours/glitch/common';
 import { loadLocale } from 'flavours/glitch/locales';
 import main from "flavours/glitch/main";
 import { loadPolyfills } from 'flavours/glitch/polyfills';
 
+start();
+
 loadPolyfills()
   .then(loadLocale)
   .then(main)

app/javascript/flavours/glitch/packs/common.js

@@ -1,9 +1,8 @@
+/* This file is a hack to have something more reliable than the upstream `common` tag
+  that is implicitly generated as the common chunk through webpack's `splitChunks` config */
+
 import 'packs/public-path';
 import 'font-awesome/css/font-awesome.css';
-import Rails from '@rails/ujs';
-import 'flavours/glitch/styles/index.scss';
 
-Rails.start();
-
-//  This ensures that webpack compiles our images.
+// This is a hack to ensures that webpack compiles our images.
 require.context('../images', true);

app/javascript/flavours/glitch/packs/public.tsx

@@ -10,6 +10,7 @@ import Rails from '@rails/ujs';
 import axios from 'axios';
 import { throttle } from 'lodash';
 
+import { start } from 'flavours/glitch/common';
 import { timeAgoString } from 'flavours/glitch/components/relative_timestamp';
 import emojify from 'flavours/glitch/features/emoji/emoji';
 import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions';
@@ -19,6 +20,8 @@ import ready from 'flavours/glitch/ready';
 
 import 'cocoon-js-vanilla';
 
+start();
+
 const messages = defineMessages({
   usernameTaken: {
     id: 'username.taken',

app/javascript/flavours/glitch/packs/share.jsx

@@ -1,10 +1,13 @@
 import 'packs/public-path';
 import { createRoot } from 'react-dom/client';
 
+import { start } from 'flavours/glitch/common';
 import ComposeContainer from 'flavours/glitch/containers/compose_container';
 import { loadPolyfills } from 'flavours/glitch/polyfills';
 import ready from 'flavours/glitch/ready';
 
+start();
+
 function loaded() {
   const mountNode = document.getElementById('mastodon-compose');
 

app/javascript/packs/common.js

@@ -1,5 +1,5 @@
+/* This file is a hack to have something more reliable than the upstream `common` tag
+  that is implicitly generated as the common chunk through webpack's `splitChunks` config */
+
 import './public-path';
 import 'font-awesome/css/font-awesome.css';
-import 'styles/application.scss';
-
-require.context('../images/', true);

app/javascript/skins/glitch/default/common.scss

@@ -0,0 +1 @@
+@import 'flavours/glitch/styles/index';

app/javascript/skins/vanilla/default/common.scss

@@ -0,0 +1 @@
+@import 'styles/application';