[BUG] in styled jsx loaders not apply to images

i have files /pages/_App.js /res/images/image.jpg

export default function App() {

  // language=Stylus
  return <style jsx global>{ `
	body {
		background-image: url("../res/images/image.jpg");
	}
  ` }</style>
}

Problem

url("../res/images/image.jpg") will not replace to /_next/static/images/lol-c8bbed083d312e8f1cccb6069d6f7919.png. styled jsx not applied webpack loaders, and not create optimized next.js assets

Temporary solution

export default function App() {

  // language=Stylus
  return <style jsx global>{ `
	body {
		background-image: url(${ require("../res/images/image.jpg") });
	}
  ` }</style>
}

[MaxmaxmaximusGitHub]

temporary solution:

import css from 'styled-jsx/css'
import icon from 'res/images/icon.svg'

export default function Box() {
  return <div className='box'>
    <style jsx>{ style }</style>
  </div>
}

// language=Css
const style = css`
  .input-panel {
    background-image(${ icon })
  }
`

[MaxmaxmaximusGitHub]

@jamesmosier @timneutkens

if i use webepack base 64 loader, for svg icons, then render component with jsx styles generate 10kb+ style text? every render iteration? if i use 10 png icons by 10kb, i create 100kb style text by every render?

next js cool framework, and your recommendations are wonderful =)

or place the image in the public folder as mentioned in the docs

the images in this folder are source, and do not go through webpack processing and are not suitable for production. hashes are not added to their names, they are not stuck together into single sprites, etc. These are raw files not processed by webpack. such files are called sources.

it is unacceptable to use raw files directly; all assets must always be imported through the webpack system.