#6371·astryx

[Bug] List hasDividers draws a divider after the last item: ListItem's :last-child reset is missing from the build

Author: lzcmianCreated Sep 18, 2026Updated Sep 18, 2026

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):

typescript
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):

javascript
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

typescript
<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:

typescript
':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:

typescript
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.