theoludwig/vscode-styled-jsx

Conflicts with vscode-styled-component

u3u opened this issue · 3 comments

u3u commented

Steps To Reproduce

  1. Installation this plugin
  2. Installation vscode-styled-component

The current behavior

import { css } from '@emotion/core';

// error: } expectedcss(css-rcurlyexpected)
// and syntax highlighting is broken
// it should conflict with styled-jsx's `css.resolve` and `css.global`
const className = css`
  text-align: center;
`;

const Button = () => {
  return (
    <button
      // same problem as above
      css={css`
        text-align: center;
      `}
    />
  );
};

Hope this conflict can be resolved 🙏

@u3u Yes, that's a known issue, we can't do anything about that (as I'm aware).
But as a workaround, you can disable/enable the 2 extensions. If you're working with styled-jsx components, enable this extension and disable the other one and the contrary if you're working with styled-components.

u3u commented

Because of this problem, i usually combine the two, so it is a trouble for me 😢

kud commented

I've got the same problem. I've disabled this plugin for the moment.