Remove sass styles and packages (#1318)

* Create VSourcesTable component

* Remove sass styles and packages

* Create VSourcesTable component

* Update snapshots

* Update Sources table and snapshots

* Update POT file

* Update storybook snapshots

* Update

* Fix the extension page

* Remove sass from jest.config.js

* Update POT file

* Add visual regression tests for content pages

* Update src/components/VCheckbox/meta/VCheckbox.stories.js

* Fix extension page bg color

* Tweak extension page styles

* Update POT file

* Remove translation banner from RTL snapshots

* Update extension page snapshots

.github/workflows/bundle_size.yml

@@ -7,7 +7,6 @@ on:
       - "**.js"
       - "**.vue"
       - "**.css"
-      - "**.scss"
       # Changes to any dependency
       - "pnpm-lock.yaml"
       # This file configures ESLint. Changes could affect the outcome.

jest.config.js

@@ -18,8 +18,7 @@ module.exports = {
   transform: {
     '^.+\\.(j|t)s$': 'babel-jest',
     '.*\\.(vue)$': 'vue-jest',
-    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
-      'jest-transform-stub',
+    '.+\\.(css|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
     '^.+\\.svg$': '<rootDir>/test/unit/svg-transform.js',
   },
   testPathIgnorePatterns: ['/playwright/', '/storybook/'],

nuxt.config.ts

@@ -162,13 +162,7 @@ const config: NuxtConfig = {
     { src: '~/plugins/ua-parse' },
     { src: '~/plugins/focus-visible', mode: 'client' },
   ],
-  css: [
-    '~/styles/tailwind.css',
-    '~/assets/fonts.css',
-    '~/styles/vocabulary.scss',
-    '~/styles/global.scss',
-    '~/styles/accent.scss',
-  ],
+  css: ['~/styles/tailwind.css', '~/assets/fonts.css', '~/styles/accent.css'],
   head,
   env,
   dev: !isProd,
@@ -181,12 +175,6 @@ const config: NuxtConfig = {
     '@nuxtjs/eslint-module',
     '@pinia/nuxt',
   ],
-  // Load the scss variables into every component:
-  // No need to import them. Since the variables will not exist in the final build,
-  // this doesn't make the built files larger.
-  styleResources: {
-    scss: ['./styles/utilities/all.scss'],
-  },
   modules: [
     '@nuxtjs/i18n',
     '@nuxtjs/redirect-module',

package.json

@@ -141,8 +141,6 @@
     "postcss": "^8.4.12",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.9",
-    "sass-loader": "^10.2.1",
     "tailwind-config-viewer": "^1.6.3",
     "tailwindcss": "^3.0.23",
     "tailwindcss-rtl": "^0.9.0",

src/components/ExtensionBrowsers.vue

@@ -1,28 +1,36 @@
 <template>
-  <ul class="buttons is-centered">
+  <ul class="flex flex-wrap justify-center items-center">
     <li v-for="(browser, key) in browsers" :key="key">
-      <VLink
+      <VButton
+        as="VLink"
+        variant="tertiary"
         :href="browser.extUrl"
-        class="browser-button button small me-2 is-opaque"
+        class="me-2"
       >
         {{ $t(`browsers.${key}`) }}
-        <img class="ms-2" :src="browser.logo" :alt="$t(`browsers.${key}`)" />
-      </VLink>
+        <img
+          class="ms-2 w-6 h-6"
+          :src="browser.logo"
+          :alt="$t(`browsers.${key}`).toString()"
+        />
+      </VButton>
     </li>
   </ul>
 </template>
 
-<script>
-import VLink from '~/components/VLink.vue'
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+import VButton from '~/components/VButton.vue'
 
 import chromeLogo from '~/assets/browsers/chrome.svg'
 import edgeLogo from '~/assets/browsers/edge.svg'
 import firefoxLogo from '~/assets/browsers/firefox.svg'
 import operaLogo from '~/assets/browsers/opera.svg'
 
-export default {
+export default defineComponent({
   name: 'ExtensionBrowsers',
-  components: { VLink },
+  components: { VButton },
   data() {
     return {
       browsers: {
@@ -48,15 +56,5 @@ export default {
       },
     }
   },
-}
+})
 </script>
-
-<style scoped>
-.browser-button {
-  @apply bg-white;
-}
-
-.browser-button img {
-  @apply w-6 h-6;
-}
-</style>

src/components/VSourcesTable.vue

@@ -138,7 +138,7 @@ export default defineComponent({
 
 @layer components {
   .table {
-    @apply border-0 rounded-sm border-separate border-dark-charcoal-20;
+    @apply border-0 rounded-sm border-dark-charcoal-20;
   }
   .table th,
   .table td {

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-05-04T11:38:38+00:00\n"
+"POT-Creation-Date: 2022-05-06T09:23:52+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -1147,12 +1147,12 @@ msgctxt "error.audio"
 msgid "audio"
 msgstr ""
 
-#: src/pages/extension.vue:90
+#: src/pages/extension.vue:98
 msgctxt "extension.title"
 msgid "Web extension"
 msgstr ""
 
-#: src/pages/extension.vue:60
+#: src/pages/extension.vue:58
 msgctxt "extension.conclusion"
 msgid "Have your favourite content while browsing the web"
 msgstr ""
@@ -1181,7 +1181,7 @@ msgctxt "extension.features.search.content"
 msgid "Browse through millions of content and use filters to find what best meets your needs."
 msgstr ""
 
-#: src/pages/extension.vue:7
+#: src/pages/extension.vue:6
 msgctxt "extension.description.intro"
 msgid "A browser extension that lets you search and use open-licensed and public domain images."
 msgstr ""
@@ -1651,12 +1651,10 @@ msgctxt "sources.issue-button"
 msgid "Suggest a new source"
 msgstr ""
 
-#: src/pages/sources.vue:77
 msgctxt "sources.heading.image"
 msgid "Image Sources"
 msgstr ""
 
-#: src/pages/sources.vue:79
 msgctxt "sources.heading.audio"
 msgid "Audio Sources"
 msgstr ""