CMS Development

Destnel
Participant

Hubspot's CSS Minification Causing Issues

SOLVE

Hi all,

 

Our team has been using Tailwind css to style our website templates, and we've run into a very specific issue with Hubspot's auto css minification that's stripping out some important css properties.

 

Tailwind uses the following css custom property to generate focus rings around elements:

--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);

https://tailwindcss.com/docs/ring-width

 

Our in-house css minification has no issue with this property, but Hubspot is stripping out the space between the /*!*/ /*!*/ which breaks the ring properties and several other styling properties.

I figured this out by using the ?hsDebug=true in our url(s) to see what hubspot is doing. Sure enough, it looks like the hubspot minifier is killing the property, since the css works fine in debug mode.

 

Any suggestions on how to fix this or a way to disable the hubspot minifier in a specific file? Or even better, could Hubspot add a rule to their minifier to fix this issue?

0 Upvotes
1 Accepted solution
dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

Hubspot's CSS Minification Causing Issues

SOLVE
3 Replies 3
Destnel
Participant

Hubspot's CSS Minification Causing Issues

SOLVE

@dennisedson  Thanks for the quick fix!

dennisedson
HubSpot Product Team
HubSpot Product Team

Hubspot's CSS Minification Causing Issues

SOLVE

Hi @Destnel 

Working on a fix 😀

dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

Hubspot's CSS Minification Causing Issues

SOLVE