Using Storybook with this plugin

[josiahdahl]

I'm building a site with GatsbyJS and using this plugin to use Tailwind. I also have Storybook to preview my components. However, I was running into an error

ERROR in ./src/components/Form/Input.js                                                                   │
Module parse failed: Unexpected token (15:2)                                                              │
You may need an appropriate loader to handle this file type.                                              │
|   'paddingBottom': _tailwind.padding["2"],                                                              │
|   'letterSpacing': _tailwind.tracking["wide"],                                                          │
|   ...[{ borderColor: _tailwind.borderColors["accent"] }, { borderWidth: _tailwind.borderWidths["accent"]│
 }].filter(x => typeof x[Object.keys(x)[0]] !== "undefined" && x[Object.keys(x)[0]] !== "")[0]            │
| }}                                                                                                      │
| `;              

which I solved by adding adding babel-plugin-transform-object-rest-spread as a dev dependency and adding it to the custom .babelrc in the .storybook directory.

// .storybook/.babelrc
{
  "plugins": [
    "macros",
    "transform-object-rest-spread"
  ],
  "presets": [
    "react"
  ]
}

I'm not sure if this should be added to the documentation, but I can create a PR if you like.

[bradlc]

Ah, good point. Maybe we can just add inherits: require('@babel/plugin-syntax-object-rest-spread')? https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#-enabling-syntax-in-plugins

[josiahdahl]

That looks like it could work. Thanks for updating it in the readme as well #6