Fast and Easy CSS Revisioning

There's lots of information available out there on this subject, as it's been a long-standing concern, but fortunately for you, the process of versioning a proper browser cache-busting CSS file in Eleventy has boiled down to just a few lines of code. Let's start with some installation:

npm install eleventy-sass --save-dev
npm install eleventy-plugin-rev --save-dev

These two plugins were created by one very talented person, and can be found on Github if you're looking for some more documentation.

Eleventy-Sass and Eleventy Plugin Rev

On To The Show

Up next is configuring them to work in your .eleventy.js file, as such:

const pluginRev = require("eleventy-plugin-rev");
const eleventySass = require("eleventy-sass");

module.exports = function(eleventyConfig) {

  // revision the css filename
  eleventyConfig.addPlugin(pluginRev);

  // let eleventy handle compiling sass
  eleventyConfig.addPlugin(eleventySass, {
    compileOptions: {
      permalink: function(contents, inputPath) {
        // ignore the critical scss files
        // or others you don't wish to be treated here
        let parsed = path.parse(inputPath);
        if (parsed.name.startsWith('critical')) {
          return false
        }
        // directory instructions, changes your input directory (/sass/) to your output directory (/css/) and adds the file extension
        return (data) => data.page.filePathStem.replace(/^\/sass\//, "/css/") + ".css";
      }
    },
    sass: {
      style: "compressed"
    },
    rev: true
  });
};

And in your 'head' element, a very recognizable link tag. Note the presence of the Nunjucks variable referencing the revision plugin.

<link rel="stylesheet" type="text/css"  href="{{ "/css/style.css" | rev }}" media="tty" onload="this.media='screen'"/>

So To Recap

• A plugin author who has done the heavy lifting for you
• So few lines of custom code
• A bullet-proof style-689ceb89.css cache-busting file name every time!