Import and inject global styles using vite's style.css?inline feature

sillsdev · Oct 11, 2024 · 86bad4e · 86bad4e
1 parent 7127e3d
commit 86bad4e
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 19 deletions.
diff --git a/frontend/viewer/package.json b/frontend/viewer/package.json
@@ -11,7 +11,6 @@
   "main": "dist-web-component/viewer.js",
   "exports": {
     "./component": "./dist-web-component/viewer.js",
-    "./style": "./dist-web-component/style.css",
     "./lexbox-api": "./src/lib/services/lexbox-api.ts",
     "./service-provider": "./src/lib/services/service-provider.ts"
   },

diff --git a/frontend/viewer/src/WebComponent.svelte b/frontend/viewer/src/WebComponent.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import ProjectView from './ProjectView.svelte';
-  import { fixBrokenNestedGlobalStyles } from './lib/utils/style-fix';
   import { getSettings } from 'svelte-ux';
+  import css from './app.postcss?inline';
 
   let loading = true;
 
@@ -11,7 +11,6 @@
   onMount(() => {
     const shadowRoot = document.querySelector('lexbox-svelte')?.shadowRoot;
     if (!shadowRoot) throw new Error('Could not find shadow root');
-    fixBrokenNestedGlobalStyles(shadowRoot);
 
     const abortController = new AbortController();
     window.addEventListener('popstate', () => {
@@ -39,9 +38,9 @@
 
 <svelte:options customElement={{ tag: 'lexbox-svelte' }} />
 
-<style global lang="postcss">
-  @import './app.postcss';
-</style>
+<svelte:element this="style">
+  ${css}
+</svelte:element>
 
 <div class="app contents" class:dark={$currentTheme.dark}>
   <ProjectView {projectName} isConnected {loading} showHomeButton={false} />

diff --git a/frontend/viewer/src/lib/utils/style-fix.ts b/frontend/viewer/src/lib/utils/style-fix.ts