Only compile .less files, assume .css files to be already compiled

[simonhaenisch]

Hey, could you please stop re-compiling already compiled css files with your less compiler?

I have had quite a few issues with your outdated less compiler already, and just tried to figure out why my CSS grid wouldn't work for more than an hour, until I saw that 1fr was transformed into 1 fr and the space between the value and the unit made the property invalid.

What bugs me most is that I pre-compile the file and include it in the template config under "stylesheets" as a main.css file, but despite being css already it gets compiled again. This totally defeats the purpose of your custom less compiler making things faster.

Please make my life as a squarespace developer 9.99% less painful by excluding .css files from the compilation :)

My current work-around is to compile the file into the assets folder instead and link it in the template myself.

[phensley]

Thanks for the feedback. The custom less compiler parses and minimizes all CSS files, which is where the issue is occurring.

I've added support for the fr unit in version 1.0.22. I'll update this ticket when I confirm it is released to production later today.

The 2.x version of the compiler is being prepared for release, and has more flexible unit parsing.

Since the custom Less compiler cannot be disabled, I'd be happy to look at any test cases you're having issues with.

Note that some newer CSS features that introduce entirely new syntax, like CSS Grid, will require additional parser changes to support, which cannot be implemented until the features are out of draft. This is also the case for the official Less compiler, for example: https://github.com/less/less.js/issues/3092

[phensley]

This fix is now in production.

[simonhaenisch]

Wow that was quick, thank you very much ❤️

One other issue I had was something like this (see https://www.w3schools.com/cssref/css3_pr_background.asp):

background: url(some-image.jpg) 10px 20px/50px 50px;

was throwing this error:

  _______  _______  _______  _______  __
 |       ||       ||       ||       ||  |
 |   _   ||   _   ||    _  ||  _____||  | 
 |  | |  ||  | |  ||   |_| || |_____ |  |
 |  |_|  ||  |_|  ||    ___||_____  ||__|
 |       ||       ||   |     _____| | __
 |_______||_______||___|    |_______||__| 

 Line  Statement
 ---------------
 In 'site.css':
 10878   .form-select[multiple] option {
 10879     padding: .2rem .4rem;
 10880   }
 10881   .form-select:not([multiple]) {
 10882   ... vg%3E") no-repeat right .75rem center/.8rem 1rem;
        .........................................^

 SyntaxError INCOMPLETE_PARSE Unable to complete parse.
 %++%~+%~%+%~++~%+%+~~~++%%+~~~+~+~%%%+%+

Having an option to exclude certain css files from being parsed (and just included instead) would be super helpful. My file is already minified and everything. Proposal (in template.conf):

{
  "stylesheets": [
    "mobile.less",
    { "name": "main.css", "parse": false },
    "..."
  ]
}

[phensley]

I have a fix for the CSS3 <position>/<bg-size> syntax in code review. It should be released today.

I'll float the idea for bypassing the CSS minifier. Could also be defined as a flag in /config since it may be something developers want to disable for their entire site.

[phensley]

The fix for CSS3 <position>/<bg-size> syntax is now in production. Let me know if you run into any similar issues.

[simonhaenisch]

Thanks very much, will do!

One more thing, can you please also push the fixed compiler into @squarespace/server (for local development) and publish to npm?

Thanks :)

[phensley]

No problem. The changes to @squarespace/server are in code review. Once those are merged the maintainer should be able to publish to npm shortly after.

[brandoncozart]

@phensley I know this has been closed, but I just started working with the Squarespace Developer platform and am running into the same issue with the local development server. The LESS compiler is adding a space between 1 and fr for grid units. When I push to my site, it seems to be fine, but the local compiler doesn't seem to have the fix for the 1fr unit.

It says I am using version 1.1.2 of the local development server.

[phensley]

@brandoncozart Yep I pinged the team that maintains the local dev server, asking them to cut a release, but must've slipped through the cracks. I'll escalate to get a release pushed asap.

[nkgentile]

@brandoncozart when can we expect a fix? I'm using Version 1.1.2 and still having this issue...

[phensley]

@nkgentile I pinged the team and the work appears to be in progress and should be released soon. I'll add another comment here once I see the release notice.

[matthewsmith-io]

As a workaround in the meantime, use the escape function: e('1fr')

[simonhaenisch]

Thanks for the hint, but in the meantime I stopped developing Squarespace sites, got too frustrated. Went with Jekyll, hosted on Cloudcannon for frontend editing... 10000 times better dev experience (also because I can choose what tooling/stack to work with), and the client UI is quite good as well.

[matthewsmith-io]

@simonhaenisch I hear you, their JSON-T template system is whack after working on Ruby on Rails sites...

[jboolean]

This is still an issue in squarespace-server. This: grid-template-columns: repeat(auto-fill, minmax(261px, 1fr)); becomes grid-template-columns: repeat(auto-fill, minmax(261px, 1 fr)); which is invalid. However it works in production.

Additionally, all calcs get mangled as LESS tries to perform the calculation.

I have to turn my CSS manually back into LESS so that Squarespace can turn it back into CSS.