LESS: 'background: center/xx' breaks the compilation

[ruslan-mogilevskiy]

Using: Win10, Statiq.Web v1.0.0-beta.54

Having the following valid CSS inside a LESS file:

.test {
    background: no-repeat center/80% url("../img/image.png");
}

breaks the compilation with the error: [ERRO] Assets/Process » ExecuteIf » CacheDocuments » CompileLess » Cannot apply operator / to the left hand side: center on line 2 in file 'test.less': [1]: .test { [2]: background: no-repeat center/80% url("../img/image.png"); --------------------------------^

The problem with the divider sign (slash) after the 'center' which is a valid CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/background): The <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%"

[ruslan-mogilevskiy]

It is dotless.core library that Statiq.Web uses under the cover. Here is the old bug report with the same error (they import BS.css into a less file same as I do) but I don't think it will be fixed. I checked it with dotless 0.0.1 that Statiq.Web uses and with the 'fresh' dotless 1.6.7 - same crash.

@daveaglick , any idea of how to fix this?

[daveaglick]

Yeah, I think dotless is more or less retired and we're going to inherit whatever bugs it contains until something new comes along. I'm not aware of any other .NET Less compilers or forks of dotless so it is what it is at this point.

There's an alternative though. Statiq has support for running arbitrary external processes at various stages of generation: https://www.statiq.dev/guide/web/external-processes. That's being used for similar purposes by others - for example to run a full webpack stage alongside Statiq or for Tailwind. You could likely hook up another JavaScript/Ruby/whatever Less compiler through that.

[ruslan-mogilevskiy]

@daveaglick , thanks for your thoughts. Initially, I just needed to merge a couple of CSS into one file and LESS import seemed to be an easy way to do this but sadly Boostrap's CSS contains that unsupported portion of CSS. Instead, I created a pipeline that processes the .merge files (list of files to merge into one output file).

[daveaglick]

Awesome, love seeing folks use the tool in ways I hadn't thought of :)