An error appears randomly when using "css" function inside template string - ':' term expected"

[vitalybe]

• IDE name and version: WebStorm 2019.2.3 Build #WS-192.6817.13, built on September 24, 2019 Runtime version: 11.0.4+10-b304.69 x86_64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o macOS 10.13.6
• Styled-components plugin version: 1.0.11

Problem description:

In some cases, when there is a css function inside templated string I'm getting the following error: ':' term expected

This error doesn't appear all the time. If I play around with the code it will randomly hide and appear later on. This error only appears when the plugin is enabled, so I assume it comes from it. This behavior seems to be a regression since I've been using the plugin for a long time and never saw it before.

Example of code that this error sometimes appear:

const OptionLabel = styled.div`
  ${(props: {}) => css`
    margin-bottom: 0.3em;
  `};
`;

Screenshot:

Adding/Removing a semicolon doesn't help. The only solution I found so far is to avoid nesting css entirely.

[FedorSherbakov]

Looks like it's still an issue

[simon-ging]

Confirmed. Another workaround is putting the css string at the end.

Error:

const ErrorDiv = styled.div`
  ${(props: {}) =>
    css`
      color: red;
    `}
  color: blue;
`;

No Error:

export const NoErrorDiv = styled.div`
  color: blue;
  ${(props: {}) =>
    css`
      color: red;
    `}
`;

[Sebdevar]

Confirmed. Another workaround is putting the css string at the end.

Error:

const ErrorDiv = styled.div`
  ${(props: {}) =>
    css`
      color: red;
    `}
  color: blue;
`;

No Error:

export const NoErrorDiv = styled.div`
  color: blue;
  ${(props: {}) =>
    css`
      color: red;
    `}
`;

this solution didn't work in my case:

I also added styled, media and css in the styled-components plugin settings

[changyeamoon]

👀

[pixelass]

This Issue has been open for almost a year now without any comment by maintainers. It would be nice to get some info about this bug.

1. Is this registered as bug?
2. Will this bug be fixed or is it being worked on?

Thank you for you support

I keep thinking there's an error in my file while it's simply this bug.

[vepanimas]

The most annoying part of this issue is fixed in the latest 203 EAP, it was a bug inside the platform. I mean strange errors in those cases (issue):

const OptionLabel = styled.div`
  ${(props: {}) => css`
    margin-bottom: 0.3em;
  `};
`;

The next kind of errors should be fixed by the PR above. It's more complicated because it can't be fixed in 100% of cases. The provided heuristic checks whether the expression inside the template literal contains nested style-components injection. If so, we can assume that this expression is a complete and valid CSS fragment. For more details, see the pull request itself.

const ErrorDiv = styled.div`
  ${(props: {}) =>
    css`
      color: red;
    `}
  color: blue;
`;

Also, the 203 EAP finally allows formatting injections with multiple parts (issue). It works in the IDE by default, but for this plugin it will be enabled by the same PR above.

[pixelass]

@rosdi this is the wrong repository for your problem. This package is for styled-components or emotion

[rosdi]

sorry... deleted.

[simonbuchan]

@rosdi this is the wrong repository for your problem. This package is for styled-components or emotion

Does this support @emotion/styled? This comment is the only reference to it in the whole repository.

[joetidee]

Not sure if this is related, but getting same random "Term expected" message. No issues running the code or running lint.