mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-06 09:11:11 +08:00
b12f153a9e
We were already polyfilling `light-dark` for older browsers. However,
that polyfill makes use of native CSS nesting, which is also unsupported
by older browsers. This commit adds the `postcssNesting` transform to
turn that nesting back into flat CSS.
This became a noticable problem since light-dark was added to a critical
core stylesheet in 1ec69c3f2f, which then
caused the whole file to be a syntax error under Safari 16.
49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
import "core-js/actual/url";
|
|
import postcssLightDark from "@csstools/postcss-light-dark-function";
|
|
import autoprefixer from "autoprefixer";
|
|
import postcss from "postcss";
|
|
import minmax from "postcss-media-minmax";
|
|
import postcssNesting from "postcss-nesting";
|
|
import { browsers } from "../discourse/config/targets";
|
|
import postcssVariablePrefixer from "./postcss-variable-prefixer";
|
|
|
|
const postCssProcessor = postcss([
|
|
autoprefixer({
|
|
overrideBrowserslist: browsers,
|
|
}),
|
|
minmax(),
|
|
postcssLightDark,
|
|
postcssNesting, // Un-nests the native css nesting from 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;
|
|
};
|
