feat(website): lazy load DocSearch styles

francoischalifour · Jul 9, 2020 · e3bc021 · e3bc021
1 parent 2c280e2
commit e3bc021
Show file tree

Hide file tree

Showing 8 changed files with 10 additions and 4 deletions.
diff --git a/packages/docsearch-css/package.json b/packages/docsearch-css/package.json
@@ -17,7 +17,7 @@
   "jsdelivr": "dist/style.css",
   "scripts": {
     "build": "yarn build:clean && yarn build:css",
-    "build:css": "mkdir dist && cp src/_variables.css dist/ && cp src/modal.css dist/ && cp src/search-button.css dist/ && cat src/*.css > dist/style.css",
+    "build:css": "mkdir dist && cp src/_variables.css dist/ && cp src/modal.css dist/ && cp src/button.css dist/ && cat src/*.css > dist/style.css",
     "build:css:watch": "chokidar src/*.css --command \"yarn build:css\"",
     "build:clean": "rm -rf ./dist",
     "watch": "concurrently \"yarn build:css:watch\""

diff --git a/packages/docsearch-css/src/search-button.css → packages/docsearch-css/src/button.css b/packages/docsearch-css/src/search-button.css → packages/docsearch-css/src/button.css
diff --git a/packages/docsearch-react/package.json b/packages/docsearch-react/package.json
@@ -11,9 +11,9 @@
   "sideEffects": false,
   "files": [
     "dist/",
+    "style/",
     "button.js",
-    "modal.js",
-    "style.js"
+    "modal.js"
   ],
   "source": "src/index.ts",
   "types": "dist/esm/index.d.ts",

diff --git a/packages/docsearch-react/style/button.js b/packages/docsearch-react/style/button.js
@@ -0,0 +1 @@
+export * from '@docsearch/css/dist/button.css';
diff --git a/packages/docsearch-react/style.js → packages/docsearch-react/style/index.js b/packages/docsearch-react/style.js → packages/docsearch-react/style/index.js
diff --git a/packages/docsearch-react/style/modal.js b/packages/docsearch-react/style/modal.js
@@ -0,0 +1 @@
+export * from '@docsearch/css/dist/modal.css';
diff --git a/packages/docsearch-react/style/variables.js b/packages/docsearch-react/style/variables.js
@@ -0,0 +1 @@
+export * from '@docsearch/css/dist/_variables.css';
diff --git a/packages/website/src/theme/SearchBar/index.js b/packages/website/src/theme/SearchBar/index.js
@@ -8,6 +8,9 @@ import Link from '@docusaurus/Link';
 import Head from '@docusaurus/Head';
 import { DocSearchButton, useDocSearchKeyboardEvents } from '@docsearch/react';
 
+import '@docsearch/react/style/variables';
+import '@docsearch/react/style/button';
+
 let DocSearchModal = null;
 
 function Hit({ hit, children }) {
@@ -57,7 +60,7 @@ function DocSearch({ indexName, appId, apiKey, searchParameters }) {
 
     return Promise.all([
       import('@docsearch/react/modal'),
-      import('@docsearch/react/style'),
+      import('@docsearch/react/style/modal'),
     ]).then(([{ DocSearchModal: Modal }]) => {
       DocSearchModal = Modal;
     });