Feat: CSS - css.multiple() API supports#222
Conversation
🦋 Changeset detectedLatest commit: ee6e517 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 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 |
|
Triggered from #222 by @black7375. Checking if we can fast forward Target branch ( commit 90cde801cc0133649869bfed9c2e053aa600f6db (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Sat Jul 19 21:37:30 2025 +0900
Chore: Seperate vanilla extract API to `./compat`Pull request ( commit ee6e51736f26effa8bcb72d8d5cd907c2de629d8 (pull_request/css-multiple)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Mon Jun 9 00:00:00 2025 +0900
Feat: CSS - css.multiple() API supports #221It is possible to fast forward |
WalkthroughThis update refactors the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant css
participant cssImpl
participant cssVariants
User->>css: call css(style, debugId?)
css->>cssImpl: delegate call
User->>css: call css.multiple(styles, debugId?)
css->>cssVariants: delegate call
Possibly related issues
Possibly related PRs
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
.changeset/sad-meals-rescue.md(1 hunks)packages/babel/src/utils.ts(0 hunks)packages/css/src/css/index.ts(4 hunks)packages/css/src/index.ts(1 hunks)
💤 Files with no reviewable changes (1)
- packages/babel/src/utils.ts
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: black7375
PR: mincho-js/mincho#113
File: packages/css/src/index.ts:33-33
Timestamp: 2024-10-09T13:00:38.449Z
Learning: `recipe` is properly exported from './rules' in `packages/css/src/rules/index.ts`.
.changeset/sad-meals-rescue.md (1)
Learnt from: black7375
PR: mincho-js/mincho#113
File: packages/css/src/index.ts:33-33
Timestamp: 2024-10-09T13:00:38.449Z
Learning: `recipe` is properly exported from './rules' in `packages/css/src/rules/index.ts`.
packages/css/src/index.ts (2)
Learnt from: black7375
PR: mincho-js/mincho#113
File: packages/css/src/index.ts:33-33
Timestamp: 2024-10-09T13:00:38.449Z
Learning: `recipe` is properly exported from './rules' in `packages/css/src/rules/index.ts`.
Learnt from: black7375
PR: mincho-js/mincho#134
File: packages/transform-to-vanilla/src/transform.ts:49-51
Timestamp: 2024-12-03T11:16:32.528Z
Learning: In projects that target both CommonJS and ES modules, adjusting the TypeScript `module` option may not be feasible. Therefore, using `@ts-ignore` comments to suppress TypeScript errors related to `import.meta` is acceptable.
packages/css/src/css/index.ts (3)
Learnt from: black7375
PR: mincho-js/mincho#113
File: packages/css/src/index.ts:33-33
Timestamp: 2024-10-09T13:00:38.449Z
Learning: `recipe` is properly exported from './rules' in `packages/css/src/rules/index.ts`.
Learnt from: black7375
PR: mincho-js/mincho#110
File: packages/css/src/rules/types.ts:25-29
Timestamp: 2024-09-29T14:13:13.977Z
Learning: For `ToggleVariantMap`, only the `true` state is needed for toggle variants.
Learnt from: black7375
PR: mincho-js/mincho#110
File: packages/css/src/rules/types.ts:25-29
Timestamp: 2024-10-09T13:00:38.449Z
Learning: For `ToggleVariantMap`, only the `true` state is needed for toggle variants.
🔇 Additional comments (4)
.changeset/sad-meals-rescue.md (1)
1-7: LGTM! Changeset properly documents the API change.The changeset correctly uses minor version bumps for both affected packages and clearly describes the new
css.multiple()API introduction.packages/css/src/css/index.ts (3)
104-106: Good refactoring approach.Renaming the original
cssfunction tocssImplis a clean way to maintain the existing implementation while preparing for the new namespaced API structure.
108-110: Excellent API design using Object.assign.The approach of using
Object.assignto combine the originalcssImplfunction with amultipleproperty is elegant. This maintains the originalcssfunction behavior while adding the new namespacedmultiplemethod.
215-271: Tests properly updated for the new API.All test cases have been correctly updated to use
css.multiple()instead of the standalonecssVariantsfunction. The test logic remains the same, ensuring the refactoring doesn't introduce behavioral changes.
| } from "@vanilla-extract/css"; | ||
|
|
||
| export { globalCss, css, cssVariants } from "./css/index.js"; | ||
| export { globalCss, css } from "./css/index.js"; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify that existing cssVariants usage has been updated.
The removal of cssVariants from the exports is correct for the new API design. However, ensure all existing usage of the standalone cssVariants import has been updated to use css.multiple instead.
🏁 Script executed:
#!/bin/bash
# Description: Check for any remaining direct imports or usage of cssVariants that might be broken
# Expected: No direct imports of cssVariants should remain
echo "Checking for direct cssVariants imports..."
rg "import.*cssVariants" --type ts --type tsx --type js --type jsx
echo "Checking for cssVariants usage (excluding the implementation file)..."
rg "cssVariants" --type ts --type tsx --type js --type jsx -A 2 | grep -v "packages/css/src/css/index.ts"Length of output: 472
🏁 Script executed:
#!/bin/bash
# Re-run searches without relying on ripgrep’s file-type flags
echo "Checking for direct cssVariants imports across the repo..."
grep -R "import.*cssVariants" -n .
echo
echo "Checking for any cssVariants usage outside of the CSS package implementation..."
grep -R "cssVariants" -n . | grep -Ev 'packages/css/src/index.ts|packages/css/src/css/index.ts'Length of output: 734
Update internal cssVariants references to use css.multiple
We’ve found remaining direct uses of the standalone cssVariants function inside the CSS package itself. To keep the API surface consistent, these should be updated to import only css and call css.multiple.
Locations to fix:
- packages/css/src/rules/index.ts:11
Changetoimport { css, cssVariants } from "../css/index.js";
import { css } from "../css/index.js";
- packages/css/src/rules/index.ts:113
ReplacewithcssVariants(...)
css.multiple(...)
- packages/css/src/compat.ts:24
ReplacewithcssVariants as styleVariants
css.multiple as styleVariants
Once these are updated, the standalone cssVariants export removal from your main index.ts won’t break any internal or external code.
🤖 Prompt for AI Agents
In packages/css/src/index.ts at line 28, remove the standalone export of
cssVariants and only export css and globalCss. Then, in
packages/css/src/rules/index.ts at line 11, update the import to remove
cssVariants and import only css from "../css/index.js". At line 113 in the same
file, replace all calls to cssVariants(...) with css.multiple(...). Finally, in
packages/css/src/compat.ts at line 24, replace the export or usage of
cssVariants as styleVariants with css.multiple as styleVariants. This ensures
all internal references use css.multiple consistently.
|
/fast-forward |
|
Triggered from #222 (comment) by @black7375. Trying to fast forward Target branch ( commit 90cde801cc0133649869bfed9c2e053aa600f6db (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Sat Jul 19 21:37:30 2025 +0900
Chore: Seperate vanilla extract API to `./compat`Pull request ( commit ee6e51736f26effa8bcb72d8d5cd907c2de629d8 (pull_request/css-multiple)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Mon Jun 9 00:00:00 2025 +0900
Feat: CSS - css.multiple() API supports #221Fast forwarding $ git push origin ee6e51736f26effa8bcb72d8d5cd907c2de629d8:main
To https://github.com/mincho-js/mincho.git
90cde80..ee6e517 ee6e51736f26effa8bcb72d8d5cd907c2de629d8 -> main |
1 participant
Description
cssVariant()tocss.multiple().Related Issue
Summary by CodeRabbit
New Features
css.multiple().Refactor
css.multiple()instead of the previouscssVariantsexport.cssVariantsand grouping it under the maincssAPI.Additional context
Checklist