Setting up CSS pipeline with addExtension and PostCSS plugins

[pepelsbey]

There’s a great example in the docs how to build Sass styles using Eleventy’s own watcher. I tried to recreate it using plain CSS with some PostCSS plugins to combine imports, prefix and minimize it.

The full code is available here: pepelsbey/11ty-postcss.
I’m using the latest Eleventy canary v2.0.0-canary.11

const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const csso = require('postcss-csso');
const pimport = require('postcss-import');

config.addTemplateFormats('css');

config.addExtension('css', {
  outputFileExtension: 'css',
  compile: async (inputContent, inputPath) => {
    let output = await postcss([
      pimport,
      autoprefixer,
      csso
    ]).process(inputContent, { from: inputPath });

    return async () => {
      return output.css;
    }
  }
});

I have the following structure:

/* src/styles/index.css */
@import url('blocks/one.css');
@import url('blocks/two.css');

/* src/styles/blocks/one.css */
.one {
  color: tomato;
}

/* src/styles/blocks/two.css */
.two {
  color: plum;
}

And it works totally fine after npm start: I get dist/styles/index.css with the following:

.one{color:tomato}.two{color:plum}

Unfortunately, it doesn’t work the way I expect during development.

If I change anything in the blocks, I get the event in the console:

[11ty] File changed: src/styles/blocks/one.css
[11ty] Copied 14 files / Wrote 11 files in 0.05 seconds (4.5ms each, v2.0.0-canary.11)

But I don’t get updates in the resulted dist/styles/index.css and in the browser. Only when I change src/styles/index.css I see changes in the browser and in the dist folder. Also, when I change .eleventy.js it also does the full rebuild.

Any idea how to make it work? It would make a such an elegant CSS build pipeline!

[pepelsbey]

I made it work with help of @monochromer 🥳

config.addExtension('css', {
  outputFileExtension: 'css',
  compile: async (inputContent, inputPath) => {
    if (inputPath !== './src/styles/index.css') {
      return;
    }

    return async () => {
      let output = await postcss([
        pimport,
        autoprefixer,
        csso
      ]).process(inputContent, { from: inputPath });

      return output.css;
    }
  }
});

It was a matter of proper function nesting. Now it also filters out all the paths apart from index.css, just like it supposed to.

[monochromer]

I think it needs to be clarified that this method is just a quick workaround.

Consider the basic structure of addExtension:

config.addExtension('css', {
  compile: async function compileFunction(inputContent, inputPath) {
    const compiledTemplate = someLib.compile(inputContent, inputPath)

    return async function renderFunction(data) {
      const output = compiledTemplate(data)
      return output
    }
  } 
})

The compileFunction function is called during initialization and when the content of inputContent changes. And renderFunction function is called when data cascade changes. Eleventy by default caches the result of the compileFunction call based on inputContent. Therefore, when the files one.css and two.css are changed, nothing happens, since the contents of index.css have not changed.

Another solution is to set the option:

compileOptions: {
  cache: false
}

Or refine the cache calculation (but this code doesn't work because getCacheKey must be sync function at the moment):

compileOptions: {
  cache: true,
  getCacheKey: async function(inputContent, inputPath) {
    if (inputPath !== './src/styles/index.css') {
      return inputContent;
    }

    const output = await postcss([ pimport ])
      .process(inputContent, { from: inputPath });

    return output.css
  }
}

[pepelsbey]

@monochromer I’m not sure why, but live-reload works in my case both for index.css and one/two.css, here’s the code I use. It seems identical to the one I had before. Oh, by the way, I’m using [email protected] with the new dev-server. It might work because of that in my case.

  config.addTemplateFormats('css');

  config.addExtension('css', {
    outputFileExtension: 'css',
    compile: async (content, inputPath) => {
      if (inputPath !== './src/styles/index.css') {
        return;
      }

      return async () => {
        let output = await postcss([
          pimport,
          autoprefixer,
          csso
        ]).process(content, { from: inputPath });

        return output.css;
      }
    }
  });

[pepelsbey]

I even implemented the same principle for JS using esbuild and it works!

  config.addTemplateFormats('js');

  config.addExtension('js', {
    outputFileExtension: 'js',
    compile: async (content, inputPath) => {
      if (inputPath !== './src/scripts/index.js') {
        return;
      }

      return async () => {
        let output = await esbuild.buildSync({
          entryPoints: [inputPath],
          minify: true,
          bundle: true,
          write: false,
        }).outputFiles[0].text;

        return output;
      }
    }
  });

[monochromer]

Yes, this works because on every change the processing of the index.css file takes place anew inside the renderFunction without any caching, and not inside the compileFunction.

[pepelsbey]

This is the point of the method: I’m not trying to make native imports work during the development anymore. In most cases, it would be easier to compile everything. Fortunately, it can happen on a per-file basis and we don’t have to wait for all the markdown files to compile before seeing CSS changes. It works for me!

I hope I got it right. In most cases, it’s easier than having a separate Gulp/Webpack workflow.

[filoxo]

Sharing a more recent option: a plugin now exists! I used @jgarber/eleventy-plugin-postcss with a standard postcss.config.js file.

module.exports = ({ env }) => ({
  plugins: {
    'postcss-import': {},
    autoprefixer: {},
    '@unocss/postcss': {},
    'postcss-csso': env === 'production' ? {} : false,
  },
})