search

less / less.js

Less. The dynamic stylesheet language.
http://lesscss.org
Apache License 2.0
17.01k stars 3.41k forks source link

Important token should be case insensitive #3731

Closed lefevre00 closed 2 years ago

lefevre00 commented 2 years ago

This bug is based on the RFC : https://www.w3.org/TR/css-syntax-3/#consume-declaration :

If the last two non-s in the declaration’s value are a with the value "!" followed by an with a value that is an ASCII case-insensitive match for "important", remove them from the declaration’s value and set the declaration’s important flag to true.

To reproduce:

.case-insensitive {
    background: black url('http://localhost/header.png') repeat-x !IMPORTANT;
}

Current behavior: The compilation fails with the error: ParseError: Unrecognised input on line 2

Expected behavior: The generated css should include the uppercased string !IMPORTANT.

Environment information:

Reproduce in the browser and in terminal with node.

matthew-dean commented 2 years ago

So, there's a very old comment from @cloudhead, the creator of Less, in an issue thread that I wish I had bookmarked somewhere. Which is to say that 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.

You can have !IMPORTANT as a token or !ImPoRtAnT as a token in CSS (previous versions of CSS actually allowed ! I M P O R T A N T IIRC), but you will find no CSS guide that tells you to write this in any other way than !important. So there's what the CSS spec allows, yes, but unless there's a use case for why someone should put this in their style document. There are a lot of cases where Less narrows what's allowed further than the CSS spec, based on what is commonly uses in 99% of style documents.

So IMO there's no reason to do this unless there's some reason why someone cannot / will not write !important which is more recognizable to every other style author.

matthew-dean commented 2 years ago

Just as an anecdote, this is also a valid (or, rather, error-recoverable) CSS file according to the spec:

.box {
  color: linear-gradient(45deg, blue, red

However, Less requires you to have well-formed parentheses / blocks etc