Added reusable name generation, javascript helpers, javascript configuration

Author: Jiří Třečák

exporter.json

@@ -9,7 +9,8 @@
     "version": "1.0.0",
     "config": {
         "sources": "sources.json",
-        "output": "output.json"
+        "output": "output.json",
+        "js": "src/js/helpers.js"
     },
     "engines": {
         "pulsar": "1.0.0",

output.json

@@ -16,10 +16,6 @@
             "invoke": "measures.pr",
             "write_to": "measures.css"
         },
-        {
-            "invoke": "radii.pr",
-            "write_to": "radii.css"
-        },
         {
             "invoke": "shadows.pr",
             "write_to": "shadows.css"

src/colors.pr

@@ -4,4 +4,11 @@ Generate all color tokens as named variables.
 Tokens are named by their group path and then name, 
 and their value rendered using `rendered-color` blueprint
 
-*}
+*}
+:root {
+{[ for token in @ds.tokensByType("Color") ]}
+    {[ inject "rendered-token-var" context token /]}
+    
+
+{[/]}
+}

src/js/helpers.js

@@ -0,0 +1,30 @@
+/**
+* Convert group name, token name and possible prefix into camelCased string, joining everything together
+*/
+Pulsar.registerFunction("readableVariableName", function (token, tokenGroup, prefix) {
+
+    // Create array with all path segments and token name at the end
+    let segments = [...tokenGroup.path, token.name]
+    if (prefix && prefix.length > 0) {
+        segments.unshift(prefix)
+    }
+
+    // Create "sentence" separated by spaces so we can camelcase it all
+    let sentence = segments.join(" ")
+
+    // Return camelcased string from all segments
+    return sentence.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
+})
+
+/**
+* Behavior configuration of the exporter
+* Prefixes: Add prefix for each category of the tokens. For example, all colors can start with "color, if needed"
+*/ 
+Pulsar.registerPayload("behavior", {
+    colorTokenPrefix: "color",
+    borderTokenPrefix: "border",
+    gradientTokenPrefix: "gradient",
+    measureTokenPrefix: "measure",
+    shadowTokenPrefix: "shadow",
+    typographyTokenPrefix: "typography"
+})

src/object-renderers/rendered-name.pr

@@ -24,3 +24,23 @@ Rendered as:
 [group1][group2][...][name];
 
 *}
+{[ let tokenGroup = @ds.tokenGroupContainingTokenId(context.id) /]}
+{[ let prefix = "" /]}
+{[ switch context.tokenType ]}
+    {[ case "Color" ]}
+        {[ prefix = behavior.colorTokenPrefix /]}
+    {[ case "Typography" ]}
+        {[ prefix = behavior.typographyTokenPrefix /]}  
+    {[ case "Shadow" ]}
+        {[ prefix = behavior.shadowTokenPrefix /]}  
+    {[ case "Border" ]}
+        {[ prefix = behavior.borderTokenPrefix /]}  
+    {[ case "Measure" ]}
+        {[ prefix = behavior.measureTokenPrefix /]}  
+    {[ case "Gradient" ]}
+        {[ prefix = behavior.gradientTokenPrefix /]}  
+    {[ default ]}
+        {[ prefix = "" /]}  
+{[/]}
+{[ let tokenName = @js.readableVariableName(context, tokenGroup, prefix) /]}
+{{ tokenName }}

src/object-renderers/rendered-token-var.pr

@@ -22,3 +22,5 @@ Rendered as:
   --[name]: [value];
 
 *}
+{[ let token = context /]}
+{[ inject "rendered-name" context token /]}: "value";

src/radii.pr

@@ -4,4 +4,11 @@ Generate all typography tokens as named variables.
 Tokens are named by their group path and then name, 
 and their value rendered using `rendered-color` blueprint
 
-*}
+*}
+:root {
+{[ for token in @ds.tokensByType("Typography") ]}
+    {[ inject "rendered-token-var" context token /]}
+    
+{[/]}
+
+}