Tailwind "Global" CSS builder adapted from @babichjacob

build-global-css.mjs

import fs from 'fs';
import postcss from 'postcss';

const { readFile, unlink, writeFile } = fs.promises;

const main = async () => {
  let [sourcemap, postcssConfigPath, input, output] = process.argv.slice(2);
  let { default: postcssConfig } = await import(postcssConfigPath);

  if (sourcemap === 'true') sourcemap = true;
  else if (sourcemap === 'false') sourcemap = false;

  const pcss = await readFile(input);
  const result = await postcss(postcssConfig.plugins).process(pcss, {
    from: input,
    to: output,
    map: sourcemap ? { inline: sourcemap === 'inline' } : false,
  });

  await writeFile(output, result.css);

  if (result.map) await writeFile(output + '.map', result.map.toString());
  else {
    try {
      await unlink(output + '.map');
    } catch (err) {
      if (err.code !== 'ENOENT') {
        throw err;
      }
    }
  }
};

main();

globalCssPlugin.js

const colors = require('kleur');
const { spawn } = require('child_process');
const { performance } = require('perf_hooks');
const path = require('path');

function globalTailwindCssBuilder({
  input = 'src/global.pcss',
  output = 'static/global.css',
  postcssConfigPath = `${process.cwd()}/postcss.config.js`,
  sourcemap = false,
  dev = false,
}) {
  let builder;
  let rebuildNeeded = false;

  const globalCSSWatchFiles = [postcssConfigPath, 'tailwind.config.js', input];

  const buildGlobalCSS = () => {
    if (builder) {
      rebuildNeeded = true;
      return;
    }
    rebuildNeeded = false;
    const start = performance.now();

    try {
      builder = spawn('node', [
        '--unhandled-rejections=strict',
        path.join(__dirname, 'build-global-css.mjs'),
        sourcemap,
        postcssConfigPath,
        input,
        output,
      ]);
      builder.stdout.pipe(process.stdout);
      builder.stderr.pipe(process.stderr);

      builder.on('close', (code) => {
        if (code === 0) {
          const elapsed = parseInt(performance.now() - start, 10);
          console.log(
            `${colors.bold().green('✔ global css')} (${input} → ${output}${
              sourcemap === true ? ` + ${output}.map` : ''
            }) ${colors.gray(`(${elapsed}ms)`)}`
          );
        } else if (code !== null) {
          if (dev) {
            console.error(`global css builder exited with code ${code}`);
            console.log(colors.bold().red('✗ global css'));
          } else {
            throw new Error(`global css builder exited with code ${code}`);
          }
        }

        builder = undefined;

        if (rebuildNeeded) {
          console.log(
            `\n${colors
              .bold()
              .italic()
              .cyan('something')} changed. rebuilding...`
          );
          buildGlobalCSS();
        }
      });
    } catch (err) {
      console.log(colors.bold().red('✗ global css'));
      console.error(err);
    }
  };

  return {
    name: 'build-global-css',
    buildStart() {
      buildGlobalCSS();
      globalCSSWatchFiles.forEach((file) => this.addWatchFile(file));
    },
    generateBundle: buildGlobalCSS,
  };
}