stylelint 和 stylelint-config-styled-components 使用 css 标签给了我一个未知的词 CssSyntaxError答案

【问题标题】：stylelint with stylelint-config-styled-components using css tag gives me a Unknown word CssSyntaxErrorstylelint 和 stylelint-config-styled-components 使用 css 标签给了我一个未知的词 CssSyntaxError
【发布时间】：2021-11-06 20:44:09
【问题描述】：

以下行出现错误 Unknown word CssSyntaxError：

动画：${props => (css${DeterminateFill(props)} 1s ease-in forwards)};

它在以下样式组件中

const DeterminateLinearProgressDiv = styled(ProgressDiv)`
  animation: ${props => (css`${DeterminateFill(props)} 1s ease-in forwards`)};
`

DeterminateFill 如下：

const DeterminateFill = (props) => {
  const valuePercent = `${props.value}%`
  const startPercent = `${props.start}%`

  return keyframes`
    0% {left: 0%; width:  ${startPercent};}
    100% {left: 0%; width: ${valuePercent};}
  `
}

代码运行良好，符合我的预期，今天开始使用 stylelint。

    "stylelint": "^13.13.1",
    "stylelint-config-recommended": "^5.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.10.0",

并将 stylelint.config.js 设置为

module.exports = {
  processors: ['stylelint-processor-styled-components'],
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-styled-components',
  ]
}

【问题讨论】：

标签： css reactjs stylelint

【解决方案1】：

解决办法：

  animation: ${props => (css`${DeterminateFill(props)}`)} 1s ease-in forwards;

将 1s 缓入向前移动

【讨论】：