moollaza · moollaza · Apr 16, 2020 · Apr 16, 2020 · Apr 16, 2020 · Apr 16, 2020
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}
diff --git a/package.json b/package.json
@@ -1,47 +1,47 @@
 {
-    "name": "Zaahir-dot-ca",
-    "description": "Personal website of Zaahir Moolla",
-    "license": "MIT",
-    "version": "0.0.1",
-    "scripts": {
-        "start-node": "node __sapper__/build",
-        "start": "sapper dev",
-        "dev": "sapper dev --port $PORT",
-        "build": "sapper export"
-    },
-    "browserslist": [
-        "last 3 version"
-    ],
-    "dependencies": {
-        "compression": "^1.7.1",
-        "polka": "^0.5.0",
-        "sirv": "^0.4.0"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.7.7",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-transform-runtime": "^7.8.3",
-        "@babel/preset-env": "^7.8.3",
-        "@babel/runtime": "^7.8.3",
-        "@fullhuman/postcss-purgecss": "^1.2.0",
-        "autoprefixer": "^9.7.3",
-        "cssnano": "^4.1.10",
-        "hover.css": "^2.3.2",
-        "postcss": "^7.0.26",
-        "postcss-import": "^12.0.1",
-        "postcss-url": "^8.0.0",
-        "purgecss-from-svelte": "^2.0.2",
-        "rollup": "^1.29.0",
-        "rollup-plugin-babel": "^4.0.2",
-        "rollup-plugin-commonjs": "^10.0.0",
-        "rollup-plugin-node-resolve": "^5.2.0",
-        "rollup-plugin-postcss": "^2.0.3",
-        "rollup-plugin-replace": "^2.0.0",
-        "rollup-plugin-svelte": "^5.0.1",
-        "rollup-plugin-terser": "^5.2.0",
-        "sapper": "^0.27.0",
-        "svelte": "^3.17.1",
-        "svelte-preprocess": "^3.3.0",
-        "tailwindcss": "^1.1.4"
-    }
+  "name": "zaahir-dot-ca",
+  "description": "Personal website of Zaahir Moolla",
+  "license": "MIT",
+  "version": "1.0.0",
+  "scripts": {
+    "start-node": "node __sapper__/build",
+    "start": "sapper dev",
+    "dev": "sapper dev --port $PORT",
+    "build": "sapper export"
+  },
+  "browserslist": [
+    "last 3 version"
+  ],
+  "dependencies": {
+    "compression": "^1.7.1",
+    "polka": "^0.5.0",
+    "sirv": "^0.4.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.7",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/runtime": "^7.8.3",
+    "@fullhuman/postcss-purgecss": "^1.2.0",
+    "@tailwindcss/ui": "^0.1.3",
+    "autoprefixer": "^9.7.3",
+    "cssnano": "^4.1.10",
+    "hover.css": "^2.3.2",
+    "postcss": "^7.0.26",
+    "postcss-import": "^12.0.1",
+    "postcss-url": "^8.0.0",
+    "rollup": "^1.29.0",
+    "rollup-plugin-babel": "^4.0.2",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-svelte": "^5.0.1",
+    "rollup-plugin-terser": "^5.2.0",
+    "sapper": "^0.27.0",
+    "svelte": "^3.17.1",
+    "svelte-preprocess": "^3.3.0",
+    "tailwindcss": "^1.2.0"
+  }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -8,148 +8,158 @@ import config from "sapper/config/rollup.js";
 import pkg from "./package.json";
 import getPreprocessor from "svelte-preprocess";
 import postcss from "rollup-plugin-postcss";
-import PurgeSvelte from "purgecss-from-svelte";
 import path from "path";
 const mode = process.env.NODE_ENV;
 const dev = mode === "development";
 const legacy = !!process.env.SAPPER_LEGACY_BUILD;
 
 const onwarn = (warning, onwarn) =>
-    (warning.code === "CIRCULAR_DEPENDENCY" &&
-        /[/\\]@sapper[/\\]/.test(warning.message)) ||
-    onwarn(warning);
-const dedupe = importee =>
-    importee === "svelte" || importee.startsWith("svelte/");
+  (warning.code === "CIRCULAR_DEPENDENCY" &&
+    /[/\\]@sapper[/\\]/.test(warning.message)) ||
+  onwarn(warning);
+const dedupe = (importee) =>
+  importee === "svelte" || importee.startsWith("svelte/");
 
 const postcssPlugins = (purgecss = false) => {
-    return [
-        require("postcss-import")(),
-        require("postcss-url")(),
-        require("postcss-nested"),
-        require("tailwindcss")("./tailwind.config.js"),
-        require("autoprefixer")(),
-        // Do not purge the CSS in dev mode to be able to play with classes in the browser dev-tools.
-        purgecss &&
-        require("@fullhuman/postcss-purgecss")({
-            content: ["./**/*.svelte", "./src/template.html"],
-            extractors: [
-                {
-                    extractor: PurgeSvelte,
+  return [
+    require("postcss-import")(),
+    require("postcss-url")(),
+    require("postcss-nested"),
+    require("tailwindcss")("./tailwind.config.js"),
+    require("autoprefixer")(),
+    // Do not purge the CSS in dev mode to be able to play with classes in the browser dev-tools.
+    purgecss &&
+      require("@fullhuman/postcss-purgecss")({
+        content: ["./**/*.svelte", "./src/template.html"],
+        defaultExtractor: (content) => {
+          const regExp = new RegExp(/[\w-/.:]+(?<!:)/g);
 
-                    // Specify the file extensions to include when scanning for
-                    // class names.
-                    extensions: ["svelte", "html"]
-                }
-            ],
-            // Whitelist selectors to stop Purgecss from removing them from your CSS.
-            whitelist: []
-        }),
-        !dev && require("cssnano")
-    ].filter(Boolean);
+          const matchedTokens = [];
+
+          let match = regExp.exec(content);
+          // To make sure that you do not lose any tailwind classes used in class directive.
+          // https://github.com/tailwindcss/discuss/issues/254#issuecomment-517918397
+          while (match) {
+            if (match[0].startsWith("class:")) {
+              matchedTokens.push(match[0].substring(6));
+            } else {
+              matchedTokens.push(match[0]);
+            }
+
+            match = regExp.exec(content);
+          }
+
+          return matchedTokens;
+        },
+        // Whitelist selectors to stop Purgecss from removing them from your CSS.
+        whitelist: [],
+      }),
+    !dev && require("cssnano"),
+  ].filter(Boolean);
 };
 
 const preprocess = getPreprocessor({
-    transformers: {
-        postcss: {
-            plugins: postcssPlugins() // Don't need purgecss because Svelte handle unused css for you.
-        }
-    }
+  transformers: {
+    postcss: {
+      plugins: postcssPlugins(), // Don't need purgecss because Svelte handle unused css for you.
+    },
+  },
 });
 
 export default {
-    client: {
-        input: config.client.input(),
-        output: config.client.output(),
-        plugins: [
-            replace({
-                "process.browser": true,
-                "process.env.NODE_ENV": JSON.stringify(mode)
-            }),
-            svelte({
-                dev,
-                hydratable: true,
-                emitCss: true,
-                preprocess
-            }),
-            resolve({
-                browser: true,
-                dedupe
-            }),
-            commonjs(),
+  client: {
+    input: config.client.input(),
+    output: config.client.output(),
+    plugins: [
+      replace({
+        "process.browser": true,
+        "process.env.NODE_ENV": JSON.stringify(mode),
+      }),
+      svelte({
+        dev,
+        hydratable: true,
+        emitCss: true,
+        preprocess,
+      }),
+      resolve({
+        browser: true,
+        dedupe,
+      }),
+      commonjs(),
 
-            legacy &&
-            babel({
-                extensions: [".js", ".mjs", ".html", ".svelte"],
-                runtimeHelpers: true,
-                exclude: ["node_modules/@babel/**"],
-                presets: [
-                    [
-                        "@babel/preset-env",
-                        {
-                            targets: "> 0.25%, not dead"
-                        }
-                    ]
-                ],
-                plugins: [
-                    "@babel/plugin-syntax-dynamic-import",
-                    [
-                        "@babel/plugin-transform-runtime",
-                        {
-                            useESModules: true
-                        }
-                    ]
-                ]
-            }),
+      legacy &&
+        babel({
+          extensions: [".js", ".mjs", ".html", ".svelte"],
+          runtimeHelpers: true,
+          exclude: ["node_modules/@babel/**"],
+          presets: [
+            [
+              "@babel/preset-env",
+              {
+                targets: "> 0.25%, not dead",
+              },
+            ],
+          ],
+          plugins: [
+            "@babel/plugin-syntax-dynamic-import",
+            [
+              "@babel/plugin-transform-runtime",
+              {
+                useESModules: true,
+              },
+            ],
+          ],
+        }),
 
-            !dev &&
-            terser({
-                module: true
-            })
-        ],
-        onwarn
-    },
+      !dev &&
+        terser({
+          module: true,
+        }),
+    ],
+    onwarn,
+  },
 
-    server: {
-        input: config.server.input(),
-        output: config.server.output(),
-        plugins: [
-            replace({
-                "process.browser": false,
-                "process.env.NODE_ENV": JSON.stringify(mode)
-            }),
-            svelte({
-                generate: "ssr",
-                dev,
-                preprocess
-            }),
-            resolve({
-                dedupe
-            }),
-            commonjs(),
-            postcss({
-                plugins: postcssPlugins(!dev),
-                extract: path.resolve(__dirname, "./static/global.css")
-            })
-        ],
-        external: Object.keys(pkg.dependencies).concat(
-            require("module").builtinModules ||
-            Object.keys(process.binding("natives"))
-        ),
-        onwarn
-    }
+  server: {
+    input: config.server.input(),
+    output: config.server.output(),
+    plugins: [
+      replace({
+        "process.browser": false,
+        "process.env.NODE_ENV": JSON.stringify(mode),
+      }),
+      svelte({
+        generate: "ssr",
+        dev,
+        preprocess,
+      }),
+      resolve({
+        dedupe,
+      }),
+      commonjs(),
+      postcss({
+        plugins: postcssPlugins(!dev),
+        extract: path.resolve(__dirname, "./static/global.css"),
+      }),
+    ],
+    external: Object.keys(pkg.dependencies).concat(
+      require("module").builtinModules ||
+        Object.keys(process.binding("natives"))
+    ),
+    onwarn,
+  },
 
-    // serviceworker: {
-    //     input: config.serviceworker.input(),
-    //     output: config.serviceworker.output(),
-    //     plugins: [
-    //         resolve(),
-    //         replace({
-    //             "process.browser": true,
-    //             "process.env.NODE_ENV": JSON.stringify(mode)
-    //         }),
-    //         commonjs(),
-    //         !dev && terser()
-    //     ],
-    //     onwarn
-    // }
+  serviceworker: {
+    input: config.serviceworker.input(),
+    output: config.serviceworker.output(),
+    plugins: [
+      resolve(),
+      replace({
+        "process.browser": true,
+        "process.env.NODE_ENV": JSON.stringify(mode),
+      }),
+      commonjs(),
+      !dev && terser(),
+    ],
+    onwarn,
+  },
 };