[FIX] Nested token-parsing

[KenAJoh]

Style-dictionary støtter ikke strukturer med nestede verdier + default verdier (amzn/style-dictionary#643 (comment))
Dette gjør at eks dette oppsettet ikke fungerer og SD ignorerer subtle her.

"hover": {
  "subtle": {
    "value": "{navds.global.color.blue.50.value}"
  },
   "value": "{navds.global.color.blue.600.value}"
}

Foreslått fix er at alle nivå over det "dypeste" blir prefikset med @. Så eks eksemplet over blir da:

"hover": {
  "subtle": {
    "value": "{navds.global.color.blue.50.value}"
  },
  "@": {
   "value": "{navds.global.color.blue.600.value}"
  }
}

Style dictionary ignorerer alle special-characters og resultatet blir da

--navds-global-color-interaction-hover: ...
--navds-global-color-interaction-hover-subtle : ...

Slipper da å rename eks navds-global-color-interaction-primary-hover -> navds-global-color-interaction-primary-hover-default bare for å støtte parsing med SD.
Er en litt hacky løsning som er litt kjip å måtte løse slik, så ser gjerne at vi finner en bedre måte å løse det på. Satser på at SD fikser dette i v4 etterhvert.

Alternativ løsning

Vil også være mulig å å sjekke om en verdi er "dypere" enn en default value, for så å ikke kjøre "deepen" for den "dypere" verdien 😵‍💫 og flytter den ut et hakk. Eksemplet viser kanskje bedre (bruker første eksemplet som input):

"hover": {
   "value": "{navds.global.color.blue.600.value}"
},
"hover-subtle": {
  "value": "{navds.global.color.blue.50.value}"
}

[andnorda]

🤮

En kjedelig konsekvens av dette er at det er stress å referere til interaction-hover i style dictionary. Blir det da eventuelt sånn: {navds.semantic.color.interaction.hover.@.value} eventuelt {navds.semantic.color.interaction.hover-subtle.value}? Jeg vet ikke om det egentlig er så veldig relevant for oss nå, men tenkte det var verdt å nevne.

[KenAJoh]

🤮

En kjedelig konsekvens av dette er at det er stress å referere til interaction-hover i style dictionary. Blir det da eventuelt sånn: {navds.semantic.color.interaction.hover.@.value} eventuelt {navds.semantic.color.interaction.hover-subtle.value}? Jeg vet ikke om det egentlig er så veldig relevant for oss nå, men tenkte det var verdt å nevne.

Jepp er akkurat det som skjer, så er kjipt uansett hvilken løsning vi velger...

[andnorda]

Ødelegger hover-subtle output på andre formater enn kebab-case? Blir det da feks NavdsGlobalColorInteractionHover-subtle i js?

[KenAJoh]

Ødelegger hover-subtle output på andre formater enn kebab-case? Blir det da feks NavdsGlobalColorInteractionHover-subtle i js?

Nei alle formater untatt cjs blir som ønsket:

// css
--navds-semantic-color-text-link: var(--navds-global-color-blue-500);
--navds-semantic-color-text-link-visited: var(--navds-global-color-purple-500);


// js
export const NavdsSemanticColorTextLinkVisited = "rgba(99, 70, 137, 1)";
export const NavdsSemanticColorTextLink = "rgba(0, 103, 197, 1)";

// less
@navds-semantic-color-text-link-visited: rgba(99, 70, 137, 1);
@navds-semantic-color-text-link: rgba(0, 103, 197, 1);

// Scss
$navds-semantic-color-text-link-visited: rgba(99, 70, 137, 1);
$navds-semantic-color-text-link: rgba(0, 103, 197, 1);

// cjs, blir ikke som ønsket her
"link-visited": {
	"value": "rgba(99, 70, 137, 1)",
},
"link": {
	"value": "rgba(0, 103, 197, 1)",
 },

[andnorda]

Hva med for "@". Blir output riktig da?

[KenAJoh]

Hva med for "@". Blir output riktig da?

Alle fungerer untatt Cjs her også. For Cjs får man da

link: {
"@": {...},
"visited": {...}
}

[KenAJoh]

Ser ikke ut som noen bruker cjs versjonen idag i NAV. Kan evt vurdere å bare ikke tilby det formatet for nå.

[andnorda]

Ja, det høres lurt ut.

[andnorda]

Det jeg liker med "@" over bindestrek er at vi ikke trenger å bryte opp strukturen på input.

[KenAJoh]

Ah fant en fix på det! Bruker modulen javascript/module-flat og ikke javascript/module for å generere Cjs.
Får da formatet:

"NavdsSemanticColorTextLink": "rgba(0, 103, 197, 1)",
"NavdsSemanticColorTextLinkVisited": "rgba(99, 70, 137, 1)",

noe som matcher Esm formatet

export const NavdsSemanticColorTextLink = "rgba(0, 103, 197, 1)";
export const NavdsSemanticColorTextLinkVisited = "rgba(99, 70, 137, 1)";

[andnorda]

Jeg stemmer for "@", selv om det er en stygg hack

[KenAJoh]

Ok, kan bare merge denne PR-en da hvis det ikke er noe mer å justere i koden 🚀