CssSyntaxError for styled-components example
psixdev opened this issue · comments
psixdev commented
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
Xianming Zhong commented
Duplicate of #247.