Computed styles for nested structures about pinceau HOT 5 OPEN

That is also something I'm considering, but I currently think that limiting computed styles to single attributes is also really good in terms of how it make you shape your components.

Handing big blocks of styling to computed styles would also mean these would rely on runtime styling, and this is not the state of mind Pinceau is trying to promote.

Yet, this is definitely something I could be implementing.

from pinceau.

Maybe we can design an enhanced property. Say $computed to render multiple css properties
Developers will choose them according to their actual situation, which may be a better experience for component library developers or some client pages facing the c side

css({
  ',text': {
     $computed: (props) => {
       return {
         color: `{color.${props.color}.600}`,
        fontSize: `{size.${props.size}}`
      }
    }
   }
})

from pinceau.

I would prefer this syntax:

css({
   '.text': (props) => ({
      color: `{color.${props.color}.600`,
      fontSize: `{size.${props.size}}}`
   })
})

I think I can implement that, but I'm just afraid of potential side-effects right now.

Also, I'm afraid it'll be misunderstood as a great way to apply style on groups of styles, while this ain't the case, variants are made for that. 😬

from pinceau.

What are the potential side effects?
I think we could suggest in the documentation a difference between variants and $computed. Like vue https://vuejs.org/guide/essentials/computed.html#computed-caching-vs-methods passages in the document
There are several computed properties which I think give a good dx experience in css pseudo-class states like hover and active focus

from pinceau.

I also think this approach can be a bit confusing,

css({
   '.text': (props) => ({
      color: `{color.${props.color}.600`,
      fontSize: `{size.${props.size}}}`
   })
})

With $comouted, developers may be able to visually display which css styles are dynamic and which are static

css({
  '.test': {
     display: 'flex',
    $computed(props) {
      return {
       'color': 'color.{props.color.600}',
       'width': 'size.${props.size}'
     }
    }
   }
})

because there are usually some fixed css styles such as display white-sapce common css properties.

from pinceau.