Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Eleventy: Purge CSS for each html file
const { PurgeCSS } = require('purgecss');
/**
* Remove any CSS not used on the page and inline the remaining CSS in the
* <head>.
*
* @see {@link https://github.com/FullHuman/purgecss}
*/
eleventyConfig.addTransform('purge-and-inline-css', async (content, outputPath) => {
if (process.env.ELEVENTY_ENV !== 'production' || !outputPath.endsWith('.html')) {
return content;
}
const purgeCSSResults = await new PurgeCSS().purge({
content: [{ raw: content }],
css: ['dist/css/style.css'],
keyframes: true,
});
return content.replace('<!-- INLINE CSS-->', '<style>' + purgeCSSResults[0].css + '</style>');
});
{% if site.environment === 'production' %}
<!-- INLINE CSS-->
{% else %}
<link rel="stylesheet" href="/css/style.css">
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment