pr-9209.md

Improve formatting for custom properties (#9209 by @fisker)

Thanks to PostCSS 8.0, we can handle these edge cases on custom properties.

/* Input */
:root {
  --empty: ;
  --JSON: [1, "2", {"three": {"a":1}}, [4]];
  --javascript: function(rule) { console.log(rule) };
}

@supports (--element(".minwidth", { "minWidth": 300 })) {
  [--self] {
    background: greenyellow;
  }
}

/* Prettier stable */
SyntaxError: (postcss) CssSyntaxError Missed semicolon (3:20)
  1 | :root {
  2 |   --empty: ;
> 3 |   --JSON: [1, "2", {"three": {"a":1}}, [4]];
    |                    ^
  4 |   --javascript: function(rule) { console.log(rule) };
  5 | }
  6 |

/* Prettier master */
:root {
  --empty: ;
  --JSON: [1, "2", {"three": {"a": 1}}, [4]];
  --javascript: function(rule) {console.log(rule)};
}

@supports (--element(".minwidth", {"minWidth": 300})) {
  [--self] {
    background: greenyellow;
  }
}