@supports prefixing not following spec

[kmuncie]

Reduced test case: http://codepen.io/kmuncie/pen/YybOrV

The example comes from Keith Clark's article on CSS Parallax.

@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
  /* ... parallax styles ... */
}

The rules within this block should apply on desktop Chrome but not be used on a iOS Safari since it supports -webkit-overflow-scrolling.

Autoprefixer then attempts to prefix the perspective rule and outputs:

@supports ((-webkit-perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) or (perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
  /* ... parallax styles ... */
}

This is not valid according to the spec. It is missing some vital parentheses. Please note Example #8 in the W3C Spec. The following is a valid example with the parentheses broken up to better illustrate.

  @supports (
    ( /* parentheses that wrap each statement which are missing */
      (-webkit-perspective: 1px) and (not (-webkit-overflow-scrolling: touch))
    ) 
    or (
      (perspective: 1px) and (not (-webkit-overflow-scrolling: touch))
    )
  ) {

Thank you for your time!

[ai]

@heady can you please add some test for this issue, to be sure, that we made all right?

[heady]

@ai
Something's wrong after this gets called the second time:

autoprefixer/lib/supports.coffee

Line 89 in 8ca583b

rule.params = @brackets(rule.params)

rule.params = @brackets(rule.params)

It causes nested or statements to end with an extra trailing parentheses )
When its removed, the parentheses balance but have an extra wrapper.
I focused on the stringed.join call but it did not affect the outcome.
Obviously should trim extra parentheses, but when the function is called for the second time, it causes the parentheses to become imbalanced.

Test case to run on supports.css:

@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
  a {
    color: #000;
  }
}

supports-out.css

@supports (((-webkit-perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) or ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch)))) {
  a {
    color: #000;
  }
}

[ai]

@heady please, commit this two test. I will fix it.

[heady]

@ai
https://github.com/heady/autoprefixer/commit/99a2cfbb4910a4e957ad5e1fc393b051bf18f2e8

[ai]

@heady awesome! Could you just send a PR, please :).

[ai]

@heady I rewrote all @supports bahviour. I created special bracets parser and AST to be maximum accurate.

Can you check final tests:
https://github.com/postcss/autoprefixer/blob/master/test/cases/supports.css
https://github.com/postcss/autoprefixer/blob/master/test/cases/supports.out.css

[heady]

Solid fix @ai it's running very well now.