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

CSS4 custom properties #682

Open
DarylBerryhill opened this issue Oct 27, 2016 · 8 comments
Open

CSS4 custom properties #682

DarylBerryhill opened this issue Oct 27, 2016 · 8 comments

Comments

@DarylBerryhill
Copy link

Will CSSlint be supporting CSS4 in the future?

getting an error when linting custom CSS properties.

Error message:

 _Expected RBRACE at line 47, col 5_

CSS snippet

:root {
      --yellow-tan-gradient: linear-gradient(45deg, rgba(247,242,171,1) 0%, rgba(254,210,138,1) 49%,    rgba(254,210,138,1) 100%);
}

It doesn't like the two "--" in front of the name

@phaux
Copy link

phaux commented Nov 10, 2016

this should be a valid syntax also
Edit: It was a custom Polymer thing

:root {
  --fit: {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
  }
}

.container {
  @apply --fit;
}

@DarylBerryhill
Copy link
Author

Umm, Is this CSS4 syntax or Sass / Less? It does not seem to be working with Chrome 54 or Node 8.0. nightly

@phaux
Copy link

phaux commented Nov 13, 2016

@DarylBerryhill It's not supported natively yet but there are polyfills

@Akimyou
Copy link

Akimyou commented Feb 27, 2017

http://cssnext.io
Hope CSSlint can support CSS4.

hlfcoding added a commit to hlfcoding/hlf-dom-extensions that referenced this issue Oct 15, 2017
@seangates
Copy link

Very much supported now. https://caniuse.com/#feat=css-variables

@mysterfitz
Copy link

Any plans to address this? CSS variables/custom properties are starting to blow up now that they're natively supported in modern browsers?

@Rapsssito
Copy link

Any news on this front?

@whoabuddy
Copy link

whoabuddy commented Sep 26, 2020

I'm curious why this is still an issue and if it will be addressed. It makes for a very messy log since I use CSS custom properties (CSS variables) under :root for easier reference later.

Here is an example:

:root {
  --ux-background: #FFFFFF;
  --ux-on-background: #191D26;
}

Where each line that starts with -- shows the error: Expected RBRACE at line X, col 3.

Then, when trying to use the custom property later, another warning is shown:

body {
  background-color: var(--ux-background);
  color: var(--ux-on-background);
}

For each line using a custom property, it shows the warning: Expected (<color>) but found 'var(--ux-background)'.

The feature is supported in 94.62% of browsers at the time of writing this (per CanIUse which was posted earlier), and there are several articles recommending and outlining different use cases for them.

Should I start looking for a different linter? AtomLinter/linter-csslint#303 doesn't look promising.

To link other issues, this is also mentioned in #538, #720, and #733.

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

7 participants