Skip to content

Feat: theme - Support raw method#271

Merged
github-actions[bot] merged 1 commit intomainfrom
theme-raw-api
Nov 3, 2025
Merged

Feat: theme - Support raw method#271
github-actions[bot] merged 1 commit intomainfrom
theme-raw-api

Conversation

@black7375
Copy link
Contributor

@black7375 black7375 commented Nov 3, 2025

Description

Add theme's raw() method

Related Issue

Summary by CodeRabbit

Release Notes

  • New Features
    • Added theme() function and raw() method for accessing concrete values from semantic tokens
    • Improved CSS variable handling to preserve native numeric and boolean values instead of stringifying them

Additional context

Checklist

@changeset-bot
Copy link

changeset-bot bot commented Nov 3, 2025

🦋 Changeset detected

Latest commit: 50145b3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@mincho-js/css Minor
@mincho-js/react Patch
@mincho-js/vite Patch
react-babel Patch

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

@coderabbitai
Copy link

coderabbitai bot commented Nov 3, 2025

Walkthrough

A minor version bump introduces a new raw() API surface for the theme domain, enabling extraction of concrete values from var() references during semantic token evaluation. The token resolution flow is extended to support calling this.raw(...) within semantic getters, and primitive value handling in CSS var extraction is adjusted to return non-stringified values.

Changes

Cohort / File(s) Summary
Changeset
\.changeset/dull-bugs-send\.md
Documents minor version bump for "@mincho-js/css" and introduction of theme() and this.raw() APIs
Theme API Implementation
packages/css/src/theme/index\.ts
Adds raw(varReference: unknown): string method to ThemeSubFunctions; introduces createRawExtractor utility for extracting concrete values from var() references; updates token resolution flow to support raw value extraction in semantic getters; modifies primitive value handling in extractCSSValue to return non-stringified values

Sequence Diagram

sequenceDiagram
    participant Caller as Semantic Token Getter
    participant Resolver as Token Resolution
    participant RawExtractor as Raw Extractor
    participant VarStore as Collected Vars

    Caller->>Resolver: semantic getter invoked
    Caller->>RawExtractor: this.raw(varReference)
    RawExtractor->>RawExtractor: detect if var(...) reference
    alt var(...) reference found
        RawExtractor->>VarStore: lookup concrete value
        VarStore-->>RawExtractor: return concrete value
    else not a var reference
        RawExtractor->>RawExtractor: return input as-is
    end
    RawExtractor-->>Caller: concrete value or input
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

  • Review focus: Verify that the raw extractor correctly identifies var() references and performs accurate lookups in the collected vars store
  • Ensure primitive values are handled appropriately (non-stringified) in extractCSSValue across all token types
  • Confirm integration with the two-pass token resolution does not introduce edge cases where raw values are accessed before var collection completes

Possibly related PRs

Poem

🐰 A bunny hops through vars so deep,
With raw() now the secrets keep,
No stringified leaves hide the way—
True values dance in CSS play! 🌿✨

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The pull request title 'Feat: theme - Support raw method' clearly and concisely describes the main change: adding a raw() method to the theme API. It is specific, directly related to the changeset, and provides meaningful information about the primary feature being introduced. The title accurately captures what a teammate scanning history would need to understand.
Description check ✅ Passed The pull request description addresses the core template sections: it includes a clear description stating 'Add theme's raw() method', references the related issue #268, and contains the auto-generated summary placeholder. However, the Additional context and Checklist sections are empty, and no specific reviewer guidance or testing details are provided. Despite these gaps in non-critical sections, the description contains the essential information about what the PR accomplishes.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch theme-raw-api

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.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 3, 2025

Triggered from #271 by @​black7375.

Checking if we can fast forward main (743384f) to theme-raw-api (50145b3).

Target branch (main):

