Files
vercel__streamdown/packages/streamdown/lib/code-block/header.tsx
Dmitrii 00872f0e10 feat: add Tailwind CSS prefix support (#408)
* feat: add Tailwind CSS prefix support

* fix: prevent double-prefixing of already-prefixed CSS classes

When cn() output (e.g. 'tw:size-full') is passed as className to a child
component that also calls cn() with the same prefix, prefixClasses() was
naively prepending the prefix again, producing 'tw:tw:size-full'.

Fix: skip classes that already start with the prefix+colon sentinel.

Add tests for both the all-already-prefixed and mixed cases.

* fix: lint errors — sort imports, format, hoist regex constants

* Add changeset for Tailwind prefix support

* fix: review fixes for tailwind prefix PR

- Bump changeset to minor (new feature, not patch)
- Rename shadowed cn import to baseCn in code-block/body.tsx
- Document that user className values are also prefixed

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Dmitrii Troitskii <jsleitor@gmail.com>
Co-authored-by: Hayden Bleasel <hello@haydenbleasel.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-03 13:39:50 -08:00

19 lines
462 B
TypeScript

import { useCn } from "../prefix-context";
interface CodeBlockHeaderProps {
language: string;
}
export const CodeBlockHeader = ({ language }: CodeBlockHeaderProps) => {
const cn = useCn();
return (
<div
className={cn("flex h-8 items-center text-muted-foreground text-xs")}
data-language={language}
data-streamdown="code-block-header"
>
<span className={cn("ml-1 font-mono lowercase")}>{language}</span>
</div>
);
};