babel-macro-goober

babel-macro-goober

A babel-plugin-macros macro for 🥜goober, rewriting styled.div syntax to styled('div') calls.

Install

npm install babel-macro-goober

You'll also need to install and configure babel-plugin-macros, if you haven't already.

Some toolkits like create-react-app already support babel-plugin-macros.

Usage

Once you've configured babel-plugin-macros, change your imports from goober to babel-macro-goober.

Now you can create your components using styled.* syntax:.

import { styled } from 'babel-macro-goober';

const Button = styled.button`
    margin: 0;
    padding: 1rem;
    font-size: 1rem;
    background-color: tomato;
`;

Note:

babel-plugin-transform-goober allows you to use the same syntax without changing the imports.