fix: design-tree property loss — 4 fixes (#15)

[let-sunny]

Summary

design-tree 변환 시 Figma JSON 속성이 손실되는 4건 수정.

1. fill.visible=false 무시

• 이전: invisible fill도 background 색상으로 출력
• 이후: visible: false인 fill은 skip

2. individualStrokeWeights per-side stroke 손실

• 이전: 항상 border: 1px solid
• 이후: individualStrokeWeights 있으면 border-bottom: 1px solid 등 per-side 출력
• strokeWeight 값도 반영 (기본 1px)

3. textDecoration 속성 누락

• 이전: text-decoration 관련 출력 없음
• 이후: UNDERLINE, STRIKETHROUGH 출력 (NONE은 skip)
• 검증: simple-ds-card-grid "Read our T&Cs" → text-decoration: underline ✅

4. IMAGE fill type 누락

• 이전: IMAGE 타입 fill 무시
• 이후: background-image: [IMAGE] 마커 출력
• 검증: material3-kit-2 Image 프레임들 → background-image: [IMAGE] ✅

추가

• strokeWeight, individualStrokeWeights를 AnalysisNode 스키마 + transformer에 추가
• Fill opacity < 1일 때 rgba() 형식 출력

Test plan

• pnpm test:run — 277 tests passed (7 new)
• pnpm lint — clean
• simple-ds-card-grid fixture: textDecoration 확인
• material3-kit-2 fixture: IMAGE fill 확인

Closes #15

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Enhanced stroke rendering with support for per-side border weights.
  • Added text decoration support, including underline styling.
  • Improved fill handling with proper rendering of image fills and visibility states.
  • Better border thickness accuracy reflecting individual stroke weights from designs.

[coderabbitai]

Warning

Rate limit exceeded

@let-sunny has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 7 minutes and 12 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: a40088fa-d117-4ae7-b735-1cb163e14787

📥 Commits

Reviewing files that changed from the base of the PR and between 57d55ce and 4f351ce.

📒 Files selected for processing (1)

• src/core/engine/design-tree.ts

📝 Walkthrough

Walkthrough

This PR fixes four Figma property loss issues during design-tree conversion: invisible fill handling, per-side stroke weights, text decoration rendering, and IMAGE fill type support. The schema is extended with stroke properties, and the transformation logic is updated to preserve and correctly process these attributes in CSS output.

Changes

Cohort / File(s)	Summary
Schema Extension src/core/contracts/figma-node.ts	Added optional strokeWeight?: number and individualStrokeWeights?: Record<string, number> to BaseAnalysisNodeSchema to support stroke metric validation.
Figma Adapter src/core/adapters/figma-transformer.ts	Updated transformNode to conditionally copy strokeWeight and individualStrokeWeights properties from Figma nodes to AnalysisNode output.
Design Tree Engine & Tests src/core/engine/design-tree.ts, src/core/engine/design-tree.test.ts	Replaced getFill() with getFillInfo() returning { color, hasImage }; added fill visibility checks to skip invisible fills; implemented background-image for IMAGE fills; added per-side border rendering via individualStrokeWeights; implemented TEXT node text-decoration style output; added comprehensive test coverage for new rendering rules.

Sequence Diagram

sequenceDiagram
    participant Figma as Figma JSON
    participant Adapter as Transformer
    participant Engine as Design Tree
    participant Output as CSS Output

    Figma->>Adapter: strokeWeight, individualStrokeWeights, fill.visible
    activate Adapter
    Adapter->>Adapter: Copy stroke properties conditionally
    Adapter-->>Engine: AnalysisNode with stroke data
    deactivate Adapter

    Figma->>Engine: fill[], textDecoration
    activate Engine
    Engine->>Engine: Check fill.visible === false
    alt Invisible Fill
        Engine->>Engine: Skip fill
    else Visible Fill
        alt SOLID fill with opacity
            Engine->>Engine: Convert to rgba()
        else IMAGE fill
            Engine->>Engine: Collect background-image
        else Standard color
            Engine->>Engine: Use hex color
        end
    end

    Engine->>Engine: Check individualStrokeWeights
    alt Per-side weights exist
        Engine->>Engine: Emit border-top/right/bottom/left
    else Uniform weight
        Engine->>Engine: Emit border: Npx solid
    end

    Engine->>Engine: TEXT node + textDecoration?
    alt textDecoration present
        Engine->>Engine: Emit text-decoration style
    end

    Engine-->>Output: CSS with fills, borders, decoration

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A stroke of genius, fills now gleam,
Per-side borders realize the dream,
Text dances underlined and free,
Images hint at what they'll be,
Four lost props reclaimed with glee! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: design-tree property loss — 4 fixes (#15)' accurately summarizes the main change: addressing four specific Figma property losses in design-tree conversion.
Linked Issues check	✅ Passed	All four objectives from issue #15 are addressed: invisible fills are skipped [1], individualStrokeWeights now emits per-side borders [2], textDecoration is output [3], and IMAGE fills now emit background-image markers [4].
Out of Scope Changes check	✅ Passed	All changes directly support the four fixes in issue #15; schema extensions for strokeWeight and fill opacity handling are necessary supporting changes within scope.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/design-tree-property-loss

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}