Skip to content

Instantly share code, notes, and snippets.

@francoisgeorgy

francoisgeorgy/.eleventy.config.js

Forked from danielpost/.eleventy.config.js
Last active December 2, 2023 14:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save francoisgeorgy/f814e4091632a7978a1095a9cd81a4e6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save francoisgeorgy/f814e4091632a7978a1095a9cd81a4e6 to your computer and use it in GitHub Desktop.
Download ZIP
Eleventy: Purge CSS for each html file #11ty
Raw
.eleventy.config.js
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>');
});
Raw
base.njk
{% if site.environment === 'production' %}
<!-- INLINE CSS-->
{% else %}
<link rel="stylesheet" href="/css/style.css">
{% endif %}
@changethe
Copy link

changethe commented Aug 22, 2022 •
edited
Loading

Thanks a lot for this, it was exactly what I was looking for!

I ended up modifying it a little bit, because the default purgeCSS extractor had some trouble with tailwindcss classes. Here is the result, in case anyone runs into the same issues:

// purge css:
// based on https://gist.github.com/francoisgeorgy/f814e4091632a7978a1095a9cd81a4e6
const { PurgeCSS } = require('purgecss')
const purgeCssFromHtml = require('purgecss-from-html')

eleventyConfig.addTransform('purge-and-inline-css', async (content, outputPath) => {
  if (outputPath && outputPath.endsWith('.html')) {
    const purgeCssResult = await new PurgeCSS().purge({
      content: [{ raw: content, extension: 'html' }],
      css: ['src/styles.css'],
      extractors: [
        {
          extractor: purgeCssFromHtml,
          extensions: ['html'],
        },
      ],
    })
    return content.replace(
      '<!-- INLINE CSS -->',
      `<style> ${purgeCssResult[0].css} </style>`
    )
  }
  return content
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment