@oxyhq/bloom 0.87.1 → 0.88.0

package/src/dialog/Dialog.web.tsx

@@ -25,6 +25,7 @@ import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Backdrop, OverlayRoot } from '../overlay';
 import { Portal } from '../portal/index.web';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { Z_INDEX } from '../styles/z-index';
 import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
@@ -106,12 +107,7 @@ const DIALOG_STYLE_ID = 'bloom-dialog-web-css';
 
 function useDialogCss(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(DIALOG_STYLE_ID)) return;
-    const style = document.createElement('style');
-    style.id = DIALOG_STYLE_ID;
-    style.textContent = BLOOM_DIALOG_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(DIALOG_STYLE_ID, BLOOM_DIALOG_CSS);
   }, []);
 }
 

package/src/fab/Fab.web.tsx

@@ -10,6 +10,7 @@ import React, {
 
 import { useTheme } from '../theme/use-theme';
 import type { Theme } from '../theme/types';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { flattenWebStyle } from '../styles/flatten-web-style';
 import type { FabPlacement, FabProps, FabSize, FabVariant } from './types';
 
@@ -103,12 +104,7 @@ const BLOOM_FAB_CSS = `
 
 function useFabCss(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(STYLE_ID)) return;
-    const style = document.createElement('style');
-    style.id = STYLE_ID;
-    style.textContent = BLOOM_FAB_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(STYLE_ID, BLOOM_FAB_CSS);
   }, []);
 }
 

package/src/fonts/apply-font-faces.web.ts

@@ -1,3 +1,4 @@
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import {
   blomusModernusRegular,
   blomusModernusBold,
@@ -14,9 +15,11 @@ const STYLE_ID = 'bloom-fonts';
  * Web-only. The native counterpart in `apply-font-faces.ts` is a no-op
  * stub — native loads its fonts through `useFonts(FONT_ASSETS)`, so the file
  * split keeps the web font payload out of the native bundle entirely.
- * Idempotent: safe to call multiple times; subsequent calls early-return
- * after the `<style id="bloom-fonts">` tag has been mounted. SSR-safe via
- * the `typeof document === 'undefined'` guard.
+ * Idempotent: safe to call multiple times; `adoptStyleSheet` keys the sheet by
+ * id, so repeat calls re-parse nothing. SSR-safe via its `typeof document`
+ * guard. `BloomThemeProvider` calls this on every mount by default, which is
+ * why it also has to survive a page whose CSP forbids inline styles — see
+ * `styles/adopt-style-sheet.ts`.
  *
  * The URLs come from `./font-urls.web`, which imports the `.woff2` files so
  * the consuming bundler emits them as separate, cacheable assets. See that
@@ -24,12 +27,9 @@ const STYLE_ID = 'bloom-fonts';
  * provide (Metro needs `woff2` in `assetExts`).
  */
 export function applyFontFaces(): void {
-  if (typeof document === 'undefined') return;
-  if (document.getElementById(STYLE_ID)) return;
-
-  const style = document.createElement('style');
-  style.id = STYLE_ID;
-  style.textContent = `
+  adoptStyleSheet(
+    STYLE_ID,
+    `
     @font-face { font-family: 'BlomusModernus'; src: url("${blomusModernusRegular}") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
     @font-face { font-family: 'BlomusModernus'; src: url("${blomusModernusBold}") format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
     @font-face { font-family: 'Inter'; src: url("${interVariable}") format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@@ -39,6 +39,6 @@ export function applyFontFaces(): void {
       --bloom-font-sans: ${fontFamilies.sans};
       --bloom-font-mono: ${fontFamilies.mono};
     }
-  `;
-  document.head.appendChild(style);
+  `,
+  );
 }

package/src/frosted-icon-button/FrostedIconButton.web.tsx

@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 
 import { useTheme } from '../theme/use-theme';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { flattenWebStyle } from '../styles/flatten-web-style';
 import {
   applyIconColor,
@@ -74,12 +75,7 @@ const BLOOM_FROSTED_ICON_BUTTON_CSS = `
 
 function useFrostedIconButtonCss(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(STYLE_ID)) return;
-    const style = document.createElement('style');
-    style.id = STYLE_ID;
-    style.textContent = BLOOM_FROSTED_ICON_BUTTON_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(STYLE_ID, BLOOM_FROSTED_ICON_BUTTON_CSS);
   }, []);
 }
 

package/src/loading/SpinnerIcon.web.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
 
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 
 interface SpinnerIconProps {
@@ -72,12 +73,7 @@ const SPIN_STYLE: WebCssStyle = {
 
 function useKeyframes(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(KEYFRAMES_ID)) return;
-    const style = document.createElement('style');
-    style.id = KEYFRAMES_ID;
-    style.textContent = BLOOM_SPINNER_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(KEYFRAMES_ID, BLOOM_SPINNER_CSS);
   }, []);
 }
 

package/src/styles/adopt-style-sheet.ts

