Custom CSS insertion point via macros

[aryzing]

Macaron has an amazing macro engine! Can it be tweaked to insert the generated styles into a predefiend point in a source file?

This is desirable when developing web components (custom elements) since usually authors want/need the styles to be inlied within the shadow dom. Was thinking of something like,

function Root() {
  return <>
    <style>MACARON_INLINE_STYLES</style>
    <div>{restOfTheComponent}</div>
  </>
}

When building with Vite, the final step would be to insert the styles in the style tag above rather than generate a css file.

Solid.js provides a great experience building web components user their solid-element package, all that's missing is a lib that can support injecting styles into the output, since css files aren't as easy to distribute as as self-contained custom element.

If macaron can pull this off, solid + macaron would be a killer combo for all things web components related. Could this be done?

[Mokshit06]

Glad you like Macaron. Unfortunately this feature seems... tough, and very much restricts the capabilities of macaron due to how it works.

For this to work, macaron needs to insert style declaration at the root of usage site instead of at the declaration site, which it does currently. This adds a lot of complexity, as you'll need to track the renders all the way upto the root web-component.

For these reasons, I don't think adding it is worth the trade offs and uncertainty it introduces in the compiler

[aryzing]

Fair enough, wanted to throw that out there should it have been viable to implement. Thank you for putting together a great lib!