## Babel Macro | v4 | v5

> This functionality was removed in v6.1 due to lack of usage and unnecessary bloat for other consumers. [More info](https://github.com/styled-components/styled-components/issues/4064)

[Babel macros](https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros) are quickly gaining steam as a full-featured option to allow advanced code transpilation for zero-config projects like [create-react-app](https://github.com/facebook/create-react-app).

If your scaffold is set up with [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros), then simply use the new `styled-components/macro` import instead of `styled-components`:

```tsx
import styled, { createGlobalStyle } from 'styled-components/macro'

const Thing = styled.div`
  color: red;
`

const GlobalStyle = createGlobalStyle`
  body {
    color: 'white';
  }
`
```

The macro incorporates all the functionality of [our babel plugin](/docs/tooling#babel-plugin) while allowing the unejected tooling to handle the Babel part of the build process. Special thanks to [Luc Leray (@lucleray)](https://github.com/lucleray) for making this happen!

### EXPERIMENTAL Config

[`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros) uses [`cosmiconfig`](https://www.npmjs.com/package/cosmiconfig) to read a `babel-plugin-macros` configuration which
can be located in any of the following files up the directories from the
importing file:

- `.babel-plugin-macrosrc`
- `.babel-plugin-macrosrc.json`
- `.babel-plugin-macrosrc.yaml`
- `.babel-plugin-macrosrc.yml`
- `.babel-plugin-macrosrc.js`
- `babel-plugin-macros.config.js`
- `babelMacros` in `package.json`

You can then specify the same options as [our babel plugin](/docs/tooling#babel-plugin) in `styledComponents` entry:

```tsx
// babel-plugin-macros.config.js
module.exports = {
  // ...
  // Other macros config
  styledComponents: {
    pure: true,
  },
}
```

For more information, see [EXPERIMENTAL config for babel-plugin-macros ](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md#config-experimental).

### Enforce macro imports

You may want to ensure that objects are consistently imported from the macro across your project. This can be achieved by using a [`no-restricted-imports`](https://eslint.org/docs/rules/no-restricted-imports) rule from ESLint:

```json
"no-restricted-imports": [
  "error",
  {
    "paths": [{
      "name": "styled-components",
      "message": "Please import from styled-components/macro."
    }],
    "patterns": [
      "!styled-components/macro"
    ]
  }
]
```