Styled-jsx ignored

[johanleroch]

Hello all,

I'm facing an issue regarding <style jsx>{``}</style> in my components.
When I want to put an image inline through SCSS files or with import / require statements in JS files it's working fine.
But not with style jsx, so I'm wondering if this plugin supports parsing <style jsx> ?

Someone has something working with style jsx ?

I'm using '[email protected]' + '@zeit/[email protected]' in the project.

Thank you !

[cyrilwanner]

Hi @johanleroch
This plugin supports all styling solutions out of the box, which use the webpack path resoluting for (image) URLs. Unfortunately, styled-jsx doesn't use that.

But since styled-jsx is basically just a template string in your component, you should be able to concatenate it with a direct require call. It could look something like this:

<style jsx>{`
  .header {
    background-image: url('${require('./my-image.jpg')}');
  }
`}</style>

Does it work for you like this? If not, can you please provide a snipped where you tried to include the image in styled-jsx? Thanks!

[lun4i]

Got the same issue with ?trace option at the end
have tried both import and require options...

style={{
  backgroundImage: `url(\'${require('static/images/b_black.png')}\')`,
}}

Example above gives the right image
but adding ?trace
will retrun style="background-image: url("[object Object]");"

not sure if ti's DEV mode issue tho

[cyrilwanner]

Hi @lun4i
The ?trace request query actually returns an object (see link) with two properties: trace (the svg trace) and src (the original image). So in your example, you would have to use something like this:

style={{
  backgroundImage: `url('${require('static/images/b_black.png').trace}')`,
}}

(or .src if you want the normal image)

[mastef]

@cyrilwanner follow-up question : How would you use a ?trace image inside an imported .css file?

E.g.

.no-webp .loadedBackground {
    background-image: url('../static/backgrounds/bigbg.jpg?trace');
}

will get transformed to [Object object] as well here.