commit 743384fe107bc2ce523f3b1879690e8e81dfdc24 (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date:   Wed Sep 24 00:00:00 2025 +0900

    Feat: `theme` - Support `fallbackVar` method #266

Pull request (theme-raw-api):

commit 50145b3eca703e9884113b58eecd0c6ecb8631d3 (pull_request/theme-raw-api)
Author: alstjr7375 <alstjr7375@daum.net>
Date:   Thu Sep 25 00:00:00 2025 +0900

    Feat: `theme` - Support `raw` method #268

It is possible to fast forward main (743384f) to theme-raw-api (50145b3). If you have write access to the target repository, you can add a comment with /fast-forward to fast forward main to theme-raw-api.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🧹 Nitpick comments (1)
.changeset/dull-bugs-send.md (1)

6-6: Use a proper heading instead of bold emphasis.

The bold text **theme** should be formatted as a proper Markdown heading for better document structure.

Apply this diff:

-**theme**
+## theme
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 743384f and 50145b3.

📒 Files selected for processing (2)
  • .changeset/dull-bugs-send.md (1 hunks)
  • packages/css/src/theme/index.ts (9 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
.changeset/dull-bugs-send.md (1)
packages/css/src/theme/types.ts (2)
  • myTheme (331-415)
  • it (223-416)
packages/css/src/theme/index.ts (2)
packages/css/src/utils.ts (1)
  • getVarName (20-29)
packages/transform-to-vanilla/src/types/style-rule.ts (1)
  • CSSVarValue (119-119)
🪛 markdownlint-cli2 (0.18.1)
.changeset/dull-bugs-send.md

6-6: Emphasis used instead of a heading

(MD036, no-emphasis-as-heading)

🔇 Additional comments (4)
packages/css/src/theme/index.ts (4)

136-142: LGTM!

The raw utility is correctly attached to resolvedTokens with appropriate property descriptors, following the same pattern as fallbackVar.


487-504: LGTM! Verify return type annotation.

The raw extractor logic correctly handles var() references and edge cases. Ensure the return type is updated to match the corrected interface return type (CSSVarValue instead of implicit unknown).


704-729: Test expectations correctly updated.

The test expectations are consistently updated to reflect the new primitive value handling, where numbers, booleans, and undefined are no longer stringified. These changes provide good coverage of the behavioral change.

Also applies to: 753-777, 1228-1263


897-947: Excellent test coverage for raw value extraction.

This test comprehensively validates the new raw() API, covering var() reference extraction, non-var value pass-through, and usage with different token types. The test cases effectively demonstrate the intended functionality.


interface ThemeSubFunctions {
fallbackVar: typeof fallbackVar;
raw(varReference: unknown): string;
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Fix return type to match actual implementation.

The return type is declared as string, but the implementation returns CSSVarValue, which can be string | number | boolean | undefined (as seen in line 610 where primitives are returned directly). This type mismatch undermines type safety.

Apply this diff to fix the type signature:

-  raw(varReference: unknown): string;
+  raw(varReference: unknown): CSSVarValue;
📝 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.

Suggested change
raw(varReference: unknown): string;
raw(varReference: unknown): CSSVarValue;
🤖 Prompt for AI Agents
In packages/css/src/theme/index.ts around line 38, the raw(varReference:
unknown): string; signature is incorrect because the implementation returns
CSSVarValue (string | number | boolean | undefined); change the declared return
type to CSSVarValue to match the implementation and restore type safety (i.e.,
raw(varReference: unknown): CSSVarValue;).

Comment on lines 608 to 611
function extractCSSValue(value: TokenValue): CSSVarValue {
if (isPrimitive(value)) {
return String(value) as CSSVarValue;
return value as CSSVarValue;
}
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Verify type consistency with CSSVarValue definition.

Primitives are now returned directly instead of being stringified. However, CSSVarValue is defined as `${string | number}` (a template literal type that resolves to string), which is inconsistent with returning primitive number, boolean, or undefined values.

Consider one of these approaches:

  1. Update the CSSVarValue type definition in packages/transform-to-vanilla/src/types/style-rule.ts:
export type CSSVarValue = string | number | boolean | undefined;
  1. Or revert to stringifying primitives if CSS variable values must be strings:
-    return value as CSSVarValue;
+    return String(value) as CSSVarValue;

The first approach aligns with the test expectations and new behavior, while the second maintains type consistency with the current CSSVarValue definition.

🤖 Prompt for AI Agents
In packages/css/src/theme/index.ts around lines 608 to 611, extractCSSValue
currently returns primitive values (number/boolean/undefined) but CSSVarValue is
defined as a template literal (`${string | number}`) which resolves to string
and is therefore inconsistent; fix by updating the CSSVarValue type in
packages/transform-to-vanilla/src/types/style-rule.ts to be a union that allows
primitives (e.g., string | number | boolean | undefined), update any
imports/usages if necessary, run typecheck/tests, and remove any code that
previously stringified primitives if present.

@black7375
Copy link
Contributor Author

/fast-forward

@github-actions
Copy link
Contributor

github-actions bot commented Nov 3, 2025

Triggered from #271 (comment) by @​black7375.

Trying to fast forward main (743384f) to theme-raw-api (50145b3).

Target branch (main):

commit 743384fe107bc2ce523f3b1879690e8e81dfdc24 (HEAD -> main, origin/main)
Author: alstjr7375 <alstjr7375@daum.net>
Date:   Wed Sep 24 00:00:00 2025 +0900

    Feat: `theme` - Support `fallbackVar` method #266

Pull request (theme-raw-api):

commit 50145b3eca703e9884113b58eecd0c6ecb8631d3 (pull_request/theme-raw-api)
Author: alstjr7375 <alstjr7375@daum.net>
Date:   Thu Sep 25 00:00:00 2025 +0900

    Feat: `theme` - Support `raw` method #268

Fast forwarding main (743384f) to theme-raw-api (50145b3).

$ git push origin 50145b3eca703e9884113b58eecd0c6ecb8631d3:main
To https://github.com/mincho-js/mincho.git
   743384f..50145b3  50145b3eca703e9884113b58eecd0c6ecb8631d3 -> main

@github-actions github-actions bot merged commit 50145b3 into main Nov 3, 2025
12 checks passed
@github-actions github-actions bot deleted the theme-raw-api branch November 3, 2025 17:09
@github-actions github-actions bot mentioned this pull request Oct 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

1 participant