Why do my styled component keyframes error with ts-styled-plugin(9999) in react when using percentage instead of TO/FROM

user_11521143 0
Viewed 3633

I am using CRA 4, when using keyframes with styled components, percentages cause an error that I cannot seem to understand why - but doesn't error if I use To / From.

this is the example:

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

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

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
`

Used inside a styled component as such:

animation: ${animateLeft} 1s infinite;

The error I get with the percentages inside the keyframes are:

} expectedts-styled-plugin(9999)

Why?

styled-components reactjs
1 Answers

There is an ongoing problem with this for others too. You can follow that here: https://github.com/styled-components/vscode-styled-components/issues/293

In the meantime if you have keyframes that have 0% and 100%, just use from and to:

Temporary solutions (before team on VS gets done):

keyframes`
  \ 0%{
    <someCss>
  }

  \ 50% {
    <someCss>
  }

  \ 100% {
    <someCss>
  }
`;

Or:

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

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

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

In case you have the one you mentioned with multiple stops you will need to disable plugin for VS code for styled components.

UPDATE

Bug is now fixed with newest version of vscode-styled-components extension v1.6.4. Just update your extension and all will be ok.

EDIT

Currently PR is in progress for fixing this problem i will edit this answer when it is done: https://github.com/microsoft/typescript-styled-plugin/issues/137#issuecomment-848930098

Follow up this issue and when extension gets updated you will be able to use this without error: https://github.com/styled-components/vscode-styled-components/issues/301

user_39555570
Related