feat(formats): output references handles interpoloated references #590

dbanksdesign · 2021-03-31T20:09:19Z

Issue #, if available: #589

Description of changes:

Organized formatHelpers into their own files
Renamed getReference to getReferences and changed it to return an array of references for cases when there are multiple references in a single value.
Renamed sortAllProperties format helper to sortByReference to be more clear and made changes to support interpolated values and to not mutate the allProperties array. This caused some of the sorting changes in some of the snapshots.
Added createPropertyFormatter format helper which will return a formatting function based on some configuration to be used in formats when iterating over allProperties. The formattedVariables format helper uses this function as well as several formats to remove duplicate code.
Updated some formats to use the new format helpers
Updated the flutter/dart.class to use the sorting when using outputReferences

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

dbanksdesign · 2021-04-02T22:38:55Z

docs/formats.md

@@ -240,7 +240,7 @@ The formatter function that is called when Style Dictionary builds files.
    <td>args.dictionary.usesReference</td><td><code>function</code></td><td><p>Use this function to see if a token&#39;s value uses a reference. This is the same function style dictionary uses internally to detect a reference.</p>
 </td>
    </tr><tr>
-    <td>args.dictionary.getReference</td><td><code>function</code></td><td><p>Use this function to get the token/property that it references. You can use this to output a reference in your custom format. For example: <code>dictionary.getReference(token.original.value) // returns the referenced token object</code></p>
+    <td>args.dictionary.getReferences</td><td><code>function</code></td><td><p>Use this function to get the token/property that it references. You can use this to output a reference in your custom format. For example: <code>dictionary.getReferences(token.original.value) // returns an array of the referenced token objects</code></p>


typo: tokens/properties

chazzmoney · 2021-04-02T22:49:34Z

lib/common/formatHelpers/formattedVariables.js

+  return allProperties
+    .map(createPropertyFormatter({ outputReferences, dictionary, format }))
+    .filter(function(strVal) { return !!strVal })
+    .join('\n');


might want to make the line ending character a parameter with a default of \n

chazzmoney · 2021-04-02T22:53:44Z

lib/register/format.js

@@ -25,7 +25,7 @@
 * @param {Object} args.dictionary.properties - Object structure of the tokens/properties that has been transformed and references resolved.
 * @param {Array} args.dictionary.allProperties - Flattened array of all the tokens/properties. This makes it easy to output a list, like a list of SCSS variables.
 * @param {function(value): Boolean} args.dictionary.usesReference - Use this function to see if a token's value uses a reference. This is the same function style dictionary uses internally to detect a reference.
- * @param {function(value): Value} args.dictionary.getReference - Use this function to get the token/property that it references. You can use this to output a reference in your custom format. For example: `dictionary.getReference(token.original.value) // returns the referenced token object`
+ * @param {function(value): Value} args.dictionary.getReferences - Use this function to get the token/property that it references. You can use this to output a reference in your custom format. For example: `dictionary.getReferences(token.original.value) // returns an array of the referenced token objects`


change documentation to match above as per our conversation

chazzmoney · 2021-04-02T22:56:15Z

test.js

+const StyleDictionary = require('./index');
+
+StyleDictionary.extend({
+  properties: {
+    color: {
+      red: { value: "#f00" },
+      blue: { value: "#00f" },
+      danger: { value: "calc({color.red.value}, {color.blue.value})" },
+      test: { value: "{color.red.value}" }
+    }
+  },
+  platforms: {
+    css: {
+      transformGroup: `css`,
+      files: [{
+        destination: `variables.css`,
+        format: `css/variables`,
+        options: {
+          outputReferences: true
+        }
+      }]
+    }
+  }
+}).buildAllPlatforms();


chazzmoney · 2021-04-02T22:56:40Z

variables.css

+/**
+ * Do not edit directly
+ * Generated on Tue, 30 Mar 2021 19:49:14 GMT
+ */
+
+:root {
+  --color-blue: #0000ff;
+  --color-red: #ff0000;
+  --color-test: var(--color-red);
+  --color-danger: calc(var(--color-red), var(--color-blue));
+}


