Replace TailwindCSS with Protocol and SCSS for styling

.eslintignore

@@ -4,6 +4,5 @@
 public/build/bundle.js
 scripts/build-glean-metadata.js
 src/ga.js
-src/Tailwindcss.svelte
 storybook-static/*
 venv/*

.eslintrc.js

@@ -53,12 +53,14 @@ module.exports = {
         "import/no-duplicates": "off",
         "import/no-mutable-exports": "off",
         "import/no-unresolved": "off",
-
         // Temporarily work around a bug in eslint-plugin-svelte3.
         //
         // https://github.com/sveltejs/eslint-plugin-svelte3/issues/41#issuecomment-572503966
         "no-multiple-empty-lines": ["error", { max: 2, maxBOF: 2, maxEOF: 0 }],
       },
+      settings: {
+        "svelte3/ignore-styles": () => true,
+      },
     },
     {
       files: ["tests/**/*.test.js"],

.prettierignore

@@ -4,3 +4,4 @@ public/data/*
 storybook-static/*
 venv
 src/ga.js
+src/scss/

.storybook/main.js

@@ -1,4 +1,5 @@
 const sveltePreprocess = require("svelte-preprocess");
+const autoPrefixer = require("autoprefixer");
 
 module.exports = {
   stories: ["../stories/**/*.stories.js"],
@@ -10,9 +11,26 @@ module.exports = {
     );
     svelteLoader.options = {
       ...svelteLoader.options,
-      preprocess: sveltePreprocess({ postcss: true }),
+      preprocess: sveltePreprocess({
+        postcss: true,
+        defaults: {
+          style: "scss",
+        },
+        scss: {
+          prependData: `@import 'node_modules/@mozilla-protocol/core/protocol/css/protocol.scss';`,
+        },
+        postcss: {
+          plugins: [autoPrefixer],
+        },
+      }),
     };
 
+    config.module.rules.push({
+      // this is for both less and scss
+      test: /.*\.(?:le|c|sc)ss$/,
+      loaders: ["style-loader", "css-loader", "sass-loader"],
+    });
+
     return config;
   },
 };

.storybook/preview.js

@@ -1 +1 @@
-import "./story.css";
+import "!style-loader!css-loader!sass-loader!../node_modules/@mozilla-protocol/core/protocol/css/protocol.scss";

.storybook/story.css

@@ -1 +0,0 @@
-@import "../src/main.css";

jest.config.js

@@ -8,6 +8,6 @@ module.exports = {
   moduleNameMapper: {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "<rootDir>/__mocks__/fileMock.js",
-    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
+    "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js",
   },
 };