Some valid css, seem to be ignored or unvalidated by Squarespace

Hi,

I'd like to add some css, some kind of new (but totally valid) css to the custom css on my website :

max-height: 100svh;

but it turns my code into

max-height: 100s vh;

which is unvalid (see screenshot):

Another totally valid css declaration that doesn't seem to work but should:

max-height: calc(100vh - var(--header-scrim-top-spacing));
// or
max-height: calc(100svh - var(--header-scrim-top-spacing));

You can definitely use variables into the calc function;

See mdn : https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Not sure what happens exactly, but I would like my totally valid CSS being printed the exact same way I wrote it, without any form of validation or conversion or whatever.

Seriously what going on?

and that how how it turns out on the front:

WTF?

Thank you.

Here is the deal.

SS doesn't make it explicitly clear that Custom CSS supports LESS v1.3.1. Although if you dig around it becomes apparent. v1.3.1 is an ancient version of LESS and therefor you have to often use literals to get CSS syntax that came after v1.3.1 to work.

Examples

your-selector-here {

  max-height : ~"100svh";
  max-height : ~"calc( 100vh - var( --header-scrim-top-spacing ) )";
  max-height : ~"calc( 100svh - var( -- header-scrim-top-spacing ) )";
  
  }

Let us know how it goes.

I might be missing something... does Squarespace run LESS on my style.css template file after I sync it? I'm developing my template locally with a LESS build step that spits out a compressed style.css file that I then sync up with SS via git.

So I've got calc(~"100vh - 220px") in my style.less file that my local build compiles into calc(100vh - 220px) in style.css. But when I upload that style.css to SS, it becomes calc(-220vh) in my live site. WTF?

So I have to go in and manually add the ~"" back to my minified style.css file every time to get calc() to work with SS?

Is there a way for my local LESS to pass the string literals along to style.css? Googling for LESS info is so frustrating because "less" is a really common word in lots of contexts. Sigh...

I'm stewing about this... LESS v1.3 is 12 years old! Latest is v4. What on earth is keeping SS tied to this version? It's pretty maddening to write and upload valid CSS only to have it unnecessarily modified by the platform so it breaks my client's website. Upgrade LESS!

Quote

What on earth is keeping SS tied to this version?

Inertia, upgrading LESS isn't a flashy feature to sell to boards and investors, and etc.

Also as I understand it SS took LESS v1.3.3 and wrote their own Java version of the preprocessor to improve performance for mass market DIY website builder use. Doing that again given the above is a no go.

Fair enough. 

Here's the dumbest bit of code I've written in a long time in case anybody needs this specific thing. I downloaded replace-in-files-cli so I could make an npm package.json script to replace my calcs after compiling LESS locally. Here's the code: