All rules

Sheath rule

native-misrender-class

NativePHP arbitrary utility values must match the numeric semantics sent to the device.
Package
NativePHP
Category
Native
Default severity
error by default
Auto-fix
Manual fix

#Why

NativePHP accepts some CSS-like arbitrary values but casts them to numbers. Percentages, viewport units, rem values, and named colors can therefore render with a different meaning than the source suggests.

#Examples

#Bad

{{-- 50% becomes 50, and 1rem becomes 1. --}}

{{-- Opacity 65 is not normalized; red is not a valid arbitrary color. --}}

<native:column class="w-[50%] rounded-[1rem] opacity-[65]">

    <native:text class="text-[red]">Account</native:text>

</native:column>

#Good

{{-- These values retain the intended native numeric meaning. --}}

<native:column class="w-[320] rounded-[16px] opacity-[0.65]">

    <native:text class="text-[#B42318]">Account</native:text>

</native:column>

Line-height suffixes such as text-base/7 are also reported because NativePHP keeps the font size and discards the line height.

#Checked Values

Checked values include arbitrary lengths for spacing, size, position, radius, and border width, along with opacity, text size or color, and aspect ratios.

This finding applies only to an accepted token whose meaning changes. Tokens with no native effect and dark properties that are discarded entirely are outside its scope.

#Options

All NativePHP rules accept nativeViewPaths. The default is ['views/native/']. See Native View Detection for path configuration.

#See Also

Related rules cover unsupported and platform-discarded classes: