Skip to content

Omit nested instance layout properties that match their main component #299

Description

@nathanacurtis

Problem

When a nested instance is placed inside a component and its layout is unchanged from the component it instantiates, the generated spec repeats those layout values anyway. A Toolbar that places a navigation action emits width and height on that instance even though the action component's own root already defines both, unchanged.

This makes specs longer than they need to be and misrepresents intent: a repeated value reads as a deliberate override when nothing was overridden. It also multiplies maintenance — a carousel that places nine dots restates the same size nine times, and a change to the dot would need edits in every host.

A catalog audit found 132 such declarations across 31 components.

Solution

A layout property on a nested instance is omitted when it is identical to the same property on the specific configured variant the instance points at. The value then conveys from that component's own default element styling, as it already does for every other inherited characteristic. Values that genuinely differ are still emitted.

The properties compared:

Property Suppressed when equal
width yes
height yes
minWidth yes
minHeight yes
maxWidth yes
maxHeight yes
layoutSizingHorizontal yes
layoutSizingVertical yes

All sizing values are compared, including FILL — if the instance and its component agree, the value is redundant regardless of which mode it names.

Acceptance criteria

  • A nested instance whose layout matches its component emits no layout properties for the matching values
  • A nested instance that resizes its component still emits the differing values
  • Comparison is against the configured variant, not the component set's default
  • A value expressed as a token on one side and a raw number on the other is treated as different and retained
  • FILL sizing is compared on the same terms as FIXED and HUG
  • CLI and plugin produce identical output

Problems

  • Redundant values read as intentional overrides
  • Repetition scales with sibling count — nine carousel dots restate one decision nine times
  • Six components restate a shared sheet's minimum height, so one change means seven edits
  • Text-bearing subcomponents restate vertical hugging that a parent cannot override anyway

Impacted code

  • specs-from-figma: src/Component/Elements/Primitives/InstanceElement.ts, src/Component/Styles/

Text fixtures

  • Toolbar — navigation action restating a square size
  • Paging Carousel Dots — the same size repeated across nine dots
  • Text Input — an end action that genuinely differs and must be retained

Implementation details are tracked internally.

Metadata

Metadata

Assignees

Labels

generatorspecs-from-figma processing engine

Type

Projects

Status
In progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions