Eleventy: PostCSS filter for concatenated CSS files

[ssgstarter]

Is there anywhere a working example for this? E. g. concerning Autoprefixer

What I have tried is to make a filter first:

const postcss = require('postcss');
const autoprefixer = require('autoprefixer');

eleventyConfig.addFilter( "postCSS", function( code ) {
    postcss([
        autoprefixer({
            // options
        })
    ])
    .process(code)
    .then( function (result) {
        return result.code;
    })
});

and then apply this filter to a template like this:

permalink: css/styles-mix.css
---
{% set css %}
    {% include "baseCSS/style1.css" %}
    {% include "baseCSS/style2.css" %}
    {% include "baseCSS/style3.css" %}
{% endset %}

{{ css | postCSS | safe }}

But it does not work.

I know, there is a similar approach with a single CSS file (https://github.com/11ty/eleventy/issues/272#issuecomment-474883189) but the example lacks the PostCSS part.

[kleinfreund]

What does not work? Are there errors? What is the result and what do you expect it to be?

[ssgstarter]

As for my example, "css/styles-mix.css" is empty.
I have expected that the CSS files were concatenated and the Autoprefixer filter were applied then.

The console displays this error:

Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.

What could "from" be while concatenating?

[kleinfreund]

First of all, the resulting CSS is accessed via result.css. The processed CSS is in there; however, it looks like Eleventy’s universal filters don’t work with asynchronous (e.g. promise-based) APIs like postcss.process. That’s why the result of the filter is empty (or probably undefined).

Since there is also a synchronous variant of postcss.process, you can use that instead:

const postcss = require("postcss");
const autoprefixer = require("autoprefixer");

module.exports = function(eleventyConfig) {
  eleventyConfig.addFilter("postCSS", function(code) {
    return postcss([autoprefixer]).process(code).css;
  });

  return {
    htmlTemplateEngine: "njk"
  }
};

[ssgstarter]

Awesome! Your are brilliant, @kleinfreund! Thank you.

I suppose your point could be interesting for a lot of people, maybe as another "Quick tip" at 11ty's site.

As being solved I am closing now this issue.

[ssgstarter]

Sorry,the above solution does not work for two or more PostCSS filters like this:

eleventyConfig.addFilter( "postCSS", function( code ) {
    return postcss( [
        require( 'autoprefixer' )( {
            /* options */
        } ),
        require( "cssnano" )( {
            preset: [ 
                'default', {
                    /* options */
                } 
            ]
        } )
    ] )
    .process( code )
    .css;
} );

Any suggestions?

[ssgstarter]

Error: Use process(css).then(cb) to work with async plugins (Template render error)

... which does not work also ...