styled-components / babel-plugin-polished

Compile polished helper functions at build time
MIT License
138 stars 13 forks source link

Confirmation of expected outcome from using this package #7

Closed joetidee closed 5 years ago

joetidee commented 6 years ago

The readme says "Compile away polished helpers" - can I just confirm that what this package does is strip-out/tree shake the polished helpers that I have not imported into my project?

Secondly, should the import in the 'In' code block be:

import { rem } from 'polished';

to fall in line with the example of how to import the polished helpers in the polished readme file?

bhough commented 6 years ago

@joetidee this plugin does not handle tree-shaking specifically, that functionality is based on your webpack setup, which polished fully supports. If you import the way you described above, webpack will properly tree-shake out unused modules.

This plugin will go through and pre-execute any polished helpers that it can and replace them with the result of executing that code.

For example the following in your code:

const styles = {
  background: darken(0.2, '#FFCD64'),
}

Would be compiled to the following in your processed bundled:

const styles = {
  background: "#ffbd31";
}

This will only work when the value isn't dynamic (such as code that is generated from user inputted values for example).