fix missing CSS in components

See vitejs/vite#12385 for the concrete problem. We bypass it by loading the main CSS file in any component that needs global styles.
Codepoints · Mar 13, 2023 · 04a2b39 · 04a2b39
1 parent fd7e23f
commit 04a2b39
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 6 deletions.
diff --git a/codepoints.net/views/partials/header.php b/codepoints.net/views/partials/header.php
@@ -37,7 +37,7 @@
     <link rel="author" href="/humans.txt">
     <link rel="preload" href="<?= static_url('src/fonts/Literata.woff2') ?>" as="font" crossOrigin="anonymous">
     <link rel="preload" href="<?= static_url('src/fonts/Literata-Italic.woff2') ?>" as="font" crossOrigin="anonymous">
-    <link rel="stylesheet" href="<?= static_url('src/css/main.css') ?>">
+    <link rel="stylesheet" href="<?= static_url('src/css/main.css') ?>" id="main-css">
     <link rel="stylesheet" media="print" href="<?= static_url('src/css/print.css') ?>">
     <?php include 'head-multilang.php' ?>
     <?php if (isset($head_extra)) { echo $head_extra; } ?>

diff --git a/src/css/shadow.css b/src/css/shadow.css
diff --git a/src/js/components/cp-btn-share.ts b/src/js/components/cp-btn-share.ts
@@ -2,7 +2,6 @@ import {LitElement, css, html, unsafeCSS} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {gettext as _} from '../_i18n.ts';
 import {CpDialog} from './cp-dialog.ts';
-import ShadowCSS from '../../css/shadow.css?url';
 
 const services = {
   Whatsapp: 'whatsapp://send?text={title}%20{url}',
@@ -95,7 +94,7 @@ class CpShareContainer extends LitElement {
       s.push(html`<li><a class="btn" href="${url}" target="_blank">${service}</a></li>`);
     }
     return html`
-    <link rel="stylesheet" href="${ShadowCSS}">
+    <link rel="stylesheet" href="${document.getElementById('main-css').href}">
     <div class="preview">
       <span class="url">${this.url}</span>
       <span class="title">${this.title}</span>

diff --git a/vite.config.js b/vite.config.js
@@ -25,7 +25,7 @@ export default defineConfig({
         entryFileNames: '[name]-[hash].js',
         assetFileNames: 'assets/[name]-[hash][extname]',
       },
-    }
+    },
   },
   css: {
     postcss: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,7 +25,7 @@ export default defineConfig({ @@
             entryFileNames: '[name]-[hash].js',
             assetFileNames: 'assets/[name]-[hash][extname]',
           },
-        }
+        },
       },
       css: {
         postcss: {
@@ Expand Down @@