How to declare a tree-structural pseudo-class on component for sub-element?

.component:last-childThe selector you want to insert .elementThe element you want to style

Unlike the case Sub-element with Tree-structural Pseudo-class, this case is solved classically through a +variant mixin.

Option 1

SASS

+component('.btn')
  +register
    +variant(':last-child')
    +element('.icon')

  display: inline-flex

  +___________________
  +element('.icon')
    +default
      background-color: grey
    
    +variant(':last-child')
      background-color: red

CSS

.btn {
  display: inline-flex;
}

.btn .icon {
  background-color: grey;
}

.btn:last-child .icon {
  background-color: red;
}

More info: +variant, +default, +element, +register, +component, separator +___

Option 2 - even better with alias

SASS

+component('.btn')
  +register
    +variant('{last button}', ':last-child')
    +element('.icon')

  display: inline-flex

  +___________________
  +element('.icon')
    +default
      background-color: grey
    
    +variant('{last button}')
      background-color: red

CSS

.btn {
  display: inline-flex;
}

.btn .icon {
  background-color: grey;
}

.btn:last-child .icon {
  background-color: red;
}

More info: +variant, +element, +register, +component, separator +___