From 9934c1f97de57af9f1d9560419ab48061c4733c0 Mon Sep 17 00:00:00 2001
From: Linh Nguyen <linh@hey.com>
Date: Tue, 12 Jan 2021 21:26:22 -0800
Subject: [PATCH] Disable 'unused-css-selector' warning in Storybook

---
 .storybook/main.js | 10 +++++++++-
 jest.config.js     |  4 ++--
 postcss.config.js  | 17 +----------------
 3 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 516a2e469..71a6ded7c 100644
--- a/.storybook/main.js
+++ b/.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;
diff --git a/jest.config.js b/jest.config.js
index 88688f18c..f04923342 100644
--- a/jest.config.js
+++ b/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",
diff --git a/postcss.config.js b/postcss.config.js
index fed2a95d5..cef42fbd4 100644
--- a/postcss.config.js
+++ b/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")],
 };