feat: export postcssIsolateStyles for vp-raw

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]

docs/guide/markdown.md

@@ -222,29 +222,32 @@ Wraps in a <div class="vp-raw">
 
 ::: 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': {
+      postcssIsolateStyles()
-        prefix: ':not(:where(.vp-raw *))',
-        includeFiles: [/vp-doc\.css/],
-        transform(prefix, _selector) {
-          const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
-          return selector + prefix + pseudo
-        }
-      }
     }
   }
   ```
 
+  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

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",

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}

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'
 

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<Options, 'enable'>) 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
+}