Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resolved references in output, as soon as expand is defined #1318

Open
oliverschuerch opened this issue Aug 22, 2024 · 1 comment
Open

Resolved references in output, as soon as expand is defined #1318

oliverschuerch opened this issue Aug 22, 2024 · 1 comment

Comments

@oliverschuerch
Copy link

oliverschuerch commented Aug 22, 2024

In our project, we want to output references, whenever possible. But also we have to expand typography tokens.

Therefore we set outputReferences to true in our config and also use expand like so:

import { expandTypesMap } from '@tokens-studio/sd-transforms';

const config = {
  ...
  preprocessors: ['tokens-studio'],
  platforms: {
    scss: {
      transformGroup: 'tokens-studio',
      transforms: ['name/kebab'],
      ...
      expand: {
        include: ['typography'],
        typesMap: expandTypesMap,
      },
      files: [
        {
          ...
          format: 'swisspost/scss-format',
          filter: 'swisspost/tokenset-filter',
          options: {
            outputReferences: true,
          },
        },
      ],
    },
  },
};

We're using a custom format and filter to get the desired output and everything works fine, instead of one thing:
As soon as we start implementing the expand property into the config (to expand only typography tokens) our shadow tokens start being outputted with resolved references. All other tokens keep their reference definitions in the token.original.$value property, but not the shadow tokens.

Instead of:

$scss-map(
  any-other-token: var(--path-to-referenced-token),
  box-shadow-token: 0 1px 2px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16),
);

we would like to have the output like so:

$scss-map(
  any-other-token: var(--path-to-referenced-token),
  box-shadow-token: var(--path-to-referenced-shadow-core-token),
);

We logged the token.original.$value property of those shadow tokens within a preprocessor, a transform and a format hook:

  • Preprocessor hook: the references are still there.
  • Transform & Format hook: the references are resolved in the token.original.$value already and there is no chance to reformat the references anymore.

As said, this does not happen if we do NOT use any expand config, but starts being the case if we use expand (no matter how we define the expand property).
By the way, this happens as well, when we do not use our custom filter and format, but instead use the format css/variables.

Not sure if this is happening intentionally or if it is a bug, but at least it feels wrong to us.

@oliverschuerch oliverschuerch changed the title Resolved references in output, as soon as expand is true Resolved references in output, as soon as expand is defined Aug 26, 2024
@jorenbroekema
Copy link
Collaborator

Minimal reproduction
Reproducible also without any sd-transforms stuff so definitely a style dictionary bug

Seems to happen only when the expand is configured on the platform level, works fine when put on the global level.
Will need to investigate this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants