Skip to content

fix(widget): bump @deepgram/ui to ^0.1.2 for prefixed tailwind utilities#50

Merged
lukeocodes merged 1 commit intomainfrom
fix/bump-deepgram-ui-to-0.1.2
May 7, 2026
Merged

fix(widget): bump @deepgram/ui to ^0.1.2 for prefixed tailwind utilities#50
lukeocodes merged 1 commit intomainfrom
fix/bump-deepgram-ui-to-0.1.2

Conversation

@lukeocodes
Copy link
Copy Markdown
Member

Why

@deepgram/ui@0.1.2 (just published from deepgram/ui#32) namespaces every Tailwind utility class under a dg: prefix. The previous 0.1.1 release scoped Tailwind preflight to [data-dg-agent] but left utility classes (.prose, .flex, .container, .max-w-none, .gap-2, .px-3, .text-sm, etc) unprefixed. When the widget loads on a host page that also uses Tailwind, source order makes the bundle's class rules win and hijack host layout. The visible symptom is .prose { max-width: 65ch } snapping content narrow the moment the widget mounts.

Until the widget bumps its dependency, the published UMD on cdn.deepgram.com/widgets/ still ships unprefixed Tailwind utilities that bleed onto every host site embedding the widget.

What changed

  • packages/widget/package.json: @deepgram/ui ^0.1.1 -> ^0.1.2
  • bun.lock regenerated

Verification

Rebuilt the widget locally against @deepgram/ui@0.1.2:

before (0.1.1) after (0.1.2)
Unprefixed .prose, .flex, .container, .max-w-none rules many (42 collisions vs Fern) 0
Prefixed .dg\:* utility refs 0 353
Scoped :where([data-dg-agent], …) preflight rules 76 76 (unchanged)
Bundle size 387.5 KB 393.5 KB (+6 KB)

The +6 KB is real generated CSS that 0.1.1 was silently dropping because Tailwind couldn't see prefix-less class usages with prefix mode on.

Expected after merge

  1. release-please opens chore(main): release agents-widget 0.1.5.
  2. Merging that PR bumps packages/widget/package.json to 0.1.5 and tags agents-widget-v0.1.5.
  3. The npm publish workflow pushes @deepgram/agents-widget@0.1.5 to npm.
  4. The CDN publish job uploads the new UMD bundle to:
    • https://cdn.deepgram.com/widgets/v0.1.5/widget.umd.js (immutable, 365-day TTL)
    • https://cdn.deepgram.com/widgets/latest/widget.umd.js (5-min TTL plus invalidation)
  5. Anyone loading either URL gets the prefixed bundle with no Tailwind utility leaks.

Refs

@deepgram/ui@0.1.2 (deepgram/ui#32) namespaces every Tailwind utility
class under a `dg:` prefix so the bundle no longer collides with host
pages that also use Tailwind. The 0.1.1 release scoped preflight but
left utilities like .prose, .flex, .container, .max-w-none, .gap-2,
.px-3, .text-sm, .border, .transition unprefixed. When the widget
loaded on a host page that also used Tailwind, source order made the
bundle's class rules win and visibly hijacked host layout. The most
common symptom was .prose snapping content to max-width: 65ch the
moment the widget mounted.

Bumping the widget's @deepgram/ui dep brings the prefixed bundle
into the published widget UMD and the CDN copy at
cdn.deepgram.com/widgets/.

Verified locally by rebuilding the widget against 0.1.2:

  before (against 0.1.1):  unprefixed .prose, .flex, .container etc
                           in bundle - 42 collisions counted vs Fern
  after  (against 0.1.2):  0 unprefixed Tailwind rules in bundle,
                           353 prefixed .dg:* utility rules,
                           76 scoped :where([data-dg-agent], …)
                           preflight rules unchanged

Bundle size: 387.5 KB -> 393.5 KB (+6 KB). The increase is real
generated CSS for prefixed utilities that 0.1.1 was silently
dropping because Tailwind couldn't see prefix-less class usages
when prefix mode was on.

Customer impact: any host page embedding the widget UMD no longer
has its prose width, flex layouts, padding, typography, borders,
or transitions overridden by widget CSS. Widget components keep
working because their own className strings use the dg: prefix
that matches the bundle.

Refs:
- deepgram/ui#32 (the prefix(dg) fix)
- #48 (the scoped preflight 0.1.1 work that this completes)
- deepgram/dx-stack#4 (will gain a "scoping utilities, not just preflight" gotcha)
@lukeocodes lukeocodes merged commit ae2e6c2 into main May 7, 2026
2 checks passed
@lukeocodes lukeocodes deleted the fix/bump-deepgram-ui-to-0.1.2 branch May 7, 2026 08:48
lukeocodes pushed a commit that referenced this pull request May 7, 2026
🤖 I have created a release *beep* *boop*
---


##
[0.1.5](agents-widget-v0.1.4...agents-widget-v0.1.5)
(2026-05-07)


### Bug Fixes

* **widget:** bump @deepgram/ui to ^0.1.2 for prefixed tailwind
utilities ([#50](#50))
([ae2e6c2](ae2e6c2))

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
lukeocodes added a commit that referenced this pull request May 7, 2026
…egression (#52)

## Why


[`@deepgram/ui@0.1.2`](https://www.npmjs.com/package/@deepgram/ui/v/0.1.2)
introduced a regression by switching to the full `@import "tailwindcss"`
shortcut. The shortcut applied `prefix(dg)` correctly to utilities but
also pulled raw preflight in at root scope, alongside the
scoped-preflight plugin's scoped copy. The bundle shipped two preflights
and the unscoped one leaked `*, ::before, ::after { box-sizing:
border-box; ... }`, `html{...}`, `body{...}`, and `h1,h2,h3{...}` onto
every host page that loaded the widget.


[`@deepgram/ui@0.1.3`](https://www.npmjs.com/package/@deepgram/ui/v/0.1.3)
(just published from
[deepgram/ui#34](deepgram/ui#34)) restored
granular imports (`tailwindcss/theme.css` + `tailwindcss/utilities.css`
with `prefix(dg)` on each) so preflight comes ONLY from the
scoped-preflight plugin. Every preflight rule in the bundle now has a
`[data-dg-agent]` ancestor.

## What changed

- `packages/widget/package.json`: `@deepgram/ui` `^0.1.2` -> `^0.1.3`
- `bun.lock` regenerated

## Verification

Rebuilt the widget locally against `@deepgram/ui@0.1.3`:

| | 0.1.2 (broken) | 0.1.3 (this PR) |
|---|---|---|
| Unscoped `@layer base{*,...}` block | **1** | **0** |
| Unscoped `html{}`, `body{}`, `h1,h2,h3{}` etc | **multiple** | **0** |
| Scoped `:where([data-dg-agent], …)` preflight | 76 | **76**
(unchanged) |
| Prefixed `.dg\:*` utility refs | 353 | **353** (unchanged) |
| Unprefixed Tailwind utility leaks | 0 | **0** (unchanged) |
| Bundle size | 393.5 KB | **389.8 KB** (-3.7 KB) |

## Expected after merge

1. release-please opens `chore(main): release agents-widget 0.1.6`.
2. Merging publishes `@deepgram/agents-widget@0.1.6` to npm and uploads:
   - `https://cdn.deepgram.com/widgets/v0.1.6/widget.umd.js` (immutable)
- `https://cdn.deepgram.com/widgets/latest/widget.umd.js`
(cache-invalidated)
3. Anyone embedding the widget on their own site stops having their
host-page CSS reset by the widget bundle.

## Refs

- [deepgram/ui#34](deepgram/ui#34) - the
granular-imports fix
- [deepgram/ui#32](deepgram/ui#32) - the
prefix(dg) work
- [deepgram/ui#27](deepgram/ui#27) - the
original scoped-preflight work
- [#50](#50) - the
broken 0.1.2 bump this supersedes
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.

1 participant