Merge pull request #1035 from amzn/port-ref-falsy

Forward port of bugfix and grammar fix in v3

.changeset/honest-toes-wink.md

@@ -0,0 +1,5 @@
+---
+'style-dictionary': patch
+---
+
+Allow falsy token values for outputReferences, e.g. `0`.

__tests__/common/formatHelpers/createPropertyFormatter.test.js

@@ -114,6 +114,34 @@ const numberDictionary = createDictionary({
         value: 10,
         type: 'dimension',
       },
+      zero: {
+        original: {
+          value: 0,
+          type: 'dimension',
+        },
+        attributes: {
+          category: 'tokens',
+          type: 'zero',
+        },
+        name: 'tokens-zero',
+        path: ['tokens', 'zero'],
+        value: 0,
+        type: 'dimension',
+      },
+      'ref-zero': {
+        original: {
+          value: '{tokens.zero}',
+          type: 'dimension',
+        },
+        attributes: {
+          category: 'tokens',
+          type: 'ref-zero',
+        },
+        name: 'tokens-ref-zero',
+        path: ['tokens', 'ref-zero'],
+        value: 0,
+        type: 'dimension',
+      },
     },
   },
 });
@@ -248,6 +276,18 @@ describe('common', () => {
           );
         });
 
+        it('should support valid falsy values for outputReferences', () => {
+          const propFormatter = createPropertyFormatter({
+            outputReferences: true,
+            dictionary: numberDictionary,
+            format: 'css',
+          });
+          expect(propFormatter(numberDictionary.tokens.tokens.zero)).toEqual('  --tokens-zero: 0;');
+          expect(propFormatter(numberDictionary.tokens.tokens['ref-zero'])).toEqual(
+            '  --tokens-ref-zero: var(--tokens-zero);',
+          );
+        });
+
         it('should support multiple references for outputReferences', () => {
           const propFormatter = createPropertyFormatter({
             outputReferences: true,

docs/transforms.md

@@ -34,7 +34,7 @@ There are 3 types of transforms: attribute, name, and value.
 
 **Attribute:** An attribute transform adds to the attributes object on a design token. This is for including any meta-data about a design token such as it's CTI or other information.
 
-**Name:** A name transform transform the name of a design token. You should really only be apply one name transformer because they will override each other if you use more than one.
+**Name:** A name transform transforms the name of a design token. You should really only be applying one name transformer because they will override each other if you use more than one.
 
 **Value:** The value transform is the most important as this is the one that changes the representation of the value. Colors can be turned into hex values, rgb, hsl, hsv, etc. Value transforms have a matcher function that filter which tokens that transform runs on. This allows us to only run a color transform on only the colors and not every design token.
 

lib/common/formatHelpers/createPropertyFormatter.js

@@ -184,7 +184,7 @@ export default function createPropertyFormatter({
         // because Style Dictionary resolved this in the resolution step.
         // Here we are undoing that by replacing the value with
         // the reference's name
-        if (ref.value && ref.name) {
+        if (Object.hasOwn(ref, 'value') && Object.hasOwn(ref, 'name')) {
           const replaceFunc = function () {
             if (format === 'css') {
               if (outputReferenceFallbacks) {

scripts/handlebars/templates/transforms.hbs

@@ -1,8 +1,8 @@
 # Transforms
 
-Transforms are functions that modify a [token](tokens.md) so that it can be understood by a specific platform. It can modify the name, value, or attributes of a token - enabling each platform to use the design token in different ways. A simple example is changing pixel values to point values for iOS and dp or sp for Android.  
+Transforms are functions that modify a [token](tokens.md) so that it can be understood by a specific platform. It can modify the name, value, or attributes of a token - enabling each platform to use the design token in different ways. A simple example is changing pixel values to point values for iOS and dp or sp for Android.
 
-Transforms are isolated per platform; each platform begins with the same design token and makes the modifications it needs without affecting other platforms. The order you use transforms matters because transforms are performed sequentially. Transforms are used in your [configuration](config.md), and can be either [pre-defined transforms](transforms.md?id=pre-defined-transforms) supplied by Style Dictionary or [custom transforms](transforms.md?id=defining-custom-transforms).  
+Transforms are isolated per platform; each platform begins with the same design token and makes the modifications it needs without affecting other platforms. The order you use transforms matters because transforms are performed sequentially. Transforms are used in your [configuration](config.md), and can be either [pre-defined transforms](transforms.md?id=pre-defined-transforms) supplied by Style Dictionary or [custom transforms](transforms.md?id=defining-custom-transforms).
 
 Some platform configuration attributes apply a broader effect over the transforms applied. For example, the `size/remToDp` transform will scale a number by 16, or by the value of `options.basePxFontSize` if it is present. Check individual transform documentation to see where this is applicable.
 
@@ -29,7 +29,7 @@ There are 3 types of transforms: attribute, name, and value.
 
 **Attribute:** An attribute transform adds to the attributes object on a design token. This is for including any meta-data about a design token such as it's CTI or other information.
 
-**Name:** A name transform transform the name of a design token. You should really only be apply one name transformer because they will override each other if you use more than one.
+**Name:** A name transform transforms the name of a design token. You should really only be applying one name transformer because they will override each other if you use more than one.
 
 **Value:** The value transform is the most important as this is the one that changes the representation of the value. Colors can be turned into hex values, rgb, hsl, hsv, etc. Value transforms have a matcher function that filter which tokens that transform runs on. This allows us to only run a color transform on only the colors and not every design token.