vscode-styled-jsx-languageserver

Main GitHub Repo.

Language server for styled-jsx.

Features

• CSS code completion

  

• Hovers

  

• Color picker

  

• Quick fixes

  

• Multiple <style jsx/> tags in file

  

• External styles styled-jsx/css

  

How it works

It converts template literals to language which can be detected by language server.

Consider this component:

const Button = (props) => (
  <button>
    {props.children}
    <style jsx>{`
      button {
        display: inline-block;
        font-size: 2em;
      }
    `}</style>
    <style jsx>{`
      button {
        padding: ${'large' in props ? '50' : '20'}px;
        position: relative;
        background: ${props.theme.background};
      }
    `}</style>
  </button>
)

All the surrounding JSX will be removed, leaving just the CSS:

button {
  display: inline-block;
  font-size: 2em;
}

button {
  position: relative;
}

The reason for this is to preserve line numbers for the language server in order to correctly propose completions, underline problems and highlight symbols.

Caveats

• Template literal expressions are replaced with whitespace.