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]

⚠️ No Changeset found

Latest commit: 8ed1eba

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a 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