feat(formats): add stylus/variables format (#527)

fixes #526

__tests__/formats/__snapshots__/all.test.js.snap

@@ -694,3 +694,11 @@ exports[`formats all should match sketch/palette/v2 snapshot 1`] = `
   ]
 }"
 `;
+
+exports[`formats all should match stylus/variables snapshot 1`] = `
+"
+// Do not edit directly
+// Generated on Sat, 01 Jan 2000 00:00:00 GMT
+
+$color_red= #FF0000; // comment"
+`;

__tests__/formats/stylusVariable.test.js

@@ -0,0 +1,78 @@
+/*
+ * 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.
+ */
+
+var formats = require('../../lib/common/formats');
+var stylus = require('stylus');
+const createDictionary = require('../../lib/utils/createDictionary');
+const createFormatArgs = require('../../lib/utils/createFormatArgs');
+
+var file = {
+  "destination": "__output/",
+  "format": "stylus/variables",
+  "name": "foo"
+};
+
+const propertyName = "color-base-red-400";
+const propertyValue = "#EF5350";
+
+const properties = {
+  color: {
+    base: {
+      red: {
+        400: {
+          "name": propertyName,
+          "value": propertyValue,
+          "original": {
+            "value": propertyValue
+          },
+          "attributes": {
+            "category": "color",
+            "type": "base",
+            "item": "red",
+            "subitem": "400"
+          },
+          "path": [
+            "color",
+            "base",
+            "red",
+            "400"
+          ]
+        }
+      }
+    }
+  }
+};
+
+const formatter = formats['stylus/variables'].bind(file);
+const dictionary = createDictionary({ properties });
+
+describe('formats', () => {
+  describe('stylus/variables', () => {
+
+    it('should have a valid stylus syntax', () => {
+      const stylusArguments = createFormatArgs({
+        dictionary,
+        file,
+        platform: {}
+      });
+      stylus.render(formatter(stylusArguments, {}, file),
+        function (err, css) {
+          if (err) {
+            throw new Error(err);
+          }
+          expect(css).toBeDefined();
+        });
+    });
+
+  });
+});

lib/common/formats.js

@@ -37,22 +37,31 @@ function fileHeader(showFileHeader = true, commentStyle) {
 }
 
 function formattedVariables(format, dictionary, outputReferences = false) {
-  var prefix, commentStyle, indentation;
+  var prefix, commentStyle, indentation, separator;
 
   switch(format) {
     case 'css':
       prefix = '--';
       indentation = '  ';
+      separator = ':';
       break;
     case 'sass':
       prefix = '$';
       commentStyle = 'short';
       indentation = '';
+      separator = ':';
       break;
     case 'less':
       prefix = '@';
       commentStyle = 'short';
       indentation = '';
+      separator = ':';
+      break;
+    case 'stylus':
+      prefix = '$';
+      commentStyle = 'short';
+      indentation = '';
+      separator = '=';
       break;
   }
 
@@ -72,7 +81,7 @@ function formattedVariables(format, dictionary, outputReferences = false) {
       }
     })
     .map(function(prop) {
-      var to_ret_prop = `${indentation}${prefix}${prop.name}: `;
+      var to_ret_prop = `${indentation}${prefix}${prop.name}${separator} `;
       let value = prop.value;
 
       if (outputReferences && dictionary.usesReference(prop.original.value)) {
@@ -302,6 +311,22 @@ module.exports = {
     return fileHeader(options.showFileHeader, 'short') + iconsWithPrefix('@', dictionary.allProperties, options, 'short');
   },
 
+  /**
+   * Creates a Stylus file with variable definitions based on the style dictionary
+   *
+   * @memberof Formats
+   * @kind member
+   * @example
+   * ```stylus
+   * $color-background-base= #f0f0f0;
+   * $color-background-alt= #eeeeee;
+   * ```
+   */
+  'stylus/variables': function({dictionary, options}) {
+    return fileHeader(options.showFileHeader, 'short') +
+      formattedVariables('stylus', dictionary, options.outputReferences);
+  },
+
   /**
    * Creates a CommonJS module with the whole style dictionary
    *

package.json

@@ -144,6 +144,7 @@
     "lint-staged": "^10.2.7",
     "node-sass": "^4.14.1",
     "standard-version": "^9.0.0",
+    "stylus": "^0.54.8",
     "tsd": "^0.11.0",
     "yaml": "^1.10.0"
   }