diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index f285d3ce..02d7f187 100644
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@@ -18,11 +18,11 @@ VitePress can be used on its own, or be installed into an existing project. In b
::: code-group
```sh [npm]
-$ npm install -D vitepress
+$ npm add -D vitepress
```
```sh [pnpm]
-$ pnpm add -D vitepress@latest
+$ pnpm add -D vitepress
```
```sh [yarn]
diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
index 3b197e4b..89c516c9 100644
--- a/docs/guide/markdown.md
+++ b/docs/guide/markdown.md
@@ -222,29 +222,32 @@ Wraps in a
::: details
-- Install required deps with your preferred package manager:
+- Install `postcss` with your preferred package manager:
```sh
- $ npm install -D postcss postcss-prefix-selector
+ $ npm add -D postcss
```
-- Create a file named `docs/.postcssrc.cjs` and add this to it:
+- Create a file named `docs/postcss.config.mjs` and add this to it:
```js
- module.exports = {
+ import { postcssIsolateStyles } from 'vitepress'
+
+ export default {
plugins: {
- 'postcss-prefix-selector': {
- prefix: ':not(:where(.vp-raw *))',
- includeFiles: [/vp-doc\.css/],
- transform(prefix, _selector) {
- const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
- return selector + prefix + pseudo
- }
- }
+ postcssIsolateStyles()
}
}
```
+ It uses [`postcss-prefix-selector`](https://github.com/postcss/postcss-load-config) under the hood. You can pass its options like this:
+
+ ```js
+ postcssIsolateStyles({
+ includeFiles: [/vp-doc\.css/] // defaults to /base\.css/
+ })
+ ```
+
:::
## Syntax Highlighting in Code Blocks
diff --git a/package.json b/package.json
index bccba26a..71f04480 100644
--- a/package.json
+++ b/package.json
@@ -163,6 +163,7 @@
"pkg-dir": "^7.0.0",
"playwright-chromium": "^1.37.1",
"polka": "1.0.0-next.22",
+ "postcss-prefix-selector": "^1.16.0",
"prettier": "^3.0.2",
"prompts": "^2.4.2",
"punycode": "^2.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a783ef3a..c345ab9c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -225,6 +225,9 @@ importers:
polka:
specifier: 1.0.0-next.22
version: 1.0.0-next.22
+ postcss-prefix-selector:
+ specifier: ^1.16.0
+ version: 1.16.0(postcss@8.4.28)
prettier:
specifier: ^3.0.2
version: 3.0.2
@@ -3811,6 +3814,14 @@ packages:
trouter: 3.2.1
dev: true
+ /postcss-prefix-selector@1.16.0(postcss@8.4.28):
+ resolution: {integrity: sha512-rdVMIi7Q4B0XbXqNUEI+Z4E+pueiu/CS5E6vRCQommzdQ/sgsS4dK42U7GX8oJR+TJOtT+Qv3GkNo6iijUMp3Q==}
+ peerDependencies:
+ postcss: '>4 <9'
+ dependencies:
+ postcss: 8.4.28
+ dev: true
+
/postcss@8.4.28:
resolution: {integrity: sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==}
engines: {node: ^10 || ^12 || >=14}
diff --git a/src/node/index.ts b/src/node/index.ts
index 35c3a912..17efe1f2 100644
--- a/src/node/index.ts
+++ b/src/node/index.ts
@@ -5,6 +5,7 @@ export * from './build/build'
export * from './serve/serve'
export * from './init/init'
export * from './contentLoader'
+export * from './postcss'
export { defineLoader, type LoaderModule } from './plugins/staticDataPlugin'
export { loadEnv } from 'vite'
diff --git a/src/node/postcss/index.ts b/src/node/postcss/index.ts
new file mode 100644
index 00000000..cc258dae
--- /dev/null
+++ b/src/node/postcss/index.ts
@@ -0,0 +1,29 @@
+// @ts-ignore
+import postcssPrefixSelector from 'postcss-prefix-selector'
+
+export function postcssIsolateStyles(options: Options = {}) {
+ if (options.enable === false) return false
+ return postcssPrefixSelector({
+ prefix: ':not(:where(.vp-raw, .vp-raw *))',
+ includeFiles: [/base\.css/],
+ transform(prefix, _selector) {
+ const [selector, pseudo = ''] = _selector.split(/:\S*$/)
+ return selector + prefix + pseudo
+ },
+ ...options
+ } satisfies Omit) as (root: any) => void
+}
+
+interface Options {
+ enable?: boolean
+ prefix?: string
+ exclude?: (string | RegExp)[]
+ ignoreFiles?: (string | RegExp)[]
+ includeFiles?: (string | RegExp)[]
+ transform?: (
+ prefix: string,
+ selector: string,
+ prefixedSelector: string,
+ file: string
+ ) => string
+}