Empty values are not parsable.

[induane]

To reproduce:

.hover\:drop-shadow-sm {
  --tw-blur:  ;
  --tw-brightness:  ;
}

Current behavior:

Valid CSS yields a ParseError.

Empty values are a valid part of the CSS specification; it's how a custom property to an empty value.

Expected behavior:

I'd expect empty values on custom properties to be included in the output CSS file. This should only be true for custom properties (prefixed with `--``) as empty values like that are NOT valid for normal CSS properties.

Environment information:

• less version: lessc 4.1.3 (Less Compiler) [JavaScript]
• npx version: 8.3.0
• nodejs version: v14.18.2
• operating system: Linux (PopOS)

Terminal Output

ParseError: Unrecognised input in /home/brant/projects/dk/heimdall-be/manage_ui/static/less/tailwind.less on line 428, column 15:
427 .hover\:drop-shadow-sm {
428   --tw-blur:  ;
429   --tw-brightness:  ;

Other Comments Obligatory "Why are you doing that?" answer because not including that tends to yield tangential discussions on bug reports. The project uses some custom LESS for legacy reasons, and also includes ForkAwesome. The generated tailwind.css file, along with the custom less files and the forkawesome.css file are all combined with lessc and the minified with the clean-css plugin. This way there is only one CSS payload to pull.

In any case, since values for custom properties like --foo: ; are valid CSS, I'd expect the lessc parser to not implode when encountering such values.

[lumburr]

This is unusual usage and I don't think it should be supported. Less is not necessarily intended to be a 100% super-set of CSS, but is more a super-set of good CSS, or basically standards-based CSS. This is a similar view from other members of the community. https://github.com/less/less.js/issues/3731

[induane]

It's one thing for it to be "unusual" usage - but empty values like that aren't just a weird misuse of something like:

!ImPoRtAnT is technically allowed but the style guide explicitly says to use !important

This is more like "for properties prefixed with -- empty values are allowed".

Less should (imo of course) even be able to produce these values but it can't even output them. I'm not really expecting it to be a superset of CSS, just that in-spec CSS features are supported.

I've run into issues with this before trying to make empty custom properties. At the time I solved it by hucking in extremely unlikely values like 12345654321 and then using sed to nuke them in a post-processing step. I could do something similar in this other use-case with a pre and post processing script, but it feels pretty dirty.

[Qasaye007]

I need to Learn how to huck All social learn me how

[induane]

Hucking is very much like chucking but with the slight nuance that it is less effortful. It is a subtlety best known for its usage in the Midwest (a distinct cultural region of The United States of America).

Consider an example like the above 12345654321; using a value such as this in as a placeholder value to be replaced later is an excellent example of simply hucking in a value because on a typical keyboard one can enter the value with a simple finger slide from 1-6 and back to 1. A more heavy-handed approach would be to use a heavier example and just "chuck" it in. i.e. ~~EMPTY_VALUE_PLACEHOLDER~~ which fills a similar purpose but requires more thought to assemble and is probably overkill for the task at hand.

In most situations I find hucking to be perfectly adequate behavior.

[matthew-dean]

This is a valid bug. --foo: ; is perfectly valid CSS.

[maaaaz]

Hello there,

This bug still exists. Just tested with Bootstrap v5.3.3 and this tutorial, it gives this:

$ lessc prefix.less bootstrap-iso.css
ParseError: Unrecognised input in /home/test/bootstrap.css on line 2978, column 2                              5:
2977   --bs-btn-padding-y: 0.375rem;
2978   --bs-btn-font-family: ;
2979   --bs-btn-font-size: 1rem;

Too bad we can't isolate BS5 !