@supports CSS Feature Queries not working

[Mel Tajon]

When trying to use @supports, the output is nothing. For example:

@supports (display: grid) {
     // code that will only run if CSS Grid is supported by the browser
    display: grid;
 }

The output is simply null.

I'm guessing it's trying to treat @supports as a variable instead of literally, like @media.

[KARO]

Is there no solution?

[WORX Developer]

This is really a big issue.
Is there any solution yet?

[Thilo Molitor]

You can simply add supports to the list of block directives, but note: you can not use any variables or other lesscss functions inside the supports expression (but of course you can use those in the body of the supports rule).

 	static protected $supressDivisionProps =
 		array('/border-radius$/i', '/^font$/i');
 
-	protected $blockDirectives = array("font-face", "keyframes", "page", "-moz-document");
+	protected $blockDirectives = array("font-face", "keyframes", "page", "-moz-document", "supports");
 	protected $lineDirectives = array("charset");
 
 	/**