<p dir="auto">I'm using <code class="notranslate">babel-plugin-inline-import</code> to <code class="notranslate">import</code> built css files for <code class="notranslate">antd</code> components. I import the CSS as strings &amp; insert it via tagged template literal into a <code class="notranslate">styled-component</code>. This is to avoid requiring the entire CSS file on every page.</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 importing CSS as a string and passing it to a styled component, the imported styles should affect components in the proper scope.</p>
<p dir="auto">Here's my <code class="notranslate">.babelrc</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
    &quot;presets&quot;: [&quot;next/babel&quot;],
    &quot;plugins&quot;: [
        [
            &quot;styled-components&quot;,
            { &quot;ssr&quot;: true, &quot;displayName&quot;: true, &quot;preprocess&quot;: false }
        ],
        [
            &quot;inline-import&quot;,
            {
                &quot;extensions&quot;: [&quot;.css&quot;]
            }
        ]
    ]
}"><pre class="notranslate"><code class="notranslate">{
    "presets": ["next/babel"],
    "plugins": [
        [
            "styled-components",
            { "ssr": true, "displayName": true, "preprocess": false }
        ],
        [
            "inline-import",
            {
                "extensions": [".css"]
            }
        ]
    ]
}
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">When I wrap the component in the regular <code class="notranslate">styled</code> function from <code class="notranslate">styled-components</code>, the styles are injected into the <code class="notranslate">&lt;head&gt;</code> and the component is given the correct classnames. However, no styles are applied.</p>
<p dir="auto">Such an implementation looks like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Button from 'antd/lib/button';
import styled from 'styled-components';
import Styles from 'antd/lib/button/style/index.css';

export default styled(Button)`
    ${Styles};
`;"><pre class="notranslate"><code class="notranslate">import Button from 'antd/lib/button';
import styled from 'styled-components';
import Styles from 'antd/lib/button/style/index.css';

export default styled(Button)`
    ${Styles};
`;
</code></pre></div>
<p dir="auto">^^ Note that this implementation works in non-nextjs projects, at least in my experience.</p>
<p dir="auto">Now, when I use <code class="notranslate">styled-components</code> <code class="notranslate">injectGlobal</code>, though, it works fine:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Button from 'antd/lib/button';
import { injectGlobal } from 'styled-components';
import Styles from 'antd/lib/button/style/index.css';

injectGlobal`${Styles}`;
export default Button;"><pre class="notranslate"><code class="notranslate">import Button from 'antd/lib/button';
import { injectGlobal } from 'styled-components';
import Styles from 'antd/lib/button/style/index.css';

injectGlobal`${Styles}`;
export default Button;
</code></pre></div>
<p dir="auto">Using classnames to style descendants work fine in Styled Components/next in regular use cases, like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// index.js
const Wrapper = styled.div`
  .potato {
      background: brown;
      height: 100px;
      width: 100px;
  }
`
export default props =&gt; &lt;Wrapper&gt;&lt;div className={'potato'}/&gt;&lt;/Wrapper&gt;"><pre class="notranslate"><code class="notranslate">// index.js
const Wrapper = styled.div`
  .potato {
      background: brown;
      height: 100px;
      width: 100px;
  }
`
export default props =&gt; &lt;Wrapper&gt;&lt;div className={'potato'}/&gt;&lt;/Wrapper&gt;
</code></pre></div>
<p dir="auto">It seems the only broken case is when I'm importing the css.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">I setup a small example repo based on the <code class="notranslate">with-styled-components</code> example in next's repo:<br>
<a href="https://github.com/brandonmp/styled-components-next-scope">https://github.com/brandonmp/styled-components-next-scope</a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">I'm trying to port over a project from Gatsby, and I'd rather not pollute global with all of antd's styles.</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>latest</td>
</tr>
<tr>
<td>node</td>
<td>8.6.0</td>
</tr>
<tr>
<td>OS</td>
<td>Win10 via WSL Bash</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 62</td>
</tr>
<tr>
<td>etc</td>
<td>My favorite food is pickles</td>
</tr>
</tbody>
</table>
<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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">Is there any way to override <strong>Cache-Control</strong> header of <code class="notranslate">/_next/webpack/chunks/:name'</code> requests <a href="https://github.com/zeit/next.js/blob/canary/server/index.js#L153">https://github.com/zeit/next.js/blob/canary/server/index.js#L153</a> . I want to add <code class="notranslate">s-max-age</code> to be more aggressively.</p>