Consider Switching from String-based CSS to JavaScript Object Syntax for Styles.

[SKRR6773]

Hi, I’ve been working with the Adapter class and appreciate the way it isolates styles for components. However, I’d like to share some feedback about the current string-based CSS approach:

1. Hard to Write and Debug: Writing styles as strings can feel unintuitive. Without auto-complete or syntax checking, it’s easy to make mistakes, and catching them often only happens at runtime.

2. Lack of Integration with Tools: IDE features like IntelliSense, auto-complete, and TypeScript support are unavailable for string-based CSS. These are tools I rely on heavily to code efficiently.

3. Doesn’t Feel Like JavaScript: Modern JavaScript often uses object-based styles, where properties like background-color are converted to camelCase (backgroundColor). It’s cleaner, aligns with JavaScript conventions, and is easier to work with in dynamic contexts.

For example, instead of this:

const cardStyle = `
  display: block;
  min-height: 5rem;
  width: 100%;
  color: red;
`;

I’d prefer this:

const cardStyle = {
  display: "block",
  minHeight: "5rem",
  width: "100%",
  color: "red",
};

This approach:

Makes styles easier to write and maintain.

Allows tools like auto-complete and type checking to catch errors early.

Aligns better with the JavaScript ecosystem.

[nitipit]

This could be a good idea, I think we can have both options, CSS string or CSS JSON Object.

For a quick fix in your case to enable auto-completion / syntax checking, you can try plugin comment-tagged-templates. I've used it in my project with adapter and it works great.

Also, most developers prefer to use tagged template like html``, or css`` to make IDE know for sub-language block and parse it correctly which now VSCode and other famous IDE (Zed) can understand. So in Adapter 3.0 will instead provide CSS Parser as a tagged template in stead of directly integrated inside the class Adapter

From my quick research, Apply CSS JSON directly might have some limitation about CSS nest selection. Since the CSSStyleDeclaration object is tied to specific DOM elements and only supports flat, element-level styles.

So, I think we can go for implementation like JSS which parse CSS JSON into CSS String then register it to the HTML Document.

Could you please also provide the frameworks you've used (CSS JSON) so I might catch some ideas out of them ?

[nitipit]

Relate to #42 #43