Fix: Use proper CSS var for default lineHeight (#153)

Fixes #50

Author: stormwarning

.changeset/dirty-geckos-repeat.md

@@ -0,0 +1,5 @@
+---
+'tailwindcss-capsize': patch
+---
+
+Use correct custom property with default lineHeight values

package-lock.json

@@ -348,6 +348,73 @@ describe('Plugin', () => {
                     `)
                 })
         })
+
+        it('works with default line-height values', async () => {
+            return await postcss(
+                tailwindcss({
+                    theme: {
+                        ...THEME_CONFIG,
+                        screens: {},
+                        fontSize: {
+                            base: ['1rem', '1.5rem'],
+                        },
+                        lineHeight: {},
+                    },
+                    corePlugins: false,
+                    plugins: [capsizePlugin],
+                }),
+            )
+                .process('@tailwind utilities', {
+                    from: undefined,
+                })
+                .then((result) => {
+                    expect(result.css).toMatchCss(`
+                    .font-sans {
+                      --ascent-scale: 0.9688;
+                      --descent-scale: 0.2415;
+                      --cap-height-scale: 0.7273;
+                      --line-gap-scale: 0;
+                      --line-height-scale: 1.2102;
+                      font-family: Inter, sans-serif;
+                    }
+
+                    .text-base {
+                      --font-size-px: 16;
+                      font-size: 1rem;
+                      --line-height-offset: calc(
+                        (((var(--line-height-scale) * var(--font-size-px)) - 24) / 2) /
+                          var(--font-size-px)
+                      );
+                      line-height: 1.5rem;
+                    }
+
+                    .capsize::before {
+                      display: table;
+                      content: "";
+                      margin-bottom: calc(
+                        (
+                          (
+                            var(--ascent-scale) - var(--cap-height-scale) +
+                              var(--line-gap-scale) / 2
+                          ) - var(--line-height-offset)
+                        ) * -1em
+                      );
+                    }
+
+                    .capsize::after {
+                      display: table;
+                      content: "";
+                      margin-top: calc(
+                        (
+                          (var(--descent-scale) + var(--line-gap-scale) / 2) -
+                            var(--line-height-offset)
+                        ) * -1em
+                      );
+                    }
+                    `)
+                })
+        })
+
         it('generates utility classes with a custom activation class', async () => {
             return await postcss(
                 tailwindcss({

src/__tests__/plugin.test.ts

@@ -4,9 +4,8 @@ import type { NestedObject } from '@navith/tailwindcss-plugin-author-types'
 import plugin from 'tailwindcss/plugin'
 
 import {
-    getRelativeValue,
     isPlainObject,
-    isRelativeValue,
+    lineHeightProperties,
     makeCssSelectors,
     normalizeThemeValue,
     normalizeValue,
@@ -183,16 +182,7 @@ export default plugin.withOptions<Partial<PluginOptions>>(
                             return {
                                 '--font-size-px': String(fontSizeActual),
                                 'font-size': fontSize,
-                                ...(lineHeight === undefined
-                                    ? {}
-                                    : {
-                                          '--line-height-px': normalizeValue(
-                                              lineHeight,
-                                              rootSize,
-                                              fontSizeActual,
-                                          ),
-                                          'line-height': lineHeight,
-                                      }),
+                                ...lineHeightProperties(lineHeight, rootSize),
                                 ...(letterSpacing === undefined
                                     ? {}
                                     : { 'letter-spacing': letterSpacing }),
@@ -222,16 +212,7 @@ export default plugin.withOptions<Partial<PluginOptions>>(
                                 value,
                             ) as string
 
-                            let lineHeightActual = isRelativeValue(lineHeight)
-                                ? `calc(${getRelativeValue(
-                                      lineHeight,
-                                  )} * var(--font-size-px))`
-                                : normalizeValue(lineHeight, rootSize)
-
-                            return {
-                                '--line-height-offset': `calc((((var(--line-height-scale) * var(--font-size-px)) - ${lineHeightActual}) / 2) / var(--font-size-px))`,
-                                'line-height': lineHeight,
-                            }
+                            return lineHeightProperties(lineHeight, rootSize)
                         },
                     },
                     {

src/plugin.ts

@@ -99,3 +99,20 @@ export function normalizeThemeValue(key: string, value: ThemeValue) {
 export function round(value: number) {
     return parseFloat(value.toFixed(4)).toString()
 }
+
+/**
+ * Takes a theme value for lineHeight and returns the `line-height` property,
+ * as well as a `--line-height-offset` custom property.
+ */
+export function lineHeightProperties(lineHeight: string, rootSize: number) {
+    if (lineHeight === undefined) return {}
+
+    let lineHeightActual = isRelativeValue(lineHeight)
+        ? `calc(${getRelativeValue(lineHeight)} * var(--font-size-px))`
+        : normalizeValue(lineHeight, rootSize)
+
+    return {
+        '--line-height-offset': `calc((((var(--line-height-scale) * var(--font-size-px)) - ${lineHeightActual}) / 2) / var(--font-size-px))`,
+        'line-height': lineHeight,
+    }
+}