Issue with Minified CSS and {# comment syntax

[benji_thecroc]

Hi,

So I've come across a slight pain in the butt. We tend to develop our templates locally in order to use SCSS and task processors such as Gulp, it's just so much easier and efficient to do this rather than straight into the HubSpot design tools editor. We then copy the minified code and paste it into the relevant CSS/JS file for use in HubSpot.

I've just come accross the issue where there's a conflict in HubL and CSS syntax where if an ID selector is within a media query this can cause a comment to be opened and not closed, meaning I have to manually find that conflict and add a space or a return after the opening bracket. e.g...

@media(min-width:576px){#letsTalkModal...

I'm just wondering why the use of HubL comment syntax is used in CSS when it can clearly cause a conflict and standardardised CSS comments can just be used as per normal? Is there a case to be made for removing HubL comment syntax for CSS file types in HubSpot Design Manager?

Thanks,

Benji

[prosa · Accepted solution]

are you using the code in the header of the page instead of a css file? or the css section in the modules?

you can modify your gulp config to replace {# with { # after you are done with the build. that may save time

[benji_thecroc]

Using it in a CSS file type within the design manager as it's a global style sheet.