CSS transforms generates different results for v3 and v4

[okadurin]

Hi all, After migrating to v4 I noticed the difference in what some rgba values look like in the generated css. Here is what the variable looked like in v3:

--overlay: rgba(51, 51, 51, var(--overlay-value));

And here it is in v4:

--overlay: rgba(var(--color-600), var(--overlay-value));

The token file looks as follows:

{
  "bg": {
    "overlay": {
      "value": "rgba({gray.color-600}, {opacity.overlay-value})",
      "type": "color"
    }
  },
  "gray": {
    "color-600": {
      "value": "#333333",
      "type": "color"
    }
  },  
  "opacity": {
    "overlay-value": {
      "value": "70%",
      "type": "opacity"
    }  
  }
}

And here is the setup code:

import {
registerTransforms as registerTokenStudioTransformsAndParsers,
transforms as tokenStudioTransforms,
} from '@tokens-studio/sd-transforms';
import StyleDictionary from 'style-dictionary';

registerTokenStudioTransformsAndParsers(StyleDictionary);

const config = {
  include: [`tokens/alias.json`],
  platforms: {
    css: {
      transforms: tokenStudioTransforms,
      buildPath: `build/`,
      files: [{
        destination: `variables.css`,
        format: `css/variables`,
        options: {
          outputReferences: true
        }
      }]
    }
  }
};

Here you could see the project code for v3 and here there is a code for v4.

The above code generated this css for v3:

:root {
  --overlay-value: 0.7;
  --color-600: #333333;
  --overlay: rgba(51, 51, 51, var(--overlay-value));
}

and for v4:

:root {
  --overlay-value: 0.7;
  --color-600: #333333;
  --overlay: rgba(var(--color-600), var(--overlay-value));
}

Note, 1) I did not update yet to 4.0.0-prerelease.27, the example runs on 4.0.0-prerelease.26 2) The issue might be related to @tokens-studio/sd-transforms. Please let me know if I need to create an issue for that package instead

[jorenbroekema]

There's a detailed explanation on this change here https://github.com/amzn/style-dictionary/issues/1124 What you're probably looking for is this newly added feature to not output refs for values that have been (transitively) transformed: https://v4.styledictionary.com/reference/utils/references/#outputreferencestransformed

[okadurin]

Thank you a lot for the quick response, @jorenbroekema ! I have updated the config to as follows:

import {
registerTransforms as registerTokenStudioTransformsAndParsers,
transforms as tokenStudioTransforms,
} from '@tokens-studio/sd-transforms';
import StyleDictionary from 'style-dictionary';
import { outputReferencesTransformed } from 'style-dictionary/utils';

registerTokenStudioTransformsAndParsers(StyleDictionary);

const config = {
  include: [`tokens/alias.json`],
  platforms: {
    css: {
      transforms: [...tokenStudioTransforms, 'ts/color/css/hexrgba'],
      buildPath: `build/`,
      files: [{
        destination: `variables.css`,
        format: `css/variables`,
        options: {
          outputReferences: outputReferencesTransformed
        }
      }]
    }
  }
};

And it generates the following css:

:root {
  --overlay-value: 0.7;
  --color-600: #333333;
  --overlay: rgba(51, 51, 51, 0.7);
}

I am thinking is there a way to generate this instead:

--overlay: rgba(51, 51, 51, var(--overlay-value));

Or is it ok, since we loose the connection with --color-600 anyways. Meaning if --color-600 is getting updated at runtime, then --overlay is not going to reflect that. Then maybe it ok not to reflect changes at runtime for --overlay-value. What do you think?