为什么我的样式组件关键帧在使用百分比而不是 TO/FROM 时会出现 ts-styled-plugin(9999) 错误

Question

我正在使用 CRA 4，当使用带有样式组件的关键帧时，百分比会导致错误，我似乎无法理解为什么 - 但如果我使用 To / From 不会出错。

这是示例：

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

const animateLeft = keyframes`
  0% {
    opacity: 1
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
`

在样式组件中使用，如下所示：

animation: ${animateLeft} 1s infinite;

我得到的关键帧内百分比的错误是：

} expectedts-styled-plugin(9999)

为什么？

Answer 1

对于其他人来说，这也存在一个持续的问题。你可以在这里关注：https : //github.com/styled-components/vscode-styled-components/issues/293

同时，如果您有 0% 和 100% 的关键帧，只需使用fromand to：

临时解决方案（在 VS 团队完成之前）：

keyframes`
  \ 0%{
    <someCss>
  }

  \ 50% {
    <someCss>
  }

  \ 100% {
    <someCss>
  }
`;

或者：

keyframes`
  ${'0%'} {
    <someCss>
  }

  ${'50%'} {
    <someCss>
  }

  ${'100%'} {
    <someCss>
  }
`;

如果你有你提到的多站，你需要为样式组件禁用 VS 代码插件。

更新

现在使用最新版本的vscode-styled-components扩展 v1.6.4修复了错误。只需更新您的扩展程序，一切都会好起来的。

编辑

目前公关正在解决这个问题，我会在完成后编辑这个答案：https : //github.com/microsoft/typescript-styled-plugin/issues/137#issuecomment-848930098

跟进此问题，当扩展更新时，您将能够毫无错误地使用它：https : //github.com/styled-components/vscode-styled-components/issues/301