refactor(): use css modules

jest.config.js

@@ -8,6 +8,9 @@ module.exports = {
   collectCoverageFrom: ["src/**/*.{ts,tsx,js,jsx}"],
   // setupFilesAfterEnv: ["<rootDir>/__jest__/setup.js"],
   // snapshotSerializers: ["enzyme-to-json/serializer"],
+  moduleNameMapper: {
+    "\\.module\\.css$": "identity-obj-proxy",
+  },
   // Ref https://github.com/facebook/jest/issues/2070#issuecomment-431706685
   // Todo(steve): remove next line when issue fixed.
   modulePathIgnorePatterns: ["<rootDir>/.*/__mocks__"],

package.json

@@ -27,6 +27,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@docusaurus/utils": "^2.0.0-alpha.66",
     "@hapi/joi": "^17.1.1",
     "autocomplete.js": "^0.38.0",
     "cheerio": "^1.0.0-rc.3",
@@ -43,7 +44,6 @@
     "@babel/preset-react": "^7.12.1",
     "@babel/preset-typescript": "^7.12.1",
     "@docusaurus/module-type-aliases": "^2.0.0-alpha.66",
-    "@docusaurus/utils": "^2.0.0-alpha.66",
     "@tsconfig/docusaurus": "^1.0.2",
     "@types/debug": "^4.1.5",
     "@types/enzyme": "^3.10.7",
@@ -71,6 +71,7 @@
     "eslint-plugin-react": "^7.21.4",
     "eslint-plugin-react-hooks": "^4.1.2",
     "husky": "^4.3.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^26.5.3",
     "lint-staged": "^10.4.1",
     "nodejieba": "^2.4.1",
@@ -80,7 +81,6 @@
     "typescript": "^4.0.3"
   },
   "peerDependencies": {
-    "@docusaurus/utils": "^2.0.0-alpha.66",
     "nodejieba": "^2.4.1"
   }
 }

src/client/theme/LoadingRing/LoadingRing.module.css

@@ -0,0 +1,47 @@
+/* https://loading.io/css/ */
+.loadingRing {
+  display: inline-block;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  opacity: var(--search-local-loading-icon-opacity, 0.5);
+}
+
+.loadingRing div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+  border: 2px solid
+    var(--search-load-loading-icon-color, var(--ifm-navbar-search-input-color));
+  border-radius: 50%;
+  animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: var(
+      --search-load-loading-icon-color,
+      var(--ifm-navbar-search-input-color)
+    )
+    transparent transparent transparent;
+}
+
+.loadingRing div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.loadingRing div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.loadingRing div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes loading-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/client/theme/LoadingRing/LoadingRing.tsx

@@ -0,0 +1,19 @@
+// istanbul ignore file
+import React from "react";
+import clsx from "clsx";
+import styles from "./LoadingRing.module.css";
+
+export default function LoadingRing({
+  className,
+}: {
+  className?: string;
+}): React.ReactElement {
+  return (
+    <div className={clsx(styles.loadingRing, className)}>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  );
+}

src/client/theme/SearchBar/EmptyTemplate.ts

@@ -0,0 +1,9 @@
+import { iconNoResults } from "./icons";
+import styles from "./SearchBar.module.css";
+
+export function EmptyTemplate(): string {
+  if (process.env.NODE_ENV === "production") {
+    return `<span class="${styles.noResults}"><span class="${styles.noResultsIcon}">${iconNoResults}</span><span>No results.</span></span>`;
+  }
+  return `<span class="${styles.noResults}">⚠️ The search index is only available when you run docusaurus build!</span>`;
+}