From d4b01c2fa0540a2e5119cd70e198e063fac8b4f2 Mon Sep 17 00:00:00 2001
From: MarinaGryphon <ryfoxx93@gmail.com>
Date: Thu, 17 Dec 2020 17:22:06 -0600
Subject: [PATCH] Scoped CSS VueUI Fixes (+CI Check) (#10822)

---
 html/changelogs/MDP-scopedcss.yml             | 43 +++++++++++++++++++
 scripts/code_check.sh                         |  9 ++++
 .../view/machinery/atmospherics/canister.vue  |  2 +-
 vueui/src/components/view/records/main.vue    |  4 +-
 vueui/src/components/vui/input/search.vue     |  4 --
 5 files changed, 55 insertions(+), 7 deletions(-)
 create mode 100644 html/changelogs/MDP-scopedcss.yml

diff --git a/html/changelogs/MDP-scopedcss.yml b/html/changelogs/MDP-scopedcss.yml
new file mode 100644
index 00000000000..72c5df7fdb7
--- /dev/null
+++ b/html/changelogs/MDP-scopedcss.yml
@@ -0,0 +1,43 @@
+################################
+# Example Changelog File
+#
+# Note: This file, and files beginning with ".", and files that don't end in ".yml" will not be read. If you change this file, you will look really dumb.
+#
+# Your changelog will be merged with a master changelog. (New stuff added only, and only on the date entry for the day it was merged.)
+# When it is, any changes listed below will disappear.
+#
+# Valid Prefixes:
+#   bugfix
+#   wip (For works in progress)
+#   tweak
+#   soundadd
+#   sounddel
+#   rscadd (general adding of nice things)
+#   rscdel (general deleting of nice things)
+#   imageadd
+#   imagedel
+#   maptweak
+#   spellcheck (typo fixes)
+#   experiment
+#   balance
+#   admin
+#   backend
+#   security
+#   refactor
+#################################
+
+# Your name.
+author: MoondancerPony
+
+# Optional: Remove this file after generating master changelog.  Useful for PR changelogs that won't get used again.
+delete-after: True
+
+# Any changes you've made.  See valid prefix list above.
+# INDENT WITH TWO SPACES.  NOT TABS.  SPACES.
+# SCREW THIS UP AND IT WON'T WORK.
+# Also, all entries are changed into a single [] after a master changelog generation. Just remove the brackets when you add new entries.
+# Please surround your changes in  double quotes ("), as certain characters otherwise screws up compiling. The quotes will not show up in the changelog.
+changes:
+  - bugfix: "Fixes contagious UI styling due to an erroneous unscoped <style> tag."
+  - backend: "Adds a check to ensure this never happens again."
+  - tweak: "Makes all VueUI view components use scoped styles. This shouldn't change anything except for fixing the aforementioned bug."
diff --git a/scripts/code_check.sh b/scripts/code_check.sh
index 0f8f60987a3..f4e6da42baf 100644
--- a/scripts/code_check.sh
+++ b/scripts/code_check.sh
@@ -11,6 +11,15 @@ cd $1
 ERROR_COUNT=0
 echo "Starting Code Check" > code_error.log
 
+echo "Checking for unscoped style tags in VueUI views:" >> code_error.log
+grep -rP '<style[^>]*(?<!scoped)>' vueui/src/components/view >> code_error.log
+if [ $? -eq 0 ]; then
+  ERROR_COUNT=$(($ERROR_COUNT+1))
+  echo "FAIL: Found unscoped style tags in VueUI views" >> code_error.log
+else
+  echo "PASS: Found no unscoped style tags in VueUI views" >> code_error.log
+fi
+
 echo "Checking for step_x and step_y in maps:" >> code_error.log
 grep 'step_[xy]' maps/**/*.dmm >> code_error.log
 if [ $? -eq 0 ]; then
diff --git a/vueui/src/components/view/machinery/atmospherics/canister.vue b/vueui/src/components/view/machinery/atmospherics/canister.vue
index b828c561f65..e21e9b0ca15 100644
--- a/vueui/src/components/view/machinery/atmospherics/canister.vue
+++ b/vueui/src/components/view/machinery/atmospherics/canister.vue
@@ -57,7 +57,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   .item {
     width: 100%;
     margin: 4px 0 0 0;
diff --git a/vueui/src/components/view/records/main.vue b/vueui/src/components/view/records/main.vue
index 78647150c00..ae4932dd2bc 100644
--- a/vueui/src/components/view/records/main.vue
+++ b/vueui/src/components/view/records/main.vue
@@ -29,9 +29,9 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .logout {
   margin-right: 0;
   margin-left: auto;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/vueui/src/components/vui/input/search.vue b/vueui/src/components/vui/input/search.vue
index cfd4968251c..b5a575715cd 100644
--- a/vueui/src/components/vui/input/search.vue
+++ b/vueui/src/components/vui/input/search.vue
@@ -90,7 +90,3 @@ export default {
   }
 }
 </script>
-
-<style>
-
-</style>