[trafnar]

Panda seems really nice. As someone who does a lot of "creative" CSS work, writing styles quickly is important to me. I find writing styles as Javascript objects kinda cumbersome. I wish there was a way to use Imba's CSS system within a React or other Javascript app. https://imba.io/docs/css/syntax

Imba allows you to write CSS anywhere in a component definition using CSS-like syntax (rather than Javascript object syntax).

The syntax for adding a quick inline style is so simple:

  <div [width:20px]>

You can even do hover states in an inline style:

  <div [color:red @hover:blue]>

And interpolation is easy too:

  <div [width:{someValue}px]>

Putting a CSS block at any level of your tag hierarchy scopes it to that tag.

  <div.foo>
    <div.bar>
      css color:red # this applies to div.bar
        em color:blue # this applies to div.bar em
      
      "hello"
      <em> "world"

CSS blocks declared in a component definition but outside of the markup, apply to the whole tag. CSS declared in a file, outside of a component definition, apply to all components defined in that file. There is also a global keyword to apply styles globally.

and there's a whole range of other useful features, a favorite of mind is the shorthand syntax for things like this:

  c:red # same as color:red
  d:vtc # same as display:flex flex-direction:column justify-content:center
  x:10px rotate:30deg # same as transform:translateX(10px), rotate(30deg)

[pier25]

Imba CSS is just brilliant.

I've considered porting it to JS into a Vite plugin so the same syntax can be used anywhere else. I would have done it already if I had the time.