gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

remove inlined css in htmljs

Browse Source
This commit is contained in:
ValeraS
2018-09-13 12:43:29 +03:00
committed by Mrugesh Mohapatra
parent d85ee836d3
commit 5869ea4b33
3 changed files with 10 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/learn/src/head/index.js
View File

@ -1,11 +1,10 @@
import favicons from './favicons'; import favicons from './favicons';
import meta from './meta'; import meta from './meta';
import styleSheets from './styleSheets';
import mathjax from './mathjax'; import mathjax from './mathjax';
import sassjs from './sassjs'; import sassjs from './sassjs';
const metaAndStyleSheets = meta const metaAndStyleSheets = meta
.concat(favicons, styleSheets, mathjax, sassjs) .concat(favicons, mathjax, sassjs)
.map((element, i) => ({ ...element, key: `meta-stylesheet-${i}` })); .map((element, i) => ({ ...element, key: `meta-stylesheet-${i}` }));
export default metaAndStyleSheets; export default metaAndStyleSheets;

3
packages/learn/src/head/preloads.js
View File

@ -2,12 +2,15 @@ import React from 'react';
import styleSheets from './styleSheets'; import styleSheets from './styleSheets';
const preloads = styleSheets.map((styleSheet, i) => ( const preloads = styleSheets.map((styleSheet, i) => (
<React.Fragment>
<link <link
as='style' as='style'
href={styleSheet.props.href} href={styleSheet.props.href}
key={`preload-${i}`} key={`preload-${i}`}
rel='preload' rel='preload'
/> />
{styleSheet}
</React.Fragment>
)); ));
export default preloads; export default preloads;

19
packages/learn/src/html.js
View File

@ -3,15 +3,6 @@ import PropTypes from 'prop-types';
import preloads from './head/preloads'; import preloads from './head/preloads';
let stylesStr;
if (process.env.NODE_ENV === 'production') {
try {
stylesStr = require('!raw-loader!../public/styles.css');
} catch (e) {
console.log(e);
}
}
// These props are coming from Gatsby, we shouldn't have to worry about them // These props are coming from Gatsby, we shouldn't have to worry about them
const propTypes = { const propTypes = {
body: PropTypes.any, body: PropTypes.any,
@ -31,21 +22,11 @@ function HTML(props) {
preBodyComponents, preBodyComponents,
postBodyComponents postBodyComponents
} = props; } = props;
let css;
if (process.env.NODE_ENV === 'production') {
css = (
<style
dangerouslySetInnerHTML={{ __html: stylesStr }}
id='gatsby-inlined-css'
/>
);
}
return ( return (
<html {...htmlAttributes}> <html {...htmlAttributes}>
<head> <head>
{preloads} {preloads}
{headComponents} {headComponents}
{css}
</head> </head>
<body {...bodyAttributes}> <body {...bodyAttributes}>
{preBodyComponents} {preBodyComponents}