lit-plugin complains about media queries in <style> tags

[WickyNilliams]

consider a template like:

html`
  <style>
    @media (min-width: 768px) { /* (1) */
      body {
        color: red;
      } /* (2) */
    } 
  </style>
`

lit-plugin reports the following errors:

1. { expected lit-plugin(no-invalid-css)
2. at-rule or selector expected lit-plugin(no-invalid-css)

despite this being valid css

[ba55ie]

Why aren't you using the css tagged template literal?

static styles = css`
   @media (min-width: 768px) {
      body {
        color: red;
      }
    } 
`;

https://lit.dev/docs/components/styles/

[WickyNilliams]

The example given is a reduced test case for illustrative purposes only. I have experienced this issue in tests where I'm writing fixtures, and also cases where you need dynamic styles (as described here https://lit.dev/docs/components/styles/#style-element). So css doesn't cut it