Menu
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?
738
Styled components export a helper for dealing with CSS keyframes, which generates a uniques instance that can be used throughout the entire application.
In projects where you have a large codebase, using plain CSS can become time-intensive and tiring. That's where styled-components comes in. In this tutorial, we'll show you how to build and style a TypeScript app using styled-components. You can access the images required for this demo in my GitHub repository.
It Solves CSS Specificity Problems Styled components eliminate specificity problems as it encapsulates CSS inside a component. This means you don't have to worry about class names clashing or your UI turning into a mess due to class name clashes.
Passed propsIf the styled target is a simple element (e.g. styled.div), styled-components passes through any known HTML attribute to the DOM. If it is a custom React component (e.g. styled(MyComponent)), styled-components passes through all props.
Step 3: Installing styled-components: styled-components can be installed via npm in your React application. Follow the steps given below to install styled-components in your React application. To install the styled-components use the following command: Project Structure: It will look like the following.
The error happens with both ways of importing styled-components import styled from 'styled-components' import * as styled from 'styled-components' declaration in tsconfig is only telling it to generate type defs for your own files in the build output, not specifying how to import them from others
To create a @keyframes animation and use it with styled-components the first thing you need to do is to import the keyframes helper. Just as the div, or any other “element” property that exists on the styled object imported from styled-components, keyframes is a function that you use as a tag for your template literal style declarations.
To install the styled-components use the following command: Project Structure: It will look like the following. Step 4: To add styled-components in your application, open your project directory in the editor you use.
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
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
