Casting error while parsing code

[mstarkman]

Error Message:

com.intellij.lang.javascript.psi.impl.JSCallExpressionImpl cannot be cast to com.intellij.lang.javascript.psi.JSReferenceExpression

Details:

java.lang.ClassCastException: com.intellij.lang.javascript.psi.impl.JSCallExpressionImpl cannot be cast to com.intellij.lang.javascript.psi.JSReferenceExpression
    at com.intellij.StyledComponents.PatternsKt.getReferenceParts(Patterns.kt:54)
    at com.intellij.StyledComponents.PatternsKt$withNameStartingWith$1.accepts(Patterns.kt:41)
    at com.intellij.StyledComponents.PatternsKt$withNameStartingWith$1.accepts(Patterns.kt:39)
    at com.intellij.patterns.ObjectPattern.accepts(ObjectPattern.java:58)
    at com.intellij.patterns.CollectionPattern$5.accepts(CollectionPattern.java:80)
    at com.intellij.patterns.CollectionPattern$5.accepts(CollectionPattern.java:77)
    at com.intellij.patterns.ObjectPattern.accepts(ObjectPattern.java:58)
    at com.intellij.patterns.PatternConditionPlus.process(PatternConditionPlus.java:45)
    at com.intellij.patterns.PatternConditionPlus.process(PatternConditionPlus.java:26)
    at com.intellij.patterns.TreeElementPattern$2.processValues(TreeElementPattern.java:88)
    at com.intellij.patterns.PatternConditionPlus.accepts(PatternConditionPlus.java:41)
    at com.intellij.patterns.ObjectPattern.accepts(ObjectPattern.java:58)
    at com.intellij.patterns.StandardPatterns$3.accepts(StandardPatterns.java:118)
    at com.intellij.patterns.ObjectPattern.accepts(ObjectPattern.java:53)
    at com.intellij.patterns.CollectionPattern$3.accepts(CollectionPattern.java:55)
    at com.intellij.patterns.CollectionPattern$3.accepts(CollectionPattern.java:52)
    at com.intellij.patterns.ObjectPattern.accepts(ObjectPattern.java:58)
    at com.intellij.patterns.PatternConditionPlus.process(PatternConditionPlus.java:45)
    at com.intellij.patterns.PatternConditionPlus.process(PatternConditionPlus.java:26)
    at com.intellij.patterns.TreeElementPattern$2.processValues(TreeElementPattern.java:88)
    at com.intellij.patterns.PatternConditionPlus.accepts(PatternConditionPlus.java:41)
    at com.intellij.patterns.ObjectPattern.accepts(ObjectPattern.java:58)
    at com.intellij.patterns.PatternConditionPlus.process(PatternConditionPlus.java:45)
    at com.intellij.patterns.PatternConditionPlus.process(PatternConditionPlus.java:26)
    at com.intellij.patterns.TreeElementPattern$4.processValues(TreeElementPattern.java:127)
    at com.intellij.patterns.PatternConditionPlus.accepts(PatternConditionPlus.java:41)
    at com.intellij.patterns.ObjectPattern.accepts(ObjectPattern.java:58)
    at com.intellij.patterns.ObjectPattern.accepts(ObjectPattern.java:48)
    at com.intellij.StyledComponents.StyledComponentsInjector.getLanguagesToInject(StyledComponentsInjector.kt:38)
    at com.intellij.psi.impl.source.tree.injected.InjectedPsiCachedValueProvider$MyInjProcessor.process(InjectedPsiCachedValueProvider.java:82)
    at com.intellij.psi.impl.source.tree.injected.InjectedLanguageManagerImpl.processInPlaceInjectorsFor(InjectedLanguageManagerImpl.java:461)
    at com.intellij.psi.impl.source.tree.injected.InjectedPsiCachedValueProvider.doCompute(InjectedPsiCachedValueProvider.java:62)
    at com.intellij.psi.impl.source.tree.injected.InjectedLanguageUtil.probeElementsUp(InjectedLanguageUtil.java:312)
    at com.intellij.psi.impl.source.tree.injected.InjectedLanguageUtil.enumerate(InjectedLanguageUtil.java:144)
    at com.intellij.codeInsight.daemon.impl.InjectedGeneralHighlightingPass.a(InjectedGeneralHighlightingPass.java:185)
    at com.intellij.concurrency.ApplierCompleter.a(ApplierCompleter.java:133)
    at com.intellij.openapi.application.impl.ApplicationImpl.tryRunReadAction(ApplicationImpl.java:1161)
    at com.intellij.concurrency.ApplierCompleter.b(ApplierCompleter.java:105)
    at com.intellij.openapi.progress.impl.CoreProgressManager.a(CoreProgressManager.java:548)
    at com.intellij.openapi.progress.impl.CoreProgressManager.executeProcessUnderProgress(CoreProgressManager.java:493)
    at com.intellij.openapi.progress.impl.ProgressManagerImpl.executeProcessUnderProgress(ProgressManagerImpl.java:94)
    at com.intellij.concurrency.ApplierCompleter.a(ApplierCompleter.java:116)
    at com.intellij.concurrency.ApplierCompleter.c(ApplierCompleter.java:96)
    at com.intellij.openapi.application.impl.ReadMostlyRWLock.executeByImpatientReader(ReadMostlyRWLock.java:142)
    at com.intellij.openapi.application.impl.ApplicationImpl.executeByImpatientReader(ApplicationImpl.java:250)
    at com.intellij.concurrency.ApplierCompleter.compute(ApplierCompleter.java:96)
    at java.util.concurrent.CountedCompleter.exec(CountedCompleter.java:731)
    at java.util.concurrent.ForkJoinTask.doExec(ForkJoinTask.java:289)
    at java.util.concurrent.ForkJoinPool$WorkQueue.runTask(ForkJoinPool.java:1056)
    at java.util.concurrent.ForkJoinPool.runWorker(ForkJoinPool.java:1692)
    at java.util.concurrent.ForkJoinWorkerThread.run(ForkJoinWorkerThread.java:157)

