Scoped CSS VueUI Fixes (+CI Check) (#10822)

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."

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

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;

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>
+</style>

vueui/src/components/vui/input/search.vue

@@ -90,7 +90,3 @@ export default {
   }
 }
 </script>
-
-<style>
-
-</style>