YPE-1009: Opt out of CSS layers

.changeset/all-coats-sneeze.md

@@ -0,0 +1,7 @@
+---
+'@youversion/platform-react-ui': patch
+'@youversion/platform-core': patch
+'@youversion/platform-react-hooks': patch
+---
+
+Removing CSS layers approach to prevent CSS conflicts when our components are added to existing apps with global styles.

packages/ui/package.json

@@ -28,7 +28,7 @@
   "scripts": {
     "build:types": "tsc -p tsconfig.build.json",
     "build:js": "tsup",
-    "build:css": "tailwindcss -i src/styles/global.css -o dist/tailwind.css --minify && node scripts/strip-layers.js",
+    "build:css": "tailwindcss -i src/styles/global.css -o dist/tailwind.css --minify",
     "build": "pnpm build:css && pnpm build:js && pnpm build:types",
     "dev": "concurrently \"tailwindcss -i src/styles/global.css -o dist/tailwind.css --watch\" \"NODE_ENV=development tsup --watch\"",
     "test": "vitest run --project unit",

packages/ui/src/styles/bible-reader.css

@@ -1,5 +1,5 @@
 /* #region Bible Reader */
-[data-slot="yv-bible-renderer"] {
+[data-slot='yv-bible-renderer'] {
   /* Makes it where cascading styles from the parent app do not affect the bible reader */
   all: unset;
   --yv-reader-font-family: var(--font-sans), var(--font-serif);
@@ -69,7 +69,7 @@
     white-space: nowrap;
   }
 
-  &[data-show-verse-numbers="false"] .yv-vlbl {
+  &[data-show-verse-numbers='false'] .yv-vlbl {
     @apply yv:hidden;
   }
 
@@ -841,13 +841,13 @@
   }
 
   /* RTL Support */
-  &[dir="rtl"] {
+  &[dir='rtl'] {
     direction: rtl;
     text-align: right;
   }
 
-  &[dir="rtl"] .p,
-  &[dir="rtl"] .m {
+  &[dir='rtl'] .p,
+  &[dir='rtl'] .m {
     text-align: right;
   }
 }

packages/ui/src/styles/global.css

@@ -1,5 +1,29 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Serif+Pro:wght@400;700&display=swap');
-@import 'tailwindcss' prefix(yv); /* The CSS linter error is a known issue and does not affect functionality */
+
+/*
+ * Tailwind v4 CSS Layer Opt-Out
+ * ==============================
+ * By default, Tailwind v4 wraps styles in CSS @layer directives. This causes
+ * specificity issues when consumers embed our SDK components alongside their
+ * own CSS—the consumer's non-layered styles can unexpectedly override our
+ * Tailwind utilities.
+ *
+ * Solution: Import Tailwind's CSS files separately instead of using
+ * `@import 'tailwindcss'`. This is Tailwind's officially supported method
+ * to opt out of CSS layers.
+ *
+ * The `prefix(yv)` ensures all Tailwind classes use a `yv:` prefix to avoid
+ * collisions with consumer Tailwind setups.
+ *
+ * Reference: https://github.com/tailwindlabs/tailwindcss/discussions/13188
+ *
+ * Note: CSS linter warnings on these imports are a known issue and do not
+ * affect functionality.
+ */
+@import 'tailwindcss/preflight.css' prefix(yv);
+@import 'tailwindcss/theme.css' prefix(yv);
+@import 'tailwindcss/utilities.css' prefix(yv);
+
 @import 'tw-animate-css';
 @import './bible-reader.css';
 
@@ -120,7 +144,7 @@
     --yv-red-dark-mode: oklch(0.64 0.22 15);
     --yv-warm-neutral: oklch(0.25 0.005 20);
     --yv-warm-neutral-dm: oklch(0.96 0.005 20);
-  
+
     --yv-background: var(--yv-gray-50);
     --yv-foreground: var(--yv-white);
     --yv-card: var(--yv-gray-45);