tailwindcss-capsize
Version:
TailwindCSS leading-trim utility classes.
88 lines (87 loc) • 3.88 kB
JavaScript
;
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const plugin_1 = __importDefault(require("tailwindcss/plugin"));
const utils_js_1 = require("./utils.js");
const thisPlugin = plugin_1.default.withOptions(({ rootSize = 16, className = 'capsize' } = {}) => function ({ addUtilities, matchUtilities, prefix, theme }) {
let fontMetrics = theme('fontMetrics', {});
let fontFamily = theme('fontFamily', {}) ?? {};
// Font-family
matchUtilities({
font(value) {
function fallback(family) {
return {
'font-family': family,
};
}
let family = (0, utils_js_1.normalizeThemeValue)('fontFamily', value);
let familyKey = Object.keys(fontFamily).find((key) => fontFamily[key] === value);
if (familyKey === undefined)
return fallback(family);
let metrics = fontMetrics[familyKey];
if (metrics === undefined)
return fallback(family);
let { ascent, descent, lineGap, unitsPerEm, capHeight } = metrics;
let ascentScale = ascent / unitsPerEm;
let descentScale = Math.abs(descent) / unitsPerEm;
let capHeightScale = capHeight / unitsPerEm;
let lineGapScale = lineGap / unitsPerEm;
let lineHeightScale = (ascent + lineGap + Math.abs(descent)) / unitsPerEm;
return {
'--ascent-scale': (0, utils_js_1.round)(ascentScale),
'--descent-scale': (0, utils_js_1.round)(descentScale),
'--cap-height-scale': (0, utils_js_1.round)(capHeightScale),
'--line-gap-scale': (0, utils_js_1.round)(lineGapScale),
'--line-height-scale': (0, utils_js_1.round)(lineHeightScale),
};
},
}, {
values: theme('fontFamily'),
type: ['lookup', 'generic-name', 'family-name'],
});
// Font-size
matchUtilities({
// @ts-expect-error -- Extra custom properties mismatches base type.
text(value) {
let [fontSize, options] = Array.isArray(value) ? value : [value];
let fontSizeActual = (0, utils_js_1.normalizeValue)(fontSize, rootSize);
let { lineHeight } = ((0, utils_js_1.isPlainObject)(options) ? options : { lineHeight: options });
return {
'--font-size-px': String(fontSizeActual),
...(0, utils_js_1.lineHeightProperties)(lineHeight, rootSize),
};
},
}, {
values: theme('fontSize'),
type: ['absolute-size', 'relative-size', 'length', 'percentage'],
});
// Line-height
matchUtilities({
// @ts-expect-error -- Extra custom properties mismatches base type.
leading(value) {
let lineHeight = (0, utils_js_1.normalizeThemeValue)('lineHeight', value);
return (0, utils_js_1.lineHeightProperties)(lineHeight, rootSize);
},
}, {
values: theme('lineHeight'),
});
// Leading-trim
addUtilities({
[`.${prefix(className)}`]: {
'&::before': {
display: 'table',
content: '""',
'margin-bottom': 'calc(((var(--ascent-scale) - var(--cap-height-scale) + var(--line-gap-scale) / 2) - var(--line-height-offset)) * -1em)',
},
'&::after': {
display: 'table',
content: '""',
'margin-top': 'calc(((var(--descent-scale) + var(--line-gap-scale) / 2) - var(--line-height-offset)) * -1em)',
},
},
}, {});
});
exports.default = thisPlugin;