fix: convert styles to unscoped for Vue2 support

Author: DamianOsipiuk

src/devtools/Devtools.vue

@@ -92,8 +92,8 @@ export default defineComponent({
     const devtoolsPanel = h(DevtoolsPanel, {
       class: {
         "devtools-panel": true,
-        resizing: this.isResizing,
-        open: this.isOpen,
+        "devtools-resizing": this.isResizing,
+        "devtools-open": this.isOpen,
       },
       style: {
         height: this.devtoolsHeight,
@@ -151,7 +151,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .devtools-panel {
   bottom: 0;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
@@ -167,11 +167,11 @@ export default defineComponent({
   z-index: 99999;
 }
 
-.resizing {
+.devtools-resizing {
   transition: none;
 }
 
-.open {
+.devtools-open {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0) scale(1);

src/devtools/DevtoolsPanel.vue

@@ -205,7 +205,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .VueQueryDevtoolsPanel {
   display: flex;
   font-family: sans-serif;

src/devtools/active-query-panel/ActiveQueryPanel.vue

@@ -95,7 +95,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .active-query-panel {
   display: flex;
   flex-direction: column;

src/devtools/active-query-panel/ExpandableNode.vue

@@ -32,7 +32,7 @@ export default defineComponent({
       ? h(
           "span",
           {
-            class: "subtitle",
+            class: "expandable-subtitle",
           },
           this.subtitle
         )
@@ -53,7 +53,7 @@ export default defineComponent({
         h(
           "span",
           {
-            class: "arrow",
+            class: "expandable-arrow",
             style: {
               transform: `rotate(${this.$props.isExpanded ? 90 : 0}deg)`,
             },
@@ -68,19 +68,19 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .expandable {
   cursor: pointer;
   color: white;
 }
 
-.arrow {
+.expandable-arrow {
   display: inline-block;
   margin-right: 10px;
   transition: all 0.1s ease;
 }
 
-.subtitle {
+.expandable-subtitle {
   color: grey;
   font-size: 0.7rem;
   margin-left: 10px;

src/devtools/active-query-panel/Explorer.vue

@@ -276,7 +276,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .explorer-tree {
   font-family: Menlo, monospace;
   font-size: 0.9rem;

src/devtools/active-query-panel/InfoPanel.vue

@@ -29,28 +29,28 @@ export default defineComponent({
       h(
         "div",
         {
-          class: "title",
+          class: "info-title",
           style: {
             background: this.theme.backgroundAlt,
           },
         },
         this.$props.title
       ),
-      h("div", { class: "panel" }, slot),
+      h("div", { class: "info-panel" }, slot),
     ]);
   },
 });
 </script>
 
-<style scoped>
-.title {
+<style>
+.info-title {
   padding: 0.5rem;
   position: sticky;
   top: 0;
   z-index: 1;
 }
 
-.panel {
+.info-panel {
   padding: 0.5rem;
 }
 </style>

src/devtools/active-query-panel/QueryActions.vue

@@ -58,6 +58,7 @@ export default defineComponent({
         h(
           "button",
           {
+            class: "action-button",
             style: {
               background: this.isFetching
                 ? this.theme.grayAlt
@@ -82,6 +83,7 @@ export default defineComponent({
         h(
           "button",
           {
+            class: "action-button",
             style: {
               background: this.theme.warning,
               color: this.theme.inputTextColor,
@@ -102,6 +104,7 @@ export default defineComponent({
         h(
           "button",
           {
+            class: "action-button",
             style: {
               background: this.theme.gray,
             },
@@ -121,6 +124,7 @@ export default defineComponent({
         h(
           "button",
           {
+            class: "action-button",
             style: {
               background: this.theme.danger,
             },
@@ -143,8 +147,8 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
-button {
+<style>
+.action-button {
   appearance: none;
   border-radius: 0.3em;
   border: 0;
@@ -155,7 +159,7 @@ button {
   padding: 0.5em;
 }
 
-button:not(:last-of-type) {
+.action-button:not(:last-of-type) {
   margin-right: 5px;
 }
 </style>

src/devtools/active-query-panel/QueryDetails.vue

@@ -50,51 +50,72 @@ export default defineComponent({
         },
       },
       [
-        h("div", { class: "info-line" }, [
-          h("code", [h("pre", this.formattedQueryKey)]),
+        h("div", { class: "details-info-line" }, [
+          h(
+            "code",
+            {
+              class: "details-code",
+            },
+            [h("pre", { class: "details-pre" }, this.formattedQueryKey)]
+          ),
           h(
             "span",
-            { style: { background: this.statusBackground } },
+            {
+              class: "details-span",
+              style: { background: this.statusBackground },
+            },
             this.queryStatusLabel
           ),
         ]),
-        h("div", { class: "info-line" }, [
+        h("div", { class: "details-info-line" }, [
           "Observers:",
-          h("code", this.observersCount),
+          h(
+            "code",
+            {
+              class: "details-code",
+            },
+            this.observersCount
+          ),
         ]),
-        h("div", { class: "info-line" }, [
+        h("div", { class: "details-info-line" }, [
           "Last Updated:",
-          h("code", this.updateDate),
+          h(
+            "code",
+            {
+              class: "details-code",
+            },
+            this.updateDate
+          ),
         ]),
       ]
     );
   },
 });
 </script>
 
-<style scoped>
-.info-line {
+<style>
+.details-info-line {
   align-items: stretch;
   display: flex;
   justify-content: space-between;
 }
 
-.info-line:not(:last-of-type) {
+.details-info-line:not(:last-of-type) {
   margin-bottom: 0.5rem;
 }
 
-code {
+.details-code {
   font-size: 0.9em;
   line-height: 1.8rem;
 }
 
-pre {
+.details-pre {
   margin: 0;
   overflow: auto;
   padding: 0;
 }
 
-span {
+.details-span {
   border-radius: 0.4rem;
   flex-shrink: 0;
   font-weight: bold;

src/devtools/components/QueryItem.vue

@@ -55,7 +55,7 @@ export default defineComponent({
         h(
           "div",
           {
-            class: "query-state",
+            class: "query-item-state",
             style: {
               background: this.stateColor,
               textShadow: this.isStale ? "0" : "0 0 10px black",
@@ -64,15 +64,21 @@ export default defineComponent({
           },
           this.observerCount
         ),
-        h("code", this.$props.query.queryHash),
+        h(
+          "code",
+          {
+            class: "query-item-code",
+          },
+          this.$props.query.queryHash
+        ),
       ]
     );
   },
 });
 </script>
 
-<style scoped>
-.query-state {
+<style>
+.query-item-state {
   align-items: center;
   display: flex;
   flex: 0 0 auto;
@@ -82,7 +88,7 @@ export default defineComponent({
   width: 2rem;
 }
 
-code {
+.query-item-code {
   font-size: 0.9em;
   padding: 0.5rem;
 }

src/devtools/components/QueryOptions.vue

@@ -61,6 +61,7 @@ export default defineComponent({
   },
   render() {
     const input = h("input", {
+      class: "options-input",
       style: {
         backgroundColor: this.theme.inputBackgroundColor,
         color: this.theme.inputTextColor,
@@ -85,6 +86,7 @@ export default defineComponent({
       ? h(
           "select",
           {
+            class: "options-select",
             style: {
               backgroundColor: this.theme.inputBackgroundColor,
               color: this.theme.inputTextColor,
@@ -122,6 +124,7 @@ export default defineComponent({
       ? h(
           "button",
           {
+            class: "options-button",
             style: {
               background: this.theme.gray,
             },
@@ -151,13 +154,13 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .options-wrapper {
   align-items: center;
   display: flex;
 }
 
-input {
+.options-input {
   border-radius: 0.2em;
   border: 0;
   flex: 1;
@@ -167,7 +170,7 @@ input {
   padding: 0.3em 0.4em;
 }
 
-button {
+.options-button {
   appearance: none;
   background: #3f4e60;
   border-radius: 0.3em;
@@ -179,7 +182,7 @@ button {
   padding: 0.3rem 0.4rem;
 }
 
-select {
+.options-select {
   --webkit-appearance: none;
   appearance: none;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>");