What's the difference between styled-components and styled-components/macro

Question

Sometimes I see slightly different imports

import styled, { withTheme } from "styled-components/macro";
import styled, { withTheme } from "styled-components";

Since they have the same functionality I cannot understand the difference between them neither can google anything that could help.

Answer 1

In production styled-components generates unique hashes for css classes like .eeZmbc or .ZzNLl. These are used for saving space but are not useful for developers in development.

For semantic class names in development a babel plugin exists. It generates names like .Navbar__Item-sc-14eztoj-1 as in .FileName__StyledComponent-generatedHash to help us trace an element/style back to its source.

So if you use create-react-app you can use this plugin without ejecting and without adding it to babel config. You just have change your import from styled-components to styled-components/macro. A quick find-and-replace in you IDE will do the trick.

All the compile-time code transformation is handled by babel-plugin-macros

babel-plugin-macros defines a standard interface for libraries that want to use compile-time code transformation without requiring the user to add a babel plugin to their build system (other than babel-plugin-macros, which is ideally already in place).

Personally I add the babel plugins to the config file manually and use standard imports like styled-components.