Skip to content

feat: export CSS as string module for Shadow DOM injection#1027

Draft
makhnatkin wants to merge 3 commits intomainfrom
claude/nice-lederberg
Draft

feat: export CSS as string module for Shadow DOM injection#1027
makhnatkin wants to merge 3 commits intomainfrom
claude/nice-lederberg

Conversation

@makhnatkin
Copy link
Collaborator

@makhnatkin makhnatkin commented Mar 24, 2026

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:

  • All editor SCSS compiled from `src/**/*.scss`
  • External CSS from `@diplodoc/*` packages imported directly in TS source (YfmCut, YfmFile, YfmTabs, YfmConfigs, QuoteLink, FoldingHeading)

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

  • Build: new `styles-string` gulp task runs after `scss`, reads `build/styles.css` + resolves external CSS via `require.resolve()`, writes `build/styles-string.mjs` (ESM) and `build/styles-string.cjs` (CJS)
  • `.mjs` extension is used for the ESM file so Node.js always treats it as ESM, regardless of the `build/` root having no `"type": "module"`
  • Smoke test added to `tests/esbuild-test/esbuild-tester.js` verifying both CJS and ESM files before the bundler compatibility test

Test plan

  • `pnpm run build` — `build/styles-string.mjs`, `.cjs`, `.d.ts` are generated
  • CJS: `typeof s === 'string' && s.length === 122371`
  • `pnpm run test:esbuild` → `styles-string smoke test: OK (length: 122371)`

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

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>
@makhnatkin makhnatkin requested a review from d3m1d0v as a code owner March 24, 2026 14:11
@gravity-ui
Copy link

gravity-ui bot commented Mar 24, 2026

Storybook Deployed

@gravity-ui
Copy link

gravity-ui bot commented Mar 24, 2026

🎭 Playwright Report

makhnatkin and others added 2 commits March 25, 2026 19:48
- 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>
@makhnatkin makhnatkin marked this pull request as draft March 25, 2026 21:16
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.

Shadow dom support

1 participant