diff --git a/src/createCapsizeUtil.ts b/src/createCapsizeUtil.ts index eaa182f..2691cee 100644 --- a/src/createCapsizeUtil.ts +++ b/src/createCapsizeUtil.ts @@ -36,25 +36,22 @@ export const createCapsizeUtil = (ctx: Context): void => { '--specified-line-height-offset': 'calc((var(--line-height-normal) - var(--line-height-numeric)) / 2)', - '--cap-height-trim-val': + '--cap-height-trim': 'calc(var(--cap-height-trim-param) - var(--specified-line-height-offset) / var(--font-size))', - '--baseline-trim-val': + '--baseline-trim': 'calc(var(--baseline-trim-param) - var(--specified-line-height-offset) / var(--font-size))', - - '--cap-height-trim': 'calc(var(--cap-height-trim-val) * -1)', - '--baseline-trim': 'calc(var(--baseline-trim-val) * -1)', }, [before]: { content: '""', display: 'table', - marginBottom: 'calc(1em * var(--cap-height-trim))', + marginBottom: 'calc(var(--cap-height-trim) * -1em)', }, [after]: { content: '""', display: 'table', - marginTop: 'calc(1em * var(--baseline-trim))', + marginTop: 'calc(var(--baseline-trim) * -1em)', }, [`${noBefore}, ${noAfter}`]: { diff --git a/tests/createCapsizeUtil.test.ts b/tests/createCapsizeUtil.test.ts index f733fca..88bec4a 100644 --- a/tests/createCapsizeUtil.test.ts +++ b/tests/createCapsizeUtil.test.ts @@ -15,13 +15,11 @@ test('it creates the `capsize` utility', async () => { { "--absolute-descent": "max(var(--descent), -1 * var(--descent))", "--ascent-scale": "calc(var(--ascent) / var(--units-per-em))", - "--baseline-trim": "calc(var(--baseline-trim-val) * -1)", + "--baseline-trim": "calc(var(--baseline-trim-param) - var(--specified-line-height-offset) / var(--font-size))", "--baseline-trim-param": "calc(var(--descent-scale) + var(--line-gap-scale) / 2)", - "--baseline-trim-val": "calc(var(--baseline-trim-param) - var(--specified-line-height-offset) / var(--font-size))", "--cap-height-scale": "calc(var(--cap-height) / var(--units-per-em))", - "--cap-height-trim": "calc(var(--cap-height-trim-val) * -1)", + "--cap-height-trim": "calc(var(--cap-height-trim-param) - var(--specified-line-height-offset) / var(--font-size))", "--cap-height-trim-param": "calc(var(--ascent-scale) - var(--cap-height-scale) + var(--line-gap-scale) / 2)", - "--cap-height-trim-val": "calc(var(--cap-height-trim-param) - var(--specified-line-height-offset) / var(--font-size))", "--content-area": "calc(var(--ascent) + var(--line-gap) + var(--absolute-descent))", "--descent-scale": "calc(var(--absolute-descent) / var(--units-per-em))", "--line-gap-scale": "calc(var(--line-gap) / var(--units-per-em))", @@ -35,14 +33,14 @@ test('it creates the `capsize` utility', async () => { { "content": "\\"\\"", "display": "table", - "margin-bottom": "calc(1em * var(--cap-height-trim))", + "margin-bottom": "calc(var(--cap-height-trim) * -1em)", } `) expect(capsizeAfter).toMatchInlineSnapshot(` { "content": "\\"\\"", "display": "table", - "margin-top": "calc(1em * var(--baseline-trim))", + "margin-top": "calc(var(--baseline-trim) * -1em)", } `) expect(noCapsizeBefore).toMatchInlineSnapshot(` diff --git a/tests/fixtures/reference.css b/tests/fixtures/reference.css index 8f9f10b..7d9ac7f 100644 --- a/tests/fixtures/reference.css +++ b/tests/fixtures/reference.css @@ -45,27 +45,24 @@ (var(--line-height-normal) - var(--line-height-numeric)) / 2 ); - --cap-height-trim-val: calc( + --cap-height-trim: calc( var(--cap-height-trim-param) - var(--specified-line-height-offset) / var(--font-size) ); - --baseline-trim-val: calc( + --baseline-trim: calc( var(--baseline-trim-param) - var(--specified-line-height-offset) / var(--font-size) ); - - --cap-height-trim: calc(var(--cap-height-trim-val) * -1); - --baseline-trim: calc(var(--baseline-trim-val) * -1); } .capsize::before { content: ''; display: table; - margin-bottom: calc(1em * var(--cap-height-trim)); + margin-bottom: calc(var(--cap-height-trim) * -1em); } .capsize::after { content: ''; display: table; - margin-top: calc(1em * var(--baseline-trim)); + margin-top: calc(var(--baseline-trim) * -1em); }