CLI or THEME Bug

[igcorreia]

I don't know how to describe this BUG, but I think either I have an error in HUBL code that the CLI is not detecting and for that reasons, I cannot find it or there is a bug in the Hubspot Theme, either way, I had to make a video.

I need to create an empty selector HTML{} in CSS in order for the CSS to be correctly generated.

https://drive.google.com/file/d/13ywOmfVx_53gYPzEPsl0327r4ga9pvqo/view?usp=sharing

[IsaacTakushi]

Hi, @igcorreia.

Apologies for the delayed response.

The video was very helpful, however I'm still trying to wrap my head around this, so thank you in advance for your patience!

To clarify, are you finding the need to set an empty html{} or *{} selector in every CSS file you are attempting to associate with your theme? Or is this behavior only occurring in certain files?

I wasn't able to replicate this behavior when I added a new CSS file to my local HubSpot CMS Boilerplate theme just now; the CSS rules I defined applied to my preview page. Would you be willing to run a similar test with the boilerplate code? I'd love to know if you can replicate this behavior outside of your theme.

[igcorreia]

Figure it out. I was adding a .HTML file as a macro to a .CSS file. Both Hubspot and the CLI are accepting that. 

The second file at the video.

[IsaacTakushi]

Hi, @igcorreia.

Apologies for the delayed response. Thank you for including that video!

To confirm, did you find that the issue was that you were including the macro file 01_hex_to_rgba.html in CSS files like 01_sidebar.css and air-framework.css?

Perhaps I am missing something, but is there a reason that 01_hex_to_rgba.html is an HTML file and not a CSS file? The code as seen at 1:36 looks like valid HubL and CSS.

[igcorreia · Accepted solution]

Yes exactly, in air-framework.css I was including for instance header.css.

Inside header.css I was including a MARCO with the file name hex_to_rgb.HTML

Notice the .HTML

Once I change it to hex_to_rgb.CSS everything worked and I only needed to clean the .air{} from every file.

I think you got it perfectly.

[IsaacTakushi]

Got it. Thanks for confirming, @igcorreia!

I'll share this feedback internally. Hopefully we can surface a more helpful error for these types of scenarios.

In the meantime, I'll mark your post as the solution.

[igcorreia]

Hi, my setup is simple I have a main.css like scss that imports everything. I have shown it in the new video.

You can see my tests now. If I have no choice I will try to get the boilerplate. It's just that I have all my dev environments being used 😕 

https://drive.google.com/file/d/1lruG44YVOXjEB0T9QVAo0WW1fbsQsNWV/view