@@ -0,0 +1,131 @@
+// ---------------------------------------------------------------------------
+//  adoptStyleSheet — the ONE way a Bloom web fork puts CSS on the page.
+//
+//  Bloom's `.web.tsx` forks self-inject the CSS they need (`@keyframes`,
+//  pseudo-classes, `::-webkit-scrollbar`) rather than asking consumers to paste
+//  it into a global stylesheet — see AGENTS.md, "Web Fork CSS & Style
+//  Conventions". The mechanism used to be a `<style>` element carrying the CSS
+//  as text content. That is exactly the shape a Content-Security-Policy of
+//  `style-src 'self'` blocks: the check runs when a style element's text
+//  content is parsed into a sheet, so the rules are dropped, the component
+//  renders with none of its CSS, and NOTHING is thrown — the fork's own
+//  "already injected?" guard even finds its element in the DOM and reports
+//  success. Astro's `astro://` WebUI pages ship that CSP, and every other Oxy
+//  surface behind one would fail the same silent way.
+//
+//  A constructed stylesheet is not subject to `style-src` at all — CSSOM is
+//  outside CSP's inline hooks — so `new CSSStyleSheet()` + `replaceSync()` +
+//  `document.adoptedStyleSheets` applies the same CSS under a strict policy
+//  with no nonce, no hash, and no consumer-side wiring. (This is also why
+//  react-native-web is unaffected: it appends an EMPTY style element and fills
+//  it through `sheet.insertRule`, never through text content.)
+//
+//  The `<style>` path survives only as the fallback for a document without
+//  constructed-stylesheet support — jsdom 26 has the `CSSStyleSheet`
+//  constructor but neither `replaceSync` nor `adoptedStyleSheets`, so the whole
+//  jest suite takes it, and so do browsers older than Chrome 73 / Safari 16.4 /
+//  Firefox 101. There it behaves exactly as Bloom did before, CSP included:
+//  the fallback cannot make anything worse, and cannot make a strict policy
+//  work either.
+// ---------------------------------------------------------------------------
+
+interface AdoptedSheet {
+  sheet: CSSStyleSheet;
+  /** The CSS currently in `sheet`, so a re-render re-parses nothing. */
+  css: string;
+}
+
+/**
+ * The sheets Bloom has constructed, per document. Keyed by document rather than
+ * held in one flat map because a constructed sheet belongs to the realm that
+ * created it — adopting one into a different document throws — and Bloom runs
+ * in more than one when a consumer opens a popout window.
+ */
+const adoptedByDocument = new WeakMap<Document, Map<string, AdoptedSheet>>();
+
+function sheetsFor(doc: Document): Map<string, AdoptedSheet> {
+  const existing = adoptedByDocument.get(doc);
+  if (existing) return existing;
+  const created = new Map<string, AdoptedSheet>();
+  adoptedByDocument.set(doc, created);
+  return created;
+}
+
+/**
+ * Whether `doc` can take a constructed stylesheet. Evaluated per call, not once
+ * at module scope: a test installs the API on its window after this module has
+ * already been imported, and a module-scope constant would freeze the answer
+ * from before that.
+ */
+function supportsAdoption(doc: Document): boolean {
+  return (
+    'adoptedStyleSheets' in doc &&
+    typeof CSSStyleSheet === 'function' &&
+    typeof CSSStyleSheet.prototype.replaceSync === 'function'
+  );
+}
+
+/**
+ * Make `css` apply to the document, under the identity `id`.
+ *
+ * Idempotent in both directions: calling it again with the same CSS re-parses
+ * nothing and adopts nothing twice (the usual case — every mount of every
+ * instance of a component calls it), and calling it with DIFFERENT CSS under
+ * the same id replaces the previous content in place (the theme-dependent case,
+ * `BottomSheetBase`'s scrollbar colours).
+ *
+ * No-op off the web, so a platform-neutral component can call it unguarded.
+ */
+export function adoptStyleSheet(id: string, css: string): void {
+  if (typeof document === 'undefined') return;
+
+  if (supportsAdoption(document)) {
+    const sheets = sheetsFor(document);
+    let entry = sheets.get(id);
+    if (!entry) {
+      entry = { sheet: new CSSStyleSheet(), css: '' };
+      sheets.set(id, entry);
+    }
+    if (entry.css !== css) {
+      entry.sheet.replaceSync(css);
+      entry.css = css;
+    }
+    // Re-adoption after a consumer (or a test) has reset the list. `includes`
+    // is what makes the common repeat call free.
+    if (!document.adoptedStyleSheets.includes(entry.sheet)) {
+      document.adoptedStyleSheets = [...document.adoptedStyleSheets, entry.sheet];
+    }
+    return;
+  }
+
+  const existing = document.getElementById(id);
+  if (existing instanceof HTMLStyleElement) {
+    if (existing.textContent !== css) existing.textContent = css;
+    return;
+  }
+  const element = document.createElement('style');
+  element.id = id;
+  element.textContent = css;
+  document.head.appendChild(element);
+}
+
+/**
+ * Detach the stylesheet `id`, whichever path installed it.
+ *
+ * Only for CSS whose lifetime is a component's — `BottomSheetBase` removes its
+ * scrollbar rules when the last sheet unmounts. The static per-component CSS is
+ * never dropped: it is the same bytes for the life of the page, and removing it
+ * on unmount would make a re-mount re-parse it.
+ */
+export function dropStyleSheet(id: string): void {
+  if (typeof document === 'undefined') return;
+
+  const entry = adoptedByDocument.get(document)?.get(id);
+  if (entry) {
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (sheet) => sheet !== entry.sheet,
+    );
+    adoptedByDocument.get(document)?.delete(id);
+  }
+  document.getElementById(id)?.remove();
+}