[spokodev]

Summary

In v4, theme() always reads the part after the last / as an opacity modifier. For theme keys that contain a /, like the fraction keys in the default compat theme, theme(width.1/2) resolves width.1 instead and applies 2 as the alpha:

.half {
  width: theme(width.1/2);
}

compiles to width: color-mix(in oklab, 0.25rem 200%, transparent) on 4.3.3 and on main. The plugin API's theme('width.1/2') returns the same value, while theme('width')['1/2'] returns the expected width. v3.4.19 compiles the CSS above to width: 50%, and the 4.0 changelog lists referencing --width-1\/2 as theme('width.1/2') as supported (#14739), so this mostly affects CSS and plugins carried over from v3.

createThemeFn now resolves the full path first and only splits off the last segment as a modifier when the full path doesn't resolve. theme(colors.red.500/50%) and the existing theme(colors.red.500 / 75%) test behave as before.

Test plan

• Added theme(width.1/2) to css-functions.test.ts (a --width-1\/2 CSS variable, inset.1/3 from the default compat theme, and a colors.red.500/50% control) and a plugin API test in compat/plugin-api.test.ts (CSS variable, JS config extend, default compat theme, and a color control). Both fail on main with the color-mix(...) values and pass with this change.
• npx vitest run in packages/tailwindcss: 44 files, 5164 passed, 1 skipped.
• prettier --check on the changed files passes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 28f6ab50-06ae-4878-9ab7-7c03d6c0c378

📥 Commits

Reviewing files that changed from the base of the PR and between 175c679 and bac72fe.

📒 Files selected for processing: 1

• packages/tailwindcss/src/compat/plugin-functions.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.

Walkthrough

createThemeFn now resolves the complete theme path before treating a trailing slash-separated segment as an opacity modifier. If the complete path does not resolve, it extracts the suffix and resolves the base path. New tests cover slash-containing CSS and JavaScript theme keys, fallback values, and color opacity.

Priority: ⬇️ Low

Merge Risk: ⚪ Minimal · up to bac72

No actionable merge-blocking risk was found in the reviewed change.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: preventing slash-containing theme keys such as width.1/2 from being treated as opacity modifiers.
Description check		The description directly explains the bug, implementation, regression coverage, compatibility behavior, and reported test results.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Confidence Score: 5/5

[Medium impact] The PR appears safe to merge; the previous duplicate-lookup finding is fixed.

_{Reviews (2) · Last reviewed commit: "Resolve the full theme path only once" · Reviewed by Greptile}