Files
Termix/postcss.config.cjs
T

37 lines
1.2 KiB
JavaScript

/**
* The interface size setting scales the root font size, so every length has
* to be in rem to follow it. Tailwind classes like text-[10px] and w-[240px]
* are written in px, so they are converted here against the 14px Normal root.
*
* Left alone: 1px lines (hairline borders and dividers stay crisp), media
* queries (breakpoints follow the window, not the text size), the root size
* rules themselves, and third-party CSS such as xterm's, which measures in px.
*/
const pxtorem = require("postcss-pxtorem");
// Production builds minify rounded-full to 3.40282e38px, and pxtorem reads
// the "38px" tail as its own length, leaving an oval radius behind.
const EXPONENT_PX = /\d*\.?\d+e[+-]?\d+px\b/gi;
const keepExponentPx = {
postcssPlugin: "termix-keep-exponent-px",
Declaration(decl) {
decl.value = decl.value.replace(EXPONENT_PX, "calc(infinity * 1px)");
},
};
module.exports = {
plugins: [
keepExponentPx,
pxtorem({
rootValue: 14,
unitPrecision: 5,
propList: ["*"],
selectorBlackList: [/^html(\.|$)/, /^:root/],
replace: true,
mediaQuery: false,
minPixelValue: 2,
exclude: /node_modules/i,
}),
],
};