What happened?
The following input will result in broken output. This happens only if there is the same number (in this case 1) in both a token name as well as a nested value.
{
"shadow-1-x-offset-1": {
"value": "0",
"type": "number"
},
"shadow-1-y-offset-1": {
"value": "1", // Changing this to any number other than 1 will result in valid CSS
"type": "number"
},
"shadow-1-blur-1": {
"value": "2",
"type": "number"
},
"shadow-1-spread-1": {
"value": "0",
"type": "number"
},
"shadow-1": {
"value": [
{
"x": "{shadow-1-x-offset-1}",
"y": "{shadow-1-y-offset-1}",
"blur": "{shadow-1-blur-1}",
"spread": "{shadow-1-spread-1}",
"color": "#FFF",
"type": "dropShadow"
}
],
"type": "boxShadow"
}
}
Reproduction
Config:
{
"source": [
"studio.json"
],
"log": {
"verbosity": "default"
},
"preprocessors": [
"tokens-studio"
],
"platforms": {
"css": {
"transformGroup": "tokens-studio",
"transforms": [
"name/kebab"
],
"buildPath": "build/css/",
"files": [
{
"destination": "_variables.css",
"format": "css/variables"
}
],
"options": {
"outputReferences": true
}
}
}
}
Broken output:
:root {
--shadow-1-x-offset-1: 0;
--shadow-1-y-offset-1: 1;
--shadow-1-blur-1: 2;
--shadow-1-spread-1: 0;
--shadow-1: var(--shadow-var(--shadow-1-y-offset-1)-spread-1) 1px var(--shadow-1-blur-1)px var(--shadow-1-x-offset-1) #fff;
}
Expected output
--shadow-1: var(--shadow-1-spread-1) var(--shadow-1-x-offset-1) var(--shadow-1-blur-1)px var(--shadow-1-y-offset-1) #fff;
Version
1.3.0 (A quick test with 2.0.0 lead to same results)
What happened?
The following input will result in broken output. This happens only if there is the same number (in this case 1) in both a token name as well as a nested value.
Reproduction
Config:
Broken output:
Expected output
--shadow-1: var(--shadow-1-spread-1) var(--shadow-1-x-offset-1) var(--shadow-1-blur-1)px var(--shadow-1-y-offset-1) #fff;Version
1.3.0 (A quick test with 2.0.0 lead to same results)