CMS React: Import Styles Correctly w/ js_partial and module helpers

[critesjm]

Hello!

I have a body in my base.hubl.html layout with some header and footer partial imports defined like so:

{% js_partial path="@projects/theme_name/theme/partials/Footer/index.tsx", no_wrapper=True %}

When rendered in the preview by the CMS Developer Server (and in the web page builder after uploading the theme) the relevant styles are not applied to my partials. It appears when you include javascript files via that function the CSS isn't properly mangled in the built styles (but it is in the HTML output) and the stylesheet links are inserted at the wrong spot in the template (in the body, directly before the partial's HTML instead of in the head).

[BarryGrennan]

Hi @critesjm, 

Could you show us your index.tsx file? It'll be easier to diagnose the issue.

I'm also in the process of getting to grips with CMS React.

When you say the CSS is mangled do you mean something like your_class showing up as _your_class_1xdun_7?

That's an intended feature to scope the class to the specific module

So if you're including your CSS like:

import myStyles from '../../styles/mystyle.module.css';

and then calling the classes from it like

className={myStyles.some-class}

It'll render like 

_some-class_1xdun_1

If you want it to render a class on an element (say one of your theme styles)
You can do something like

className={`some-theme-class`}

Or if it's from the imported CSS (e.g. import myStyles from '../../styles/mystyle.module.css';) but you need it to render the class exactly as it is there, you can mark it as a global class in the css

:global(.some-class) {
  height: 100%;
}

If I've missunderstood what you're looking for let's get a look at your index.jsx to get a better understanding

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[critesjm]

Hey Barry!

I can't share the TSX as it's for a private work project. Like you said, I am importing the style module and then passing them like your example of the correct way to do it. Yes the CSS classnames in the built HTML based on my react code have the expected hashing you get with CSS modules but in the linked CSS files on the template preview the classes have not been transformed to match it (eg. in the HTML you'd have something like `.footer_h5jk6` but the class in the linked CSS is still just `.footer`). As a result I get the correct HTML but no styling. This only happens when I preview a template locally or try to build a page based on that template in the web editor. If I preview the partial via the "View Local Version" button on the cms server dashboard the styles are built correctly.

[nickdeckerdevs1]

When you say template preview isn't showing this correctly -- Where is this? 

Is this like on the actual url that a live page would be? There are times when doing a preview in HubSpot will not accuratley preview this. Especially with projects and react, and sometimes in more complicated items.

I'd suggeste going to yoru website page, publishing it on a domain or test domain, then reviewing the output from there, not using preview.

[critesjm · Accepted solution]

If that's truly the case then it needs to get fixed. I do not think that issue is related to what I'm seeing though.

Unfortunately, where I stand now is: my project preview style builds started working completely at random while I was tinkering with alternatives. Specifically, I tried replacing CSS modules with @emotion/react in one of the partials and then suddenly all styles in all partials in the template preview worked as expected, regardless of the tech used to build them. I've since uninstalled @emotion/react and CSS module style builds continue to work.

This is disappointing and kind of in line with everything I've experienced trying to build a theme for my employer using the default typescript template and examples for CMS React. The auto-generated project was missing basic things like type declarations for island imports (which exist in @hubspot/cms-components but are missing in both the examples repo and the typescript project template) and the example projects are completely broken when you open them in VS Code, the recommended editor (eslint isn't configured for typescript in the typescript projects and they are also missing the previously mentioned declarations).

I've submitted a PR to fix some of these issues (and plan to submit more) so others will be able to start from somewhere better but I hope someone at Hubspot sees this and diverts the necessary resources to make this product as good as it can/should be.

[nickdeckerdevs1]

As for your issue I’m guessing it had something to do with a render error
if they are working now.

As far as my response goes, that was just a possibility of your code was
correct.

[nickdeckerdevs1]

As someone that has been building on the platform since day 3, I'm not jumping into the react stuff right now because there isn't enough other people that have gone through the issues and moved them. It is too new and I don't have the time to wade through this when building out a theme without react will be so much faster.

early in my career I would have had the time to test stuff out and work through issues. I just don't at this point and until there is a shift where the community has worked through issues, this is in the back burner. I see no advantage to using react on HubSpot at this point. And if I was contracted where react was a necessity, I would have to make sore I've worked through some proof of concepts and make sure I know what I'm doing with the tools before accepting a contract. 

[critesjm]

You're right that for anyone doing this full-time or who is new to CMS dev in general I probably wouldn't touch the CMS React product yet. This was just a one-off side project assigned to me and I was trying to leverage my React experience to get it done quickly not realizing quite how new the product was. One positive note is I can say that even with all the headaches it was nice to be able to mostly use my existing knowledge and tools with just a thin wrapper of hubl/jinja to learn. It'll be very nice once it's a bit more complete.

[nickdeckerdevs1]

Yeah. The limited amount of play that I have done has been reviewing what
is in the elevate theme, grabbing sections of that are putting into a repo
for me to mess with later.

Hoping I have a slow down in work or some spare time to jump into it more.