.foo p + p not process?

[katopz]

To reproduce

  render () {
    return (
        <div>
          <dl className="foo">
            <style jsx>{`
              .foo {
                color: red; 
              }
              .foo p {
                color: green; 
              }
              .foo p + p {
                color: blue; 
              }
              `}
            </style>
            red<p>green</p><p>blue</p>
          </dl>
        </div>
    )
  }

Preact (Working)

React via vercel/next.js@cae706d (Not working)

Also sometime hot reload refuse to process CSS (all appear no colour just black) and will need full refresh.
Is it a bug? Thanks.

[katopz]

@rauchg Thanks. It's work now but maybe it's not cover this case?

// Bar.js
export default () =>
<div>
	<dd className='bar'>
		red<p>green</p><p>blue</p>
	</dd>
</div>;

// Foo.js
import React from 'react'
import Bar from './Bar'

export default Foo => {
	return (
		<div>
			<dl className="foo">
				<style jsx>{`
					.foo {
						color: red; 
					}
					.foo p {
						color: green; 
					}
					.foo p + p {
						color: blue; 
					}
					`}
				</style>
				red<p>green</p><p>blue</p>
				{
					[0,1,2].map(item => <Bar key={item}/>)
				}
			</dl>
		</div>
	)
};

Expected

But get

Do tell me if I need to open new issue.

Thanks

[nkzawa]

@katopz that'a bit different issue, see #42