tailwindcss-capsize/dist/plugin.js

TailwindCSS leading-trim utility classes.

"use strict";
/* 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 utilities_js_1 = require("./utilities.js");
function fallback(family) {
    return {
        'font-family': family,
    };
}
const thisPlugin = plugin_1.default.withOptions(({ rootSize = 16, className = 'capsize' } = {}) => 
// eslint-disable-next-line @typescript-eslint/unbound-method
({ addUtilities, matchUtilities, prefix, theme }) => {
    let fontMetrics = theme('fontMetrics', {});
    let fontFamily = theme('fontFamily', {});
    // Font-family
    matchUtilities({
        font(value) {
            let family = (0, utilities_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 (!(familyKey in fontMetrics))
                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, utilities_js_1.round)(ascentScale),
                '--descent-scale': (0, utilities_js_1.round)(descentScale),
                '--cap-height-scale': (0, utilities_js_1.round)(capHeightScale),
                '--line-gap-scale': (0, utilities_js_1.round)(lineGapScale),
                '--line-height-scale': (0, utilities_js_1.round)(lineHeightScale),
            };
        },
    }, {
        values: theme('fontFamily'),
        type: ['lookup', 'generic-name', 'family-name'],
    });
    // Font-size
    matchUtilities({
        text(value) {
            /**
             * For some reason, tailwindcss-intellisense passes
             * object and undefined values in here, so we handle
             * those cases so it doesn't break IDE plugins.
             */
            if (!value || (0, utilities_js_1.isPlainObject)(value))
                return {};
            let [fontSize, options] = Array.isArray(value) ? value : [value];
            let fontSizeActual = (0, utilities_js_1.normalizeValue)(fontSize, rootSize);
            let { lineHeight } = ((0, utilities_js_1.isPlainObject)(options) ? options : { lineHeight: options });
            return {
                '--font-size-px': String(fontSizeActual),
                ...(lineHeight ? (0, utilities_js_1.lineHeightProperties)(lineHeight, rootSize) : {}),
            };
        },
    }, {
        values: theme('fontSize'),
        type: ['absolute-size', 'relative-size', 'length', 'percentage'],
    });
    // Line-height
    matchUtilities({
        leading(value) {
            let lineHeight = (0, utilities_js_1.normalizeThemeValue)('lineHeight', value);
            return lineHeight ? (0, utilities_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;