Scope CSS code (#10489)

- Fix #10470
- Fix scoped styles for GUI

# Important Notes
None

app/gui2/src/App.vue

@@ -104,4 +104,69 @@ registerAutoBlurHandler()
   /* Compensate for top bar, render the app below it. */
   top: calc(var(--row-height) + var(--top-level-gap, 0px) + var(--top-bar-margin, 0px) + 16px);
 }
+
+:deep(*),
+:deep(*)::before,
+:deep(*)::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+:deep(.icon) {
+  width: 16px;
+  height: 16px;
+}
+
+/* Scrollbar style definitions for textual visualizations which need support for scrolling.
+ *
+ * The 11px width/height (depending on scrollbar orientation)
+ * is set so that it resembles macOS default scrollbar.
+ */
+
+:deep(.scrollable) {
+  scrollbar-color: rgba(190 190 190 / 50%) transparent;
+}
+
+:deep(.scrollable)::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+
+:deep(.scrollable)::-webkit-scrollbar-track {
+  -webkit-box-shadow: none;
+}
+
+:deep(.scrollable)::-webkit-scrollbar:vertical {
+  width: 11px;
+}
+
+:deep(.scrollable)::-webkit-scrollbar:horizontal {
+  height: 11px;
+}
+
+:deep(.scrollable)::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  border: 1px solid rgba(220, 220, 220, 0.5);
+  background-color: rgba(190, 190, 190, 0.5);
+}
+
+:deep(.scrollable)::-webkit-scrollbar-corner {
+  background: rgba(0, 0, 0, 0);
+}
+
+:deep(.scrollable)::-webkit-scrollbar-button {
+  height: 8px;
+  width: 8px;
+}
+
+:deep(.draggable) {
+  cursor: grab;
+}
+
+:deep(.clickable) {
+  cursor: pointer;
+}
+
+:deep([data-use-vue-component-wrap]) {
+  display: contents !important;
+}
 </style>

app/gui2/src/assets/base.css

@@ -60,68 +60,3 @@
   --right-dock-default-width: 40%;
   --code-editor-default-height: 30%;
 }
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.icon {
-  width: 16px;
-  height: 16px;
-}
-
-.hidden {
-  display: none;
-}
-
-/* Scrollbar style definitions for textual visualizations which need support for scrolling.
- *
- * The 11px width/height (depending on scrollbar orientation)
- * is set so that it resembles macOS default scrollbar.
- */
-
-.scrollable {
-  scrollbar-color: rgba(190 190 190 / 50%) transparent;
-}
-
-.scrollable::-webkit-scrollbar {
-  -webkit-appearance: none;
-}
-
-.scrollable::-webkit-scrollbar-track {
-  -webkit-box-shadow: none;
-}
-
-.scrollable::-webkit-scrollbar:vertical {
-  width: 11px;
-}
-
-.scrollable::-webkit-scrollbar:horizontal {
-  height: 11px;
-}
-
-.scrollable::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  border: 1px solid rgba(220, 220, 220, 0.5);
-  background-color: rgba(190, 190, 190, 0.5);
-}
-
-.scrollable::-webkit-scrollbar-corner {
-  background: rgba(0, 0, 0, 0);
-}
-
-.scrollable::-webkit-scrollbar-button {
-  height: 8px;
-  width: 8px;
-}
-
-.draggable {
-  cursor: grab;
-}
-
-.clickable {
-  cursor: pointer;
-}

app/gui2/src/assets/main.css

@@ -1,10 +0,0 @@
-@import './base.css';
-
-body {
-  display: flex;
-  min-height: 100vh;
-}
-
-[data-use-vue-component-wrap] {
-  display: contents !important;
-}

app/gui2/src/asyncApp.ts

@@ -1,4 +1,4 @@
-import '@/assets/main.css'
+import '@/assets/base.css'
 
 export async function AsyncApp() {
   const [_, app] = await Promise.all([

app/gui2/src/components/visualizations/HeatmapVisualization.vue

@@ -234,10 +234,8 @@ watchPostEffect(() => {
   font-family: var(--font-mono);
   font-size: 10px;
 }
-</style>
 
-<style>
-.HeatmapVisualization .label .domain {
+.label :deep(.domain) {
   display: none;
 }
 </style>

app/gui2/src/components/visualizations/SQLVisualization.vue

@@ -136,29 +136,27 @@ function renderRegularInterpolation(value: string, fgColor: RGBA, bgColor: RGBA)
 .SQLVisualization {
   padding: 4px;
 }
-</style>
 
-<style>
-.SQLVisualization .sql {
+:deep(.sql) {
   font-family: var(--font-mono);
   font-size: 12px;
   margin-left: 7px;
   margin-top: 5px;
 }
 
-.SQLVisualization .interpolation {
+:deep(.interpolation) {
   border-radius: 6px;
   padding: 1px 2px 1px 2px;
   display: inline;
 }
 
-.SQLVisualization .mismatch-parent {
+:deep(.mismatch-parent) {
   position: relative;
   display: inline-flex;
   justify-content: center;
 }
 
-.SQLVisualization .mismatch-mouse-area {
+:deep(.mismatch-mouse-area) {
   display: inline;
   position: absolute;
   width: 150%;
@@ -167,15 +165,15 @@ function renderRegularInterpolation(value: string, fgColor: RGBA, bgColor: RGBA)
   z-index: 0;
 }
 
-.SQLVisualization .mismatch {
+:deep(.mismatch) {
   z-index: 1;
 }
 
-.SQLVisualization .modulepath {
+:deep(.modulepath) {
   color: rgba(150, 150, 150, 0.9);
 }
 
-.SQLVisualization .tooltip {
+:deep(.tooltip) {
   font-family: DejaVuSansMonoBook, sans-serif;
   font-size: 12px;
   opacity: 0;

app/gui2/src/components/visualizations/TableVisualization.vue

@@ -684,18 +684,20 @@ onUnmounted(() => {
   padding: 0 5px;
   overflow: hidden;
 }
-</style>
 
-<style>
-.TableVisualization > .ag-theme-alpine > .ag-root-wrapper.ag-layout-normal {
+.TableVisualization > .ag-theme-alpine > :deep(.ag-root-wrapper.ag-layout-normal) {
   border-radius: 0 0 var(--radius-default) var(--radius-default);
 }
 
-a {
+/* Tag selectors are inefficient to compute, and should be replaced with a class selector
+ * if possible.
+ * See https://vuejs.org/api/sfc-css-features.html#scoped-style-tips */
+:deep(a) {
   color: blue;
   text-decoration: underline;
 }
-a:hover {
+
+:deep(a):hover {
   color: darkblue;
 }
 </style>

app/gui2/src/components/widgets/CheckboxWidget.vue

@@ -24,4 +24,8 @@ const emit = defineEmits<{ 'update:modelValue': [modelValue: boolean] }>()
   border-radius: var(--radius-full);
   background: var(--color-widget-selected);
 }
+
+.hidden {
+  display: none;
+}
 </style>