Replace TailwindCSS with Protocol and SCSS for styling

.storybook/main.js

@@ -1,5 +1,6 @@
 const sveltePreprocess = require("svelte-preprocess");
 const autoPrefixer = require("autoprefixer");
+const path = require("path");
 
 module.exports = {
   stories: ["../stories/**/*.stories.js"],
@@ -17,18 +18,25 @@ module.exports = {
           style: "scss",
         },
         scss: {
-          prependData: `@import 'node_modules/@mozilla-protocol/core/protocol/css/protocol.scss';`,
+          prependData: `@import '@mozilla-protocol/core/protocol/css/protocol.scss';`,
         },
         postcss: {
           plugins: [autoPrefixer],
         },
       }),
+      onwarn: (warning, handler) => {
+        const { code } = warning;
+        if (code === "css-unused-selector") return;
+
+        handler(warning);
+      },
     };
 
     config.module.rules.push({
       // this is for both less and scss
       test: /.*\.(?:le|c|sc)ss$/,
       loaders: ["style-loader", "css-loader", "sass-loader"],
+      include: path.resolve(__dirname, "../"),
     });
 
     return config;

jest.config.js

@@ -1,10 +1,10 @@
 module.exports = {
   transform: {
-    "^.+\\.svelte$": "svelte-jester",
+    "^.+\\.svelte$": ["svelte-jester", { preprocess: true }],
     "^.+\\.js$": "babel-jest",
   },
   moduleFileExtensions: ["js", "svelte", "json"],
-  testPathIgnorePatterns: ["/node_modules/", "/public/", "/storybook-static/"],
+  testPathIgnorePatterns: ["/node_modules/", "/public/", "/.storybook"],
   moduleNameMapper: {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "<rootDir>/__mocks__/fileMock.js",

postcss.config.js

@@ -1,19 +1,4 @@
-const production = !process.env.ROLLUP_WATCH;
 module.exports = {
   /* eslint-disable global-require */
-  plugins: [
-    require("postcss-import"),
-    require("@fullhuman/postcss-purgecss")({
-      content: ["index.html", "./src/**/*.svelte", "./src/**/*.html"],
-      enabled: production,
-      options: {
-        /* eslint-disable no-unused-vars */
-        defaultExtractor: (content) =>
-          [...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(
-            ([_match, group, ..._rest]) => group
-          ),
-      },
-      variables: true,
-    }),
-  ],
+  plugins: [require("postcss-import")],
 };