CSSStyleSheet support

[thecodrr]

Current there is simply no way to dynamically inject styles via JS. Having CSSStyleSheet support would allow easy manipulation of CSS via JS. A further use case is CSS-in-JS (libraries like Emotion, StyledComponents) etc.

[c-smile]

While it is feasible to provide CSSStyleSheet implementation I wouldn't recommend the approach used in Emotion, StyledComponents in production for two reasons:

1. when you modify CSSStyleSheet you touch (make invalid) whole rendering tree of the document. That's against Reactive principles ( change only what needs to be changed but not everything around).
2. Placing styles inside code breaks separation of concerns principle. There is no single source of truth. It is as bad as inlining styles.

Sciter has better (IMO) alternative to this problem by offering styleset's:

class Component extend Element {

  render() {
     return <div styleset="theme.css#Component">
        <button>Foo</foo>
     </div>;
  }
}

and theme.css:

  @set Component {
      :root {  background:red;  }

      button {  background:green;  }
      button:hover { background:gold; }
  }

So a) styles and code are separated and b) local component styles are not polluting common style space.

[thecodrr]

I do agree with you on those points but these are architectural problems that depend on the developer. Currently my use case is that I am trying to port over a relatively huge React app that is mainly styled with Emotion/StyledComponents and the main barrier to entry is the lack of CSSStyleSheet. The htmlx example was really helpful and I was able to boot up the app but it looks no where close to how it should because all the styling is CSS-in-JS.

[thecodrr]

@c-smile I see that there is already a way to change styles via styleElement.innerText = cssText so perhaps something of this kind can be exposed as well? Even if it is added as a secondary option, it would help getting ready-made apps up & running. After that's done, developers can start the migration process if required. There are other benefits to providing a CSSStyleSheet as well which I am sure you know better than me. It would be a great addition to Sciter.