Update resolveObject.js

[eastcoastcoder]

Fixes string references in token values to not be evaluated

Issue #, if available:
When given some string values, the strings would evaluate rather than be ignored. This fix was transplanted from the main repo.

Description of changes:
Ex:
value: {Spacing Base Unit} * {Spatial Multiplier}
Expected:
value: {Spacing Base Unit} * {Spatial Multiplier}
Actual:
value: 1.25

References
amzn#808
amzn#825

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[jorenbroekema]

Hi @eastcoastcoder . I believe the main problem is that the browser-style-dictionary patch is based on an older version of style-dictionary (I think 3.1.1 or something, if memory serves right). Your fixes were released in 3.7.1, so if I rebase this patch on the latest style-dictionary, that should fix those 2 problems among a couple of other issues?

The thing is, this week I released style-dictionary@4.0.0-prerelease.0 , see amzn#1014
In this prerelease for v4 of style-dictionary, it will work in the browser out of the box without any build tools required (like rollup, browserify, etc. to shim node-only stuff and transform CJS to ESM). Some early tests from myself and another user have been quite successful, so I think we're at a point where we should deprecate browser-style-dictionary in favor of style-dictionary@4. Would it be possible for you to try out the new v4 prerelease and see if that fixes your problems? Here's a list of breaking changes to keep in mind, the main one being that it's ESM instead of CJS format now: https://github.com/amzn/style-dictionary/blob/v4/CHANGELOG.md#major-changes

See also our statement about style-dictionary v4 https://amzn.github.io/style-dictionary/#/version_4

[eastcoastcoder]

Cool! I'll give it a try, thank you!

[eastcoastcoder]

Any usage examples? I run into issues with trying to run it through a script tag. Kinda new to using modules in browser

[jorenbroekema]

I believe unpkg requires you to put ?module behind the import to enable node module resolution algorithm for bare import specifiers.

So basically https://unpkg.com/style-dictionary@4.0.0-prerelease.1/index.js?module should give better results.

That said, unpkg is notoriously unstable. I would not recommend using it. Try something like jsdelivr / esm.run instead maybe:

import StyleDictionary from 'https://cdn.jsdelivr.net/npm/style-dictionary@4.0.0-prerelease.1/+esm';
console.log(StyleDictionary);

import StyleDictionary from 'https://cdn.jsdelivr.net/npm/style-dictionary@4.0.0-prerelease.1/+esm';
import { fs } from 'https://cdn.jsdelivr.net/npm/style-dictionary@4.0.0-prerelease.1/fs/+esm';

fs.writeFileSync('foo.json', 
  JSON.stringify({
    color: {
      value: '#FF0000',
      type: 'color'
    }
  }, null, 2),  
  'utf-8'
);

const sd = await StyleDictionary.extend({
  source: ['foo.json'],
  platforms: {
    css: {
      transformGroup: 'web',
      files: [{
        format: 'css/variables',
        destination: 'foo.css'
      }]
    }
  }
})

sd.buildAllPlatforms();

console.log(fs.readFileSync('foo.css', 'utf-8'));

https://codepen.io/Falx/pen/dyaOoNq?editors=0010 see console

[eastcoastcoder]

This worked out perfectly for me! Thank you for take the time to address it in detail.