Output reference replaces partial value

[lukasoppermann]

Hey,

I have a custom alpha transformer that applies an alpha value to the hex value, e.g #000000 → #00000066 if the alpha property is set to .4.

The problem is, that I also want outputReferences. The output I get is:

--color-black: var(--base-black)66;

I assume the issue is that SD replaces any matching part in a string. This is probably so that partial replaces work, but this creates an issue with value transformations.

Is there a way to solve this without a custom format?
Can I disable references for a token in a transformer?
Or could this be fixed to not replace partial hex values?

CC: @dbanksdesign @chazzmoney

[lukasoppermann]

If it is hard to improve the matching, how about allowing transformers to add a noReference flag to a token, so that the reference function can ignore this token.

[pascalduez]

Hello,
same issue here.
I guess it's the combination of outputReferences and transitive values.

{
  spacing: {
    '1x': {
      type: 'dimension',
      value: '{size.scale}',
      modify: {
        type: 'scale',
        amount: 1,
      },
    },
    '2x': {
      type: 'dimension',
      value: '{size.scale}',
      modify: {
        type: 'scale',
        amount: 2,
      },
    },
 [...]

StyleDictionary.registerTransform({
  name: 'dimension/css',
  type: 'value',
  transitive: true,
  matcher: token =>
    token.type === 'dimension' && token.modify?.type === 'scale',
  transformer: token => {
    [...]
    return token.value * token.modify.amount;
  },
});

  --spacing-56x: 22var(--size-scale);
  --spacing-20x: 80px;
  --spacing-16x: 6var(--size-scale);
  --spacing-7x: 28px;
  --spacing-6x: 2var(--size-scale);
  --spacing-2x: 8px;
  --spacing-1x: var(--size-scale);

Since size.scale is 4px it replace every 4px occurrences.

Maybe I'm over engineering it after all 😅

[pascalduez]

Same issue as #819 I guess

[jorenbroekema]

#974 duplicate of this one