Add support for object-based styling to improve readability

[zakarialaoui10]

Tip

Refactored inline styles to allow usage of JavaScript objects for improved readability and maintainability

Example :

import van from "vanjs-core";

const { a, div, li, p, ul } = van.tags;

const Hello = () =>
  div(
    p({
        style: {
          backgroundColor: "coral",
          padding: "5px",
        }
      }, "👋Hello"),
    ul(li("🗺️World"), li(a({ href: "https://vanjs.org/" }, "🍦VanJS"))),
  );

van.add(document.body, Hello());

Note

Standard inline style as a string is still supported to avoid breaking changes or side effects on existing projects

Tip

This feature could be the key to implementing conditional styling based on state changes or user interactions.

[Tao-VanJS]

Thanks for the contribution!

However, object-based style doesn't support states and state bindings. For instance:

const Hello = () => {
  const color = van.state("coral")
  return div(
    p({
        style: {
          backgroundColor: color, // not reactive to `color`
          padding: "5px",
        }
      }, "👋Hello"),
    ul(li("🗺️World"), li(a({ href: "https://vanjs.org/" }, "🍦VanJS"))),
  );
}

btw: I've been thinking about this feature for a long time but haven't figure out a satisfactory way that is simple enough.