Computed styles for nested structures

[SGAMERyu]

for example
A basic button component will change the style for the different options in the Button module, as shown in the image below

The hover state of each variant may change one or both of button's css properties, and computed systems currently support only one property and I prefer the following representation

<script lang='ts' setup>
const hoverButton = (props) => {
  return {
   background: '{colors.red}',
   color:  '{colors.white}'
  }
}
</script>
<style lang="ts">
css({
  '.btn': {
    '&:hover': (props) => hoverButton(props)
  }
})
</style>

Can we implement this method, I tried to change the source code. It turns out that using v-bind in vue also seems to support only individual attributes and not objects

[Tahul]

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.

[SGAMERyu]

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}}`
      }
    }
   }
})

[Tahul]

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

[SGAMERyu]

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

[SGAMERyu]

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.