feat(formats): add stylus/variables format

Although leading dollar signs are not mandatory for stylus variables
there is a trend to having this, so I also included it in this PR.

see https://gist.github.com/zspecza/7220997#why

refs #526

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

@@ -670,3 +670,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/stylusVariables.test.js

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

lib/common/formats.js

@@ -38,9 +38,9 @@ function fileHeader(options, commentStyle) {
   return to_ret;
 }
 
-function variablesWithPrefix(prefix, properties, commentStyle) {
+function variablesWithPrefix(prefix, properties, commentStyle, separator = ':') {
   return properties.map(function (prop) {
-    var to_ret_prop = prefix + prop.name + ': ' + (prop.attributes.category === 'asset' ? '"' + prop.value + '"' : prop.value) + ';';
+    var to_ret_prop = prefix + prop.name + separator + ' ' + (prop.attributes.category === 'asset' ? '"' + prop.value + '"' : prop.value) + ';';
 
     if (prop.comment) {
       if (commentStyle === 'short') {
@@ -240,6 +240,21 @@ module.exports = {
     return fileHeader(this.options, 'short') + iconsWithPrefix('@', dictionary.allProperties, config, '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) {
+    return fileHeader(this.options, 'short') + variablesWithPrefix('$', dictionary.allProperties, 'short', '=');
+  },
+
   /**
    * Creates a CommonJS module with the whole style dictionary
    *

package.json

@@ -128,6 +128,7 @@
     "less": "^3.11.2",
     "lint-staged": "^10.2.7",
     "node-sass": "^4.14.1",
-    "standard-version": "^9.0.0"
+    "standard-version": "^9.0.0",
+    "stylus": "^0.54.8"
   }
 }