search

styled-components / babel-plugin-polished

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

Plugin does not transform instances of a method when an argument is a non literal #6

Closed dylanaubrey closed 6 years ago

dylanaubrey commented 6 years ago

Am very keen to make use of this plugin, but it doesn't do anything when added to my project.

I initially tried with babel 7 and then downgraded to 6 and it still did not work. Note, I tried polished and babel-plugin-polished as the values for the name in the .babelrc (you have it both ways in the documentation on github and on your website).

// .babelrc

  "plugins": [
    ["babel-plugin-styled-components", {
      "displayName": true,
      "ssr": true
    }],
    "babel-plugin-polished"
  ]

I also tried both ways of importing polished at the top of a given file.

// component.js

import * as polished from 'polished';
// as well as
import { rgba } from 'polished';

No combination makes any difference to the transpiled code that is output.

Please can you assist? Cheers.

dylanaubrey commented 6 years ago

Okay, I've debugged the plugin and there is a condition on line 80 that checks if the value passed into the polished method is a literal and if a nonLiteral argument is found it does not transform that instance... would be good to clarify this in the docs... I'll have a crack at extending the plugin to cater for nonLiteral arguments and raise a PR.

dylanaubrey commented 6 years ago

Having had a further look into this, the best approach I can see is to allow a user to specify a directory like a theme directory and to require the contents of that file whenever there is a matching ImportDeclaration and go through the file that is importing the theme and replace the references to the identifiers with values... this feels like it could be a separate plugin and then run the babel-plugin-polished after and it work as is... will have a look at this... closing issue.