CSS support?

[ZebraFlesh]

If my component includes CSS, how can I include that in the response? I don't see how that information could be included in the response from getComponent. Am I missing something elementary here?

[juanca]

I think this might be beyond the scope of Hypernova.

At the moment, I am using Hypernova in a Rails application. We analyze the produced manifest from Webpack in our Rails views to generate the correct link and script tags.

As far as I can tell, Hypernova is only concerned about producing the boilerplate on React entry points and rendering the initial HMTL state for the component -- letting regular React bind interactivity (and correct render problems) via hydration.

[marconi1992]

@ZebraFlesh What do you mean about CSS?

You can use the context parameter from the method getComponent.

The context variable contains a returnMeta property you can use to add whatever you want. I usually use it to provide an URL of the CSS file.

getComponent(name, context) {
    if (name === 'Example') {
      context.returnMeta = { css: 'url here' };
      return renderReact(name, Example);
    }

    return null;
}

[ZebraFlesh]

Perfect! That’s the piece that was unclear. Thank you!

[ljharb]

This seems answered; thanks @marconi1992.

[androdel]

And what about if you work with CSS modules and you want to include all that styling in the microfrontend?

[ljharb]

Then it’d be bundled up with your JS, no? That seems like it would “just work”, like any css-in-js solution.

[androdel]

It's bundled, but not included in the html hypernova server returns

[ljharb]

true, you’d need to generate a css file on the server during rendering to include with the initial payload. https://npmjs.com/hypernova-aphrodite is how Airbnb does it.

[androdel]

Hmm, adding Aphrodite is not an option. We use SCSS so we need to process it with Webpack. Something like this:

import style from "./style.scss";

const Component = () => <div className={style.wrapper}>test</div>;

[ljharb]

I wasn’t suggesting Aphrodite, i was showing one technique you could adapt.

[androdel]

My bad. Thanks for the info

[eliecer2323]

@ZebraFlesh What do you mean about CSS?

You can use the context parameter from the method getComponent.

The context variable contains a returnMeta property you can use to add whatever you want. I usually use it to provide an URL of the CSS file.

getComponent(name, context) {
    if (name === 'Example') {
      context.returnMeta = { css: 'url here' };
      return renderReact(name, Example);
    }

    return null;
}

@marconi1992 Hello, what could I do then to receive the data from the context.returnMeta and insert it into the link element using a hyper nova-directive like the handlebars one