\n\n### Expected behavior\n\nI hope to use SVG and other methods instead of using masks to display icons, which can avoid frequent redrawing\n\n### System Info\n\n```Text\n\"vitepress\": \"^1.6.4\",\n```\n\n### Additional context\n\n\u003Cimg width=\"2559\" height=\"1042\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/39db5990-f3ee-47bb-8bcf-49272a1918f4\" />\n\n### Validations\n\n- [x] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [x] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [x] Read the [docs](https://vitepress.dev).\n- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3181],{"name":3146,"color":3147},4917,"Bug: Frequent triggering of redrawing of navigation bar icons","2025-08-21T09:14:41Z","https://github.com/vuejs/vitepress/issues/4917",0.7062221,{"description":3188,"labels":3189,"number":3191,"owner":3149,"repository":3150,"state":3192,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### Describe the bug\n\nHover state on link in `.vp-doc` is always matched, seems `:hover` is being truncated.\r\n\r\n\r\nCopy button in code block is also messed up.\r\n\r\n\r\n\r\nTable style messed up as well.\r\n\r\nI guess there's a lot more...\n\n### Reproduction\n\nIn `config.ts`:\r\n```ts\r\nexport default defineConfig({\r\n vite: {\r\n css: {\r\n postcss: {\r\n plugins: [\r\n postcssIsolateStyles({\r\n includeFiles: [/vp-doc\\.css/]\r\n }),\r\n ],\r\n },\r\n }\r\n})\r\n```\r\n\r\nI would write one if required, but since my above example is pretty easy to reproduce, I'll leave it blank here.\n\n### Expected behavior\n\nStyle not messed up\r\n\r\n (NOTE: it's working properly if I use `postcss-prefix-selector` straight away instead of using the one from vitepress package)\n\n### System Info\n\n```sh\nSystem:\r\n OS: Windows 10 10.0.19045\r\n CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900K @ 3.50GHz\r\n Memory: 38.35 GB / 63.84 GB\r\n Binaries:\r\n Node: 18.16.0 - C:\\NodeJS\\node.EXE\r\n Yarn: 1.22.19 - C:\\NodeJS\\yarn.CMD\r\n npm: 9.8.1 - C:\\NodeJS\\npm.CMD\r\n pnpm: 8.7.0 - C:\\NodeJS\\pnpm.CMD\r\n Browsers:\r\n Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.62)\r\n Internet Explorer: 11.0.19041.1566\r\n npmPackages:\r\n vitepress: ^1.0.0-rc.9 => 1.0.0-rc.9\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3190],{"name":3146,"color":3147},2868,"closed","`postcssIsolateStyles` mess up original styles","2023-09-05T00:04:08Z","https://github.com/vuejs/vitepress/issues/2868",0.655907,{"description":3198,"labels":3199,"number":3201,"owner":3149,"repository":3150,"state":3192,"title":3202,"updated_at":3203,"url":3204,"score":3205},"### Describe the bug\r\n\r\n\r\n`config.ts`\r\n```ts\r\nexport default defineConfig({\r\n vite: {\r\n css: {\r\n postcss: {\r\n plugins: [\r\n postcssIsolateStyles({\r\n includeFiles: [/vp-doc\\.css/]\r\n }),\r\n ],\r\n },\r\n }\r\n})\r\n```\r\n\r\n### Reproduction\r\n\r\nSee above\r\n\r\n### Expected behavior\r\n\r\nNo error\r\n\r\n### System Info\r\n\r\n```sh\r\nSystem:\r\n OS: Windows 10 10.0.19045\r\n CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900K @ 3.50GHz\r\n Memory: 38.35 GB / 63.84 GB\r\n Binaries:\r\n Node: 18.16.0 - C:\\NodeJS\\node.EXE\r\n Yarn: 1.22.19 - C:\\NodeJS\\yarn.CMD\r\n npm: 9.8.1 - C:\\NodeJS\\npm.CMD\r\n pnpm: 8.7.0 - C:\\NodeJS\\pnpm.CMD\r\n Browsers:\r\n Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.62)\r\n Internet Explorer: 11.0.19041.1566\r\n npmPackages:\r\n vitepress: ^1.0.0-rc.9 => 1.0.0-rc.9\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3200],{"name":3146,"color":3147},2867,"`postcssIsolateStyles` type issue with inline postcss plugin config in `vite` configs","2023-09-05T00:04:09Z","https://github.com/vuejs/vitepress/issues/2867",0.6863881,{"description":3207,"labels":3208,"number":3209,"owner":3149,"repository":3150,"state":3192,"title":3210,"updated_at":3211,"url":3212,"score":3213},"### Describe the bug\n\ncontent 部分没有 overflow:hidden 导致很长的滚动条(也有可能是我的图片太大?)\r\n\r\n[github here](https://github.com/Mt-Youya/DeepLearning-500-questions)\r\n\r\n[site here](https://deeplearning-500-questions.pages.dev/zh-cn/ch02_%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%9F%BA%E7%A1%80/%E7%AC%AC%E4%BA%8C%E7%AB%A0_%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%9F%BA%E7%A1%80.html)\n\n### Reproduction\n\n我fork 别人的仓库,不是我自己写的, 它原本用的是 docsify 我想提个pr用vitepress 试试,然后就出现了这个bug\n\n### Expected behavior\n\n没有滚动条\n\n### System Info\n\n```Text\nVersion 122.0.6261.112 (Official Build) (64-bit)\r\nwin11\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[],3644,"CSS bug","2024-03-19T00:07:30Z","https://github.com/vuejs/vitepress/issues/3644",0.70189875,{"description":3215,"labels":3216,"number":3220,"owner":3149,"repository":3150,"state":3192,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### Describe the bug\n\nWhen I customize a link component and introduce it into vitepress, the `vp-doc` class generates a style override on my custom style, causing my style to not display properly:\r\n\r\nI've tried `vp-raw` for style isolation, but it still doesn't display my custom styles properly\r\n\r\nI don't know how to solve this style override problem, which has been bothering me for a long time\n\n### Reproduction\n\nThis is my custom link component:\r\n```tsx\r\nimport { defineComponent, PropType, ref } from \"vue\";\r\nimport \"uno.css\";\r\n\r\nexport type IType = 'default' | 'primary' | 'success' | 'warning' | 'danger'| 'info'\r\nexport type IColor = 'black' | 'blue' | 'green' | 'yellow'| 'red' | 'gray'\r\nexport const props = {\r\n type: {\r\n type: String as PropType\u003CIType>,\r\n default: \"default\",\r\n },\r\n color: {\r\n type: String as PropType\u003CIColor>,\r\n default: \"black\",\r\n },\r\n plain: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n href: {\r\n type: String,\r\n required: true,\r\n },\r\n} as const;\r\n\r\nexport default defineComponent({\r\n name: \"CLink\",\r\n props,\r\n setup(props, { slots }) {\r\n return () => (\r\n \u003Ca\r\n class={`\r\n text-${props.plain ? props.color + \"-500\" : \"white\"}\r\n hover:text-${props.color}-400\r\n cursor-pointer\r\n text-lg\r\n hover:text-white\r\n transition duration-300 ease-in-out transform hover:scale-105\r\n mx-1\r\n decoration-none\r\n `}\r\n href={props.href} \r\n >\r\n {slots.default ? slots.default() : 'Link'}\r\n \u003C/a>\r\n ); \r\n },\r\n});\r\n```\r\n\r\nHere's my demo code from the documentation:\r\n```vue\r\n\u003Cdiv class=\"vp-raw\">\r\n \u003CCLink href=\"#\" class=\"primary\" color=\"blue\">Primary Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"success\" color=\"green\">Success Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"warning\" color=\"yellow\">Warning Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"danger\" color=\"red\">Danger Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"info\" color=\"gray\">Info Link\u003C/CLink>\r\n\u003C/div>\r\n```\r\n\r\n\r\n\n\n### Expected behavior\n\nI want to be able to display the style of my components properly, in fact I can be sure that the `vp-doc` generated style override, I delete this class by manipulating the DOM and then the style can be displayed normally, but this will make the other functions of vitepress failure, I want to be able to display the style of the component without affecting vitepress\n\n### System Info\n\n```shell\n{\r\n \"name\": \"catisol-ui\",\r\n \"version\": \"0.9.1\",\r\n \"description\": \"\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"vitest\",\r\n \"build\": \"vite build\",\r\n \"dev\": \"vite\",\r\n \"docs:dev\": \"vitepress dev docs\",\r\n \"docs:build\": \"vitepress build docs\",\r\n \"docs:serve\": \"vitepress serve docs\"\r\n },\r\n \"keywords\": [],\r\n \"author\": \"\",\r\n \"license\": \"ISC\",\r\n \"devDependencies\": {\r\n \"@iconify-json/ic\": \"1.1.4\",\r\n \"@vitejs/plugin-vue\": \"3.0.3\",\r\n \"@vitejs/plugin-vue-jsx\": \"2.0.0\",\r\n \"@vue/test-utils\": \"2.0.2\",\r\n \"happy-dom\": \"6.0.4\",\r\n \"postcss\": \"^8.4.21\",\r\n \"postcss-prefix-selector\": \"^1.16.0\",\r\n \"unocss\": \"0.45.6\",\r\n \"vite\": \"3.0.7\",\r\n \"vitepress\": \"v1.0.0-alpha.31\",\r\n \"vitest\": \"0.21.1\"\r\n },\r\n \"maintainers\": [\r\n \"isolcat\"\r\n ],\r\n \"dependencies\": {\r\n \"@unocss/vite\": \"^0.45.13\",\r\n \"vue\": \"3.2.37\"\r\n }\r\n}\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3217],{"name":3218,"color":3219},"need more info","bdbefc",1777,"vp-raw cannot isolate style conflicts generated by v-doc classes","2023-01-21T14:16:44Z","https://github.com/vuejs/vitepress/issues/1777",0.70191157,{"description":3226,"labels":3227,"number":3229,"owner":3149,"repository":3150,"state":3192,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Describe the bug\n\n### Describe the bug\n\nWhen opening a site built with VitePress in an older browser like Chrome 86, the application crashes and the console throws a `DOMException`.\n\nThe error message is: `Failed to execute 'querySelectorAll' on 'Document': '.VPDoc :where(h1,h2,h3,h4,h5,h6)' is not a valid selector.`\n\nThis is because the `:where()` CSS pseudo-class is not supported in Chrome versions prior to 88. This selector seems to be used by VitePress's theme for header links or other features, causing a fatal error in JavaScript that relies on this selector.\n\n### Additional context\n\nThis issue prevents users with older browsers or specific corporate environments (which often have locked browser versions) from accessing VitePress sites. Improving compatibility would broaden the audience for documentation sites built with VitePress. Thank you for your consideration!\n\n### Reproduction\n\n1. Build a standard VitePress site.\n2. Serve the site.\n3. Open the site in a browser with a version older than Chrome 88 (e.g., Chrome 86).\n4. Open the developer console, and the error will be visible.\n\n### Expected behavior\n\nThe site should either render correctly without errors, or at least degrade gracefully without a complete JavaScript crash. For example, the styles might not apply perfectly, but the page should remain navigable.\n\n### System Info\n\n```Text\n- **VitePress Version:** v2.0.0-alpha.9\n- **Browser:** Chrome 86 (or any other browser that doesn't support `:where()`)\n- **OS:** windows11\n- **Node Version:** nodejs22\n```\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [x] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [x] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [x] Read the [docs](https://vitepress.dev).\n- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3228],{"name":3146,"color":3147},4875,"[Bug]: In Chrome 86, a \"DOMException: Failed to execute 'querySelectorAll'\" error occurs due to unsupported ':where()' selector.","2025-08-02T05:46:21Z","https://github.com/vuejs/vitepress/issues/4875",0.7021776,{"description":3235,"labels":3236,"number":3237,"owner":3149,"repository":3150,"state":3192,"title":3238,"updated_at":3239,"url":3240,"score":3241},"\u003C!--\r\nNOTE:\r\nVitePress is still WIP, and it is not compatible with VuePress.\r\nPlease do not open issue about default theme missing features or something doesn't work like VuePress.\r\n-->\r\n\r\n**Describe the bug**\r\nI started building a custom theme and haven't imported any css to `index.js` yet. Running `vitepress build` throws an error:\r\n```\r\n$ vitepress build\r\nvitepress v0.11.4\r\nvite v2.0.0-beta.35\r\n✓ building client + server bundles...\r\n✖ rendering pages...\r\nbuild error:\r\n TypeError: Cannot read property 'fileName' of undefined\r\n at Object.renderPage (/Users/fistmenaruto/Projects/domnantas.lt/node_modules/vitepress/dist/node/build/render.js:53:61)\r\n at async Object.build (/Users/fistmenaruto/Projects/domnantas.lt/node_modules/vitepress/dist/node/build/build.js:29:17)\r\nerror Command failed with exit code 1.\r\n```\r\n\r\n`render.js:53` is trying to get `cssChunk.fileName`:\r\n```jsx\r\n\u003Clink rel=\"stylesheet\" href=\"${siteData.base}${cssChunk.fileName}\">\r\n```\r\nbut it is undefined since there are not css chunks.\r\n\r\nThe same happens if you try to import an empty .css file to `index.js`.\r\n\r\n`vitepress dev` does not throw the error.\r\n\r\n**To Reproduce**\r\nSteps to reproduce the behavior:\r\n- Create an empty custom theme as described in the docs: https://vitepress.vuejs.org/guide/customization.html#customization\r\n(notice how there are no .css imports in the docs either)\r\n- Run `vitepress build`\r\n\r\nReproduction repo: https://github.com/domnantas/domnantas.lt/tree/no-css-chunks\r\n\r\n**Expected behavior**\r\nBuild should not fail when building without css\r\n\r\n**System Info**\r\n- vitepress version: v0.11.4\r\n- vite version: v2.0.0-beta.35\r\n- Node version: v15.5.1\r\n- OS version: MacOS 11.0.1\r\n\r\n**Additional context**\r\n```js\r\n`\r\n...\r\n${cssChunk ? `\u003Clink rel=\"stylesheet\" href=\"${siteData.base}${cssChunk.fileName}\">` : \"\"}\r\n...\r\n`\r\n```\r\nwould fix this, but maybe there are better ways\r\n",[],209,"Build fails with custom theme and no css","2023-01-21T16:22:25Z","https://github.com/vuejs/vitepress/issues/209",0.70359993,["Reactive",3243],{},["Set"],["ShallowReactive",3246],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$faEgk2erziSpiCoSETw6uMHpGrF8NxB2bh8l08_y_PBE":-1},"/vuejs/vitepress/4829"]