feat(theme-doc): remove antd global style from theme-doc (#94)

* build theme-doc without antd global style

fix: #93

* chore: publish

* fix global style. extract less-plugin-remove-antd-global-styles

* chore: publish beta

* revert unnecessary changes

* chore: publish beta

* fix tsconfig

* fix package.json for merge

Author: csr632

packages/playground/use-theme-doc/package.json

@@ -23,6 +23,7 @@
     "@types/react": "^17.0.3",
     "@types/react-router-dom": "^5.1.7",
     "@vitejs/plugin-react": "^2.1.0",
+    "less-plugin-remove-antd-global-styles": "^1.0.1",
     "rimraf": "^3.0.2",
     "serve": "^14.0.1",
     "vite": "^3.1.0",

packages/playground/use-theme-doc/vite.config.ts

@@ -3,6 +3,7 @@ import * as path from 'path'
 import react from '@vitejs/plugin-react'
 import _mdx from 'vite-plugin-mdx'
 import pages from 'vite-plugin-react-pages'
+import { LessPluginRemoveAntdGlobalStyles } from 'less-plugin-remove-antd-global-styles'
 
 // vite-plugin-mdx is not esm friendly currently
 const mdx = ((_mdx as any).default || _mdx) as typeof _mdx
@@ -28,6 +29,7 @@ export default defineConfig({
           'ant-prefix': 'vp-antd',
         },
         javascriptEnabled: true,
+        plugins: [new LessPluginRemoveAntdGlobalStyles()],
       },
     },
     modules: {

packages/theme-doc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-pages-theme-doc",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "A document theme for vite-plugin-react-pages.",
   "main": "dist-cjs/index.js",
   "module": "dist/index.js",
@@ -52,6 +52,7 @@
     "github-slugger": "^1.3.0",
     "globby": "^11.0.2",
     "less": "^4.1.3",
+    "less-plugin-remove-antd-global-styles": "^1.0.2",
     "postcss": "^8.4.16",
     "prism-react-renderer": "^1.3.5",
     "rc-footer": "^0.6.6",

packages/theme-doc/rollup.config.js

@@ -2,6 +2,7 @@ import postcss from 'rollup-plugin-postcss'
 import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
+import { LessPluginRemoveAntdGlobalStyles } from 'less-plugin-remove-antd-global-styles'
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx']
 
@@ -69,6 +70,7 @@ export default {
             'ant-prefix': 'vp-antd',
           },
           javascriptEnabled: true,
+          plugins: [new LessPluginRemoveAntdGlobalStyles()],
         },
       },
       modules: {

packages/theme-doc/src/style.less

@@ -1,3 +1,17 @@
-body {
-  background: #fff;
+// take useful css normalize from antd, so that antd components rendered by this theme can display normally
+// https://github.com/ant-design/ant-design/blob/master/components/style/core/global.less
+// but don't take global style that may interfere with user's content
+
+// this is a reasonable global style
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// only apply to elements rendered by this theme
+// avoid interfering with user's content
+.vp-local-header a,
+.vp-local-sider a {
+  text-decoration: none;
 }

packages/theme-doc/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "exclude": ["./lib/**/*"],
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "module": "CommonJS",