Files
discourse/app/assets/javascripts/theme-transpiler/postcss.js
David Taylor 087e8e4bdb DEV: Introduce postcss for autoprefix and light-dark() polyfill (#31393)
Introduces PostCSS at the end of our CSS compilation pipeline. For now,
just adds autoprefixer and light-dark polyfill.
2025-02-20 14:40:27 +00:00

45 lines
1.1 KiB
JavaScript

import postcssLightDark from "@csstools/postcss-light-dark-function";
import autoprefixer from "autoprefixer";
import postcss from "postcss";
import { browsers } from "../discourse/config/targets";
import postcssVariablePrefixer from "./postcss-variable-prefixer";
const postCssProcessor = postcss([
autoprefixer({
overrideBrowserslist: browsers,
}),
postcssLightDark,
postcssVariablePrefixer(),
]);
let lastPostcssError, lastPostcssResult;
globalThis.postCss = async function (css, map, sourcemapFile) {
try {
const rawResult = await postCssProcessor.process(css, {
from: "input.css",
to: "output.css",
map: {
prev: map,
inline: false,
absolute: false,
annotation: sourcemapFile,
},
});
lastPostcssResult = [rawResult.css, rawResult.map?.toString()];
} catch (e) {
lastPostcssError = e;
}
};
globalThis.getPostCssResult = function () {
const error = lastPostcssError;
const result = lastPostcssResult;
lastPostcssError = lastPostcssResult = null;
if (error) {
throw error;
}
return result;
};