That's because it's not possible for current bundlers/minifiers to detect if styled() has side-effects or not. To ensure that those are tree-shaken they need to be prepended with a hint that they are in fact pure. This can be done by adding /* #__PURE__ */ as a comment just before the function call.

const Foo = /* #__PURE__ */ styled("div")`
  color: red;
`

For a babel plugin that does inserts these comments check out:

• https://github.com/styled-components/babel-plugin-styled-components
• https://github.com/cristianbote/goober/tree/master/packages/babel-plugin-transform-goober

just trying to understand it in detail.
For example

// library.js
function useMyHook(){...} // current bundlers/minifiers don't know whether useMyHook is pure or not 
export function ComponentWithHook(){ 
 const [a,b] = useMyHook();
 // do something with a & b
...
}
export function IAmPure(){...}

// app1.js
import {ComponentWithHook} from 'library';
render(<ComponentWithHook/>)

// app2.js
import {IAmPure} from 'library';
render(<IAmPure/>)

In above case

• App1 will bundle whole library
• App1 will bundle ComponentWithHook & useMyHook
• App2 will bundle only IAmPure
• App2 will bundle IAmPure & useMyHook
• App2 will bundle whole library

@marvinhagemeister ^ which option(s) is correct ? 🙂

@kuldeepkeshwar Maybe just try it out?

The top level exports aren't the only requirement for tree-shaking. Tree-shaking is a subclass of dead code elimination (=DCE) and it's only possible to remove something when the minifier/bundler is 100% certain that removing it won't alter the program. For todays bundlers this usually translates to checking if the code in question has no side-effects. If the body of a function can't be proven to be pure and is used somewhere, it won't be removed.