Repository navigation
docs(cloud): note the color-mix() limitation in standalone app styles - #413
Merged
Merged
Conversation
The repository patch for bun-plugin-tailwind only applies inside this monorepo. A standalone application compiles src/styles/app.css with the unpatched plugin, and Bun 1.4.2 then keeps only the first color-mix() that references a variable or currentColor in each rule; the others show Tailwind's fallback. The plugin exposes no option to turn the polyfill off, so until a Bun release includes oven-sh/bun#38589 the styling guide tells application authors to give each such color-mix() its own rule, or to declare a reused mix once as a custom property in its own rule. The dependency policy links the note and removes it together with the patch. Refs #321
The note said the build keeps the first mixed value in a rule. That holds for plain declarations, but @apply emits its declarations in Tailwind's property order, so with the unpatched plugin `@apply bg-(--k2b-action)/12 border-(--k2b-action)/40` keeps the border mix and drops the background mix. Say "only one" instead of "the first", and tell authors that opacity modifiers on variable or currentColor colors in @apply compile to color-mix() and need one rule per utility. The same utilities used as classes in markup compile to separate rules and are not affected. Refs #321
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Outcome
Application authors now learn, in the styling guide, how to keep mixed colors in a standalone application's
src/styles/app.css: give eachcolor-mix()that references a CSS variable orcurrentColorits own rule, split@applylists with opacity modifiers on variable colors into one rule per utility, and declare a reused mix once as a custom property in its own rule. The dependency policy links the note and says to remove it together with thebun-plugin-tailwindpatch.Root cause
Bun 1.4.2 keeps only one of several adjacent
@supportsrules with the same condition (oven-sh/bun#24770). Tailwind'scolor-mix()polyfill emits one such rule per declaration. The root patch tobun-plugin-tailwind@0.1.2turns that polyfill off, but root patches apply only inside this repository; the published@k2b/cloudbuild uses the unpatched plugin, and the plugin exposes no option to turn the polyfill off. Until a Bun release includes oven-sh/bun#38589, a standalone application's rule with several such mixes keeps only one mixed value.Documentation
frontend/styling-and-accessibility.md: new section "Mix variable colors in separate rules" with the affected cases (declarations,@applyopacity modifiers, mixed custom properties), what is not affected (literal color mixes, the same utilities used as classes in markup), and examples.contributing/dependency-policy.md: thebun-plugin-tailwindrow links the note and lists it as part of the patch's removal.Verification
bun run check:docsindocs-site(page rules, links, and anchors) passes.bun run checkpasses.git diff --checkis clean.The underlying fix still needs a Bun release with oven-sh/bun#38589 and a Bun bump, so the issue stays open.
Refs #321