<p dir="auto">When using _document.js, a style tag will render <code class="notranslate">&gt;</code> as <code class="notranslate">&amp;gt;</code>. This prevents selectors like <code class="notranslate">.foo &gt; .bar { ... }</code> from working.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">when defining a style tag in _document such as</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;style&gt;{' body &gt; div { background-color: red }'}&lt;/style&gt;"><pre class="notranslate"><code class="notranslate">&lt;style&gt;{' body &gt; div { background-color: red }'}&lt;/style&gt;
</code></pre></div>
<p dir="auto">it should preserve the <code class="notranslate">&gt;</code></p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The <code class="notranslate">&gt;</code> gets encoded as <code class="notranslate">&amp;gt;</code></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Using the hello-world example in examples/ as a basis</p>
<ol dir="auto">
<li>add a _document.js in pages that looks like</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Document, { Head, Main, NextScript } from 'next/document'
import flush from 'styled-jsx/server'

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const { html, head, errorHtml, chunks } = renderPage()
    const styles = flush()
    return { html, head, errorHtml, chunks, styles }
  }

  render() {
    return (
      &lt;html&gt;
        &lt;Head&gt;
          &lt;style&gt;{`body &gt; div { background-color: red }`}&lt;/style&gt;
        &lt;/Head&gt;
        &lt;body className=&quot;custom_class&quot;&gt;
          {this.props.customValue}
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    )
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Document</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Head</span><span class="pl-kos">,</span> <span class="pl-v">Main</span><span class="pl-kos">,</span> <span class="pl-v">NextScript</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'next/document'</span>
<span class="pl-k">import</span> <span class="pl-s1">flush</span> <span class="pl-k">from</span> <span class="pl-s">'styled-jsx/server'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">MyDocument</span> <span class="pl-k">extends</span> <span class="pl-v">Document</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> <span class="pl-en">getInitialProps</span><span class="pl-kos">(</span><span class="pl-kos">{</span> renderPage <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> html<span class="pl-kos">,</span> head<span class="pl-kos">,</span> errorHtml<span class="pl-kos">,</span> chunks <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">renderPage</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-k">const</span> <span class="pl-s1">styles</span> <span class="pl-c1">=</span> <span class="pl-en">flush</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span> html<span class="pl-kos">,</span> head<span class="pl-kos">,</span> errorHtml<span class="pl-kos">,</span> chunks<span class="pl-kos">,</span> styles <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">html</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">`body &gt; div { background-color: red }`</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"custom_class"</span><span class="pl-c1">&gt;</span>
          <span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">customValue</span><span class="pl-kos">}</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Main</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">NextScript</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">body</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">html</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<ol start="2" dir="auto">
<li><code class="notranslate">next build &amp;&amp; npm start</code></li>
<li>view the page source in the browser, <code class="notranslate">&lt;style&gt;body &amp;gt; div { background-color: red }&lt;/style&gt;</code> is rendered.</li>
</ol>
<h2 dir="auto">workaround</h2>
<p dir="auto">Using <code class="notranslate">dangerouslySetInnerHTML</code> fixes the issue</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;script dangerouslySetInnerHTML={{__html: 'body &gt; div { background-color: red }' }} /&gt;"><pre class="notranslate"><code class="notranslate">&lt;script dangerouslySetInnerHTML={{__html: 'body &gt; div { background-color: red }' }} /&gt;
</code></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">I am attempting to change the css of divs that are outside of what a normal nextjs page can access.</p>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.2.1</td>
</tr>
<tr>
<td>node</td>
<td>6.9.4</td>
</tr>
<tr>
<td>OS</td>
<td>Ubuntu 16.04</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 63.0.3239.108  and Firefox 57.0.3</td>
</tr>
</tbody>
</table>
<h2 dir="auto">Note</h2>
<p dir="auto">When using styled-jsx inside a nextjs page, <code class="notranslate">&gt;</code> works as expected</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">We should have documented as an example how to use the new <a href="https://github.com/zeit/next-plugins/tree/master/packages/next-less">next-less</a> plugin</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">We have a few examples to import <code class="notranslate">.less</code> files which are mostly hacks to make it work.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">With the release of Next.js v5 the current examples of importing LESS are outdated and can be simplified with the new <a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-css">next-css</a> plugin.</p>