No Redundant Aspect Ratio Constraint

ErrorRoblox

small-rules/no-redundant-aspect-ratio-constraint

Disallow redundant uiaspectratioconstraint children inside components that already manage their own aspect ratio internally.

Rationale

Some components already render a uiaspectratioconstraint internally – passing one as a child is redundant and can cause layout fighting. This catches the case where you hand a UIAspectRatioConstraint to a component that manages its own.

It’s not just checking the current file. The rule reads imported component files to see if they already render the constraint, so ButtonSpritesheet and friends get caught even when the constraint lives in their source. Spritesheet components are known to do this.

Diagnostic Messages

redundantAspectRatioConstraint

This component already renders a uiaspectratioconstraint internally. Passing one as a child is redundant and will cause layout issues.

Configuration

This rule does not accept options.

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/no-redundant-aspect-ratio-constraint": "error"
  }
}

Examples

duplicate aspect ratio constraint

const UI_ASPECT_RATIO_CONSTRAINT = <uiaspectratioconstraint AspectRatio={1.5} />;

function LabelSpritesheet({ children }: { children?: React.ReactNode }) {
  return (
    <imagelabel>
            {children}
            <uiaspectratioconstraint AspectRatio={1.5} />
    </imagelabel>
  );
}

const view = (
  <LabelSpritesheet sprite="icon">
    {UI_ASPECT_RATIO_CONSTRAINT}
      </LabelSpritesheet>
    );

non-redundant layout constraint

function LabelSpritesheet({ children }: { children?: React.ReactNode }) {
  return (
    <imagelabel>
      {children}
      <uiaspectratioconstraint AspectRatio={1.5} />
    </imagelabel>
  );
}

const view = (
  <LabelSpritesheet sprite="icon">
    <uigradient Color={gradient} />
    <textlabel Text="hello" />
      </LabelSpritesheet>
    );

Related Rules

No Useless DefaultRelatedDefault-prop noise and redundant aspect-ratio constraints both strip useless Roblox UI declarations.Prefer Padding ComponentsRelatedPadding component preference and redundant aspect-ratio constraints both simplify Roblox UI layout markup.