search

CSSLint / csslint

Automated linting of Cascading Stylesheets
http://csslint.net
Other
4.76k stars 484 forks source link

CSSLint does not support context media-feature-range-notation #792

Open linusjf opened 5 months ago

linusjf commented 5 months ago

CSSLint does not support media query specifications like:

media (width >= 600px) and (min-width: 600px) {}
@media (width <= 768px)
@media (width <= 1199px) and (width >= 769px)

Queries like :

@media (min-width: 1px) {}

@media (min-width: 1px) and (max-width: 2px) {}

are supported but these are considered problematic by stylelint's default configuration.

The above can be auto-corrected by stylelint but then csslint complains and flags the corrected media query ranges as errors as seen below:

/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 58, col 15, Error - Expected RPAREN at line 58, col 15. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 58, col 15, Error - Unexpected token '<' at line 58, col 15. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 58, col 16, Error - Unexpected token '=' at line 58, col 16. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 58, col 18, Error - Unexpected token '768px' at line 58, col 18. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 58, col 23, Error - Unexpected token ')' at line 58, col 23. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 58, col 25, Error - Unexpected token '{' at line 58, col 25. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 70, col 1, Error - Unexpected token '}' at line 70, col 1. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 72, col 15, Error - Expected RPAREN at line 72, col 15. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 72, col 15, Error - Unexpected token '<' at line 72, col 15. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 72, col 16, Error - Unexpected token '=' at line 72, col 16. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 72, col 18, Error - Unexpected token '1199px' at line 72, col 18. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 72, col 24, Error - Unexpected token ')' at line 72, col 24. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 72, col 30, Error - Expected LBRACE at line 72, col 30. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 72, col 30, Error - Unexpected token '(' at line 72, col 30. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 72, col 38, Error - Unexpected token '=' at line 72, col 38. (errors)
/data/data/com.termux/files/home/arch/root/LearnHTML5/Piano/styles.css: line 80, col 1, Error - Unexpected token '}' at line 80, col 1. (errors)

Do you have a workaround or fix for this? The only alternative seems to be to force csslint to exclude the stylesheets that have these new media range notations. Otherwise, modify the stylelint rule, media-feature-range-notation, to use "prefix" notation, and not "context", which is part of the standard configuration.

File: .stylelintrc.json

{
  "extends": "stylelint-config-standard-scss",
  "rules": {
    "media-feature-range-notation": "prefix"
  }
}

The "context" style notation makes the stylesheet more readable and user-friendly.