SCSS + PostCSS pipeline for 11ty

style.11ty.js

// sass dependencies: `npm i -D sass`
const util = require('util');
const sass = require('sass');
const renderSass = util.promisify(sass.render);

// postcss dependencies: `npm i -D autoprefixer postcss precss`
const autoprefixer = require('autoprefixer');
const postcss = require('postcss');
const precss = require('precss');
const postcssProcessor = postcss([precss, autoprefixer]);

// file paths
const inputFile = '_includes/main.scss';
const outputFile = 'style.css';

module.exports = class {
  data() {
    return {
      permalink: outputFile,
      eleventyExcludeFromCollections: true,
    };
  }
  async render() {
    const { css } = await renderSass({
      file: inputFile,
    });

    return await postcssProcessor.process(css, {
      from: inputFile,
      to: outputFile,
    });
  }
};

Nice! Works great on my end. Though I wonder why PostCSS isn't picking the local postcss.config.js.

This is working out nicely. Removing a lot of npm scripts with this!
https://gist.github.com/fourjuaneight/5c0981aa7b97d55fe159db55a822cf07