A short case for Dynamic CSS - Once again

Summary of my conversation with @scanf

In the short term,

it would be wonderful to have a basic syntax support that creates a simple bridge to pass dynamic values from imba to the the stylis css compiler. A good use for this is theming and also for creating shareable components with dynamic styles. Here’s a small example of theming.

Here’s a sample wishful syntex

tag app-button
   def style scoped
      --primary: {@theme.primary}
   def render
        <self> "hello"

In the long term,
It would be good to have a native system similar to that of styled-components for react. They have given a lot of thought on how to handle styling for shareable components, and their approach solves a lot of issues that come from sharing components across different projects.
Their 6 bullets on their site here which summarize the solutions they bring to component based styling, and I think they are genius, and it’s gaining a lot of traction. Here are the bullets also:

  • Automatic critical CSS : styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
  • No class name bugs : styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
  • Easier deletion of CSS : it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
  • Simple dynamic styling : adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
  • Painless maintenance : you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
  • Automatic vendor prefixing : write your CSS to the current standard and let styled-components handle the rest.

A lot of the pain points for building web-components with html and js are solved with Imba, but dynamic styles for shareable components is still quite a challenge that still needs to be solved in the development world.
If Imba provides a consistent system for building theme-able, class-agnostic styled components, it would be another huge win for Imba.

1 Like

I will link to it from the bi-weekly meeting notes.

Thanks a lot for summarising :bowing_man: