Resolution of aliases is not cross-file between imported files

[didoo]

This is probably a regression in Theo6. When you use multiple imports in a file, the alias resolved in previous files are not available inside other imported files.

It's easy to reproduce.

Given this main file:

main.json

{
  "global": {
    "type": "token",
    "category": "global"
  },
  "imports": [
    "./imported1.json",
    "./imported2.json"
  ]
}

and these two imported files:
imported1.json

{
  "global": {
    "type": "token",
    "category": "global"
  },
  "props": {
    "TOKEN_COLOR_FILE1": {
      "value": "{!ALIAS_COLOR1}"
    }
  },
  "aliases": {
    "ALIAS_COLOR1": {
      "value": "#CC0000"
    }
  }
}

imported2.json

{
  "global": {
    "type": "token",
    "category": "global"
  },
  "props": {
    "TOKEN_COLOR_FILE2_IMPORTED_ALIAS": {
      "value": "{!ALIAS_COLOR1}"
    }
  }
}

the generated file in Theo5 is correctly:
main.scss (as an example)

$token-color-file1: #CC0000;
$token-color-file2-imported-alias: #CC0000;

while in Theo6 a compilation error is raised in the console:

{ Error: Alias "ALIAS_COLOR1" not found
    at allMatches.reduce (MY_FOLDER_PATH/theo6/node_modules/gulp-theo/node_modules/theo/lib/definition.js:171:42)
    at MY_FOLDER_PATH/theo6/node_modules/immutable/dist/immutable.js:4420:31
    at List.__iterate (MY_FOLDER_PATH/theo6/node_modules/immutable/dist/immutable.js:2208:13)
    at List.mixin.reduce (MY_FOLDER_PATH/theo6/node_modules/immutable/dist/immutable.js:4415:12)
    at value.update.v (MY_FOLDER_PATH/theo6/node_modules/gulp-theo/node_modules/theo/lib/definition.js:170:40)
    at updateInDeepMap (MY_FOLDER_PATH/theo6/node_modules/immutable/dist/immutable.js:1973:22)
    at updateInDeepMap (MY_FOLDER_PATH/theo6/node_modules/immutable/dist/immutable.js:1982:23)
    at Map.updateIn (MY_FOLDER_PATH/theo6/node_modules/immutable/dist/immutable.js:1280:26)
    at Map.update (MY_FOLDER_PATH/theo6/node_modules/immutable/dist/immutable.js:1272:14)
    at props.map (MY_FOLDER_PATH/theo6/node_modules/gulp-theo/node_modules/theo/lib/definition.js:169:15)
  name: 'Error',
  message: 'Alias "ALIAS_COLOR1" not found',
  stack: '...',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-theo' }

[kaelig]

Thanks a lot for the detailed report. Could you write a failing test reproducing this issue? That'll help us investigate (or someone can write a fix for it).

[aputinski]

@didoo I believe this might have actually been a bug in Theo 5. "imports" are meant to function more like dependencies. For example, in our token files we often have something like

imports:
- ./aliases/color.yml

So in your example above, if imported2 imported imported1, then ALIAS_COLOR1 would be available to imported2

[NikhilVerma]

Just FYI we have fixed this issue like this: badoo@652658d

I am not sure if this is the proper solution yet but it seems to work

[aputinski]

Hey @didoo, sorry it took me so long to look into this. I actually think that this was a bug in Theo 5.

You basically have two options:

1. Move that ALIAS_COLOR1 into main.json
2. Make a file that contains all your shared aliases and then import that file when you need access to that alias.

The second options is how we usually handle this issue for the Lightning Design System.