https://github.com/lucleray/styled-components.macro

A `babel-plugins-macros` macro for styled-components
https://github.com/lucleray/styled-components.macro

babel-macros babel-plugin-macros styled-components

Last synced: 15 days ago
JSON representation

A `babel-plugins-macros` macro for styled-components

• Host: GitHub
• URL: https://github.com/lucleray/styled-components.macro
• Owner: lucleray
• Created: 2018-10-06T01:54:43.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T02:33:10.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T13:19:22.145Z (about 1 month ago)
• Topics: babel-macros, babel-plugin-macros, styled-components
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/styled-components.macro
• Size: 429 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
⚠️ This repo is not active. If you want a macro for styled-components, use [`styled-components/macro`](https://www.styled-components.com/docs/tooling#babel-macro).

---

## styled-components.macro 🎣

A `babel-plugin-macros` macro for `styled-components`.

### Usage

```js

import styled from 'styled-components.macro'

const Button = styled.button`

  background: purple;

  color: white;

`

// ...

```

### Setup for create-react-app

Create-react-app is shipped already including `babel-plugin-macros`, which makes it much easier to setup 🚀

1. Make sure you have already installed `styled-components` :

```

yarn add styled-components

```

2. Install this package :

```

yarn add styled-components.macro --dev

```

### General setup

1. Make sure you have already installed `styled-components` :

```

yarn add styled-components

```

2. Install `babel-plugin-macros` and add it to your babel config :

```js

// .babelrc

{

  "plugins": ["macros"]

}

```

See [babel-plugin-macros docs](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md#babel-plugin-macros-usage-for-users) for more information about how to setup `babel-plugin-macros`.

3. Install this package :

```

yarn add styled-components.macro --dev

```

### More

This macro is using `babel-plugin-styled-components` to transform your code. See [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) to see what transformations are applied.