vscode-styled-jsx icon indicating copy to clipboard operation
vscode-styled-jsx copied to clipboard

Conflicts with vscode-styled-component

Open u3u opened this issue 4 years ago • 3 comments

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 avatar Oct 21 '20 02:10 u3u

@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.

theoludwig avatar Oct 21 '20 08:10 theoludwig

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

u3u avatar Oct 21 '20 08:10 u3u

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

kud avatar Nov 04 '20 11:11 kud