This is the file that it seems to be failing on:

const ListItemWrapper = styled.div`
  display: flex;
  align-items: center;
  min-width: 0;
  height: 5.125rem;
  margin-top: ${smallSpacing};
  padding-right: ${smallSpacing};
  background-color: ${pureWhite};
  cursor: pointer;

  &:hover {
    box-shadow: ${bottomBoxShadow};
  }
`

const TypeIconWrapper = styled.div`
  display: flex;
  flex: 0 0 5.125rem;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: ${lightPink};

  ${toTablet} { /* stylelint-disable-line */
    /* stylelint-disable-next-line declaration-empty-line-before */
    flex: 0 0 4px;
  }

  ${ListItemWrapper}:hover & { /* stylelint-disable-line */
    /* stylelint-disable-next-line declaration-empty-line-before */
    background-color: ${mediumPink};
  }
`

const StyledTypeIcon = styled(Icon)`
  display: flex;

  ${toTablet} { /* stylelint-disable-line */
    /* stylelint-disable-next-line declaration-empty-line-before */
    display: none;
  }
`

const Avatar = styled.div`
  flex: 0 0 2.714rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.714rem;
  margin: 0 1.3125rem;
  padding: 0;
  border-radius: 50%;
  background-color: ${ruleGray};
  color: ${lightBlack};
  font-size: 1rem;
  font-weight: 400;
  line-height: 0;
`

const ClientWrapper = styled.div`
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
`

const ClientName = styled.div`
  flex: 1 1 auto;
  font-size: 1.29rem;
  line-height: 1.556em;
  ${typTruncating}

  ${ListItemWrapper}:hover & { /* stylelint-disable-line */
    /* stylelint-disable-next-line declaration-empty-line-before */
    color: ${hpPink};
  }
`

const ClientStatus = styled.div`
  ${typMiniLabels}
  flex: 1 1 100%;
`

const CallToActionWrapper = styled.div`
  display: none;
  flex: 0 1 10%;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  margin-right: ${mediumSpacing};

  ${fromTablet} { /* stylelint-disable-line */
    /* stylelint-disable-next-line declaration-empty-line-before */
    ${ListItemWrapper}:hover & { /* stylelint-disable-line */
      /* stylelint-disable-next-line declaration-empty-line-before */
      display: flex;
    }
  }
`

const ContactMenu = styled.div`
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
`

const ContactMenuDropdownTrigger = styled.div`
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  cursor: pointer;
`

const ContactMenuIcon = styled(Icon).attrs({ iconName: 'contact_card' })`
  line-height: 0;

  ${ContactMenu}:hover & { /* stylelint-disable-line */
    /* stylelint-disable-next-line declaration-empty-line-before */
    svg path,
    svg polygon {
      fill: ${actionColor};
    }
  }

  ${toTablet} { /* stylelint-disable-line */
    /* stylelint-disable-next-line declaration-empty-line-before */
    display: none;
  }
`

const ContactMenuDownArrow = styled(Icon).attrs({ iconName: 'down_arrow' })`
  line-height: 0;
`

[mstarkman]

@daedlock This is from version 1.0.

[daedlock]

Reproduced on Intellij 2017.2

This seems be the trigger

const ContactMenuIcon = styled(Icon).attrs({ iconName: 'contact_card' })`
...
`;

If we remove the following, the error disappears.

.attrs({ iconName: 'contact_card' })

@undeadcat. If I am not mistaken, it's an issue with Patterns.kt#getReferencePart() expecting a reference expression while it's getting a call expression.

[undeadcat]

D'oh! Fixed. Thanks.

@mstarkman If you've downloaded the plugin from the IDE (not via zip file), the IDE will show a notification when the plugin can be updated.

I would aim to publish a new version by end of monday - tuesday, possibly with fixes for other issues if that's ok with everyone. I would not publish a new version for every bug because too many 'update available' notifications can be annoying.

[daedlock]

@undeadcat. Agreed

[mstarkman]

Thanks @undeadcat! I'll keep an eye out for it in the IDE. Does the also cover the case of using extend.attrs({}) (https://www.styled-components.com/docs/basics#extending-styles)? We use that also and wasn't covered by another tool, so I just wanted to ask. This would be some example code:

const StyledIcon = styled(Icon)`
  height: 24px;
  width: 24px;
`

const FilterIcon = StyledIcon.extend.attrs({ iconName: 'filter' })`
  line-height: 0;
  margin-right: 1rem;
`

[daedlock]

@mstarkman Fixed in v1.0.1 https://github.com/styled-components/webstorm-styled-components/releases/tag/v1.0.1

[mstarkman]

@daedlock This seems to be working in most cases for my code. However, the .extend.attrs({}) still isn't working properly. I've created a separate issue for it here: https://github.com/styled-components/webstorm-styled-components/issues/28.