feat: add SCSS map of Auro tokens

scripts/config.json

@@ -13,6 +13,14 @@
           "filter": {
             "public": true
           }
+        },
+        {
+          "destination": "SCSSVariablesMapFlat.scss",
+          "format": "custom/scss/map-flat",
+          "mapName": "auroTokens",
+          "filter": {
+            "public": true
+        }
         }
       ]
     },

scripts/styleDictionary.js

@@ -1,5 +1,7 @@
 const StyleDictionary = require('style-dictionary');
 const _ = require('lodash');
+const fs = require('fs');
+const join = require('path').join;
 
 const Color = require('tinycolor2');
 
@@ -17,6 +19,11 @@ StyleDictionary.registerTransform({
   }
 });
 
+StyleDictionary.registerFormat({
+  name: 'custom/scss/map-flat',
+  formatter:  _.template( fs.readFileSync(join(__dirname,'../templates/map-flat.template')) )
+});
+
 // Required dependency
 const tokensConfig = StyleDictionary.extend('./scripts/config.json');
 

templates/map-flat.template

@@ -0,0 +1,43 @@
+<%
+//
+// Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License").
+// You may not use this file except in compliance with the License.
+// A copy of the License is located at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// or in the "license" file accompanying this file. This file is distributed
+// on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+// express or implied. See the License for the specific language governing
+// permissions and limitations under the License.
+
+%>
+<%
+    // for backward compatibility we need to have the user explicitly hide it
+    var showFileHeader = (this.options && this.options.hasOwnProperty('showFileHeader')) ? this.options.showFileHeader : true;
+    if(showFileHeader) {
+        var header = '';
+        header += "/*\n  Do not edit directly";
+        header += "\n  Generated on " + new Date().toUTCString();
+        header += "\n*/\n";
+        print(header);
+    }
+
+    print('\n');
+
+    var output = '';
+    var fontFamilyRegex = /font-family/;
+    output += `$${this.mapName||'tokens'}: (\n`;
+    output += allProperties.map(function(prop){
+        var line = '';
+        if(prop.comment) {
+        line += '  // ' + prop.comment + '\n';
+        }
+        line += '  \'' + prop.name + '\': ' + (fontFamilyRegex.test(prop.name) ? '(' : '') + (prop.attributes.category==='asset' ? '"'+prop.value+'"' : prop.value) + (fontFamilyRegex.test(prop.name) ? ')' : '')
+        return line;
+    }).join(',\n');
+    output += '\n);';
+    print(output);
+%>