Next.js: Support for styled-jsx

[spd789562]

Hi!
styled-jsx look cool!
Would you plan to add this in next?

[aga5tya]

I tried to use styled-jsx module, but end up with this error upon the basic example provided at the repo.

import _jsxStyleInject from 'styled-jsx/inject'; ^^^^^^ SyntaxError: Unexpected token import at Object.exports.runInThisContext (vm.js:76:16) at Module._compile (module.js:545:28)

Do i need to use a specific babel preset to get this working ? This is what i have put for babel config adding the plugin in package.json

"babel": { "plugins": [ "styled-jsx/babel" ] },

[sergiodxa]

@aga5tya I think you need to add a plugin or preset to support ES2015 modules because the styled-jsx/babel plugin insert an import instead of a require.

[jlobos]

in future next.js replace glamor to styled-jsx?

[aga5tya]

@sergiodxa, doesn't next.js support es6 modules out of the box?

[conor]

@aga5tya styled-jsx requires a babel transform plugin to work. Currently next.js doesn't expose the webpack config. My understanding is that they will give access to webpack config in the next release.

[aga5tya]

@conor @sergiodxa, I just checked the default webpack config being used,, i see a babel transform runtime plugin,, is there another one that is required or is the order that is causing the issue?

https://github.com/zeit/next.js/blob/master/server/build/webpack.js#L137

[conor]

@aga5tya you can see the required babel plugin on the README for styled-jsx.

I guess it would require this line to be added require.resolve('styled-jsx/babel'). Having said that there is work being done on this PR #222. So, I think it is best to wait for that. Because you will also need access to the server code in order to render on the server. This is coming in the Programmatic API #291.

[aga5tya]

@conor , sounds good,, thanks for pointing it. :)