Make sure that the Tailwind CSS classes we use don't get overridden

[agarny]

Fixes #454.

[Copilot]

Pull request overview

This PR addresses Tailwind utility classes being overridden when OpenCOR is embedded in host applications by scoping Tailwind output under an .opencor ancestor (via Tailwind’s important selector) and adjusting the library build CSS output to avoid cascade-layer interactions with host CSS.

Changes:

• Introduces a Tailwind config that scopes all generated utilities under .opencor and updates app/demo containers to ensure they include the .opencor wrapper.
• Adds a library-build-only Vite plugin to strip @layer base blocks and unwrap remaining @layer blocks in emitted CSS.
• Removes the __OPENCOR_DEV__ define/dev-only PrimeVue version guard, updates GraphPanelWidget resizing behavior, and bumps package versions/deps.

Reviewed changes

Copilot reviewed 15 out of 17 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/renderer/vite.lib.config.ts	Adds process-css-layers post-bundle CSS transform for the library CSS output.
src/renderer/vite.config.ts	Removes __OPENCOR_DEV__ define from the renderer app build config.
electron.vite.config.ts	Removes __OPENCOR_DEV__ define from the Electron renderer config.
src/renderer/tailwind.config.ts	New Tailwind TS config setting important: '.opencor' for scoped utilities.
src/renderer/tailwind.config.js	Removes the previous JS Tailwind config.
src/renderer/src/assets/app.css	Adds @config directive to point Tailwind at the TS config file.
src/renderer/src/components/OpenCOR.vue	Ensures .opencor is the root wrapper and moves some root sizing/overflow to CSS.
src/renderer/src/main.ts	Adds explanatory comment about the .opencor important-selector strategy.
src/renderer/src/components/widgets/SafeBlockUI.vue	Removes dev-only PrimeVue version compatibility check tied to __OPENCOR_DEV__.
src/renderer/src/components/widgets/GraphPanelWidget.vue	Adds resize observation/queuing and guards to reduce unnecessary Plotly relayout/resize churn.
src/renderer/src/AppWithinContainers.vue	Wraps demo container with .opencor and uses explicit viewport height styling.
src/renderer/src/AppWithSimulationData.vue	Wraps demo container with .opencor and uses explicit viewport height styling.
src/renderer/src/AppWithMultipleInstances.vue	Wraps demo container with .opencor and uses explicit viewport height styling.
package.json	Bumps version and updates vue-tsc.
bun.lock	Lockfile updates for dependency bumps.
src/renderer/package.json	Bumps renderer package version and updates vue-tsc.
src/renderer/bun.lock	Renderer lockfile updates for dependency bumps.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

This PR addresses Tailwind utility styles being overridden when OpenCOR is embedded in host applications (e.g., the SPARC portal) by scoping Tailwind output under an .opencor ancestor and adjusting the library build’s CSS layering behavior.

Changes:

• Add Tailwind config (important: '.opencor') and update app markup/CSS to ensure Tailwind utilities apply only within an .opencor subtree.
• Add a library-build-only Vite plugin to strip/unwrap CSS layers to prevent leakage and avoid layered-vs-unlayered override issues in host apps.
• Misc maintenance: improve Plotly resize behavior, remove __OPENCOR_DEV__ plumbing, update Biome CSS parsing, bump versions/locks.

Reviewed changes

Copilot reviewed 17 out of 19 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/renderer/vite.lib.config.ts	Adds process-css-layers plugin to strip @layer base and unwrap remaining layers in library CSS output.
src/renderer/vite.config.ts	Removes __OPENCOR_DEV__ define from renderer app build config.
src/renderer/tailwind.config.ts	Introduces TS Tailwind config with .opencor scoping via important.
src/renderer/tailwind.config.js	Removes old JS Tailwind config (including prior plugin-style config).
src/renderer/src/main.ts	Adds explanatory comment about the .opencor Tailwind strategy.
src/renderer/src/components/widgets/SafeBlockUI.vue	Removes dev-only PrimeVue version compatibility check and __OPENCOR_DEV__ usage.
src/renderer/src/components/widgets/GraphPanelWidget.vue	Adds ResizeObserver-driven resize queuing and tracks plot readiness/margins.
src/renderer/src/components/OpenCOR.vue	Ensures root wrapper has .opencor and moves h-full/overflow-hidden to scoped CSS.
src/renderer/src/assets/app.css	Adds @config and layered Tailwind imports; imports primeui + primeicons; updates lint ignores.
src/renderer/src/AppWithinContainers.vue	Wraps content in .opencor and replaces h-screen with explicit viewport-height style.
src/renderer/src/AppWithSimulationData.vue	Wraps demo UI in .opencor and adjusts container layout to work with scoped Tailwind utilities.
src/renderer/src/AppWithMultipleInstances.vue	Wraps demo layout in .opencor and uses explicit viewport-height/overflow style.
src/renderer/package.json	Bumps renderer package version and vue-tsc.
src/renderer/bun.lock	Updates lockfile entries to match dependency bumps.
src/renderer/biome.json	Enables CSS Tailwind directives parsing + formatWithErrors.
package.json	Bumps root package version and vue-tsc.
electron.vite.config.ts	Removes __OPENCOR_DEV__ define from electron renderer config.
bun.lock	Updates root lockfile entries to match dependency bumps.
biome.json	Enables CSS Tailwind directives parsing + formatWithErrors.

