Rule is empty when defining root-only CSS variables

[eliperelman]

When using csslint with variables against the :root element, it throws the message of "rule is empty".

:root {
  --color-alpha: #fff;
}

This rule should not be considered empty against the :root element that only contains CSS variables as it is considered the de-facto way to create them globally.

[mikehenrty]

+1

[ismay]

I agree. This style of variable definition is used in http://github.com/suitcss/suit, which is based on a future css spec. Maybe allow for the user to turn this off?

[Mottie]

+1 (two years later), also:

• If you add more than one variable, a Expected RBRACE error pops up.
• Using a variable in the css then shows these warnings:
  • Set color: Expected (<color> | inherit) but found 'var(--color-alpha)'.
  • Set border-color: Expected (<color>{1,4}) but found 'var(--color-alpha)'.

[gabriellecrawford]

caused by https://github.com/CSSLint/parser-lib/issues/120?

[Mottie]

@tophf Has fixed this problem, and many others, in our heavily modified version of csslint in case anyone is interested.

[dcloutman]

Still broken.

[seanw]

@Mottie @tophf Thanks for suggesting a workaround and your work on this. Can you confirm the license of your modified version? https://github.com/openstyles/stylus/tree/master/vendor-overwrites/csslint

[tophf]

We didn't change the license:

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

[seanw]

@tophf Thanks, the repo is marked as GPL so I wanted to be 100% sure here that you're allowing others to use the modifications under the original non-GPL license.

[Arcanemagus]

You could also just use a modern (and maintained) style code linter like stylelint 😉.

[Mottie]

Stylelint doesn't validate the css (ref). The authors are deferring the validation to csstree.

That and csslint is less than 100KB in size while Stylelint (without csstree) is over 3MB in size and does not work with browserify nor rollup – which is why we ended up creating the stylelint-bundle repository which removes some of the functionality to get stylelint to bundle and work properly.

[seanw]

From a security perspective, one pro of csslint is that it doesn't use eval anywhere which isn't the case for csstree last time I checked.

[rtm]

@seanw From a functionality perspective, one con of csslint is that it doesn't work on modern CSS including custom properties.

[Ademord]

What is the solution of this?