@supports considered by inspection as non valid

[cedricjimenez]

The styled-components plugin (1.0.6) in phpstorm (2018.3) inspection rise an error Invalid CSS selector. Any idea why ?

[undeadcat]

Thanks for the issue! Sorry for abandoning this project for a bit. A simpler reproduction would be:

const Title = styled(Title)`

  position: relative;
  overflow: hidden;

  @supports (-webkit-line-clamp: 4) {
      -webkit-line-clamp: 1; //parse errors here
      text-overflow: ellipsis;
  }

The cause is: the plugin currently assumes syntax within styled-components string to be LESS but styled-components allows more syntax. We should definitely bring this in line with what's acceptable at runtime.

As a workaround, if I understand correctly, one could surround the properties inside @supports with a rule-set with a '&' selector, it would be processed to the equivalent CSS :

const Title = styled(Title)`
  position: relative;
  overflow: hidden;

  @supports (-webkit-line-clamp: 4) {
    & {
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
    }
  }
`

[undeadcat]

I'd like bring the plugin closer to parsing the same set of syntex that styled-components actually accepts. @mxstbr, can you help figure out what other syntax styled-components supports that's not present in CSS/Less?

Semicolons seem to be optional, as one example.

It seems to me like styled-components uses stylis.js to parse styles internally, but then there is also the PostCSS parser used in one place.

If stylis is what's used, should I assume the stylis tests are a good reference of what's supported and what's not?