Reference global property from theme property (alias)

[alehar9320]

Intro

Let me start off by saying thanks to all the contributors of this repository. The StyleDictionary tool is wonderful and I look forward to what will follow for the Design Token community. How Style Dictionary may come to be packaged and extended to enable new innovations; with GUIs and more. From a personal perspective, I consider it almost as beneficial to the dev community as Git.

The issue

With one of the more advanced setups for Multi Brand & Multi Platform, I'm having trouble referencing the global (general) properties from my theme restricted properties.

Project structure

The setup follows the structure proposed in the official documentation for multi-theme Style Dictionary.

The project structure follows the documentation guidelines.

How to re-create

Run Style Dictionary on the following definition.

properties/themename/themename.json

  "theme": {
        "company": {
              "logo": {
                  "shell": {
                      "value": "{company.logo.url.new.full.negative.value}"
                  },
                  "welcome": {
                      "value": "{company.logo.url.new.helix.mono.white.value}"
                  }
              }
         }
    }

_properties/global/somefile.json

{
    "company": {
        "logo": {
            "url": {
                "new": {
                    "helix": {
                         "mono": {
                            "white": {
                                "value:": "#fff"
                             }
                          }
                    }
            }
       }
   }
}

Note: the actual content of the value field is exceptionally long (up to hundreds of characters). Here it's been replaced by the hex code #fff. May have impact. Example: url(data:image/svg+xml;base64,adsadsdsadsadsadasdsadsadsadsadsadadsadsadsadsadsadsadsasadsadsajdhj21h3uh213h1371237ahsdhsadjhsadjsahdjsahdkjh1321h3j21h3j21h31jjsagdhgsadgsadagdhgsadhsagdhsahdg1312g3hgahsgdhasgdhgsajdgashdgsadhsagdhagdhsag131232132131sadsadasdadd4444466661337loremipsumdummydata);"

Build script

[...]

console.log('Build started...');

const themeFolderNames = getAllThemeFolderNames();

themeFolderNames.map((themeName) => {
    ['web', 'ios', 'android'].map((platform) => {
        console.log('\n==============================================');
        console.log(`\nProcessing: [${platform}] [${themeName}]`);

        // IMPORT STYLE DICTIONARY
        const StyleDictionaryPackage = require('style-dictionary');

        // EXPAND UPON CONFIGURATION FROM CONFIG.JSON
        const StyleDictionary = StyleDictionaryPackage.extend(getStyleDictionaryConfig(themeName, platform));

        // REGISTER CUSTOM FORMATS
        registerStyleDictionaryFormats(StyleDictionary);

        // GENERATE DIST FILES
        StyleDictionary.buildPlatform(platform);

        console.log('\nEnd processing');
    });
});

console.log('\n==============================================');
console.log('\nBuild completed!');

Note: surrounding code and properties have been omitted for the sake of simplicity.

Environment

Script runner: Node
Operating system: Windows
Package management: NPM
Style Dictionary version: 2.9.0

Once the alias was replaced by content, the build went through successfully.

[dbanksdesign]

Thank you so much for the kind words! I just set up a new project based on the multi-brand-multi-platform example and added global and theme files in your example to reproduce the issue. Thank you for such a detailed bug report, it made debugging much easier. I believe the issue is the colon in the "value" string in the _properties/global/somefile.json file. You have "value:": . If you remove the colon in the string it should work.

This issue does illuminate something Style Dictionary could be doing better though because with the colon present the build just hangs forever and doesn't show an error. So thank you for finding this so we can have better error messaging!

[alehar9320]

I was just about to return with the very same finding. But, you beat me to it. That was the actual root issue. As such, I'll close this issue.

A little embarrassing on my part - hah. But, as you pointed out I'm likely not the only one struggling with misspellings and similar. I've been theoretically exploring different ways of validating the properties - possibly using JSON schemas. But, haven't had time to dig into it just yet.

Totally agree with your perspective.

[dbanksdesign]

Thank you for bringing this issue to our attention, I have a fix for the infinite hanging you experienced. It turns out there was a pretty serious bug. We have error checks in place to grab all reference errors and notify the user, but that wasn't happening after a change we made in 3.0.