how to include global values outside of a .map

[sturobson]

I'm trying to create a custom format that will create a Sass map.

I have everything working except I need to create the Sass maps name from the global category and type.

I'm failing at this. I've gone through issues, code, and examples through trial and error with no working result

Here's my current code

theo.registerFormat('scss', result => {return `
  $CATEGORY--TYPE {
  ${result
  .get('props')
  .map(
    prop => `  '
    ${(prop.get('name'))}': (
      font-size: ${prop.get('font-size')},
      font-weight: ${prop.get('font-weight')},
      line-height: ${prop.get('line-height')}
    ),`
  )
  .sort()
  .join('\n')}
  );
`
});

I'd live the $CATEGORY--TYPE to be the Sass map's variable name taken from the global category and type

Is this possible?

[aputinski]

Is this the desired output?

$typography--font-family {
    'my-font': (
      font-size: 1,
      font-weight: 2,
      line-height: 3
    ),
);

If so, I'd do something like this:

tokens.yml

props:
  - name: my-font
    value:
      font-size: 1
      font-weight: 2
      line-height: 3
global:
  type: font-family
  category: typography

format.js

theo.registerFormat("scss", result => {
  let { category, type } = result
    .get("props")
    .first()
    .toJS();
  return `
  $${category}--${type} {
  ${result
    .get("props")
    .map(
      prop => `
      '${prop.get("name")}': (
        font-size: ${prop.getIn(["value", "font-size"])},
        font-weight: ${prop.getIn(["value", "font-weight"])},
        line-height: ${prop.getIn(["value", "line-height"])}
      ),`
    )
    .sort()
    .join("\n")}
  );
  `;
});

[sturobson]

@aputinski this works perfectly! Thank you so much <3