🔷 [Epic] CSS-in-JS support

[mpeterdev]

To allow developers to style their BOS components without inlining all styles on each React component, we should support a CSS-in-JS solution

styled-components is the initial target since it is already used in the VM and is one of the most highly adopted CSS-in-JS tools

Implementation notes

We need a way to send the style data to the Outer Window Application where they can be applied to the Widget DOM. It looks like integrating styled-components into the Outer Window Application is the approach to try first. The hard part will be mapping the styled component to the serialized component.

[andy-haynes]

styles is shimmed in the current implementation to pass back the HTML element type, ignoring the CSS in the template string: https://github.com/near/bos-web-engine/blob/main/packages/iframe/src/SandboxedIframe.tsx#L164.

If this CSS string can be encoded into the serialized DOM node, then there should be enough context to incorporate the CSS into the deserialized node rendered in the Outer Web Application.

e.g. a naive implementation of this could be simply concatenating the CSS onto the HTML type:

          const styled = new Proxy({}, {
            get(target, property, receiver) {
              return (css) => {
                return property + ':' + css;
              };
            }
          });

Where the React node deserialization would split the CSS out and interpret it as the element's inline style.

Since the Outer Web Application is building raw React with createElement, we will likely require some interpretation of the CSS such that it is inline with the currently supported styled-components approach. In particular I am not sure how more advanced use cases like media queries will be supported.

[mpeterdev]

@andy-haynes should this come after #57 since styled-components leverages a plugin from either babel or swc?

[mpeterdev]

relevant: https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method

[andy-haynes]

If SWC and Babel each only require a single plugin then I'd consider it a loose dependency. It doesn't look like we'd spend much time on a transpiler integration either way so I don't necessarily see a problem with prioritizing this over SWC if we want CSS sooner.

[mpeterdev]

https://github.com/near/bos-web-engine/discussions/130#discussioncomment-7459805

[mpeterdev]

if this proves challenging, especially to support features like media queries, we could downgrade the priority of this epic to P1/P2 and upgrade #8 to a P0