Design Manager minification outputting HSLA with errors

Develop, Build & Integrate CMS Development
1

I have a workflow where I develop locally, and push changes to the Design Manager, that has already been compiled, minified etc.

In other words. I push a minified CSS to the Design Manager, that is then reminified by the Design Manager.

I recently noticed that one of the websites I develop has an error on the background-color property. Strange, since there was no errors either locally or on our test-server.

I digged into it, and found that HubSpot’s minification removes an % from the HSLA value.

Context: I write CSS in Sass, so my source is:

background-color: rgba(white, .8);

Which outputs to:

background-color: hsla(0,0%,100%,.8);

This works.

After pushing to HubSpot, the output is changed (after minification) to:

background-color: hsla(0,0,100%,.8);

Which causes browser-error, since the 2nd parameter can’t be 0, but must be with a percentage.

Result.

Locally I have a faded white.

On test-server I have a faded white.

On the HubSpot live site I have no background-color.

Have any of you experienced the same, or are you able to replicate it?

I only see two options here:

1. HubSpot has updated the minification workflow to a new version, which causes the bug. This needs to be fixed.

2. We are able to disable the minification in the Design Manager on certain files.

2

@matiasvad,

I did the most simplest test that I could which was to set an hsla color in a style sheet and see how it was processed. The color took effect no issues or errors.

Are you storing your css files in the file manager? Considering that using hsla in a template builder style sheet does reproduce the error, then the issue would have to be with:

1. how your hosting your css file (file manager?)

2. how you upload the file to your hubspot account.

I don’t believe the issue is with Hubspot because simply adding an hsla color to a style sheet works without issue. I do think that the issue is simply that because the second number is 0 something is stripping the % from it since 0 and 0% are the same. have you tried changing the second number to 1% or something just to see if it still breaks?

3

Thanks for the reply!

I host all files in the Design Manager. i.e. Coded Files - Custom - Page - “Folder” - xx.css

I also thought that 0 and 0% would be the same, since they are on most other CSS values, but this isn’t the case on HSLA. Try removing the % on this Codepen: https://codepen.io/matiasvad/pen/YEeZOG and you will see it removes the background-color on the grey.

Exactly as I suspect the minification system on HubSpot to do.

4

I pointed the percent sign issue how because it is the reason the css is breaking. Hsla expects a percent value.

Think though, is that when I add an hsla value directly into a design manager style sheet, the minification does not break the value. I do not think this is an issue with Hubspot, I believe it is an issue with something you are doing leading up to Hubspot, because I’m not having an issue getting it to work in Hubspot.

5

The problem has solved itself now, we may never know how. But my bet is that HubSpot have updated/fixed the faulty compression.

I did do some case-scenarios where I could easily see the HSLA property being minified wrongly, but that is not the case anymore.