fix(ui): restore SDK styles under host CSS via revert-layer (A2) - EXPERIMENT

[cameronapak]

Experiment sent by Cam to his Grok Bots to grill and align and implement an experiment based on Tim Watson's feedback:

What the problem was: SDK v2 injects its styles inside native CSS cascade layers (@layer yv-sdk-*), which v1 didn't do. Unlayered CSS always beats layered CSS regardless of specificity, so our app's Tailwind v3 preflight — which is unlayered and resets every button/input to zero padding, transparent background, and inherited font — silently overrode the SDK's layered component styles. That's why the version button and the version-list rows (which are buttons) collapsed.

The fix: a rule in src/index.css scoped to [data-yv-sdk] subtrees that uses revert-layer on exactly the properties the preflight resets, rolling them back to the SDK's cascade layers. Runtime evidence before/after: the BSB button computed padding: 0px, background: transparent before, and padding: 8px 16px with the proper background after a clean reload with no injected test styles.

Summary

SDK v2 puts styles in @layer yv-sdk-*. Host CSS that is not in a layer always wins. Tailwind v3 preflight and a host button {} flatten version buttons and list rows. The yv: prefix only stops name clashes.

This change is not Shadow DOM. This change is not PR 348. Austin continues Shadow DOM on a different branch.

Change

The SDK ships one CSS rule that is not in a layer. Partners do not paste this rule.

The selector is [data-yv-sdk] *, [data-yv-sdk] *::before, and [data-yv-sdk] *::after.

The rule sets these shorthands to revert-layer: box-sizing, padding, margin, border, background, font, color, line-height, letter-spacing, appearance, -webkit-appearance, text-decoration, list-style, and text-transform.

The rule is not on the [data-yv-sdk] root. The rule does not use all. The rest of the SDK stays in layers. Custom properties that start with --yv stay.

@utility card-content keeps width and max-width. A layered .yv:card-content { margin-inline: auto } rule sets the center margin. Then margin: revert-layer returns to that value, not to preflight 0.

lightningcss removes -webkit-appearance during minify. scripts/preserve-host-revert-layer.js writes that declaration back.

Tests

jsdom cannot prove cascade layers. A Storybook play story in Chromium is the proof.

• Hostile host styles apply to button, a, p, h1, and input. Inherited body font and color also apply.
• A host button outside [data-yv-sdk] stays flat. This shows that the hostile sheet is active.
• SDK Button, Input, link, paragraph, and heading inside [data-yv-sdk] get SDK box and type again (8px 16px, #121212, Inter).

host-revert-layer.test.ts makes sure that the rule is for descendants only and that it does not use all. verify-styles.js makes sure that the compiled sheet stays out of a layer.

Out of scope

PR 348 and Shadow DOM. revert-rule. Removal of layers from the SDK. all: revert. Host !important.

Greptile Summary

This PR adds an unlayered, descendant-only revert-layer rule to restore SDK presentation when unlayered host element resets otherwise override layered SDK styles.

• Moves card-content centering into an SDK layer so it survives the new margin rollback.
• Post-processes generated CSS to preserve -webkit-appearance and expands build-time style verification.
• Adds source-contract and Chromium Storybook coverage for hostile host CSS.
• Adds a coordinated patch changeset for the fixed-version SDK packages.

Confidence Score: 5/5

The PR appears safe to merge, with focused browser and build-time guards covering the new CSS isolation behavior.

The changed stylesheet, post-processing step, build order, and verification paths remain aligned, and no concrete current runtime, build, release, or security failure was established.

Important Files Changed

Filename	Overview
packages/ui/src/styles/global.css	Adds descendant-only host CSS rollback and relocates card-content centering into an SDK cascade layer.
packages/ui/scripts/preserve-host-revert-layer.js	Restores the prefixed appearance declaration removed during CSS minification.
packages/ui/scripts/verify-styles.js	Verifies the generated stylesheet retains an unlayered rollback rule and that embedded JavaScript includes it.
packages/ui/src/styles/host-css-isolation.stories.tsx	Adds browser computed-style coverage for SDK controls rendered alongside hostile unlayered element rules.
packages/ui/src/styles/host-revert-layer.test.ts	Guards the source selector, property list, descendant-only scope, and exclusion of broad all rollback.
packages/ui/package.json	Inserts the CSS preservation script between stylesheet generation and JavaScript embedding.
.changeset/a2-revert-layer-isolation.md	Records a coordinated patch release for the fixed-version SDK package group.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  A[global.css] --> B[Tailwind CSS build]
  B --> C[preserve-host-revert-layer.js]
  C --> D[dist/tailwind.css]
  D --> E[tsup embeds CSS]
  E --> F[YouVersionProvider style resource]
  D --> G[Published styles.css export]
  D --> H[verify-styles.js]

Loading

_{Reviews (1): Last reviewed commit: "fix(ui): keep card-content centering in ..." | Re-trigger Greptile}

Context used (3)

• Knowledge Base — UI provider and styling system
• Knowledge Base — Package delivery workflows
• Knowledge Base — Monorepo build, validation, and release

[changeset-bot]

🦋 Changeset detected

Latest commit: 9096129

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@youversion/platform-core	Patch
@youversion/platform-react-hooks	Patch
@youversion/platform-react-ui	Patch
vite-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR