CSS var is not set (bug?)

[Davedesigner]

Since working with Blocs 5 and now 5 I’ve noticed recurring issues with background colours that fail to apply to elements when a page is loaded a second time on the server. It’s bizarre what happening here, but I think it something to do with CSS var is not set?

Example…

1. I apply a background to a link style on a button.

2. Publish to the server reload the page in a browser. Perfect. I see the background colour applied.
   

   

3. I reload the same page again and boom! the background colour has disappeared. Looking at the browser inspector the var colour show as dimmed with the error… var (colour name) is not set
   

   

4. The issue persists until I export from Blocs again when this happens again and again.

Look like I’ll need to put my own CSS on the page or custom stylesheet to fix. This is happening a lot so I assume this is a bug?

[Davedesigner]

Could this be a clue what is happing here?

On first *Good) page load the CCS is from style.css

And the second page load the CSS is via pagespeed?

[Jannis]

You should check your cloudflare cache settings.

[Davedesigner]

That’s what I first thought. But this is on a server with the CDN disabled or in Development Mode which temporarily disables all caching

[Jannis]

Well, if the CSS file, which is delivered via cloudflare, does not contain the correct styles, you have to check this source first.

[Davedesigner]

This is what I’ve been looking at. It just might be the CDN all along. As specifically disabling the CSS cache on the CDN fixes it.

[Davedesigner]

So with a bit of testing…

To fix this issue I specifically have to disable both the following on the CDN CSS Optimisation…

Flatten CSS Imports (Medium Risk)
Reduces the number of HTTP round-trips by combining multiple CSS resources into one.

Rewrite CSS (Medium Risk)
Parses linked and inline CSS, rewrites the images found and minifies the CSS.

Could it be this is something to do with how Blocs is using vars for colours? I’ve never had this issue before with the CDN with other Apps or hand coded websites. Only Blocs.

I’ve had no end of issues using colours in Blocs so this is a fix of sorts.