CSS partials cause `CssSyntaxError`

[Dimitri Mitropoulos]

CssSyntaxErrors are triggered when using syntax from the styled-components docs (which, by the way, is valid).

Environment

npx envinfo --system --binaries --npmPackages stylelint,styled-components,stylelint-processor-styled-components,stylelint-config-styled-components,stylelint-config-recommended --markdown --clipboard

## System:
 - OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
 - CPU: (32) x64 AMD Ryzen Threadripper 2950X 16-Core Processor
 - Memory: 20.07 GB / 62.84 GB
 - Container: Yes
 - Shell: 5.0.3 - /bin/bash
## Binaries:
 - Node: 12.13.0 - /usr/local/bin/node
 - Yarn: 1.16.0 - /usr/bin/yarn
 - npm: 6.12.0 - /usr/local/bin/npm
## npmPackages:
 - styled-components: 4.4.0 => 4.4.0 
 - stylelint: 11.1.1 => 11.1.1 
 - stylelint-config-recommended: 3.0.0 => 3.0.0 
 - stylelint-config-styled-components: 0.1.1 => 0.1.1 
 - stylelint-processor-styled-components: 1.8.0 => 1.8.0

Steps to reproduce

add code straight out of the styled-components docs:

• example 1:

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};
`

• example 2:

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

const pulse = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

const animation = props =>
  css`
    ${pulse} ${props.animationLength} infinite alternate;
  `

const PulseButton = styled.button`
  animation: ${animation};
`

Expected Behavior

no CssSyntaxError

Actual Behavior

CssSyntaxError

[Xianming Zhong]

As explained in #247 (comment), it is really an annoying problem.

If you are not satisfied with the current workaround, feel free to share your idea in #262.