theoludwig/vscode-styled-jsx

Language server doesn't handle `css.resolve`

smoores-dev opened this issue · 5 comments

smoores-dev commented

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:

image

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 commented

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 commented

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:

image

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.

  • 👍2
eliasthompson commented

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 commented

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 commented

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

  • 👀1