Feat: styled - Support styled.div like shorthand API#275
Feat: styled - Support styled.div like shorthand API#275github-actions[bot] merged 1 commit intomainfrom
styled - Support styled.div like shorthand API#275Conversation
WalkthroughAdds a property-access styled API (e.g., Changes
Sequence Diagram(s)sequenceDiagram
actor Dev
participant App as Application Code
participant StyledAPI as styled export
participant Runtime as Per-tag Factories
Dev->>App: import styled
App->>StyledAPI: use styled("div", {...})
App->>StyledAPI: use styled.div({...})
StyledAPI->>Runtime: Object.assign(styledImpl, taggedStyled)
Runtime->>StyledAPI: attach per-tag factories (e.g., div)
StyledAPI->>App: returns StyledComponent
rect rgb(200,230,255)
Note right of StyledAPI: styledImpl handles call form
end
rect rgb(200,255,220)
Note right of Runtime: taggedStyled handles property-access form
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
|
Triggered from #275 by @black7375. Checking if we can fast forward Target branch ( commit 4a185b470a8d24ecc6badcb46ea4c0408e486a07 (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Sat Sep 27 00:00:00 2025 +0900
Feat: `theme` - Support `alias` method #270Pull request ( commit fd03700029f5d7c61b9262af74146ee23567e008 (pull_request/styled-elements)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Fri Nov 7 02:24:26 2025 +0900
Feat: `styled` - Support `styled.div` like shorthand APIIt is possible to fast forward |
🦋 Changeset detectedLatest commit: 4504956 The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 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 |
black7375
force-pushed
the
styled-elements
branch
from
fd03700 to
ab4985e
Compare
|
Triggered from #275 by @black7375. Checking if we can fast forward Target branch ( commit 4a185b470a8d24ecc6badcb46ea4c0408e486a07 (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Sat Sep 27 00:00:00 2025 +0900
Feat: `theme` - Support `alias` method #270Pull request ( commit ab4985e9cd12ea8f7bdb7ffc071901af7b5a8fc5 (pull_request/styled-elements)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Fri Oct 10 00:00:00 2025 +0900
Feat: `styled` - Support `styled.div` like shorthand APIIt 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: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
examples/react-babel/src/App.tsx (1)
3-7: Example will fail at runtime without Babel plugin updates.This example uses the new
styled.div({...})syntax, but the current Babel plugin (as noted in the review ofpackages/react/src/index.ts) doesn't handleMemberExpressioncallees. The plugin only transformsstyled(...)calls, notstyled.tag(...)calls.Without the transformation, this code will throw: "This function shouldn't be there in your final code."
Ensure the Babel plugin is updated to handle the new syntax before merging this PR, or temporarily revert this example to use
styled("div", {...})until the plugin is updated.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.changeset/mighty-nights-see.md(1 hunks).changeset/stupid-hairs-behave.md(1 hunks)examples/react-babel/src/App.tsx(1 hunks)packages/react/src/index.ts(6 hunks)packages/react/src/tags.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-10-09T13:00:38.449Z
Learnt from: black7375
Repo: mincho-js/mincho 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`.
Applied to files:
packages/react/src/index.ts
🧬 Code graph analysis (4)
.changeset/mighty-nights-see.md (2)
packages/babel/src/styled.ts (3)
styledComponentPlugin(13-103)enter(18-99)CallExpression(27-97)packages/react/src/runtime.ts (1)
$$styled(17-81)
.changeset/stupid-hairs-behave.md (2)
packages/babel/src/styled.ts (3)
enter(18-99)styledComponentPlugin(13-103)CallExpression(27-97)packages/esbuild/src/index.ts (1)
minchoEsbuildPlugin(25-131)
examples/react-babel/src/App.tsx (3)
packages/react/src/index.ts (1)
styled(152-152)packages/babel/src/styled.ts (2)
enter(18-99)CallExpression(27-97)packages/react/src/runtime.ts (1)
$$styled(17-81)
packages/react/src/index.ts (1)
packages/react/src/tags.ts (2)
SupportedElements(4-4)tags(11-148)
🪛 markdownlint-cli2 (0.18.1)
.changeset/mighty-nights-see.md
5-5: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
🔇 Additional comments (1)
packages/react/src/index.ts (1)
22-22: Code implementation verified—no changes needed.All verification points check out:
- Per-tag factories (lines 146-155): Correctly generated at module load time via
tags.forEach, each factory captures the tag string in a closure and forwards tostyledImpl- Object.assign merge (line 152): Properly combines the
styledImplfunction with thetaggedStyledobject, creating bothstyled("div", ...)andstyled.div(...)call patterns- Type safety:
SupportedElementsis a union type derived from thetagsarray, andTaggedStyledis a mapped type ensuring all tags are available as typed properties- Runtime equivalence: Both API forms produce identical output since they both invoke
styledImpl(tag, options)through their respective closures
.changeset/mighty-nights-see.md
Outdated
| --- | ||
|
|
||
| **styled** | ||
| - Add `style.div` like shorthand API No newline at end of file |
There was a problem hiding this comment.
Fix typo: style.div should be styled.div.
The API name is styled.div, not style.div.
Apply this diff:
- - Add `style.div` like shorthand API
+ - Add `styled.div` like shorthand API📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - Add `style.div` like shorthand API | |
| - Add `styled.div` like shorthand API |
🤖 Prompt for AI Agents
In .changeset/mighty-nights-see.md around line 6, there's a typo: the note says
"style.div" but the correct API name is "styled.div"; update the text to replace
`style.div` with `styled.div` so the changelog accurately reflects the API.
| export const tags = [ | ||
| "a", | ||
| "abbr", | ||
| "address", | ||
| "area", | ||
| "article", | ||
| "aside", | ||
| "audio", | ||
| "b", | ||
| "base", | ||
| "bdi", | ||
| "bdo", | ||
| "big", | ||
| "blockquote", | ||
| "body", | ||
| "br", | ||
| "button", | ||
| "canvas", | ||
| "caption", | ||
| "cite", | ||
| "code", | ||
| "col", | ||
| "colgroup", | ||
| "data", | ||
| "datalist", | ||
| "dd", | ||
| "del", | ||
| "details", | ||
| "dfn", | ||
| "dialog", | ||
| "div", | ||
| "dl", | ||
| "dt", | ||
| "em", | ||
| "embed", | ||
| "fieldset", | ||
| "figcaption", | ||
| "figure", | ||
| "footer", | ||
| "form", | ||
| "h1", | ||
| "h2", | ||
| "h3", | ||
| "h4", | ||
| "h5", | ||
| "h6", | ||
| "head", | ||
| "header", | ||
| "hgroup", | ||
| "hr", | ||
| "html", | ||
| "i", | ||
| "iframe", | ||
| "img", | ||
| "input", | ||
| "ins", | ||
| "kbd", | ||
| "keygen", | ||
| "label", | ||
| "legend", | ||
| "li", | ||
| "link", | ||
| "main", | ||
| "map", | ||
| "mark", | ||
| "menu", | ||
| "menuitem", | ||
| "meta", | ||
| "meter", | ||
| "nav", | ||
| "noscript", | ||
| "object", | ||
| "ol", | ||
| "optgroup", | ||
| "option", | ||
| "output", | ||
| "p", | ||
| "param", | ||
| "picture", | ||
| "pre", | ||
| "progress", | ||
| "q", | ||
| "rp", | ||
| "rt", | ||
| "ruby", | ||
| "s", | ||
| "samp", | ||
| "script", | ||
| "section", | ||
| "select", | ||
| "small", | ||
| "source", | ||
| "span", | ||
| "strong", | ||
| "style", | ||
| "sub", | ||
| "summary", | ||
| "sup", | ||
| "table", | ||
| "tbody", | ||
| "td", | ||
| "textarea", | ||
| "tfoot", | ||
| "th", | ||
| "thead", | ||
| "time", | ||
| "title", | ||
| "tr", | ||
| "track", | ||
| "u", | ||
| "ul", | ||
| "use", | ||
| "var", | ||
| "video", | ||
| "wbr", | ||
|
|
||
| // SVG | ||
| "circle", | ||
| "clipPath", | ||
| "defs", | ||
| "ellipse", | ||
| "foreignObject", | ||
| "g", | ||
| "image", | ||
| "line", | ||
| "linearGradient", | ||
| "mask", | ||
| "path", | ||
| "pattern", | ||
| "polygon", | ||
| "polyline", | ||
| "radialGradient", | ||
| "rect", | ||
| "stop", | ||
| "svg", | ||
| "text", | ||
| "tspan" | ||
| ] as const satisfies Array<KeyofIntrinsicElements>; |
There was a problem hiding this comment.
Remove deprecated HTML elements from the tags list.
The tags array includes several elements that are deprecated or removed from the HTML5 specification:
- Line 23:
"big"- deprecated in HTML5 - Line 68:
"keygen"- removed from HTML5 specification - Line 77:
"menuitem"- deprecated and not widely supported
Including these elements may cause issues if future versions of @types/react remove their type definitions, and they represent non-standard HTML practices.
Apply this diff to remove deprecated elements:
"bdo",
- "big",
"blockquote", "ins",
"kbd",
- "keygen",
"label", "mark",
"menu",
- "menuitem",
"meta",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const tags = [ | |
| "a", | |
| "abbr", | |
| "address", | |
| "area", | |
| "article", | |
| "aside", | |
| "audio", | |
| "b", | |
| "base", | |
| "bdi", | |
| "bdo", | |
| "big", | |
| "blockquote", | |
| "body", | |
| "br", | |
| "button", | |
| "canvas", | |
| "caption", | |
| "cite", | |
| "code", | |
| "col", | |
| "colgroup", | |
| "data", | |
| "datalist", | |
| "dd", | |
| "del", | |
| "details", | |
| "dfn", | |
| "dialog", | |
| "div", | |
| "dl", | |
| "dt", | |
| "em", | |
| "embed", | |
| "fieldset", | |
| "figcaption", | |
| "figure", | |
| "footer", | |
| "form", | |
| "h1", | |
| "h2", | |
| "h3", | |
| "h4", | |
| "h5", | |
| "h6", | |
| "head", | |
| "header", | |
| "hgroup", | |
| "hr", | |
| "html", | |
| "i", | |
| "iframe", | |
| "img", | |
| "input", | |
| "ins", | |
| "kbd", | |
| "keygen", | |
| "label", | |
| "legend", | |
| "li", | |
| "link", | |
| "main", | |
| "map", | |
| "mark", | |
| "menu", | |
| "menuitem", | |
| "meta", | |
| "meter", | |
| "nav", | |
| "noscript", | |
| "object", | |
| "ol", | |
| "optgroup", | |
| "option", | |
| "output", | |
| "p", | |
| "param", | |
| "picture", | |
| "pre", | |
| "progress", | |
| "q", | |
| "rp", | |
| "rt", | |
| "ruby", | |
| "s", | |
| "samp", | |
| "script", | |
| "section", | |
| "select", | |
| "small", | |
| "source", | |
| "span", | |
| "strong", | |
| "style", | |
| "sub", | |
| "summary", | |
| "sup", | |
| "table", | |
| "tbody", | |
| "td", | |
| "textarea", | |
| "tfoot", | |
| "th", | |
| "thead", | |
| "time", | |
| "title", | |
| "tr", | |
| "track", | |
| "u", | |
| "ul", | |
| "use", | |
| "var", | |
| "video", | |
| "wbr", | |
| // SVG | |
| "circle", | |
| "clipPath", | |
| "defs", | |
| "ellipse", | |
| "foreignObject", | |
| "g", | |
| "image", | |
| "line", | |
| "linearGradient", | |
| "mask", | |
| "path", | |
| "pattern", | |
| "polygon", | |
| "polyline", | |
| "radialGradient", | |
| "rect", | |
| "stop", | |
| "svg", | |
| "text", | |
| "tspan" | |
| ] as const satisfies Array<KeyofIntrinsicElements>; | |
| export const tags = [ | |
| "a", | |
| "abbr", | |
| "address", | |
| "area", | |
| "article", | |
| "aside", | |
| "audio", | |
| "b", | |
| "base", | |
| "bdi", | |
| "bdo", | |
| "blockquote", | |
| "body", | |
| "br", | |
| "button", | |
| "canvas", | |
| "caption", | |
| "cite", | |
| "code", | |
| "col", | |
| "colgroup", | |
| "data", | |
| "datalist", | |
| "dd", | |
| "del", | |
| "details", | |
| "dfn", | |
| "dialog", | |
| "div", | |
| "dl", | |
| "dt", | |
| "em", | |
| "embed", | |
| "fieldset", | |
| "figcaption", | |
| "figure", | |
| "footer", | |
| "form", | |
| "h1", | |
| "h2", | |
| "h3", | |
| "h4", | |
| "h5", | |
| "h6", | |
| "head", | |
| "header", | |
| "hgroup", | |
| "hr", | |
| "html", | |
| "i", | |
| "iframe", | |
| "img", | |
| "input", | |
| "ins", | |
| "kbd", | |
| "label", | |
| "legend", | |
| "li", | |
| "link", | |
| "main", | |
| "map", | |
| "mark", | |
| "menu", | |
| "meta", | |
| "meter", | |
| "nav", | |
| "noscript", | |
| "object", | |
| "ol", | |
| "optgroup", | |
| "option", | |
| "output", | |
| "p", | |
| "param", | |
| "picture", | |
| "pre", | |
| "progress", | |
| "q", | |
| "rp", | |
| "rt", | |
| "ruby", | |
| "s", | |
| "samp", | |
| "script", | |
| "section", | |
| "select", | |
| "small", | |
| "source", | |
| "span", | |
| "strong", | |
| "style", | |
| "sub", | |
| "summary", | |
| "sup", | |
| "table", | |
| "tbody", | |
| "td", | |
| "textarea", | |
| "tfoot", | |
| "th", | |
| "thead", | |
| "time", | |
| "title", | |
| "tr", | |
| "track", | |
| "u", | |
| "ul", | |
| "use", | |
| "var", | |
| "video", | |
| "wbr", | |
| // SVG | |
| "circle", | |
| "clipPath", | |
| "defs", | |
| "ellipse", | |
| "foreignObject", | |
| "g", | |
| "image", | |
| "line", | |
| "linearGradient", | |
| "mask", | |
| "path", | |
| "pattern", | |
| "polygon", | |
| "polyline", | |
| "radialGradient", | |
| "rect", | |
| "stop", | |
| "svg", | |
| "text", | |
| "tspan" | |
| ] as const satisfies Array<KeyofIntrinsicElements>; |
🤖 Prompt for AI Agents
In packages/react/src/tags.ts around lines 11 to 148, the tags array contains
deprecated/removed elements ("big" at ~line 23, "keygen" at ~line 68, and
"menuitem" at ~line 77); remove these three strings from the exported tags const
so the list only contains current HTML and SVG elements, and ensure the trailing
commas and formatting remain valid for the as const satisfies
Array<KeyofIntrinsicElements> declaration.
ab4985e to
d2372a5
Compare
|
Triggered from #275 by @black7375. Checking if we can fast forward Target branch ( commit 4a185b470a8d24ecc6badcb46ea4c0408e486a07 (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Sat Sep 27 00:00:00 2025 +0900
Feat: `theme` - Support `alias` method #270Pull request ( commit d2372a511bd0e3af767e31095805b61c18528d51 (pull_request/styled-elements)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Fri Oct 10 00:00:00 2025 +0900
Feat: `styled` - Support `styled.div` like shorthand APIIt is possible to fast forward |
black7375
force-pushed
the
styled-elements
branch
from
d2372a5 to
c8bb2b7
Compare
|
Triggered from #275 by @black7375. Checking if we can fast forward Target branch ( commit 4a185b470a8d24ecc6badcb46ea4c0408e486a07 (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Sat Sep 27 00:00:00 2025 +0900
Feat: `theme` - Support `alias` method #270Pull request ( commit c8bb2b73506bd93c349720787e08275b3fcdc02b (pull_request/styled-elements)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Fri Oct 10 00:00:00 2025 +0900
Feat: `styled` - Support `styled.div` like shorthand APIIt is possible to fast forward |
black7375
force-pushed
the
styled-elements
branch
from
c8bb2b7 to
53a2a1f
Compare
|
Triggered from #275 by @black7375. Checking if we can fast forward Target branch ( commit 4a185b470a8d24ecc6badcb46ea4c0408e486a07 (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Sat Sep 27 00:00:00 2025 +0900
Feat: `theme` - Support `alias` method #270Pull request ( commit 53a2a1f3b43babc46d6c21743533afc132ddf596 (pull_request/styled-elements)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Fri Oct 10 00:00:00 2025 +0900
Feat: `styled` - Support `styled.div` like shorthand APIIt is possible to fast forward |
black7375
force-pushed
the
styled-elements
branch
from
53a2a1f to
4504956
Compare
|
Triggered from #275 by @black7375. Checking if we can fast forward Target branch ( commit 4ef03753991571c260a79307cde319486b40d6b4 (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Fri Oct 10 00:00:00 2025 +0900
Test: add `theme()` test casesPull request ( commit 4504956736658a23a6f0a5d9510bf066a43e614c (pull_request/styled-elements)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Sat Oct 11 00:00:00 2025 +0900
Feat: `styled` - Support `styled.div` like shorthand APIIt is possible to fast forward |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
.changeset/stupid-hairs-behave.md (1)
6-7: Use a proper markdown heading instead of bold text.Line 6 uses emphasis (
**styled**) which should be a proper heading for better structure and consistency with markdown conventions.Apply this diff:
-**styled** -- Add `styled.div` like shorthand API +## styled + +- Add `styled.div` like shorthand API
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.changeset/stupid-hairs-behave.md(1 hunks)examples/react-babel/src/App.tsx(1 hunks)packages/babel/src/styled.ts(4 hunks)packages/react/src/index.ts(8 hunks)packages/react/src/tags.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/react/src/tags.ts
- examples/react-babel/src/App.tsx
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2024-12-03T11:16:32.528Z
Learnt from: black7375
Repo: mincho-js/mincho 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.
Applied to files:
packages/react/src/index.ts
📚 Learning: 2024-10-09T13:00:38.449Z
Learnt from: black7375
Repo: mincho-js/mincho 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`.
Applied to files:
packages/react/src/index.ts
🧬 Code graph analysis (2)
packages/babel/src/styled.ts (1)
packages/babel/src/transforms/callExpression.ts (2)
Expression(108-138)transformCallExpression(13-81)
packages/react/src/index.ts (3)
packages/react/src/tags.ts (2)
SupportedElements(4-4)tags(11-148)packages/transform-to-vanilla/src/types/style-rule.ts (1)
CSSRule(33-33)packages/react/src/runtime.ts (1)
$$styled(17-81)
🪛 markdownlint-cli2 (0.18.1)
.changeset/stupid-hairs-behave.md
6-6: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
🔇 Additional comments (5)
packages/react/src/index.ts (2)
119-135: Well-structured type definition for the shorthand API.The
TaggedStyledmapped type correctly captures the per-tag factory signatures, maintaining full type safety for variants and props while supporting the new shorthand syntax.
145-145: Clean composition of the styled API surface.Using
Object.assignto mergestyledImplwith the tagged factories is an elegant approach that maintains backward compatibility withstyled("div", ...)while adding the newstyled.div(...)shorthand.packages/babel/src/styled.ts (3)
94-170: Excellent implementation of dual-syntax support.The
normalizeStyledCallfunction correctly handles both API forms:
- Direct calls:
styled("div", {...})where callee is an Identifier- Shorthand calls:
styled.div({...})where callee is a MemberExpressionThe tag extraction logic (lines 147-159) properly handles computed properties, identifiers, and string literals, ensuring comprehensive coverage of valid JavaScript syntax.
29-35: Clean separation of concerns with normalization.Extracting the call pattern recognition into
normalizeStyledCallmakes the main transform logic cleaner and easier to test. The early return pattern when normalization fails is idiomatic.
102-108: Robust argument filtering for rest parameters.The
toValidRestArgumentshelper ensures only valid Expression or SpreadElement nodes are propagated, preventing potential AST corruption from argument list holes or JSXText nodes.
| /** NOTE: Make simple type for avoid too complex error | ||
| * error TS2590: Expression produces a union type that is too complex to represent. | ||
| */ | ||
| const taggedStyled: Record<string, unknown> = {}; | ||
| tags.forEach((tag) => { | ||
| taggedStyled[tag] = (options: CSSRule) => styledImpl(tag, options); | ||
| }); |
There was a problem hiding this comment.
Runtime factory type doesn't match the declared TaggedStyled type.
The runtime implementation at line 142 types the options parameter as CSSRule, but the TaggedStyled type definition (line 127) declares it should accept PatternOptions<RulesVariants, RulesToggleVariants, RulesProps>. CSSRule is narrower and doesn't include variant-related options, causing a type safety gap.
Apply this diff to align the runtime with the type declaration:
const taggedStyled: Record<string, unknown> = {};
tags.forEach((tag) => {
- taggedStyled[tag] = (options: CSSRule) => styledImpl(tag, options);
+ taggedStyled[tag] = (options: PatternOptions) => styledImpl(tag, options);
});Note: You may need to import or use the full PatternOptions type. Alternatively, remove the type annotation entirely and let TypeScript infer from styledImpl's signature:
- taggedStyled[tag] = (options: CSSRule) => styledImpl(tag, options);
+ taggedStyled[tag] = (options) => styledImpl(tag, options);Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In packages/react/src/index.ts around lines 137 to 143, the runtime factory
types the options parameter as CSSRule which conflicts with the declared
TaggedStyled type that expects PatternOptions<RulesVariants,
RulesToggleVariants, RulesProps>; fix by changing the runtime signature to
accept PatternOptions<RulesVariants, RulesToggleVariants, RulesProps> (import
that type if necessary) or remove the explicit options annotation so TypeScript
infers the correct type from styledImpl; ensure the generic type parameters
exactly match those used in the TaggedStyled declaration.
|
/fast-forward |
|
Triggered from #275 (comment) by @black7375. Trying to fast forward Target branch ( commit 4ef03753991571c260a79307cde319486b40d6b4 (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Fri Oct 10 00:00:00 2025 +0900
Test: add `theme()` test casesPull request ( commit 4504956736658a23a6f0a5d9510bf066a43e614c (pull_request/styled-elements)
Author: alstjr7375 <alstjr7375@daum.net>
Date: Sat Oct 11 00:00:00 2025 +0900
Feat: `styled` - Support `styled.div` like shorthand APIFast forwarding $ git push origin 4504956736658a23a6f0a5d9510bf066a43e614c:main
To https://github.com/mincho-js/mincho.git
4ef0375..4504956 4504956736658a23a6f0a5d9510bf066a43e614c -> main |
1 participant
Description
styled support shorthand api
Related Issue
styledmakes to type-safe #247Summary by CodeRabbit
New Features
Examples
Chores
Additional context
Checklist