chazzmoney · 2021-04-02T22:57:25Z

scripts/handlebars/templates/formats.hbs

-      // `getReference()` methods. `usesReference()` will return true if
-      // the value has a reference in it. `getReference()` will return
+      // `getReferences()` methods. `usesReference()` will return true if
+      // the value has a reference in it. `getReferences()` will return
      // the reference to the whole token so that you can access its


reference to the whole token

chazzmoney · 2021-04-02T22:59:26Z

lib/utils/references/getReferences.js

-  let ref;
+  // because a token's value can contain multiple references due to string interpolation
+  // "{size.padding.base.value} {color.border.primary.value}"
+  // references is an array of 0 or more references
+  const references = [];

+  // function inside .replace runs multiple times if there are multiple matches
  value.replace(regex, function(match, variable) {
    // remove 'value' to access the whole token object
    variable = variable.trim().replace('.value','');

    // Find what the value is referencing
    const pathName = getPath(variable);

-    ref = resolveReference(pathName, self.properties);
+    let ref = resolveReference(pathName, self.properties);
    if (!ref) {
      // fall back on _properties as it is unfiltered
      ref = resolveReference(pathName, self._properties);
      // and warn the user about this
      GroupMessages.add(GroupMessages.GROUP.FilteredOutputReferences, variable);
    }
-
+    references.push(ref);
  });

-  return ref;
+  return references;


chazzmoney · 2021-04-02T23:39:26Z

lib/common/formatHelpers/fileHeader.js

+  let {prefix, lineSeparator, header, footer} = Object.assign({}, defaultFormatting, formatting);
+
+  if (commentStyle === 'short') {
+    prefix = `// `;
+    header = `${lineSeparator}`;
+    footer = `${lineSeparator}${lineSeparator}`;
+  } else if (commentStyle === 'xml') {
+    prefix = `  `;
+    header = `<!--${lineSeparator}`;
+    footer = `${lineSeparator}-->`;
+  } else {
+    prefix = ` * `;
+    header = `/**${lineSeparator}`;
+    footer = `${lineSeparator} */${lineSeparator}${lineSeparator}`;
  }

-  return `${commentHeader}${fn(defaultHeader)
-    .map(line => `${commentPrefix}${line}`)
-    .join('\n')}${commentFooter}`;
+  return `${header}${fn(defaultHeader)
+    .map(line => `${prefix}${line}`)
+    .join(lineSeparator)}${footer}`;


…n tests

dbanksdesign added 3 commits March 30, 2021 13:04

wip: interpolated references

29d05d7

wip still

4f006a8

feat(formats): output references handles interpoloated references

546671b

dbanksdesign commented Apr 2, 2021

View reviewed changes

chazzmoney reviewed Apr 2, 2021

View reviewed changes

chore(formats): fixing PR comments

d8cb2ca

chazzmoney reviewed Apr 2, 2021

View reviewed changes

dbanksdesign added 2 commits April 4, 2021 20:59

chore(formats): using fileHeader in iOS formats and adding integratio…

c3c10de

…n tests

chore(formats): cleaning up empty lines

06602d1

dbanksdesign merged commit cc595ca into 3.0 Apr 5, 2021

dbanksdesign deleted the interpolated-refs branch April 5, 2021 23:40

This was referenced Apr 7, 2021

Output References does not work with interpolated values #589

Closed

Feature/css var deep #428

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(formats): output references handles interpoloated references #590

feat(formats): output references handles interpoloated references #590

dbanksdesign commented Mar 31, 2021

dbanksdesign Apr 2, 2021

chazzmoney Apr 2, 2021

chazzmoney Apr 2, 2021

chazzmoney Apr 2, 2021

chazzmoney Apr 2, 2021

chazzmoney Apr 2, 2021

chazzmoney Apr 2, 2021

chazzmoney Apr 2, 2021

feat(formats): output references handles interpoloated references #590

feat(formats): output references handles interpoloated references #590

Conversation

dbanksdesign commented Mar 31, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment