Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

fix: combined variants overriding each other#567

Merged
Brentlok merged 2 commits into
main from
fix/combined-variants
Jun 8, 2026
Merged

fix: combined variants overriding each other #567
Brentlok merged 2 commits into
main from
fix/combined-variants

Conversation

@Brentlok

@Brentlok Brentlok commented Jun 8, 2026
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

fix #566

Summary by CodeRabbit

  • Bug Fixes

    • Preserve existing CSS state values when processing complex selectors so combined variants (e.g., theme + active) behave correctly.
  • Tests

    • Added a test validating combined CSS variants parsing and behavior.
  • Refactor

    • Aligned internal theme typing to use the configured theme name type for style metadata.

coderabbitai Bot commented Jun 8, 2026
edited
Loading

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

i️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9d886fd9-41ab-4fa6-9a45-8eda20a4d996

📥 Commits

Reviewing files that changed from the base of the PR and between f0eb3a6 and a5c953c.

📒 Files selected for processing (2)
  • packages/uniwind/src/core/types.ts
  • packages/uniwind/tests/native/styles-parsing/meta.test.ts

📝 Walkthrough

Walkthrough

The CSS processor now accumulates variant metadata across recursive selector parsing using nullish coalescing assignment, preserving multiple pseudo-class states simultaneously. A new test and a type alignment update validate that combined variants like dark:active:bg-purple-700 correctly parse theme and active (and focus) states.

Changes

Combined variant selector parsing

Layer / File(s) Summary
Style.theme type alignment
packages/uniwind/src/core/types.ts
Style.theme type changed from `ColorScheme
Nullish coalescing assignment in variant detection
packages/uniwind/src/bundler/css-processor/processor.ts
The selector processing path now uses ??= to update declarationConfig fields (rtl, theme, active, focus, disabled, dataAttributes), preserving already-set values during recursive parsing instead of unconditionally overwriting them.
Combined variants metadata test
packages/uniwind/tests/native/styles-parsing/meta.test.ts
New test case adds Combined variants assertions and an expectMeta helper; it verifies parsing of combined selectors like dark:active:bg-purple-700, dark:active:focus:bg-purple-700, and active:dark:bg-purple-700 for expected theme, active, and focus flags.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I nibble through selectors, soft and spry,
Where dark and active both can lie —
No longer do they step on toes,
Nullish coalescing gently grows.
Hooray for combos, snug and spry!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title 'fix: combined variants overriding each other' directly matches the main problem statement in the linked issue and accurately reflects the primary change across all modified files.
Linked Issues check ✅ Passed The code changes address the core requirement: updating declarationConfig assignment logic to preserve existing variant metadata values using nullish coalescing (??=) instead of unconditional overwriting, preventing combined pseudo-class variants from overriding each other.
Out of Scope Changes check ✅ Passed All changes are directly scoped to fixing combined variant behavior: the CSS processor fix, type alignment for theme field, and a new test case validating combined-variant parsing are all essential to addressing issue #566.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/combined-variants

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.


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

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/uniwind/tests/native/styles-parsing/meta.test.ts (1)

31-36: ⚡ Quick win

Consider expanding test coverage for combined variants.

The test validates the core fix for dark:active: combination. Consider adding test cases for:

  • Triple combinations (dark:active:focus:bg-...)
  • Different orderings (active:dark:bg-...)
  • Other variant types (rtl, disabled, dataAttributes)
  • Verify that unrelated fields remain null
🧪 Example expanded test cases
 test('Combined variants', async () => {
 const { stylesheet } = await compileMetadata()
 expect(stylesheet['dark:active:bg-purple-700'][0].theme).toBe('dark')
 expect(stylesheet['dark:active:bg-purple-700'][0].active).toBe(true)
+ expect(stylesheet['dark:active:bg-purple-700'][0].focus).toBe(null)
+ expect(stylesheet['dark:active:bg-purple-700'][0].disabled).toBe(null)
 })
+
+test('Triple combined variants', async () => {
+ const { stylesheet } = await compileMetadata()
+
+ // Assuming this class exists in test.css
+ expect(stylesheet['dark:active:focus:bg-purple-700'][0].theme).toBe('dark')
+ expect(stylesheet['dark:active:focus:bg-purple-700'][0].active).toBe(true)
+ expect(stylesheet['dark:active:focus:bg-purple-700'][0].focus).toBe(true)
+})
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/uniwind/tests/native/styles-parsing/meta.test.ts` around lines 31 -
36, Expand the 'Combined variants' test in meta.test.ts to cover more variant
combinations: add cases that use triple combinations (e.g.,
'dark:active:focus:bg-...'), different orderings (e.g., 'active:dark:bg-...'),
other variant types like 'rtl', 'disabled' and a data-attribute variant (e.g.,
'data-open:bg-...'), and assert via compileMetadata() that for each stylesheet
key (use the existing pattern where you access stylesheet['...'][0]) the
corresponding flags (theme, active, focus, rtl, disabled, data attributes) are
true and unrelated fields remain null; reuse the same test harness
(compileMetadata, stylesheet) and add explicit expects for null on fields that
should not be set to ensure no bleed between variants.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/uniwind/tests/native/styles-parsing/meta.test.ts`:
- Around line 31-36: Expand the 'Combined variants' test in meta.test.ts to
cover more variant combinations: add cases that use triple combinations (e.g.,
'dark:active:focus:bg-...'), different orderings (e.g., 'active:dark:bg-...'),
other variant types like 'rtl', 'disabled' and a data-attribute variant (e.g.,
'data-open:bg-...'), and assert via compileMetadata() that for each stylesheet
key (use the existing pattern where you access stylesheet['...'][0]) the
corresponding flags (theme, active, focus, rtl, disabled, data attributes) are
true and unrelated fields remain null; reuse the same test harness
(compileMetadata, stylesheet) and add explicit expects for null on fields that
should not be set to ensure no bleed between variants.

i️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: dc42cebf-f631-4227-bae4-65a6dcc5c158

📥 Commits

Reviewing files that changed from the base of the PR and between ec328ef and f0eb3a6.

📒 Files selected for processing (2)
  • packages/uniwind/src/bundler/css-processor/processor.ts
  • packages/uniwind/tests/native/styles-parsing/meta.test.ts

@Brentlok Brentlok merged commit 433cb71 into main Jun 8, 2026
2 checks passed
@Brentlok Brentlok deleted the fix/combined-variants branch June 8, 2026 06:21

Copy link
Copy Markdown
Contributor

🚀 This pull request is included in v1.9.0. See Release v1.9.0 for release notes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Combining Pseudo Classes

1 participant

AltStyle によって変換されたページ (->オリジナル) /