Language server doesn't handle css.resolve

[smoores-dev]

Hello! I see that a previous issue (#16) called out a bug when a component uses css.global; I'm seeing what seems to be the same issue when using css.resolve:

Steps To Reproduce

1. Add a tagged template using css.resolve

The current behavior

Syntax highlighting and language server responses (autocomplete options) are incorrect/partially missing

The expected behavior

css.resolve-tagged templates behave the same as <styled jsx> tags and css.global-tagged-templates!

[theoludwig]

Thanks for your report! @smores
I don't know if it should be the case, but for your burgerStyles to work you need to wrap it under a className like so :

import css from 'styled-jsx/css'

const burgerStyles = css.resolve`
  .some-class-name {
    display: block;
    position: absolute;
    top: 2.5rem;
    right: 2rem;
  }

  @media (min-width: 769px) {
    .some-class-name {
      display: none;
    }
  }
`

[smoores-dev]

Interesting! I wonder if this is a quirk of how css.resolve works: it does allow styles at the top level (without a tag)... but now that I'm looking more closely at the docs, this isn't actually a documented feature. This works just fine as is; here's a screenshot of my browser where these styles seem to have been applied correctly:

But you're right that the docs suggest nesting these styles in a tag... I personally think that kind of stinks/breaks encapsulation, but I suppose it's fair that your extension doesn't support it given that it isn't documented!

I just opened a thread on the styled-jsx discussion forum asking for clarification: vercel/vercel#6065.

[eliasthompson]

Related to the topic but not related to the issue of wrapping resolved styles in a className: In our code base we're destructuring the resolve import from styled-jsx/css (import { resolve } from 'styled-jsx/css';), which results in us declaring:

resolve`
   ...
`

This doesn't trigger the syntax highlighting as it specifically looks for css.resolve. Are there any plans to support this either by default or as a configurable option?

(If you feel this should be a separate issue just lmk.)

[theoludwig]

Right, I think it is cleaner to use css.resolve, but yes feel free to open a PR with a configurable option to make it work with resolve only. @eliasthompson

[smoores-dev]

I never ended up getting any responses to that discussion thread.. just tried another tack and opened an issue on styled-jsx!