https://github.com/styled-components/styled-components-codemods

Automatic codemods to upgrade your styled-components code to newer versions.
https://github.com/styled-components/styled-components-codemods

Last synced: 11 days ago
JSON representation

Automatic codemods to upgrade your styled-components code to newer versions.

• Host: GitHub
• URL: https://github.com/styled-components/styled-components-codemods
• Owner: styled-components
• License: mit
• Created: 2018-10-01T08:06:15.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-10T18:05:19.000Z (over 6 years ago)
• Last Synced: 2025-01-25T12:33:26.796Z (21 days ago)
• Language: JavaScript
• Size: 97.7 KB
• Stars: 52
• Watchers: 5
• Forks: 5
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-codemods - styled-components-codemods - Automatic codemods to upgrade your styled-components code to newer versions. (Libraries / Styled Components)

README

        
# styled-components-codemods

Automatic codemods to upgrade your styled-components code to newer versions.

## Installation

Thanks to `npx` no installation is needed, just run the command below!

## Usage

```sh

Usage: npx styled-components-codemods [options] [command]

Options:

  -V, --version                                  output the version number

  -h, --help                                     output usage information

Commands:

  v4 [...files]                                  Run all v4 codemods

  v4-extendToStyled [...files]                   Run just the extendToStyled codemod

  v4-injectGlobalToCreateGlobalStyle [...files]  Run just the injectGlobalToCreateGlobalStyle codemod

Examples:

  $ styled-components-codemods v4-extendToStyled src/components/Box.js src/components/Button.js

  $ styled-components-codemods v4 src/**/*.js (this will only work if your terminal expands globs)

```

### Codemods

#### v4

In version 4 of `styled-components` the `Component.extends` API will be removed in favor of only using `styled(Component)`. This codemod replaces all `.extends` calls to equivalent `styled()` calls instead. Furthermore, the injectGlobal API has been upgraded to slot into React's lifecycle more naturally. It refactors all `injectGlobal` calls, and warns you where they are, so you can export them and include them when rendering.

##### Limitations

There is no way to distinguish whether `.extend` identifier is related to `styled-components` or any other library/prototype etc. If you know that there is another `.extend` function in your project that is not related to `styled-components` be aware and revert these instances manually.

> Be aware that `.extend` used in combination with `.withComponent` can give you a different result than `styled(WithComponentedComponent)`. Refer to this [issue](https://github.com/styled-components/styled-components/issues/1956) to understand the difference.

##### Example

  Code Before

```javascript

StyledComponent.extend``;

StyledComponent.extend`

  color: red;

`;

StyledComponent.extend({ color: "red" });

StyledComponent.extend;

StyledComponent.extend``.extend;

StyledComponent.extend({ color: red }).extend;

styled.div``.extend``;

styled.div`

  color: red;

`.extend`color: blue;`;

styled.div({ color: "red" }).extend({ color: "blue" });

StyledComponent.withComponent("div").extend``;

StyledComponent.withComponent("div").extend`color: red;`;

StyledComponent.withComponent("div").extend();

StyledComponent.withComponent("div").extend({ color: red });

StyledComponent.extend()

  .extend()

  .extend().extend``;

StyledComponent.extend``.extend().extend``.extend``;

```

  Code after

```javascript

import styled, { css } from "styled-components";

styled(StyledComponent)``;

styled(StyledComponent)`

  color: red;

`;

styled(StyledComponent)({ color: "red" });

styled(StyledComponent);

styled(styled(StyledComponent)``);

styled(styled(StyledComponent)({ color: red }));

styled(styled.div``)``;

styled(

  styled.div`

    color: red;

  `

)`

  color: blue;

`;

styled(styled.div({ color: "red" }))({ color: "blue" });

styled(StyledComponent.withComponent("div"))``;

styled(StyledComponent.withComponent("div"))`

  color: red;

`;

styled(StyledComponent.withComponent("div"))();

styled(StyledComponent.withComponent("div"))({ color: red });

styled(styled(styled(styled(StyledComponent)())())())``;

styled(styled(styled(styled(StyledComponent)``)())``)``;

```