Fix: CSS - Work comma selector with nested selectors#195
Fix: CSS - Work comma selector with nested selectors#195github-actions[bot] merged 1 commit intomainfrom
Conversation
🦋 Changeset detectedLatest commit: 98a9c93 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
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 |
WalkthroughThe changes introduce enhanced support for handling nested CSS selectors that include comma-separated parent selectors in the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant transformStyle
participant nestedSelectorKey
User->>transformStyle: Provide style object with comma-separated selectors
transformStyle->>nestedSelectorKey: Expand nested selectors with parentSelector (may contain commas)
nestedSelectorKey->>nestedSelectorKey: Split parentSelector by comma, replace & in key for each
nestedSelectorKey-->>transformStyle: Return expanded selector string
transformStyle-->>User: Output transformed selectors with correct nesting and comma handling
Suggested labels
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
yarn install v1.22.22 ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Triggered from #195 by @black7375. Checking if we can fast forward Target branch ( commit 3a681f0bedeb9ad959bb5e38f6c8d1cc6533f291 (HEAD -> main, tag: @mincho-js/transform-to-vanilla@0.2.0, tag: @mincho-js/react@0.1.0, tag: @mincho-js/integration@0.1.0, tag: @mincho-js/esbuild@0.1.0, tag: @mincho-js/debug-log@1.1.0, tag: @mincho-js/css@0.2.0, tag: @mincho-js/css-additional-types@0.1.0, tag: @mincho-js/babel@0.1.0, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Sun Apr 20 08:48:23 2025 +0900
Chore: Bump packagesPull request ( commit 98a9c9335f84407717cd5fd7d62ce6c6070af284 (pull_request/comma-selector)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Wed Apr 23 02:42:15 2025 +0900
Fix: CSS - Work comma selector with nested selectorsIt is possible to fast forward |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.changeset/full-bottles-join.md (1)
1-6: Clear and concise changeset description.The changeset effectively communicates the feature addition of supporting global styles with nested selectors that contain commas.
Consider using a heading instead of bold formatting for the feature title to follow standard Markdown conventions:
-**Nested Selector with commas** +## Nested Selector with commas🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
5-5: Emphasis used instead of a heading
null(MD036, no-emphasis-as-heading)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.changeset/full-bottles-join.md(1 hunks)packages/transform-to-vanilla/src/transform-keys/complex-selectors.ts(2 hunks)packages/transform-to-vanilla/src/transform-object/index.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
packages/transform-to-vanilla/src/transform-object/index.ts (1)
packages/css/src/index.ts (1)
StyleRule(56-56)
packages/transform-to-vanilla/src/transform-keys/complex-selectors.ts (2)
packages/transform-to-vanilla/src/transform-object/index.ts (2)
TransformContext(58-68)initTransformContext(69-82)packages/transform-to-vanilla/src/index.ts (2)
TransformContext(4-4)initTransformContext(3-3)
🪛 markdownlint-cli2 (0.17.2)
.changeset/full-bottles-join.md
5-5: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
🔇 Additional comments (3)
packages/transform-to-vanilla/src/transform-keys/complex-selectors.ts (2)
19-29: Well-implemented fix for handling comma-separated selectors.The updated implementation correctly handles nested selectors with comma-separated parent selectors by splitting them, processing each individual selector, and then rejoining them. This ensures that when using selectors like
"a, b"with a key like"&:hover", the result will be"a:hover, b:hover"instead of"a, b:hover".
76-90: Thorough test cases for comma-separated selectors.The test cases cover all important scenarios:
- Simple pseudo-class appending
- Complex pseudo-class with negation
- Contextual selectors with attribute selectors
This comprehensive testing ensures the implementation works correctly with various selector combinations.
packages/transform-to-vanilla/src/transform-object/index.ts (1)
1016-1036: Good integration test for nested selectors with commas.This test case properly verifies that the style transformation system correctly handles comma-separated parent selectors in nested style objects. It confirms that:
- The base style correctly applies to the joined selector string
- Nested pseudo-classes are correctly appended to each individual selector
The test appropriately complements the changes made to the
nestedSelectorKeyfunction.
|
/fast-forward |
|
Triggered from #195 (comment) by @black7375. Trying to fast forward Target branch ( commit 3a681f0bedeb9ad959bb5e38f6c8d1cc6533f291 (HEAD -> main, tag: @mincho-js/transform-to-vanilla@0.2.0, tag: @mincho-js/react@0.1.0, tag: @mincho-js/integration@0.1.0, tag: @mincho-js/esbuild@0.1.0, tag: @mincho-js/debug-log@1.1.0, tag: @mincho-js/css@0.2.0, tag: @mincho-js/css-additional-types@0.1.0, tag: @mincho-js/babel@0.1.0, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Sun Apr 20 08:48:23 2025 +0900
Chore: Bump packagesPull request ( commit 98a9c9335f84407717cd5fd7d62ce6c6070af284 (pull_request/comma-selector)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Wed Apr 23 02:42:15 2025 +0900
Fix: CSS - Work comma selector with nested selectorsFast forwarding $ git push origin 98a9c9335f84407717cd5fd7d62ce6c6070af284:main
To https://github.com/mincho-js/mincho.git
3a681f0..98a9c93 98a9c9335f84407717cd5fd7d62ce6c6070af284 -> main |
1 participant
Description
Support comma selector for global style.
Related Issue
Summary by CodeRabbit
Additional context
Checklist