Skip to content

feat: add @shikijs/twoslash-unocss package#1256

Open
khushthecoder wants to merge 1 commit intoshikijs:mainfrom
khushthecoder:feat/twoslash-unocss
Open

feat: add @shikijs/twoslash-unocss package#1256
khushthecoder wants to merge 1 commit intoshikijs:mainfrom
khushthecoder:feat/twoslash-unocss

Conversation

@khushthecoder
Copy link
Copy Markdown
Contributor

  • [x]

Description

This PR adds a new UnoCSS-backed twoslash runner that resolves utility classes to their generated CSS and surfaces them as hover information in Shiki code blocks.

The goal is to provide UnoCSS utility hover support similar to how twoslash works for TypeScript. When hovering over a utility class inside a code block, the generated CSS is displayed inline via the twoslash hover protocol.

A new package @shikijs/twoslash-unocss is introduced. The implementation follows the twoslash-eslint pattern discussed in the issue. It:

  • Tokenizes the input code
  • Extracts potential UnoCSS utility class names
  • Uses @unocss/core's createGenerator to generate CSS
  • Returns NodeHover nodes via the twoslash protocol

Since UnoCSS v0.65+ is fully async (generator creation and CSS generation), the twoslasher function itself is async. createTransformerFactory handles the returned Promise internally, so no manual pre-resolution is required by users.

Tests included:

  • Single class resolution
  • Multiple class resolution
  • Unknown class handling
  • Position accuracy
  • Empty input
  • Multiline support

All tests pass.

Linked Issues

fixes #794

Additional context

Reviewers may want to focus on:

  • Hover position mapping accuracy
  • Performance implications of async generation
  • Preset configuration ergonomics, especially whether the config API feels natural compared to how UnoCSS is typically configured elsewhere
  • Overall API design consistency with existing twoslash integrations

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 1, 2026

Deploy Preview for shiki-next failed.

Name Link
🔨 Latest commit 6c9cae0
🔍 Latest deploy log https://app.netlify.com/projects/shiki-next/deploys/69a48e0c4fd0ad00087a014b

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 1, 2026

Deploy Preview for shiki-matsu failed.

Name Link
🔨 Latest commit 6c9cae0
🔍 Latest deploy log https://app.netlify.com/projects/shiki-matsu/deploys/69a48e0c362b480008c2275b

@codecov
Copy link
Copy Markdown

codecov bot commented Mar 1, 2026

Codecov Report

❌ Patch coverage is 97.14286% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 89.61%. Comparing base (ae3553d) to head (6c9cae0).

Files with missing lines Patch % Lines
packages/twoslash-unocss/src/index.ts 97.14% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1256      +/-   ##
==========================================
+ Coverage   89.53%   89.61%   +0.07%     
==========================================
  Files          79       80       +1     
  Lines        3479     3514      +35     
  Branches     1009     1016       +7     
==========================================
+ Hits         3115     3149      +34     
- Misses        328      329       +1     
  Partials       36       36              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Add a new UnoCSS-backed twoslash runner that resolves utility classes
to their generated CSS and surfaces them as hover info in Shiki code
blocks, following the twoslash-eslint pattern.

Closes shikijs#794
@khushthecoder khushthecoder force-pushed the feat/twoslash-unocss branch from 217857b to 6c9cae0 Compare March 1, 2026 19:05
@antfu
Copy link
Copy Markdown
Member

antfu commented Mar 9, 2026

Thanks for the PR! But I think this would be better to live in Uno's repo instead. Could you reopen a new PR there? Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature Request: twoslash-like for UnoCSS

2 participants