Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
linusjf opened this issue Feb 6, 2024 · 0 comments
Open

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

linusjf opened this issue Feb 6, 2024 · 0 comments

Comments

@linusjf
Copy link

linusjf commented Feb 6, 2024

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.

@linusjf linusjf changed the title CSSLint does not support the result of stylelint rule media-feature-range-notation CSSLint does not support context media-feature-range-notation Feb 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant