fix: reduce css ouput slightly be inlining negative conversion

asyarb · May 11, 2022 · 61edbd7 · 61edbd7
1 parent 811a0ab
commit 61edbd7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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);
 }