CSS leakiness

The causality is hard to trace, but it seems like CSS may be somewhat leaky, in that I’ll have to unset properties sometimes because I’ve set them elsewhere. In other words, a property is being applied to an element but the CSS box is empty. I think it’s wonderful we can add CSS to get around Antetype’s limitations, but the overall clunkiness and problems like this make me really wish I had to use it only sparingly, instead of all the time for now-essential properties like grid, gap, aspect-ratio, etc…

You’re right. We will add more often used properties. Gap already implemented and testing btw.

1 Like

Could you also send an example where the above described applies?

I think I’ve determined that the issue isn’t leakiness, but that the view doesn’t update until you update the widget, unless you explicitly set a new value. So more confusing than a major problem.

If I understand it correctly this is due to the way the CSS property is implemented. Every widget cell has basically the following CSS-selectors:

.WidgetCellInStateNormal {
     background: red;                /* CSS generated from Antetype */
     border: 1px solid blue;         /* ditto */
     …
     box-shadow: 0 0.8px 0.7px hsl(…     /* CSS verbatim copied from the CSS property */

}

.InstanceCellInStateNormal {
     width: 200px;               /* some instance properties (overwritten or individual) */

     /* no CSS, since the CSS property is empty */
}

While applying the styling the browser first applies the first Styles (WidgetCellInStateNormal) since the are the first in the CSS. After that the Instance side is applied (InstanceCellInStateNormal). Without a widget update the box shadow is still applied. To “overwrite” it, you would have to explicitly set it, with for example: box-shadow: none in the CSS-property of the cell which should not use the styles defined in the widget.

If you use normal Antetype-properties, we do the same behind the scenes. Does this help?

Yup, thanks!