CssSyntaxError for styled-components example

[psixdev]

Environment

## System:
 - OS: Linux 4.15 Ubuntu 16.04.6 LTS (Xenial Xerus)
 - CPU: (4) x64 Intel(R) Core(TM) i3-6100 CPU @ 3.70GHz
 - Memory: 599.36 MB / 7.67 GB
 - Container: Yes
 - Shell: 4.3.48 - /bin/bash
## Binaries:
 - Node: 8.4.0 - ~/.nvm/versions/node/v8.4.0/bin/node
 - npm: 5.3.0 - ~/.nvm/versions/node/v8.4.0/bin/npm
## npmPackages:
 - styled-components: 4.1.3 => 4.1.3 
 - stylelint: 9.10.1 => 9.10.1 
 - stylelint-config-recommended: 2.1.0 => 2.1.0 
 - stylelint-config-styled-components: 0.1.1 => 0.1.1 
 - stylelint-processor-styled-components: 1.5.2 => 1.5.2 

Reproduction

I use example from this page https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4:

import styled, { css, keyframes } from 'styled-components'

const animation = keyframes`
  0% {
    opacity: 0;
  }

  100 {
    opacity: 1;
  }
`

const animationRule = css`
  ${animation} 1s infinite alternate;
`

const Component = styled.div`
  animation: ${animationRule};
`

Actual Behavior

14:31 ✖ Unknown word CssSyntaxError

P. S.

I can avoid the error by changing the styles like this:

const animationRule = css`
  animation: ${animation} 1s infinite alternate;
`

const Component = styled.div`
  ${animationRule};
`

But it doesn't seem like a good solution

[chinesedfan]

Duplicate of #247.