Use CSS containment to prevent PrimeVue from leaking its CSS.

Author: agarny

postcss.config.js

@@ -3,14 +3,16 @@
  *       therefore hard-code colours.
  */
 
-@import "../../renderer/src/assets/base.css";
-
 body {
   background-color: #ffffff; /* Light version of --p-content-background. */
-  display: flex;
-  place-items: center;
-  place-content: center;
-  overflow: hidden;
+  margin: 0;
+  font-family:
+    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
   line-height: 1.6;
 }
 

src/main/assets/splashscreen.css

@@ -0,0 +1,21 @@
+import autoprefixer from 'autoprefixer';
+import tailwindcss from '@tailwindcss/postcss';
+import postcssScopePlugin from './scripts/postcss-scope-plugin.js';
+
+// Only apply scoping in library build mode, not in dev/Web mode.
+
+const isLibraryBuild = process.env.npm_lifecycle_event === 'build:lib';
+
+export default {
+  plugins: [
+    autoprefixer,
+    tailwindcss,
+    ...(isLibraryBuild
+      ? [
+          postcssScopePlugin({
+            scopeSelector: '.opencor-scoped-styles'
+          })
+        ]
+      : [])
+  ]
+};

src/renderer/postcss.config.js

@@ -0,0 +1,86 @@
+/**
+ * PostCSS plugin to scope CSS rules under `.opencor-scoped-styles`. This prevents CSS leakage when OpenCOR is used in
+ * an application that uses another UI framework than PrimeVue (e.g., Bootstrap, Element Plus, Vuetify).
+ */
+
+export default function postcssScopePlugin(opts = {}) {
+  const scopeSelector = opts.scopeSelector || '.opencor-scoped-styles';
+  const shouldScope = opts.shouldScope || (() => true);
+
+  return {
+    postcssPlugin: 'postcss-scope-plugin',
+
+    Rule(rule) {
+      // Skip if custom filter says no.
+
+      if (!shouldScope(rule)) {
+        return;
+      }
+
+      // Skip if already scoped.
+
+      const selectors = rule.selector.split(',').map((s) => s.trim());
+
+      if (selectors.every((s) => s.startsWith(scopeSelector))) {
+        return;
+      }
+
+      // Skip @-rules (like @keyframes, @media, etc.; they will be handled by their parent).
+
+      if (
+        rule.parent?.type === 'atrule' &&
+        ['keyframes', 'font-face', '-webkit-keyframes'].includes(rule.parent.name)
+      ) {
+        return;
+      }
+
+      // Handle `:root` specially (convert it to our scope selector).
+
+      if (rule.selector === ':root') {
+        rule.selector = scopeSelector;
+
+        return;
+      }
+
+      // Handle `html` and `body` specially (convert them to our scope selector).
+
+      if (rule.selector === 'html' || rule.selector === 'body') {
+        rule.selector = scopeSelector;
+
+        return;
+      }
+
+      // Split and scope each selector.
+
+      const scopedSelectors = selectors.flatMap((selector) => {
+        // If a selector starts with a pseudo (like `::before`, `:hover`) then scope it directly.
+
+        if (selector.startsWith('::') || (selector.startsWith(':') && !selector.includes('('))) {
+          return `${scopeSelector}${selector}`;
+        }
+
+        // Handle a universal selector specially (only as a descendant).
+
+        if (selector === '*' || selector.startsWith('* ')) {
+          return `${scopeSelector} ${selector}`;
+        }
+
+        // For simple class/id selectors (like `#app`, `.h-full`), we create both a compound and a descendant. This
+        // allows utilities to work on the scoped element itself and its children. We only do this for selectors that
+        // start with . or # and have no spaces.
+
+        if ((selector.startsWith('.') || selector.startsWith('#')) && !selector.includes(' ')) {
+          return [`${scopeSelector}${selector}`, `${scopeSelector} ${selector}`];
+        }
+
+        // For everything else (complex selectors, element selectors), we only create a descendant.
+
+        return `${scopeSelector} ${selector}`;
+      });
+
+      rule.selector = scopedSelectors.join(', ');
+    }
+  };
+}
+
+postcssScopePlugin.postcss = true;

src/renderer/scripts/postcss-scope-plugin.js

@@ -1,14 +1,37 @@
-@import "./base.css";
+/**
+ * Scoped styles to prevent CSS leakage when OpenCOR is used as a Vue 3 component in an application that uses a
+ * different UI framework (e.g., Bootstrap, Element Plus, Vuetify).
+ * Note: the order of imports is important to ensure that Tailwind CSS does not override PrimeVue styles.
+ */
+
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+@import "primeicons/primeicons.css";
+
+.opencor-scoped-styles {
+  container-type: inline-size;
+  --border-color: var(--p-content-border-color);
+
+  font-family:
+    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
 
-body {
   background-color: var(--p-content-background);
   color: var(--p-content-color);
 }
 
-a {
+.opencor-scoped-styles .p-component {
+  transition: none !important;
+}
+
+.opencor-scoped-styles a {
   color: var(--p-button-link-color);
 }
 
-:focus {
+.opencor-scoped-styles :focus {
   outline: none !important;
 }

src/renderer/src/assets/app.css

@@ -224,6 +224,12 @@ if (common.isDesktop()) {
   border-bottom: 1px solid var(--border-color);
 }
 
+.p-menubar a,
+.p-menubar-item-link,
+:deep(.p-menubar-item-link) {
+  color: var(--p-text-color);
+}
+
 .p-menubar
   > .p-menubar-root-list
   > .p-menubar-item

src/renderer/src/assets/base.css

@@ -115,7 +115,6 @@ import firebase from 'firebase/compat/app';
 import 'firebase/compat/auth';
 import { Octokit } from 'octokit';
 */
-import 'primeicons/primeicons.css';
 import primeVueConfig from 'primevue/config';
 import primeVueConfirmationService from 'primevue/confirmationservice';
 import primeVueToastService from 'primevue/toastservice';

src/renderer/src/components/MainMenu.vue

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['index.html', 'src/**/*.{vue,ts}'],
+  important: '.opencor-scoped-styles',
   theme: {
     extend: {}
   },