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 %}
@jshwlkr
Copy link

jshwlkr commented Jan 21, 2022

So for anyone trying to slip this transform into their setup, if you happen to also be using html-minifier or similar you are probably going to lose a few hours trying to figure out why it doesn't work, maybe blame it on the asynchronous nature of the code. Only to hopefully eventually realize that the inline comment is being stripped out by the minifier before this particular transform gets to it and that is why there is no CSS and you do in fact know how to write code (just not quite as adeptly as you thought).

@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