search

martinandert / babel-plugin-css-in-js

A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the `className` prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server.
MIT License
299 stars 11 forks source link

Dynamic style objects #9

Closed skitterm closed 7 years ago

skitterm commented 8 years ago

I tried 

var item = {
  color: 'red'
};
var styles = cssInJS({
  item: item
});

But I got the warning "Top level value must be an object expression".

I'm assuming that's what you mean in the caveats about not being able to do dynamic stuff in the stylesheet. Am I right? Is there any plan on adding dynamic functionality? It'd be great to use this if it did.

martinandert commented 8 years ago

I'm assuming that's what you mean in the caveats about not being able to do dynamic stuff in the stylesheet. Am I right?

@skitterm Yes, that's correct. Babel only parses/transforms JS files, but it doesn't compile/interpret them.

As a workaround, you could use the context option (see the README on how to use it and also read the "Expressions in Style Rules" section). Maybe that helps?