feat: export CSS as string module for Shadow DOM injection#1027
Draft
makhnatkin wants to merge 3 commits intomainfrom
Draft
feat: export CSS as string module for Shadow DOM injection#1027makhnatkin wants to merge 3 commits intomainfrom
makhnatkin wants to merge 3 commits intomainfrom
Conversation
Adds `@gravity-ui/markdown-editor/styles-string` export — a JS module that exports all bundled editor styles as a string, enabling injection into Shadow DOM via `adoptedStyleSheets` or `<style>` tags. Closes #1026 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Use .mjs extension for ESM file to avoid SyntaxError when importing from a CJS package root (build/ has no "type": "module") - Include external CSS from @diplodoc/* packages that are imported directly in TS source and not covered by src/**/*.scss compilation: transform base/yfm-only, cut, file, tabs, quote-link, folding-headings - Add smoke test in esbuild-tester.js verifying both CJS require and ESM file validity before the bundler compatibility test runs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds `@gravity-ui/markdown-editor/styles-string` — a JS module that exports all editor styles as a string, enabling injection into Shadow DOM via `adoptedStyleSheets` or a `<style>` tag.
```ts
import editorStyles from '@gravity-ui/markdown-editor/styles-string';
// Option 1: Constructable Stylesheets (modern browsers)
const sheet = new CSSStyleSheet();
sheet.replaceSync(editorStyles);
shadowRoot.adoptedStyleSheets = [sheet];
// Option 2: <style> tag (broader compatibility)
const style = document.createElement('style');
style.textContent = editorStyles;
shadowRoot.appendChild(style);
```
What's included
The exported string contains:
Note: `@gravity-ui/uikit` styles are not included — if your shadow root also uses UIKit components, you'll need to inject those separately.
Implementation details
Test plan
Closes #1026
Hey @zeeeeby — is this what you had in mind? The exported string covers core editor styles plus the default YFM preset's external dependencies. Let me know if anything is missing from your specific setup (e.g. which extensions/preset you're using, whether you also need UIKit styles injected).
🤖 Generated with Claude Code