CSS4 custom properties

[DarylBerryhill]

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]

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]

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

[phaux]

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

[Akimyou]

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

[seangates]

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

[mysterfitz]

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

[Rapsssito]

Any news on this front?

[whoabuddy]

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.

• CSS-Tricks Articles 2017-2019
• MDN: Using CSS custom properties (variables) updated 2020
• SmashingMagazine: It’s Time To Start Using CSS Custom Properties 2017
• FreeCodeCamp: A cheatsheet to help you remember CSS custom properties 2019

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.