feat(plugin-docsearch): add injectStyles option (close #948) (#1208)

Co-authored-by: meteorlxy <meteor.lxy@foxmail.com>
vuepress · Dec 28, 2022 · 34fb6c2 · 34fb6c2
1 parent 941b2fe
commit 34fb6c2
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 4 deletions.
diff --git a/docs/reference/plugin/docsearch.md b/docs/reference/plugin/docsearch.md
@@ -316,6 +316,20 @@ export default {
 - Also see:
   - [Guide > I18n](../../guide/i18n.md)
 
+### injectStyles
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Whether to inject the default styles of DocSearch or not.
+
+  If you think the default styles of DocSearch is not compatible with your site, you can try to override the default styles, or set this option to `false` to totally exclude the default styles.
+
+  When this option is disabled, you need to import your own styles for DocSearch. Also notice that all styles customization in [Styles](#styles) section would be unavailable.
+
 ## Styles
 
 You can customize styles via CSS variables that provided by [@docsearch/css](https://docsearch.algolia.com/docs/styling):

diff --git a/docs/zh/reference/plugin/docsearch.md b/docs/zh/reference/plugin/docsearch.md
@@ -315,6 +315,20 @@ export default {
 - 参考：
   - [指南 > 多语言支持](../../guide/i18n.md)
 
+### injectStyles
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否注入 DocSearch 的默认样式。
+
+  如果你认为 DocSearch 的默认样式和你的站点不兼容，你可以尝试覆盖默认样式，或者将该选项设置为 `false` 来完全移除默认样式。
+
+  当该选项被禁用时，你需要为 DocSearch 引入你自己的样式。同时要注意，你也无法再使用 [样式](#样式) 章节中提到的样式自定义能力。
+
 ## 样式
 
 你可以通过 [@docsearch/css](https://docsearch.algolia.com/docs/styling) 提供的 CSS 变量来自定义样式：

diff --git a/ecosystem/plugin-docsearch/src/client/components/Docsearch.ts b/ecosystem/plugin-docsearch/src/client/components/Docsearch.ts
@@ -6,8 +6,12 @@ import type { PropType } from 'vue'
 import type { DocsearchOptions } from '../../shared/index.js'
 import { useDocsearchShim } from '../composables/index.js'
 
-import '@docsearch/css'
-import '../styles/docsearch.css'
+declare const __DOCSEARCH_INJECT_STYLES__: boolean
+
+if (__DOCSEARCH_INJECT_STYLES__) {
+  import('@docsearch/css')
+  import('../styles/docsearch.css')
+}
 
 export const Docsearch = defineComponent({
   name: 'Docsearch',

diff --git a/ecosystem/plugin-docsearch/src/client/shims.d.ts b/ecosystem/plugin-docsearch/src/client/shims.d.ts
@@ -0,0 +1,7 @@
+declare module '@docsearch/css' {
+  export {}
+}
+
+declare module '*.css' {
+  export {}
+}
diff --git a/ecosystem/plugin-docsearch/src/node/docsearchPlugin.ts b/ecosystem/plugin-docsearch/src/node/docsearchPlugin.ts
@@ -4,14 +4,20 @@ import type { DocsearchOptions } from '../shared/index.js'
 
 const __dirname = getDirname(import.meta.url)
 
-export type DocsearchPluginOptions = DocsearchOptions
+export interface DocsearchPluginOptions extends DocsearchOptions {
+  injectStyles?: boolean
+}
 
-export const docsearchPlugin = (options: DocsearchPluginOptions): Plugin => ({
+export const docsearchPlugin = ({
+  injectStyles = true,
+  ...options
+}: DocsearchPluginOptions): Plugin => ({
   name: '@vuepress/plugin-docsearch',
 
   clientConfigFile: path.resolve(__dirname, '../client/config.js'),
 
   define: {
     __DOCSEARCH_OPTIONS__: options,
+    __DOCSEARCH_INJECT_STYLES__: injectStyles,
   },
 })