Replace TailwindCSS with Protocol and SCSS for styling (#312)

Co-authored-by: William Lachance <[email protected]>

.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,19 @@ 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 }],
       },
+
+      // Eslint only allows regular CSS inside <style>, so we
+      // use this setting to ignore warnings about SCSS/LESS syntax
+      //
+      // https://github.com/sveltejs/eslint-plugin-svelte3#svelte3ignore-styles
+      settings: {
+        "svelte3/ignore-styles": () => true,
+      },
     },
     {
       files: ["tests/**/*.test.js"],

.gitignore

@@ -1,5 +1,7 @@
 /node_modules/
 /public/build/
+/public/img/
+/public/fonts/
 /storybook-static/
 venv
 *.pyc

.storybook/main.js

@@ -1,4 +1,6 @@
 const sveltePreprocess = require("svelte-preprocess");
+const autoPrefixer = require("autoprefixer");
+const path = require("path");
 
 module.exports = {
   stories: ["../stories/**/*.stories.js"],
@@ -10,9 +12,38 @@ module.exports = {
     );
     svelteLoader.options = {
       ...svelteLoader.options,
-      preprocess: sveltePreprocess({ postcss: true }),
+      preprocess: sveltePreprocess({
+        postcss: true,
+        defaults: {
+          style: "scss",
+        },
+        scss: {
+          prependData: `@import '@mozilla-protocol/core/protocol/css/protocol.scss';`,
+        },
+        postcss: {
+          plugins: [autoPrefixer],
+        },
+      }),
+
+      // turn off warning about unused CSS selectors to
+      // shorten Netlify build time. More context:
+      // https://github.com/mozilla/glean-dictionary/pull/312#issuecomment-759251341
+
+      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;
   },
 };

.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

@@ -1,13 +1,18 @@
 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",
+    "/storybook-static/",
+  ],
   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",
   },
 };