Comments suppressed due to low confidence (1)

src/renderer/src/components/widgets/GraphPanelWidget.vue:628

• updateMarginsAsync() schedules a requestAnimationFrame callback that can run after unmount; inside the callback it can still emit events and call Plotly.relayout(mainDivRef.value, …) even if mainDivRef.value has become null. Consider re-checking plotIsReady/mainDivRef.value inside the rAF callback (and clearing updatingMargins) to avoid null dereferences or emitting from a destroyed component.

  requestAnimationFrame(() => {
    const newMargins = compMargins();

    if (!sameMargins(trackedMargins, newMargins)) {
      trackedMargins = newMargins;

      emit('marginsUpdated', newMargins);
    }

    // Update our margins if they have changed.

    const relayoutUpdates: Record<string, number> = {};

    if (!props.margins) {
      if (margins.value.left !== newMargins.left) {
        margins.value.left = newMargins.left;

        relayoutUpdates['margin.l'] = margins.value.left;
      }

      if (margins.value.right !== newMargins.right) {
        margins.value.right = newMargins.right;

        relayoutUpdates['margin.r'] = margins.value.right;
      }
    }

    if (Object.keys(relayoutUpdates).length) {
      dependencies._plotlyJs.relayout(mainDivRef.value, relayoutUpdates);
    }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

This PR addresses Tailwind CSS utility classes being overridden when OpenCOR is embedded in host applications (e.g., SPARC portal) by scoping Tailwind styling under an .opencor ancestor and ensuring the library build emits unlayered CSS with effective specificity.

Changes:

• Introduces Tailwind config scoping via important: '.opencor' and updates usage sites to rely on the .opencor wrapper.
• Adds a library-build-only Vite plugin to strip @layer base and unwrap other Tailwind @layer blocks in the emitted CSS.
• Updates supporting build/tooling files (Biome config, dependency/version bumps) and refines some UI sizing behavior (GraphPanelWidget).

Reviewed changes

Copilot reviewed 17 out of 19 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/renderer/vite.lib.config.ts	Adds process-css-layers post-processing of emitted library CSS to unwrap/strip Tailwind layers.
src/renderer/vite.config.ts	Removes __OPENCOR_DEV__ define from renderer Vite config.
electron.vite.config.ts	Removes __OPENCOR_DEV__ define from Electron renderer config.
src/renderer/tailwind.config.ts	Adds Tailwind config (TS) with important: '.opencor' scoping.
src/renderer/tailwind.config.js	Removes prior JS Tailwind config.
src/renderer/src/assets/app.css	Adds @config and adjusts Tailwind/PrimeUI imports and layer declarations.
src/renderer/src/components/OpenCOR.vue	Ensures the root uses .opencor and moves root sizing/overflow to scoped CSS.
src/renderer/src/main.ts	Documents the Tailwind scoping + layer-unwrapping approach.
src/renderer/src/components/widgets/SafeBlockUI.vue	Removes dev-only PrimeVue version assertion logic.
src/renderer/src/components/widgets/GraphPanelWidget.vue	Improves plot resize/margin updates with resize observation and deduping.
src/renderer/src/AppWithinContainers.vue	Wraps demo container with .opencor and explicit viewport height.
src/renderer/src/AppWithSimulationData.vue	Wraps demo container with .opencor and explicit viewport height.
src/renderer/src/AppWithMultipleInstances.vue	Wraps demo container with .opencor and explicit viewport height/overflow.
package.json	Bumps version and updates vue-tsc.
src/renderer/package.json	Bumps version and updates vue-tsc.
bun.lock	Lockfile updates (incl. vue-tsc, sax, etc.).
src/renderer/bun.lock	Renderer lockfile updates (incl. vue-tsc).
biome.json	Enables formatWithErrors and Tailwind directive parsing for CSS.
src/renderer/biome.json	Enables formatWithErrors and Tailwind directive parsing for CSS.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.