When passing a component as a function, the css markup stops working.

There are certain edge-cases where you must selectively pass props to the component you are styling. This happens, when you are using third party components, that freely forward everything to the dom. So in this case you cannot pass any prop you want to the component, as that results in an error. The issue can be seen discussed here: https://github.com/styled-components/styled-components/issues/135#issuecomment-256018643 https://github.com/couds/react-bulma-components/issues/187

The solution is as such: const ListElement = styled(({ active, ...rest }) => <Link {...rest} />)

However this makes the markup not work.

Steps to reproduce: Create a styled component const, and use the above code, see, the markup highlighting not work anymore.

[jasonwilliams]

Fixed in v1.6.0

[XYShaoKang]

temporary solution, installation vscode-language-babel then add before the template string /* CSS */

const SearchWarp = styled(({ children, searchDisplay, ...otherProps }) => (
  <SearchBox pose={searchDisplay ? `show` : `hide`} {...otherProps}>
    {children}
  </SearchBox>
))/* CSS */ `
  display: block;
  padding: 6px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
`