styling not working in bundle for we applet

[weswalla]

in #188 we are able to bundle acorn as a we applet and open it in we. However, none of the styling is preserved. Currently, styles can be added directly to the shadow root in the appletRenders function using raw-loader https://github.com/lightningrodlabs/acorn/blob/f5ce5e9993dad3734ec53a6bfd6c1d102b6e16d9/web/src/appletIndex.ts#L19-L37 styles.css is just a test, it could just as easily be any .scss file in the project. It does successfully inject the style from that file into the ui when rendered in We, however, acorn styles are spread across many .scss files coupled to components etc.

If this is the approach we are using to inject style, then we would need to aggregate all styles into a single file that can be imported as a variable and appended to the shadow root, like so https://github.com/lightningrodlabs/acorn/blob/f5ce5e9993dad3734ec53a6bfd6c1d102b6e16d9/web/src/appletIndex.ts#L37

context of approach from: https://stackoverflow.com/questions/60659473/inject-css-styles-to-shadow-root-via-webpack

[weswalla]

It does look like the styling is bundled already into the output of webpack, though, so it doesn't make much sense to aggregate css and then apply it directly to the shadowRoot when it really just needs to be activated in some way.

[Connoropolous]

That sounds right @weswalla that in fact the css is bundled up somehow, but detecting where that output is, and getting it folded in to the We context is the challenge. TBH I dont have a whole lot to add, without more visibility into the flow, so I'm not super helpful here from a distance. It looks like tangible steps are being made in a good timeline of progress

[weswalla]

in this commit https://github.com/lightningrodlabs/acorn/pull/188/commits/af6517c5a9a4fa5da64f647aee336c278371af8e I tried to bundle all the css into one file then inject that into the shadow root style tag https://github.com/lightningrodlabs/acorn/blob/af6517c5a9a4fa5da64f647aee336c278371af8e/web/src/appletIndex.ts#L21 but it definitely is not working:

We will need to further inspect how exactly the css is bundled with the rest of the UI code, and determine how to apply that, whether on the applet side or We side.

[weswalla]

will try out some more approaches outlined here: https://stackoverflow.com/questions/60659473/inject-css-styles-to-shadow-root-via-webpack / https://www.appsloveworld.com/reactjs/100/9/inject-css-styles-to-shadow-root-via-webpack