https://github.com/siddharthkp/babel-plugin-styled-components-require

Babel plugin that adds styled-components import declaration
https://github.com/siddharthkp/babel-plugin-styled-components-require

babel babel-plugin react require styled-components

Last synced: about 2 months ago
JSON representation

Babel plugin that adds styled-components import declaration

• Host: GitHub
• URL: https://github.com/siddharthkp/babel-plugin-styled-components-require
• Owner: siddharthkp
• License: mit
• Created: 2017-02-03T15:02:28.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-08-16T19:57:08.000Z (over 7 years ago)
• Last Synced: 2024-10-11T02:32:43.546Z (2 months ago)
• Topics: babel, babel-plugin, react, require, styled-components
• Language: JavaScript
• Size: 8.79 KB
• Stars: 13
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
### babel-plugin-styled-components-require

[![Build

Status](https://api.travis-ci.org/siddharthkp/babel-plugin-styled-components-require.svg?branch=master)](https://travis-ci.org/siddharthkp/babel-plugin-styled-components-require)

[![npm](https://img.shields.io/npm/v/babel-plugin-styled-components-require.svg?maxAge=3600)](https://www.npmjs.com/package/babel-plugin-styled-components-require)

 

Babel plugin that adds styled-components import declaration.

 

#### Example

Your `component.js` that contains this code:

```js

const Card = styled.div`

  background: #FFF;

  border: 1px solid #DDD;

  border-radius: 2px;

  padding: 10px;

`;

export default Card;

```

will be transpiled to:

```js

import styled from 'styled-components';

const Card = styled.div`

  background: #FFF;

  border: 1px solid #DDD;

  border-radius: 2px;

  padding: 10px;

`;

export default Card;

```

 

#### Usage

`npm install babel-plugin-styled-components-require --save-dev`

Add `styled-components-require` into `.babelrc`

```json

{

  "plugins": [

    "styled-components-require"

  ]

}

```

 

#### Tests

✓ add import statement if `styled.*` is present

✓ do not add to already transpiled code

✓ do not add import styled-components twice

✓ do not add if it already imported

 

#### You like?

:star: this repo

 

#### License

MIT © [siddharthkp](https://github.com/siddharthkp)