Difficulty to make a component with complex CSS selectors

[matschik]

Hi ! Thanks a lot for this lightweight library !

I'm experiencing difficulties with this piece of CSS to a Picostyle wrap component. Anybody got a solution for this complex piece of CSS ?

/* Dynamic columns */
/* one column */
.dcolumn:first-child:nth-last-child(1) {
  float: left;
  width: 100%;
}

/* two columns */
.dcolumn:first-child:nth-last-child(2),
.dcolumn:first-child:nth-last-child(2) ~ .dcolumn {
  float: left;
  width: 50%;
}

/* three columns */
.dcolumn:first-child:nth-last-child(3),
.dcolumn:first-child:nth-last-child(3) ~ .dcolumn {
  float: left;
  width: 33.3333%;
}

/* four columns */
.dcolumn:first-child:nth-last-child(4),
.dcolumn:first-child:nth-last-child(4) ~ .dcolumn {
  float: left;
  width: 25%;
}

[morishxt]

Thank you for using picostyle! Now, we can't refer components' class name in the component, so we can use the following selector.

.dcolumn:first-child:nth-last-child(2) ~ .dcolumn {}

const DynamicColumn = style("div")({
  // some styles

  "first-child:nth-last-child(2)": {
    float: left;
    width: 50%;
  },
  "first-child:nth-last-child(2) ~ .dcolumn": { // we can't know `.dcolumn` (this component's class name)
    float: left;
    width: 50%;
  }
})

I'll try to support it.

[matschik]

Thank you very much for your confirmation ! Anyway these styles are convenient to be declared in global CSS scope.