Chain plugin output together (formerly: How do I run a plugin after another plugin?)

[useraccessdenied]

I have installed 2 plugins: eleventy-plugin-sass and eleventy-plugin-purgecss. I want to trim the generated CSS file but purgecss finishes before sass can compile. It purges the previously generated build and sass overwrites its output with a new CSS build.

Output from terminal

eleventy-plugin-purgecss: Using configuration ./purgecss.config.js
Wrote 2 files in 0.16 seconds (v0.12.1)
eleventy-plugin-purgecss: Writing ./public/css/index.css
[Eleventy-Plugin-Sass] Compiling Sass files...
eleventy-plugin-purgecss: Finished purging 1 file(s) in 431.0ms
[Eleventy-Plugin-Sass] Done compiling Sass files

Expected behavior Trimmed CSS after compilation of SASS

Environment:

• OS and Version: Ubuntu 21
• Eleventy Version: 0.12.1
• Node version: 15.14

Config File

const pluginSass = require("eleventy-plugin-sass");
const purgeCssPlugin = require("eleventy-plugin-purgecss");

module.exports = function (eleventyConfig) {
    eleventyConfig.addPlugin(pluginSass, {
        watch: "content/_includes/sass/**",
        outputDir: "public/css",
    });
    if (process.env.NODE_ENV === "production") {
        eleventyConfig.addPlugin(purgeCssPlugin);
    }
    return {
        dir: {
            input: "content",
            output: "public"
        }
    };
}

[pdehaan]

I don't think you're ever guaranteed that plugins will run in a specific order. For example, I just created a sample project which adds 6 fake plugins with different sleep durations (to simulate "random" execution times) and they seemed to run in parallel and finished in sometimes slightly different orders:

time npm run build

> 11ty-custom-plugins@1.0.0 build /private/tmp/11ty-custom-plugins
> eleventy

plugin::one [init] => {"ms":3000}
plugin::two [init] => {"ms":2000}
plugin::three [init] => {"ms":1000}
plugin::four [init] => {"ms":150}
plugin::five [init] => {"ms":10000}
plugin::six [init] => {"ms":2000}

Writing www/index.html from ./src/pages/home.liquid.
plugin::four [done] finished (157ms)
Wrote 1 file in 0.04 seconds (v0.12.1)

plugin::three [done] finished (1004ms)
plugin::two [done] finished (2004ms)
plugin::six [done] finished (2004ms)
plugin::one [done] finished (3008ms)
plugin::five [done] finished (10004ms)

npm run build  0.62s user 0.23s system 7% cpu 10.863 total

I imagine you'd either need to write your own plugin that compiles the Sass and runs purgecss in a specific order, or you might want to look into a build system like Gulp. In fact, I believe somebody recently just posted a link to their starter project which uses Gulp to compile Sass which might have some pointers: https://github.com/frontenso/frontenso-11ty-starter (but I'm not sure if it used purgecss, so probably needs a bit more plumbing in your case).

[zachleat]

I don't think you're ever guaranteed that plugins will run in a specific order.

Whoa, really? That would be—not ideal. https://github.com/11ty/eleventy/blob/84cc8d58df1feca42d73bc8e28adf8532aa71185/src/UserConfig.js#L297 reads as if addPlugin runs the plugin configuration functions synchronously.

Oh wait I see what y’all mean. You mean you want to chain the output of the plugins.

Marginally related comment here: https://github.com/11ty/eleventy/issues/117#issuecomment-661826507