Feat: CSS - css.with() API support #226#227
Conversation
WalkthroughThis update introduces a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant css
participant cssWith
participant cssMultiple
User->>css: Call css.with(restrict, callback)
css->>cssWith: Create customized CSS function
cssWith->>User: Return object { main, raw, multiple }
User->>cssWith: Call main(style)
cssWith->>User: Return className
User->>cssWith: Call raw(style)
cssWith->>User: Return transformed style
User->>cssWith: Call multiple(map, mapData)
cssWith->>cssMultiple: Generate variant classes
cssMultiple->>User: Return variant classes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~18 minutes Possibly related PRs
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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 (
|
|
Triggered from #227 by @black7375. Checking if we can fast forward Target branch ( commit cfa814e32ec63a3c3348923247450c6949482904 (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Tue Jun 10 00:00:00 2025 +0900
Feat: CSS - css.raw() API support #223Pull request ( commit 1521dd50835c83354c0a0346417ab0ad11202f0e (pull_request/css-with)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Wed Jun 11 00:00:00 2025 +0900
Feat: CSS - `css.with()` API support #226It 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 (5)
.changeset/sharp-ears-wear.md (1)
5-6: Prefer heading syntax over bolded text for section titles
markdownlintwarns (MD036) because**Types**is used as a pseudo-heading. Switch to a real heading for consistency and to appease linters:-**Types** +## Types.changeset/cold-mirrors-accept.md (1)
5-5: Fix markdown formatting: use proper heading syntax.The static analysis tool correctly identified that emphasis is being used instead of a proper heading.
Apply this diff to use proper markdown heading syntax:
-**css** +## css.changeset/calm-heads-care.md (1)
6-6: Fix markdown formatting: use proper heading syntax.The static analysis tool correctly identified that emphasis is being used instead of a proper heading.
Apply this diff to use proper markdown heading syntax:
-**Compatibility** +## Compatibilitypackages/css/src/css/types.ts (1)
1-24: Well-designed utility type for CSS rule restrictions.The
RestrictCSSRuletype effectively handles the filtering and transformation of CSS properties based on boolean flags. The separation of required and optional properties is particularly elegant.Consider simplifying the type inference pattern for better readability:
-export type RestrictCSSRule<T extends CSSRule> = { - [K in keyof T as T[K] extends false ? never : K]: T[K] extends true - ? K extends keyof CSSRule - ? CSSRule[K] - : never - : T[K]; -} extends infer U - ? Resolve< - { - [K in keyof U as IsRequired<U, K> extends true ? K : never]-?: U[K]; - } & { - [K in keyof U as IsOptional<U, K> extends true ? K : never]?: U[K]; - } - > - : never; +export type RestrictCSSRule<T extends CSSRule> = Resolve< + { + [K in keyof T as T[K] extends false ? never : IsRequired<T, K> extends true ? K : never]-?: T[K] extends true + ? K extends keyof CSSRule + ? CSSRule[K] + : never + : T[K]; + } & { + [K in keyof T as T[K] extends false ? never : IsOptional<T, K> extends true ? K : never]?: T[K] extends true + ? K extends keyof CSSRule + ? CSSRule[K] + : never + : T[K]; + } +>;This eliminates the intermediate inference step while maintaining the same functionality.
packages/css/src/css/index.ts (1)
113-160: Excellent implementation of the css.with() API.The implementation provides a flexible and type-safe way to create CSS function variants with optional restrictions and transformations. The overloaded signatures ensure proper type inference for different use cases.
Consider extracting the identity function to avoid recreation:
+const identityTransform = <T>(style: T) => style; + function cssWith<const T extends CSSRule>( callback?: (style: RestrictCSSRule<T>) => ComplexCSSRule ) { type RestrictedCSSRule = RestrictCSSRule<T>; - const cssFunction = callback ?? ((style: RestrictedCSSRule) => style); + const cssFunction = callback ?? identityTransform;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
.changeset/calm-heads-care.md(1 hunks).changeset/cold-mirrors-accept.md(1 hunks).changeset/sad-meals-rescue.md(1 hunks).changeset/sharp-ears-wear.md(1 hunks)packages/css/src/compat.ts(1 hunks)packages/css/src/css/index.ts(4 hunks)packages/css/src/css/types.ts(1 hunks)packages/css/src/rules/index.ts(2 hunks)packages/css/src/rules/types.ts(1 hunks)packages/css/src/types.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (9)
📓 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/calm-heads-care.md (2)
Learnt from: black7375
PR: #39
File: README.md:0-0
Timestamp: 2024-10-09T13:00:38.449Z
Learning: The phrase "The API of each layer should be isomorphic" in the README.md file was changed to "The API of each layer should be consistent" for better readability.
Learnt from: black7375
PR: #39
File: README.md:0-0
Timestamp: 2024-07-21T05:37:15.832Z
Learning: The phrase "The API of each layer should be isomorphic" in the README.md file was changed to "The API of each layer should be consistent" for better readability.
packages/css/src/compat.ts (2)
Learnt from: black7375
PR: #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: #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/rules/types.ts (4)
Learnt from: black7375
PR: #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: #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.
Learnt from: black7375
PR: #41
File: packages/debug-log/src/index.ts:37-37
Timestamp: 2024-07-21T06:45:30.199Z
Learning: The preferred type definition for NotAssignableToJson is bigint | symbol | ((...args: unknown[]) => unknown) to enforce stricter type checking.
Learnt from: black7375
PR: #41
File: packages/debug-log/src/index.ts:37-37
Timestamp: 2024-10-09T13:00:38.449Z
Learning: The preferred type definition for NotAssignableToJson is bigint | symbol | ((...args: unknown[]) => unknown) to enforce stricter type checking.
packages/css/src/types.ts (1)
Learnt from: black7375
PR: #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/css/types.ts (1)
Learnt from: black7375
PR: #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/rules/index.ts (4)
Learnt from: black7375
PR: #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: #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.
Learnt from: black7375
PR: #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.
Learnt from: black7375
PR: #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.
.changeset/sad-meals-rescue.md (3)
Learnt from: black7375
PR: #39
File: README.md:0-0
Timestamp: 2024-07-21T05:37:15.832Z
Learning: The phrase "The API of each layer should be isomorphic" in the README.md file was changed to "The API of each layer should be consistent" for better readability.
Learnt from: black7375
PR: #39
File: README.md:0-0
Timestamp: 2024-10-09T13:00:38.449Z
Learning: The phrase "The API of each layer should be isomorphic" in the README.md file was changed to "The API of each layer should be consistent" for better readability.
Learnt from: black7375
PR: #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/css/index.ts (1)
Learnt from: black7375
PR: #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.
🧬 Code Graph Analysis (1)
packages/css/src/rules/index.ts (1)
packages/css/src/css/index.ts (1)
css(162-166)
🪛 markdownlint-cli2 (0.17.2)
.changeset/cold-mirrors-accept.md
5-5: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
.changeset/sharp-ears-wear.md
5-5: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
.changeset/calm-heads-care.md
6-6: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
🔇 Additional comments (8)
packages/css/src/types.ts (1)
1-3: LGTM! Well-implemented utility type for type resolution.The
Resolve<T>type is a standard TypeScript pattern that effectively flattens complex types by mapping over all keys and intersecting with an empty object. This centralization of a commonly used utility type will improve consistency across the codebase..changeset/sad-meals-rescue.md (1)
6-8: LGTM! Well-formatted changelog entry.The changelog entry properly documents the new
css.multiple()API with correct markdown formatting and clear structure.packages/css/src/compat.ts (1)
24-24: cssMultiple export confirmedVerified that
cssMultipleis exported frompackages/css/src/css/index.ts, so thestyleVariantsalias will resolve correctly. No further changes needed—approving this update.packages/css/src/rules/index.ts (1)
11-11: LGTM! Clean migration to the new API.The refactoring from
cssVariantstocss.multipleis properly implemented, maintaining the same function signature and behavior.Also applies to: 113-113
packages/css/src/rules/types.ts (1)
8-8: Good refactoring to centralize the Resolve type.Moving the
Resolvetype to a shared location eliminates duplication and improves maintainability.packages/css/src/css/index.ts (3)
15-16: Good practice using consistent path aliases.The change from relative imports to alias imports improves maintainability and makes refactoring easier.
183-186: Good enhancement to support symbol keys.The updated type signature now properly supports symbol keys in addition to string and number keys, making the API more flexible.
274-443: Comprehensive test coverage for new features.The tests thoroughly cover the new
css.raw()andcss.with()functionality, including type restrictions, transformations, and mixin-like behavior. The examples clearly demonstrate the intended usage patterns.
|
Triggered from #227 by @black7375. Checking if we can fast forward Target branch ( commit cfa814e32ec63a3c3348923247450c6949482904 (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Tue Jun 10 00:00:00 2025 +0900
Feat: CSS - css.raw() API support #223Pull request ( commit 60ebee56170b3b683b72eb721fdd26bfc46ce338 (pull_request/css-with)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Wed Jun 11 00:00:00 2025 +0900
Feat: CSS - `css.with()` API support #226It is possible to fast forward |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.changeset/sharp-ears-wear.md (1)
5-6: Use a proper Markdown heading instead of bold text
The changeset convention and markdownlint (MD036) expect section titles to be headings (## Types), not bold emphasis.-**Types** - +## Types
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
.changeset/calm-heads-care.md(1 hunks).changeset/cold-mirrors-accept.md(1 hunks).changeset/sad-meals-rescue.md(1 hunks).changeset/sharp-ears-wear.md(1 hunks)packages/css/src/compat.ts(1 hunks)packages/css/src/css/index.ts(4 hunks)packages/css/src/css/types.ts(1 hunks)packages/css/src/rules/index.ts(2 hunks)packages/css/src/rules/types.ts(1 hunks)packages/css/src/types.ts(1 hunks)packages/css/tsconfig.lib.json(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- .changeset/calm-heads-care.md
- packages/css/src/compat.ts
🚧 Files skipped from review as they are similar to previous changes (6)
- .changeset/cold-mirrors-accept.md
- .changeset/sad-meals-rescue.md
- packages/css/src/css/types.ts
- packages/css/src/rules/index.ts
- packages/css/src/types.ts
- packages/css/src/rules/types.ts
🧰 Additional context used
🧠 Learnings (3)
📓 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`.
packages/css/tsconfig.lib.json (2)
Learnt from: black7375
PR: #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: #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 (1)
Learnt from: black7375
PR: #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.
🪛 markdownlint-cli2 (0.17.2)
.changeset/sharp-ears-wear.md
5-5: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: typecheck
🔇 Additional comments (4)
packages/css/tsconfig.lib.json (1)
6-8: LGTM! Good addition for cleaner imports.The path mapping configuration is correctly implemented and will improve import readability throughout the codebase by allowing
@/...imports instead of relative paths.packages/css/src/css/index.ts (3)
113-160: Well-implementedcss.with()API with strong type safety!The implementation correctly:
- Provides flexible type restrictions through generics
- Handles optional transformation callbacks with sensible defaults
- Maintains consistency with the existing API patterns
- Properly delegates to existing functions after transformation
162-166: Good API design with the rename tocssMultiple.The rename from
cssVariantstocssMultiplebetter reflects its purpose and maintains consistency with thecss.multipleAPI. The addition ofsymboltype support in the mapping function enhances flexibility.Also applies to: 172-201
274-443: Excellent test coverage for the new functionality!The tests comprehensively cover:
- Basic functionality of
css.raw()- Type restrictions and compile-time validation
- All methods of the
css.with()API- Advanced use cases like mixin-style patterns with default parameters
The tests follow consistent patterns and provide good examples of API usage.
|
/fast-forward |
|
Triggered from #227 (comment) by @black7375. Trying to fast forward Target branch ( commit cfa814e32ec63a3c3348923247450c6949482904 (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Tue Jun 10 00:00:00 2025 +0900
Feat: CSS - css.raw() API support #223Pull request ( commit 60ebee56170b3b683b72eb721fdd26bfc46ce338 (pull_request/css-with)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Wed Jun 11 00:00:00 2025 +0900
Feat: CSS - `css.with()` API support #226Fast forwarding $ git push origin 60ebee56170b3b683b72eb721fdd26bfc46ce338:main
To https://github.com/mincho-js/mincho.git
cfa814e..60ebee5 60ebee56170b3b683b72eb721fdd26bfc46ce338 -> main |
1 participant
Description
Support
css.with()functionRelated Issue
Summary by CodeRabbit
New Features
css.with()for enhanced CSS function customization.Improvements
css.multiple.Bug Fixes
Additional context
Checklist