Use standalone PostCSS task (no Gulp)

postcss.config.js

@@ -18,15 +18,9 @@ const unrgba = require('postcss-unrgba')
 module.exports = (ctx) => {
   const plugins = []
 
-  // PostCSS 'from' source path
+  // PostCSS 'from' (or webpack 'file') source path
   // https://github.com/postcss/postcss-load-config#options
-  const file = ctx.from || ctx.file || ''
-
-  // Handle non-standard `file` source path
-  const { dir, name } = parse(typeof file === 'object'
-    ? file.path // Vinyl file object (Gulp)
-    : file
-  )
+  const { dir, name } = parse(ctx.from || ctx.file || '')
 
   // IE8 stylesheets
   const isIE8 = name?.endsWith('-ie8') || name?.endsWith('-ie8.min')

tasks/compile-stylesheets.mjs

@@ -3,6 +3,9 @@ import { promisify } from 'util'
 
 import { render } from 'node-sass'
 import PluginError from 'plugin-error'
+import postcss from 'postcss'
+// eslint-disable-next-line import/default
+import postcssrc from 'postcss-load-config'
 
 import { paths, pkg } from '../config/index.js'
 import { getListing } from '../lib/file-helper.js'
@@ -40,7 +43,7 @@ export async function compileStylesheet ([modulePath, { srcPath, destPath }]) {
   const moduleDestPath = join(destPath, getPathByDestination(modulePath))
 
   // Render Sass
-  const result = await sassRender({
+  const { css, map } = await sassRender({
     file: moduleSrcPath,
     outFile: moduleDestPath,
 
@@ -56,6 +59,19 @@ export async function compileStylesheet ([modulePath, { srcPath, destPath }]) {
     ]
   })
 
+  const options = {
+    from: moduleSrcPath,
+    to: moduleDestPath,
+    map: {
+      inline: false,
+      prev: map.toString()
+    }
+  }
+
+  // Transform with PostCSS
+  const config = await postcssrc(options)
+  const result = await postcss(config.plugins).process(css, options)
+
   // Write to files
   return writeAsset(moduleDestPath, result)
 }