\r\n title: Feature A\r\n details: Lorem ipsum dolor sit amet, consectetur adipiscing elit\r\n```\r\n\r\nCheck the feature icon type\r\n```ts\r\ntype FeatureIcon =\r\n | string\r\n | { src: string; alt?: string; width?: string; height: string }\r\n | {\r\n light: string\r\n dark: string\r\n alt?: string\r\n width?: string\r\n height: string\r\n }\r\n```\r\n\r\nI refer to the render logic, use `v-html` render the icon.\r\nDisplay well in `dev` environment, but shows errors in `prod` environment.\r\n\r\n| dev | build |\r\n| ----------- | ----------- |\r\n|  |  |\r\n\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/github/zyyv/vitepress-unocss-issue\r\n\r\n- Display right run `pnpm dev`\r\n- Display error run `pnpm build && pnpm preview`\r\n\r\n### Expected behavior\r\n\r\nDev and build behave the same\r\n\r\n### System Info\r\n\r\n```Text\r\nlatest\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.",[2865,2868,2871],{"name":2866,"color":2867},"build","377ba8",{"name":2869,"color":2870},"has-workaround","1B4515",{"name":2872,"color":2873},"stale","ededed",4045,"vuejs","vitepress","open","SSR in dev for more consistent output in dev and prod","2025-03-02T18:08:58Z","https://github.com/vuejs/vitepress/issues/4045",0.70570743,{"description":2883,"labels":2884,"number":2889,"owner":2875,"repository":2876,"state":2877,"title":2890,"updated_at":2891,"url":2892,"score":2893},"### Describe the bug\n\nWhen using an env variable `VITE_COLOR` to change the color of a theme importing a different CSS file depending on that variable, the behavior seem to be correct during development, but not after build.\n\n### Reproduction\n\nMinimal reproducible example:\r\n\r\nhttps://github.com/Peque/vitepress-color-change\r\n\r\nThe repository has two commits:\r\n\r\n- [First commit](https://github.com/Peque/vitepress-color-change/commit/9353b5782a1aa08685fd341b5d8b2c5bd4cb92dd) is just a basic Vitepress template.\r\n- [Second commit](https://github.com/Peque/vitepress-color-change/commit/f291c8834b1f7e97fd8bf8c9105e47bb79d278cd) introduces the code to use different colors depending on the `VITE_COLOR` variable.\r\n\r\nDevelopment works as expected:\r\n\r\n- ✅ `VITE_COLOR=red npm run docs:dev` -> Red color \r\n- ✅ `VITE_COLOR=blue npm run docs:dev` -> Blue color\r\n\r\nBuilds do not work as expected when opening `http-serve`:\r\n\r\n- ✅ `VITE_COLOR=red npm run docs:build` -> Red color\r\n- ❌ `VITE_COLOR=blue npm run docs:build` -> **Red color**\n\n### Expected behavior\n\nDevelopment works as expected:\r\n\r\n- ✅ `VITE_COLOR=red npm run docs:dev` -> Red color \r\n- ✅ `VITE_COLOR=blue npm run docs:dev` -> Blue color\r\n\r\nBuilds do not work as expected when opening `http-serve`:\r\n\r\n- ✅ `VITE_COLOR=red npm run docs:build` -> Red color\r\n- ✅ `VITE_COLOR=blue npm run docs:build` -> **Blue color**\n\n### System Info\n\n```Text\nSystem:\r\n OS: Linux 6.10 Fedora Linux 39 (Container Image)\r\n CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz\r\n Memory: 9.52 GB / 15.54 GB\r\n Container: Yes\r\n Shell: 5.2.15 - /bin/bash\r\n Binaries:\r\n Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node\r\n npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm\r\n npmPackages:\r\n vitepress: ^1.3.4 => 1.3.4 \r\n```\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.",[2885,2888],{"name":2886,"color":2887},"bug: pending triage","e99695",{"name":2872,"color":2873},4222,"Inconsistent handling of env variable in dev and build","2024-10-26T17:17:17Z","https://github.com/vuejs/vitepress/issues/4222",0.7213285,{"description":2895,"labels":2896,"number":2905,"owner":2875,"repository":2876,"state":2906,"title":2907,"updated_at":2908,"url":2909,"score":2910},"### Describe the bug\n\nJust like the Vite docs, I use custom styles in the `index.md` file using `\u003Cstyle module>`. I also use custom components in which I use `\u003Cstyle scoped>`.\r\n\r\nSince I updated from version `1.0.0` to the latest one (the one in the StackBlitz), the built page's styles are broken. In the dev preview everything looks like expected.\n\n### Reproduction\n\nOpen the StackBlitz Demo with this [link](https://stackblitz.com/edit/vite-1qtmk8?file=docs%2Findex.md).\r\n\r\nIf it does not run automatically, run `npm install && npm run dev`. It should look something like this:\r\n\r\n\r\n\r\nThen run `npm run docs:build && npm run docs:preview` and it will look like this:\r\n\r\n\r\n\r\nAs you can see, the hero image and its background are different and the cards are different as well.\n\n### Expected behavior\n\nI expected the built version to look just like the dev preview (or at least very close).\n\n### System Info\n\n```Text\nSystem:\r\n OS: Windows 10 10.0.19045\r\n CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics\r\n Memory: 6.45 GB / 15.35 GB\r\n Binaries:\r\n Node: 21.2.0 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 10.5.0 - C:\\Program Files\\nodejs\\npm.CMD\r\n pnpm: 9.1.2 - ~\\AppData\\Roaming\\npm\\pnpm.CMD\r\n Browsers:\r\n Edge: Chromium (127.0.2651.74)\r\n Internet Explorer: 11.0.19041.4355\r\n npmPackages:\r\n vitepress: ^1.3.1 => 1.3.1\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.",[2897,2900,2901,2904],{"name":2898,"color":2899},"help wanted","008672",{"name":2866,"color":2867},{"name":2902,"color":2903},"upstream","BF29ED",{"name":2872,"color":2873},4098,"closed","Styling discrepancies between dev and build","2025-01-05T04:42:47Z","https://github.com/vuejs/vitepress/issues/4098",0.66264105,{"description":2912,"labels":2913,"number":2915,"owner":2875,"repository":2876,"state":2906,"title":2916,"updated_at":2917,"url":2918,"score":2919},"### Describe the bug\n\nI'm using different fonts for the default theme, but the font files (`fonts.css`) are still packaged into the build product.\r\n\r\n\n\n### Reproduction\n\naccording official doc [https://vitepress.dev/guide/extending-default-theme#using-different-fonts](https://vitepress.dev/guide/extending-default-theme#using-different-fonts):\r\n\r\n``` js\r\n// .vitepress/theme/index.js\r\nimport DefaultTheme from 'vitepress/theme-without-fonts'\r\nimport './my-fonts.css'\r\n\r\nexport default DefaultTheme\r\n```\n\n### Expected behavior\n\nWhen using different fonts, the default font will not enter the production environment.\n\n### System Info\n\n```Text\n.\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.",[2914],{"name":2886,"color":2887},3411,"Using different fonts, but **Inter** fonts are still packaged in production","2024-01-13T00:04:50Z","https://github.com/vuejs/vitepress/issues/3411",0.6737304,{"description":2921,"labels":2922,"number":2924,"owner":2875,"repository":2876,"state":2906,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Describe the bug\n\nwhen I bump vitepress to `1.0.0-rc.26`, I found the styles in `\u003Cstyle>` were not included in the packaged product.\r\n\r\n The style here is normal in the development environment, but it doesn't work after packing.\r\n\r\n``` vue\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"box\">Preview after packing, The text color is expected to be red\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\r\n.box {\r\n color: red;\r\n}\r\n\u003C/style>\r\n``` \r\n\r\nI try downgraded to `1.0.0-rc.25`, it was normal.\n\n### Reproduction\n\nreproduction link:\r\n[https://stackblitz.com/edit/vite-xmetfv?file=docs%2FDemo.vue](https://stackblitz.com/edit/vite-xmetfv?file=docs%2FDemo.vue)\r\n\n\n### Expected behavior\n\nPackaged for preview and styles can also take effect\r\n\r\nrelated documents:\r\n[https://vitepress.dev/guide/using-vue#script-and-style](https://vitepress.dev/guide/using-vue#script-and-style)\n\n### System Info\n\n```Text\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)\r\n CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics\r\n Memory: 6.16 GB / 7.44 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node\r\n Yarn: 1.22.19 - /mnt/c/Program Files/nodejs/yarn\r\n npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm\r\n pnpm: 8.10.5 - ~/.nvm/versions/node/v18.18.2/bin/pnpm\r\n bun: 1.0.12 - ~/.nvm/versions/node/v18.18.2/bin/bun\r\n npmPackages:\r\n vitepress: 1.0.0-rc.26 => 1.0.0-rc.26\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.",[2923],{"name":2866,"color":2867},3216,"Using SFC in markdown, styles in the `\u003Cstyle>` tag is not effect.","2023-11-25T00:04:34Z","https://github.com/vuejs/vitepress/issues/3216",0.7037517,{"description":2930,"labels":2931,"number":2933,"owner":2875,"repository":2876,"state":2906,"title":2934,"updated_at":2935,"url":2936,"score":2937},"### Describe the bug\n\nIt occur unexpected css style when I use doc theme,just CSS pollution cause the label selector `.vp-doc table`.\r\n\r\n\n\n### Reproduction\n\n```txt\r\n---\r\nlayout: doc\r\n---\r\n\r\n\u003Cscript setup>\r\n\r\nimport {ElTable} from 'element-plus'\r\n\u003Cscript>\r\n\r\n\u003Cel-table>\u003C/el-table>\r\n\r\n```\r\n`el-table` style is unexpected because `.vp-doc table` `.vp-doc td` `.vp-doc tr` selectors.\n\n### Expected behavior\n\n`el-table` or other html tags have browser's default style in doc theme.\n\n### System Info\n\n```Text\nSystem:\r\n OS: Windows 10 10.0.22621\r\n CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H\r\n Memory: 1.49 GB / 15.73 GB\r\n Binaries:\r\n Node: 18.15.0 - D:\\Program Files (x86)\\node\\18\\node.EXE\r\n Yarn: 1.22.19 - D:\\Program Files (x86)\\node\\18\\yarn.CMD\r\n npm: 9.5.0 - D:\\Program Files (x86)\\node\\18\\npm.CMD\r\n pnpm: 8.6.8 - D:\\Program Files (x86)\\node\\18\\pnpm.CMD\r\n Browsers:\r\n Edge: Spartan (44.22621.2283.0), Chromium (114.0.1823.67)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n vitepress: ^1.0.0-rc.13 => 1.0.0-rc.13\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.",[2932],{"name":2886,"color":2887},3077,"unexpected css style","2023-10-25T00:05:22Z","https://github.com/vuejs/vitepress/issues/3077",0.70546514,{"description":2939,"labels":2940,"number":2941,"owner":2875,"repository":2876,"state":2906,"title":2942,"updated_at":2943,"url":2944,"score":2945},"### Is your feature request related to a problem? Please describe.\n\nNoticing that there is a distinct difference from vue press custom containers to that of vite's\r\n\r\n## vue press\r\n\u003Cimg width=\"784\" alt=\"Screenshot 2022-08-11 at 3 38 20 PM\" src=\"https://user-images.githubusercontent.com/1858427/184088154-0c171530-b416-4fab-96a9-4f587e8220dc.png\">\r\n\r\n\r\n## vite press\r\n\u003Cimg width=\"734\" alt=\"Screenshot 2022-08-11 at 3 38 30 PM\" src=\"https://user-images.githubusercontent.com/1858427/184088178-03b9564b-e9b9-4ba6-a197-f64c3249a923.png\">\r\n\r\n\n\n### Describe the solution you'd like\n\nI know that the color can be overridden in https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css\r\n\r\nbut, the for the style difference for this line \r\n\u003Cimg width=\"76\" alt=\"Screenshot 2022-08-11 at 3 53 52 PM\" src=\"https://user-images.githubusercontent.com/1858427/184088784-33fdfeaf-115e-47bc-b43d-be355ef67f7d.png\">\r\n\r\nis it possible to expose an option to be configured, like\r\n```\r\nthemeConfig : {\r\n logo: xxx,\r\n customContainer: {\r\n withLeftBorder: true,\r\n cornerRadius: \"6px\"\r\n }\r\n}\r\n```\r\n\r\nEffect:\r\n\u003Cimg width=\"223\" alt=\"Screenshot 2022-08-11 at 4 03 14 PM\" src=\"https://user-images.githubusercontent.com/1858427/184090149-ca7ddd87-d574-4a4a-8704-d594588f7f3c.png\">\r\n\r\n\n\n### Describe alternatives you've considered\n\nAlternatively,\r\nthese two properties can be exposed in css variables: https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css\r\n\r\nsomething like: \r\n```\r\n//add corner radius\r\n--vp-custom-block-border-radius: 6px;\r\n//remove border, add lable left border\r\n--vp-custom-block-info-border: none;\r\n--vp-custom-block-info-left-border: var(--vp-c-green-darker);\r\n--vp-custom-block-info-left-border-width: 5px \r\n\r\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] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],1157,"custom containers style option","2023-01-21T14:28:46Z","https://github.com/vuejs/vitepress/issues/1157",0.7065179,{"description":2947,"labels":2948,"number":2949,"owner":2875,"repository":2876,"state":2906,"title":2950,"updated_at":2951,"url":2952,"score":2953},"We've started the ~bland~ brand new default theme development in `next` branch. Due to major update to the theme components, many open issues related to theme will be handled in this `next` branch.\r\n\r\n`1.0.0-alpha`'s main objective is to make Vite 3 docs site work as a benchmark. Any feature request or issues which is not directly related to Vite 3 docs will be handled in `1.0.0` milestone.\r\n\r\nWe hope to release `1.0.0-alpha` sometime soon so that users can try out the new theme. Here is the [discussion thread in Vite](https://github.com/vitejs/vite/discussions/8262) describing whole todos.\r\n\r\nSee all the list of issues stacking up at:\r\n\r\n`1.0.0-alpha`: https://github.com/vuejs/vitepress/projects/1\r\n`1.0.0`: https://github.com/vuejs/vitepress/milestone/1",[],626,"NOTICE: VitePress Next Development is in progress","2023-01-21T14:34:21Z","https://github.com/vuejs/vitepress/issues/626",0.715102,{"description":2955,"labels":2956,"number":2958,"owner":2875,"repository":2876,"state":2906,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### 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.",[2957],{"name":2886,"color":2887},2868,"`postcssIsolateStyles` mess up original styles","2023-09-05T00:04:08Z","https://github.com/vuejs/vitepress/issues/2868",0.7189422,{"description":2964,"labels":2965,"number":2969,"owner":2875,"repository":2876,"state":2906,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### Describe the bug\n\nUsing the browser with resolution 1280px, there is an media query overlap for the toc \"On this page\" section.\r\n\r\nThe section is shown above and aside.\r\n\r\n\r\n\n\n### Reproduction\n\nSize browser to 1280px\n\n### Expected behavior\n\nThe top \"On this page\" section is hidden while shown aside.\n\n### System Info\n\n```sh\nSystem:\r\n OS: Windows 10 10.0.22621\r\n CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor\r\n Memory: 5.87 GB / 15.95 GB\r\n Binaries:\r\n Node: 18.16.1 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 9.5.1 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Chrome: 115.0.5790.99\r\n Edge: Spartan (44.22621.1992.0), Chromium (114.0.1823.82)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n vitepress: ^1.0.0-beta.5 => 1.0.0-beta.5\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.",[2966],{"name":2967,"color":2968},"theme","0754FB",2668,"Theme cosmetic issue showing \"On this page\" twice at 1280px breakpoint","2023-07-30T00:04:46Z","https://github.com/vuejs/vitepress/issues/2668",0.72188455,["Reactive",2975],{},["Set"],["ShallowReactive",2978],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ffUWIe_MoY-_piKuFiqgY8AmpBApg5UDAShSgEwMi20M":-1},"/vuejs/vitepress/2150"]