@mapbox/batfish
Version:
The React-powered static-site generator you didn't know you wanted
50 lines (41 loc) • 1.2 kB
JavaScript
//
;
const postcss = require('postcss');
const prettier = require('prettier');
const loaderUtils = require('loader-utils');
const rethrowPostcssError = require('./rethrow-postcss-error');
function generateModule(css ) {
const js = `
import React from 'react';
import Helmet from 'react-helmet';
const css = \`${css}\`;
export default class HeadCss extends React.Component {
shouldComponentUpdate() {
return false;
}
render() {
return (
<Helmet defer={false}>
<style>{css}</style>
</Helmet>
);
}
}
`;
return prettier.format(js.trim());
}
// Transform CSS into a simple JS module that writes the CSS to a <style>
// tag in the <head> of the document.
function reactHelmetPostcssLoader(css ) {
const callback = this.async();
const options
= loaderUtils.getOptions(this);
postcss(options.postcssPlugins)
.process(css)
.catch(rethrowPostcssError)
.then(result => {
callback(null, generateModule(result.css));
})
.catch(callback);
}
module.exports = reactHelmetPostcssLoader;