YPE-1009: Opt out of CSS layers

[cameronapak]

Reasoning: tailwindlabs/tailwindcss#13188 (comment)

This is an alternative method to what was presented in #95

[changeset-bot]

🦋 Changeset detected

Latest commit: a1f1e20

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-react-ui	Patch
@youversion/platform-core	Patch
@youversion/platform-react-hooks	Patch
nextjs	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

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

[greptile-apps]

Greptile Overview

Greptile Summary

Overview

This PR refactors the CSS build process to opt out of Tailwind CSS layers by changing from a post-processing approach to a source-level approach. Instead of importing all of Tailwind with @import 'tailwindcss' prefix(yv) and then stripping @layer declarations with a post-build script, the PR now imports Tailwind's individual CSS files separately: theme.css, preflight.css, and utilities.css, each with the prefix(yv) modifier.

Changes Made

1. packages/ui/package.json: Removed node scripts/strip-layers.js from the build:css script, eliminating the post-processing step
2. packages/ui/scripts/strip-layers.js: Deleted the now-unnecessary post-processing script that stripped @layer declarations
3. packages/ui/src/styles/global.css: Replaced the single Tailwind import with three separate imports, each with prefix(yv), and added an explanatory comment with reference to the Tailwind CSS discussion

Technical Details

This approach leverages Tailwind CSS 4's behavior where importing specific CSS files with the prefix() modifier automatically prevents CSS layer wrapping at the source, eliminating the need for post-processing. The change simplifies the build pipeline while maintaining the same CSS output behavior - all Tailwind utilities remain prefixed with yv- and no longer wrapped in @layer declarations.

Impact Assessment

• Build Process: Simpler and faster - eliminates one build step
• Output: Functionally equivalent CSS output with same prefix behavior
• Compatibility: All existing tests pass without modification (verified via verse.test.tsx which validates yv-prefixed classes)

Confidence Score: 5/5

• This PR is safe to merge with high confidence. The changes are straightforward and reduce complexity by eliminating post-processing.
• Score reflects: (1) Clean refactoring with no functional changes to output CSS; (2) Proper deletion of obsolete post-processing script; (3) Correct package.json update removing the script reference; (4) Simplified build pipeline; (5) Existing tests validate the prefixed CSS classes still work correctly; (6) Well-documented change with link to Tailwind CSS discussion explaining the rationale; (7) All three changed files are focused on this single concern with no extraneous modifications.
• No files require special attention. All changes are clean and necessary for the refactoring.

Important Files Changed

File Analysis

Filename	Score	Overview
packages/ui/package.json	5/5	Removed node scripts/strip-layers.js from the build:css script. The command now only runs tailwindcss -i src/styles/global.css -o dist/tailwind.css --minify. This is a correct change as the post-processing step is no longer needed when using the Tailwind 4 split import approach with prefix modifier.
packages/ui/scripts/strip-layers.js	5/5	File deleted properly. This post-processing script was used to strip @layer declarations from the compiled CSS. It is no longer needed with the new approach that imports Tailwind CSS files individually with the prefix modifier, which prevents layer wrapping at the source.
packages/ui/src/styles/global.css	5/5	Changed from single Tailwind import @import 'tailwindcss' prefix(yv) to three separate imports: @import 'tailwindcss/theme.css' prefix(yv), @import 'tailwindcss/preflight.css' prefix(yv), and @import 'tailwindcss/utilities.css' prefix(yv). Added clarifying comment explaining the approach. This change opts out of CSS layers at the source, following Tailwind CSS 4 best practices.

Sequence Diagram

sequenceDiagram
    participant User as Build Process
    participant Old as Old Approach
    participant New as New Approach
    participant TW as Tailwind CSS
    participant Build as Build Output

    rect rgb(200, 220, 240)
    Note over Old: Old (PR #95 style)
    User->>Old: Run: tailwindcss -i global.css -o tailwind.css
    Old->>TW: Import 'tailwindcss' prefix(yv)
    TW-->>Old: Returns CSS with @layer declarations
    Old->>Old: Post-process: strip-layers.js
    Old->>Build: Write processed CSS (no @layer)
    end

    rect rgb(220, 240, 200)
    Note over New: New (PR #97 approach)
    User->>New: Run: tailwindcss -i global.css -o tailwind.css
    New->>TW: Import 'tailwindcss/theme.css' prefix(yv)
    TW-->>New: theme.css with prefix
    New->>TW: Import 'tailwindcss/preflight.css' prefix(yv)
    TW-->>New: preflight.css with prefix
    New->>TW: Import 'tailwindcss/utilities.css' prefix(yv)
    TW-->>New: utilities.css with prefix
    New->>Build: Write CSS (no @layer needed)
    end

    Note over Build: Result: Same CSS output, simpler pipeline

Loading

[cameronapak]

@bmanquen are we waiting on review from TG?

[bmanquen]

@bmanquen are we waiting on review from TG?

Yes we are.

[tcg]

Marking as approved, assuming I don't need to be in further decision making at the moment / working as intended.

[cameronapak]

note: I've added a commit to bring further clarity as to why we did what we did. 61f41ba

[cameronapak]

@bmanquen changeset added so this is now g2g