[Bug] List hasDividers draws a divider after the last item: ListItem's :last-child reset is missing from the build
Description
With hasDividers, a List also draws a divider below its last item. ListItem means to remove it, but that rule is missing from the published build.
Source (packages/core/src/List/ListItem.tsx):
withDivider: {
borderBlockEndWidth: borderVars['--border-width'],
borderBlockEndStyle: 'solid',
borderBlockEndColor: colorVars['--color-border'],
':last-child': {
borderBlockEnd: 'none',
},
},Published build (dist/List/ListItem.js, same in 0.6.0, 0.6.2 and 0.6.2-canary.da998a2):
withDivider: {
kt9PQ7: "x92x3c3",
kfdmCh: "x1q0q8m5",
kL6WhQ: "xw8gpjh",
$$css: true
}The three longhands are there, but the :last-child entry is not. dist/astryx.css has no :last-child rule that resets the block-end border either. So the last item keeps border-bottom-width: var(--border-width).
Expected: no divider after the last item, as the source intends.
Reproduction
<List hasDividers>
<ListItem label="One" />
<ListItem label="Two" />
</List>A border renders below "Two". This is most visible when the list sits inside a padded container such as Card: a line appears just above the container's bottom padding.
Likely cause and suggested fix
The :last-child value uses the borderBlockEnd shorthand, and it looks like the StyleX compile drops it. Using a longhand should fix it:
':last-child': {
borderBlockEndWidth: 0,
},Related: #1968 added no-border-shorthand and fixed ListItem's borderBlockEnd, but the rule allows reset values like 'none'. A reset shorthand inside a pseudo-class is exactly what gets lost here, so the lint rule may be worth tightening for that case.
Workaround
A theme override restores the intended behavior:
components: {
'list-item': {
base: {
':last-child': { borderBlockEndWidth: '0' },
},
},
},Astryx Version
@astryxdesign/[email protected] (also verified in 0.6.2 and 0.6.2-canary.da998a2)
Environment
Browser-independent: the rule is absent from the published CSS.
Source: facebook/astryx