-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
netlify-cms css inlined on every route #3753
Comments
/cc @erquhart |
Yep, I have noticed this too. I just removed the |
This seems to be an issue with any css imports. E.g. if I import some Prism syntax highlighting css in my blog template it still gets injected onto every page (even though the js itself is code-split). I got around this by putting all my css into Styled-Components so it's just part of the bundle, but that's not really a solution if a plugin is importing it. |
I'll dig into this soon. |
@oliverjam hmm I'm unable to repro. The Gatsby Netlify CMS starter demo doesn't do it, and I even cloned your repo, went back to the commit before you commented out the Netlify CMS plugin, and tested that with both dev and production builds - no Netlify CMS styles outside of the Can you provide a repro case? |
This is very strange but I can't reproduce either now... I have no idea what was going on before, but I definitely had a load of Netlify-CMS CSS in a style tag in the head of every page. Strangely my Gatsby-inlined CSS also no longer has the "gatsby-inlined-css" ID. Thanks for looking into this, and sorry for wasting your time! I'll re-open the issue if this re-emerges at some point :) |
Okay I managed to reproduce it. It's only happening when I build—running the dev server doesn't output the CSS for some reason. You can see it live at https://oliverjam.es right now as I've left it deployed broken. Here's a screenshot: Any ideas why that's happening? Edit: Just for reference here's the commit where I re-enabled the Netlify-CMS plugin. |
I see in your repo that supplying your own |
@erquhart I thought that had fixed it but actually once it built and deployed the problem was still there. The plugin seems to leak the css no matter what I do, so I've removed it for now |
Figured it out, two issues:
So as soon as my PR gets merged and released, your site will work as long as the Purify CSS plugin is removed. |
@erquhart thank you for bringing to my attention. |
@erquhart That's amazing, thanks so much for looking into it! |
Is this fixed and released? when i run |
@PutziSan I cloned your repo and built it, no CSS in the output: <!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="preload" href="/component---src-pages-index-jsx-8b3e6fdfcc0473aa142e.js" as="script" />
<link rel="preload" href="/path---index-a0e39f21c11f6a62c5ab.js" as="script" />
<link rel="preload" href="/app-4eb7cf0abaf5dc714e3a.js" as="script" />
<link rel="preload" href="/commons-611c88095698110795da.js" as="script" />
<style id="gatsby-inlined-css"></style>
</head>
<body>
<div id="___gatsby">
<div data-reactroot="">
<div>
<h1>Hello world!</h1><a href="/test-entry">Link to /test-entry</a><a href="/test-with-image">Link to /test-entry</a></div>
</div>
</div>
<script id="webpack-manifest">
/*<![CDATA[*/
window.webpackManifest = {
"231608221292675": "app-4eb7cf0abaf5dc714e3a.js",
"45382528579085": "component---src-templates-blog-template-jsx-d4e9abe12f03fba3aee6.js",
"213534597649335": "component---src-pages-index-jsx-8b3e6fdfcc0473aa142e.js",
"39906862311260": "path---test-with-image-134f05fab08c413752c2.js",
"43212999683444": "path---test-entry-1ed238a266786e21ac66.js",
"142629428675168": "path---index-a0e39f21c11f6a62c5ab.js"
} /*]]>*/
</script>
<script>
/*<![CDATA[*/ ! function(e, t, r) {
function n() {
for (; d[0] && "loaded" == d[0][f];) c = d.shift(), c[o] = !i.parentNode.insertBefore(c, i)
}
for (var s, a, c, d = [], i = e.scripts[0], o = "onreadystatechange", f = "readyState"; s = r.shift();) a = e.createElement(t), "async" in i ? (a.async = !1, e.head.appendChild(a)) : i[f] ? (d.push(a), a[o] = n) : e.write("<" + t + ' src="' + s + '" defer></' + t + ">"), a.src = s
}(document, "script", ["/commons-611c88095698110795da.js", "/app-4eb7cf0abaf5dc714e3a.js", "/path---index-a0e39f21c11f6a62c5ab.js", "/component---src-pages-index-jsx-8b3e6fdfcc0473aa142e.js"]) /*]]>*/
</script>
</body>
</html> |
I updated my project: removed the public-dir from The CSS-stuff is injected, but i can confirm when netlify run the build-step, there is no css in the output. the beautified version of the html (style is collapsed, notice the line-numbers, more than 2k lines css-code screenshot from my build-script: |
It sounds like you're saying that this bug is only happening when you build locally, and I see you're on Windows. Netlify is building your site on Linux, I'm building your site locally with a Mac, and the bug isn't happening in those two cases. This may be a Windows specific issue somehow. |
Yeah, it seems to be the case. Can someone else confirm the problem (possibly only on windows)? Should I then open a new issue for this or is this here enough? |
I'd open a new issue. Sent with GitHawk |
@PutziSan happening here on Windows builds as well. |
Ok, so this is interesting. Importing a typeface from KyleAMathews/typefaces seems to have "fixed it". Instead of the netlify-cms css being injected on every page via gatsby-inline-css, the font I imported is injected. Why this is happening is beyond me. |
Description
I installed
gatsby-plugin-netlify-cms
and now have the Netlify-CMS css file inlined into the head of every page of my site. I don't know if this is expected behaviour but it seems like it would make more sense for this to only get injected on the '/admin' route.This is especially bad because Netlify-CMS doesn't scope its styles, so e.g. my headings are getting css applied that I don't want.
Environment
Gatsby version: 1.9.172
Node.js version: 8.9.4
Operating System: macOS 10.13.2
File contents (if changed):
gatsby-config.js
:package.json
:gatsby-node.js
:Actual result
The
<head>
of all my routes has the Netlify-CMS css injected into the<style id="gatsby-inlined-css">
tag.Expected behavior
Only the '/admin' route (where Netlify-CMS lives) should have this css injected.
Steps to reproduce
1. Install
gatsby-plugin-netlify-cms
2. Build your site
3. See the injected Netlify css on all pages
The text was updated successfully, but these errors were encountered: