Expose reference to Vanilla Extract CSS Variables

[mdingena]

Is it possible to get a reference to the CSS Variables that @capsizecss/vanilla-extract creates?

For example, in my Vanilla Extract project:

.Text__3ydohf1 {
    --fontSize__1d0g9qk0: 17.094px;
    --lineHeight__1d0g9qk1: 18px;
    --capHeightTrim__1d0g9qk2: -0.0745em;
    --baselineTrim__1d0g9qk3: -0.2765em;
}
.capsize_capsizeStyle__1d0g9qk4 {
    font-size: var(--fontSize__1d0g9qk0);
    line-height: var(--lineHeight__1d0g9qk1);
}

I'd like to have responsive icons inside my capsized text and I want to access the generated CSS Variables to set height, margin-top and margin-bottom so that my icons play nicely alongside that capsized text.

Currently I have:

.Icon_sizes_default__dlhcj82 {
    height: 1.25em;
    width: 1.25em;
    margin-top: -6px;
    margin-bottom: -6px;
}

I would love to have:

.Icon_sizes_responsive__some-hash {
    height: var(--lineHeight__1d0g9qk1);
    width: var(--lineHeight__1d0g9qk1);
    margin-top: var(--capHeightTrim__1d0g9qk2);
    margin-bottom: var(--baselineTrim__1d0g9qk3);
}

[michaeltaranto]

I've gone back and forth on this one.

The reason we dont expose them, is any change to these values externally will have an impact on the trimming, which feels undesirable.

We do have the precomputeValues utility that allows you to resolve the values for your own use, and then pass these into createTextStyle, so you effectively middleman the process without updating the values. Granted its still exposed to passing incorrect values in, but given this is at build-time maybe its less likely to get wrong as opposed to changing a CSS var at run-time?

Here is an example:

// text.css.ts
import { precomputeValues } from '@capsizecss/core';
import arialMetrics from '@capsizecss/metrics/arial';
import { createTextStyle } from '@capsizecss/vanilla-extract';
import { style } from '@vanilla-extract/css';

const capsizeValues = precomputeValues({
  fontSize: 16,
  leading: 24,
  fontMetrics: arialMetrics,
});

export const text = createTextStyle(capsizeValues);

export const icon = style({
    height: capsizeValues.lineHeight,
    width: capsizeValues.lineHeight,
    marginTop: capsizeValues.capHeightTrim,
    marginBottom: capsizeValues.baselineTrim
});