invalid css / less does not throw errors about less.php HOT 4 CLOSED

The Less compiler is a light transformation on top of CSS. Apart from structural and lexical syntax that affects the output, the Less compiler effectively does not concern itself with the individual CSS rules. This matches the way browsers process CSS. (Unlike JavaScript, browsers treat CSS as a declarative format where values are not evaluated or executed at the time of processing. They merely produce a tree of key-value pairs effectively. Thus there is no such thing as an "exception" in CSS. So long as they can be syntactically understood or skipped over, the values are only interpreted later when individual DOM elements are painted to the screen and each have their styles computed.)

Browsers often introduce experimental and non-standard features that may only exist for a few versions. CSS tolerates these without issue, and Less.php allows you to use any of these. That is your own decision.

If your examples would cause other code in the same stylesheet to confuse Less.php, then please do let us know as that would be a bug. I suspect that is not the case. They should be inconsequential from the prespectice of Less compilation, and even in the output toward the browser have no negative effect. The browser ignores them, the same way it ignores rules that are only supported by a different browser.

If you would like to apply "linting" to CSS and look for code that likely contains developer mistakes, then I would recommend using Stylelint as a testing step (e.g. in CI). Stylelint maintains a long list of properties names, keywords, and value structures that it knows are supported in certain browsers, and you can tell it which browsers you'd like to support, it will then warn you about CSS rules that would be invalid/unknown/ignored in those browsers.

from less.php.

Hi @Krinkle,

thanks for the detailed answer.

We have migrated to scss (dart-sass) as this does check if it is valid CSS or not and is much better (only dart-sass needed).

from less.php.

@DanielRuf No problem. I hope that works out for you.

I would still encourage you to consider Stylelint since compilers generally only check the grammar checking for their own transformations. This is no different for dart-sass, which does happen to catch two of the above examples (because it has to transform them in some cases). It does not validate anything beyond that.

// input.scss
.foo {
	margin-top: 99luftballons;
	margin-top: breaking-time-and-space;;;;
	unreal-radius: "invalid";
}

# [email protected]
No errors or warnings.
# [email protected]
No errors or warnings.
# [email protected]
No errors or warnings.

# [email protected] stylelint-config-recommended
# .stylelintrc
{ "extends": "stylelint-config-recommended" }
# stylelint input.scss
 2:14  ✖  Unexpected unknown unit "luftballons"         unit-no-unknown    
 3:38  ✖  Unexpected extra semicolon                    no-extra-semicolons
 3:39  ✖  Unexpected extra semicolon                    no-extra-semicolons
 3:40  ✖  Unexpected extra semicolon                    no-extra-semicolons
 4:2   ✖  Unexpected unknown property "unreal-radius"   property-no-unknown

from less.php.

Thanks, we'll consider that (using a linter for extra checks besides the checks which are already done in the IDE, probably by some default linter).

from less.php.