emotion-styled-codemod
v1.0.0
Published
A collection of transforms for jscodeshift related to @emotion/styled
Downloads
8
Maintainers
Readme
emotion-styled-codemod
Collection of transforms for jscodeshift related to @emotion/styled
Usage
$ npx emotion-styled-codemod <paths...>
Positionals:
paths [string] [required]
Options:
--version Show version number [boolean]
--help Show help [boolean]
--dry [boolean] [default: false]
--ignore-pattern [string] [default: "**/node_modules/**"]
Transforms
remove-unnecessary-arrow-functions
Replaces styled component functions with no parameters with their returned object if possible, if the function has an actual body then no transformation is applied.
import styled from '@emotion/styled';
-const StyledComponent = styled.div(() => ({ display: 'flex' }));
+const StyledComponent = styled.div(({ display: 'flex' }));
-const StyledWithBaseComponent = styled(SomeBaseComponent)(() => ({ display: 'flex' }));
+const StyledWithBaseComponent = styled(SomeBaseComponent)(({ display: 'flex' }));
add-const-assertion
Adds as const
to the returned object of styled calls if the function has no parameters, if the object already has a type assertion then no transformation is applied. This is a workaround for a very specific bug with TypeScript type overloads in its latest version (v5.6.3 at the time of writing) and @emotion/styled starting from version 11.11.5.
import styled from '@emotion/styled';
-const StyledComponent = styled.div(() => ({ display: 'flex' }));
+const StyledComponent = styled.div(() => ((({ display: 'flex' }) as const)));
-const StyledWithBaseComponent = styled(SomeBaseComponent)(() => ({ display: 'flex' }));
+const StyledWithBaseComponent = styled(SomeBaseComponent)(() => ((({ display: 'flex' }) as const)));
NOTE: The extra parenthesis around the returned object is an artifact of jscodeshift' object expression builder and should be removed if you use a code formatter like Prettier.
move-type-annotation
Moves the function parameter's type annotation to the styled call.
import styled from '@emotion/styled';
-const StyledComponent = styled.div(({ display }: { display: string }) => ({ display }));
+const StyledComponent = styled.div<{ display: string }>(({ display }) => ({ display }));
-const StyledWithBaseComponent = styled(SomeBaseComponent)(({ display }: { display: string }) => ({ display }));
+const StyledWithBaseComponent = styled(SomeBaseComponent)<{ display: string }>(({ display }) => ({ display }));
Acknowledgements
This project is based on types-react-codemod