vitepress will cause component styles to be lost

[qianmoQ]

Describe the bug

My calling method is

::: raw

<CodeRunner title="Disabled">
    <ShadcnInput placeholder="Input" v-model="input" disabled />
</CodeRunner>

:::

The expected rendering result is

The result of rendering in vitepress is

Causes disabled styles to be lost

Reproduction

The component reference address that caused the problem
https://view-shadcn-ui.devlive.org/components/form/input.html#disabled

Expected behavior

None

System Info

None

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Have you added the postcss plugin to handle ::raw? https://vitepress.dev/guide/markdown#raw

[qianmoQ]

Have you added the postcss plugin to handle ::raw? https://vitepress.dev/guide/markdown#raw

Already added

[brc-dd]

It's an issue with that component I guess. VitePress' styles are not conflicting.

If you keep v-model:

If you remove v-model:

---

If you check src/ui/input/ShadcnInput.vue, the disabled prop there doesn't affect styles. It only adds disabled attribute to input element.

[qianmoQ]

Open: https://playground.view-shadcn-ui.devlive.org/
Input Code:

<template>
  <ShadcnAlert>
    <p>Welcome to the View Shadcn UI Playground</p>
    <p>欢迎来到 View Shadcn UI 演练场</p>
  </ShadcnAlert>
  <br />
  <ShadcnInput placeholder="Input" v-model="input" disabled />
</template>

<script setup lang="ts">
</script>

The effect can be rendered, but the component effect is lost when used in the vitepress document

[brc-dd]

It's because of the reset styles in vitepress. It's adding background-color: transparent to input. includeFiles: [/vp-doc\.css/, /base\.css/] should have worked but is not working in dev for some reason (works fine if you do pnpm docs:build && pnpm docs:serve). I'm taking a look.

[brc-dd]

Re-installing vitepress in your repo seems to work fine. Can you try adding /base\.css/ thing in your postcss config and remove pnpm-lock.yaml and re-run pnpm i && pnpm docs:dev? It most likely was some postcss or vite regression 👀

[qianmoQ]

After reinstalling, the same problem

[brc-dd]

Did you remove node_modules and pnpm lock? And added base.css to postcss config?

It's appearing like this to me:

It's same as what's shown on the playground:

[qianmoQ]

Did you remove node_modules and pnpm lock? And added base.css to postcss config?

It's appearing like this to me:

It's same as what's shown on the playground:

How to add base.css and postcss? Where to add them?

[brc-dd]

update docs/postcss.config.mjs file to this in your repo:

import { postcssIsolateStyles } from 'vitepress'

export default {
    plugins: [
        postcssIsolateStyles({
            includeFiles: [/vp-doc\.css/, /base\.css/]
        })
    ]
}

[qianmoQ]

Please see https://playground.view-shadcn-ui.devlive.org/?codeKey=code-editor-search

Executing Command + F (on mac) in the editor still affects my position style

The correct one is

[brc-dd]

Position calculation logic in src/ui/code-editor/feature/search.ts seems wrong. It is setting wrong left and top positions on that find element. You'll need to debug that.

[qianmoQ]

Position calculation logic in src/ui/code-editor/feature/search.ts seems wrong. It is setting wrong left and top positions on that find element. You'll need to debug that.
Sorry, I sent the wrong example. The correct one should be

In viewpress

https://view-shadcn-ui.devlive.org/components/view/code-editor.html#context-menu

playground URL : https://playground.view-shadcn-ui.devlive.org/?codeKey=code-editor-context-menu

Use the right mouse button

The position calculated in the code is correct, but it is not displayed

[brc-dd]

top is wrong:

If I manually adjust it to smaller value it works fine

In src/ui/code-editor/feature/context-menu.ts it should be clientX and clientY instead of pageX and pageY in line 22 and 23. But even then it doesn't set when right clicking for the first time:

Screen.Recording.2024-12-31.at.4.42.12.PM.mp4

[qianmoQ]

I am confused that the problem only occurs when pageX and pageY are nested in vitepress. There is no such problem when using them separately. I use appendBody. Are there any restrictions on pageX and pageY in vitepress?
The editor needs to get the focus to trigger. The focus was not in the editor for the first time, so it was not triggered.

[brc-dd]

It's not happening on your playground because there is no scrollbar there. clientX/Y and pageX/Y will be same if your page is at it's very top/left. Refer https://stackoverflow.com/a/21452887/11613622 -- it's unrelated to vitepress.

[qianmoQ]

Thank you so much