Remove scss lang directives from Vue SFC style tags; add eslint rule

.eslintrc.js

@@ -44,6 +44,14 @@ module.exports = {
     'vue/html-closing-bracket-newline': 'off',
     'vue/html-indent': 'off',
     'vue/singleline-html-element-content-newline': 'off',
+    'vue/block-lang': [
+      'error',
+      {
+            // This confusing naming prevents the use of 'lang' directives 
+            // entirely on Vue SFC style blocks.
+        style: { allowNoLang: true },
+      },
+    ],
     'vue/component-name-in-template-casing': [
       'error',
       'PascalCase',

src/components/CopyButton.vue

@@ -61,7 +61,11 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+/**
+  * Styles are applied here to 'hack' and overrule specificity.
+  * @todo Find a better way to handle this in the template.
+**/
 button {
   @apply py-2 px-3 text-sr;
 }

src/components/DropdownButton.vue

@@ -170,7 +170,7 @@ const DropdownButton = defineComponent({
 export default DropdownButton
 </script>
 
-<style lang="css" scoped>
+<style scoped>
 .dropdown-button {
   @apply flex items-center justify-center bg-pink text-white font-bold transition-shadow duration-100 ease-linear disabled:opacity-70 focus:outline-none focus-visible:ring focus-visible:ring-offset-2 focus-visible:ring-pink hover:bg-dark-pink no-underline appearance-none;
 }

src/components/ExtensionBrowsers.vue

@@ -51,13 +51,12 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .browser-button {
-  background-color: $color-white;
+  @apply bg-white;
+}
 
-  img {
-    height: 1.5em;
-    width: 1.5em;
-  }
+.browser-button img {
+  @apply w-6 h-6;
 }
 </style>

src/components/LoadingIcon.vue

@@ -13,7 +13,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .lds-ring {
   display: inline-block;
   position: relative;
@@ -40,6 +40,7 @@ export default {
 .lds-ring div:nth-child(3) {
   animation-delay: -0.15s;
 }
+
 @keyframes lds-ring {
   0% {
     transform: rotate(0deg);

src/components/SketchFabViewer.vue

@@ -69,7 +69,7 @@ export default {
   },
 }
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .image {
   display: block;
 }

src/components/VAudioDetails/VAudioDetails.vue

@@ -107,14 +107,10 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 dl {
-  @apply grid gap-4;
+  @apply grid gap-4 lg:gap-5;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-
-  @screen lg {
-    @apply gap-5;
-  }
 }
 dl div {
   display: flex;

src/components/VAudioTrack/VWaveform.vue

@@ -583,7 +583,7 @@ export default defineComponent({
 })
 </script>
 
-<style scoped lang="css">
+<style scoped>
 .waveform {
   --v-background-color: var(
     --waveform-background-color,

src/components/VErrorSection/VErrorImage.vue

@@ -49,12 +49,11 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 ::v-deep .attribution {
   @apply text-dark-charcoal-70;
-
-  a {
-    @apply text-current underline;
-  }
+}
+::v-deep a {
+  @apply text-current underline;
 }
 </style>

src/components/VImageGrid/VImageGrid.vue

@@ -65,7 +65,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .image-grid:after {
   /**
    * This keeps the last item in the results from expanding to fill

src/components/VNotificationBanner.vue

@@ -40,8 +40,8 @@ const VNotificationBanner = defineComponent({
 export default VNotificationBanner
 </script>
 
-<style scoped lang="scss">
-// Styles from learn.wordpress.org
+<style scoped>
+/** Styles from learn.wordpress.org **/
 .wrapper {
   background-color: #fff8e5;
   border-left: 0.25rem solid #ffb900;

src/components/VSkeleton/VGridSkeleton.vue

@@ -58,7 +58,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .square {
   aspect-ratio: 1 / 1;
 }

src/layouts/default.vue

@@ -99,25 +99,24 @@ const embeddedPage = {
 }
 export default embeddedPage
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .app {
   grid-template-rows: auto 1fr;
 }
 
 @screen md {
-  // Logic for displaying the filter sidebar and search results
-  // as independently-scrolling sections.
+  /** Display the search filter sidebar and results as independently-scrolling. **/
   .main {
     height: 100%;
     display: grid;
     grid-template-columns: 1fr 336px;
   }
-  // Make the main content area span both grid columns
-  // when the sidebar is closed...
+
+  /** Make the main content area span both grid columns when the sidebar is closed... **/
   .main > *:first-child {
     grid-column: span 2;
   }
-  // ...and only one column when it is visible.
+  /** ...and only one column when it is visible. **/
   .main.has-sidebar > *:first-child {
     grid-column: 1;
   }

src/locales/po-files/openverse.pot

@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-03-23T10:00:02+00:00\n"
+"POT-Creation-Date: 2022-03-28T21:45:58+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -1868,7 +1868,6 @@ msgctxt "hero.aria.search-type"
 msgid "search type"
 msgstr ""
 
-#: src/components/LocaleSelector.vue:3
 msgctxt "hero.locale.label"
 msgid "Languages available"
 msgstr ""