diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md index f285d3ce8173..02d7f187fcdb 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 3b197e4bcac8..89c516c93588 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 bccba26a944c..71f044807598 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 a783ef3a72d7..c345ab9c2ebc 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 35c3a9129996..17efe1f21bf8 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 000000000000..cc258daee3ac --- /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 +}