Custom CSS: Trying to use calc() inside a gradient breaks editor view

I have a bit of a large calc function inside a background linear gradient. Originally the calc function seemed to be computed incorrectly and after some digging I found that I needed to escape it in the custom CSS.

I finally managed to get the gradient I wanted with the following line, but now the editor view is broken as a result.

The offending line:

background: linear-gradient(
  to right,
  #B1B5B7,
  #B1B5B7 calc(~"((100% - 1350px) / 2.0) + 877px"),
  #7DA57E calc(~"((100% - 1350px) / 2.0) + 877px"),
  #7DA57E);

A couple of errors show up in the console:

error-reporter-b1a003a2d08ddc2bf6213-min.en-US.js:14 Unhandled Promise rejection: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings. ; Zone: <root> ; Task: Promise.then ; Value: Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.

80982-82074d37f31ce71d02b63-min.en-US.js:9 Uncaught TypeError: a is not a function

EDIT: Just noting this is on Squarespace v7.0

When I've worked around calc issues in Custom CSS I've used a format like the following.

max-width : ~"calc( 20vw + 134px )";

The errors you show appear to be related to JavaScript or other code issues. I've never seen CSS errors reported in the console.

Is the Custom CSS dialog itself reporting a syntax error?

@creedon placing the quotes around the calc() like you described produces the same result unfortunately. It works for the gradient, but breaks the editor.

I don't really know how the LESS compiler works so I'm wondering if it is causing some b0rky syntax?

The Custom CSS dialog is pulled out from a separate tab that was open on another page, the errors I've shared in my post are from the page that the CSS targets.

EDIT: Just noting that removing the background line or changing the background line to a percentage instead of the calc() function also fixes the error.

Try something like the following.

#block-63687c17a3503508c35cb946 {

  background : ~"linear-gradient( to right, #B1B5B7, #B1B5B7 calc( ( ( 100% - 1350px ) / 2.0 ) + 877px ), #7DA57E calc( ( ( 100% - 1350px ) / 2.0 ) + 877px ), #7DA57E )";
  
  }

Let us know how it goes.

That seemed promising as one of the sections seemed editable after I saved (this code is for an index page), but I realized all the other sections were still broken.

Interestingly, only the second JS console error seemed to come up this time.

I've decided to take the design a different direction as I realized that I'd need a whole different formula for calculating the gradient on mobile sizes that would prove to be even more of a headache, but this has been a curious error and I would love to figure out what caused it.

54 minutes ago, AleksandarArsovski said:

but this has been a curious error and I would love to figure out what caused it.

I suspect the error stems from SS using an ancient version (1.3.3) of LESS. We've seen similar issues before with calc. CSS continued to evolve after LESS v1.3.3 was created and so LESS v1.3.3 chokes on more modern CSS.

19 minutes ago, creedon said:

I suspect the error stems from SS using an ancient version (1.3.3) of LESS. We've seen similar issues before with calc. CSS continued to evolve after LESS v1.3.3 was created and so LESS v1.3.3 chokes on more modern CSS.

Oh that would make sense. I was looking at some support boards for v1.4.0 of LESS and that one already seemed a little on the older side.

In any case, thanks for your help! I'll probably avoid any complex calc functions for now.