magefront-plugin-postcss/src/plugin.js

PostCSS plugin for **magefront**.

import glob from 'fast-glob'
import fs from 'node:fs/promises'
import path from 'node:path'
import postcss from 'postcss'

/**
 * Transforms CSS files using PostCSS.
 *
 * @param {import('./plugin').Options} [options]
 * @returns {import('magefront').Plugin}
 */
export default (options) => ({
  name: 'postcss',

  async build(context) {
    const { src, ignore, plugins } = { ...options }

    const files = await glob(src ?? '**/!(_)*.css', {
      ignore: ignore ?? [],
      cwd: context.cwd,
    })

    await Promise.all(
      files.map(async (file) => {
        const filePath = path.join(context.cwd, file)
        const fileContent = await fs.readFile(filePath)
        const compiler = postcss(plugins ?? [])

        const result = await compiler.process(fileContent, {
          from: filePath,
          to: filePath,
        })

        // TODO: Forward to logger
        result.warnings().forEach((warn) => {
          console.warn(warn.toString())
        })

        return fs.writeFile(filePath, result.css)
      })
    )
  },
})