Adjust regex to match `nth-*` pseudo-class element strings

Describe the bug As the title described, it would be nice if the regex could also catch the strings provided in strings in pseudo classes. Such as nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(). At the moment, the string doesn’t get recognized properly as in normal CSS.

const Listing = styled.div`
  margin-top: calc(var(--rowGap)*1.5);

  div:nth-last-of-type(2n) {
    margin: 0 auto;
  }

  ${media.lessThan('medium')`
    r-grid {
      grid-row-gap: calc(var(--rowGap) / 2);

      r-cell:nth-child(2n+1) {
        margin-bottom: calc(var(--rowGap) / 2);
      }
    }
  `}
`

Screenshot

To Reproduce

const Listing = styled.div`
  margin-top: calc(var(--rowGap)*1.5);

  div:nth-last-of-type(2n) {
    margin: 0 auto;
  }

  ${media.lessThan('medium')`
    r-grid {
      grid-row-gap: calc(var(--rowGap) / 2);

      r-cell:nth-child(2n+1) {
        margin-bottom: calc(var(--rowGap) / 2);
      }
    }
  `}
`

Expected behavior The string in the pseudo class function should highlight in one color, at the moment only the first number is highlighted.

Build environment:

• OS: MacOS Catalina 10.15.7
• VSCode Version: 1.55.2
• Extension Version: v1.5.2

[jasonwilliams]

This is fixed by https://github.com/styled-components/vscode-styled-components/commit/d8bbfe3039111153e44b24a8b9331d8391636391

I fixed it by comparing VSCode’s CSS syntax rules for nth-child with ours

[felixhaeberle]

Sorry, couldn’t get into it so far. If anyone is able to catch up on this, feel free!