mirror of
https://github.com/discourse/discourse.git
synced 2026-09-05 04:40:41 -05:00
David Taylor
439efc7419
From time-to-time, variables may need to be renamed in core. To avoid breaking existing themes and plugins, this commit introduces a system to automatically rewrite old variable names to new ones. A list of renames is maintained in `stylesheets/variable-renames.json`, and is applied when CSS is compiled. This list also powers a stylelint rule which will automatically rewrite old names to new names in source code. Transformations apply to all core/theme/plugin code. For now, the stylelint rule/autofix applies to core only, but this will be extracted to `@discourse/lint-configs` in the near future. When a transformation is applied, it adds a trailing `/* automatically renamed --old to --new */` comment so that the behavior is understandable from the browser developer tools.
32 lines
997 B
JavaScript
32 lines
997 B
JavaScript
import "core-js/actual/url";
|
|
import postcssLightDark from "@csstools/postcss-light-dark-function";
|
|
import autoprefixer from "autoprefixer";
|
|
import postcss from "postcss";
|
|
import postcssNesting from "postcss-nesting";
|
|
import { browsers } from "../discourse/config/targets";
|
|
import postcssVariablePrefixer from "./postcss-variable-prefixer";
|
|
import postcssVariableRenamer from "./postcss-variable-renamer";
|
|
|
|
const postCssProcessor = postcss([
|
|
postcssVariableRenamer(),
|
|
autoprefixer({
|
|
overrideBrowserslist: browsers,
|
|
}),
|
|
postcssLightDark,
|
|
postcssNesting, // Un-nests the native css nesting from postcssLightDark
|
|
postcssVariablePrefixer(),
|
|
]);
|
|
globalThis.postCss = async function (css, map, sourcemapFile) {
|
|
const rawResult = await postCssProcessor.process(css, {
|
|
from: "input.css",
|
|
to: "output.css",
|
|
map: {
|
|
prev: map,
|
|
inline: false,
|
|
absolute: false,
|
|
annotation: sourcemapFile,
|
|
},
|
|
});
|
|
return [rawResult.css, rawResult.map?.toString()];
|
|
};
|