diff --git a/__tests__/formats/__snapshots__/all.test.js.snap b/__tests__/formats/__snapshots__/all.test.js.snap index 9f3ce0495..2ad9fcf56 100644 --- a/__tests__/formats/__snapshots__/all.test.js.snap +++ b/__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" +`; diff --git a/__tests__/formats/stylusVariable.test.js b/__tests__/formats/stylusVariable.test.js new file mode 100644 index 000000000..8d8295e6e --- /dev/null +++ b/__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(); + }); + }); + + }); +}); diff --git a/lib/common/formats.js b/lib/common/formats.js index 35954f943..6d3f3f69d 100644 --- a/lib/common/formats.js +++ b/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 * diff --git a/package-lock.json b/package-lock.json index 8cb73cf3b..be19e81a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5537,6 +5537,35 @@ "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=", "dev": true }, + "css": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", + "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "source-map": "^0.6.1", + "source-map-resolve": "^0.5.2", + "urix": "^0.1.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "css-parse": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz", + "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=", + "dev": true, + "requires": { + "css": "^2.0.0" + } + }, "cssom": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz", @@ -12531,6 +12560,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz", "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==", + "dev": true, "requires": { "resolve-from": "^5.0.0" } @@ -12538,7 +12568,8 @@ "resolve-from": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", - "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==" + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true }, "resolve-global": { "version": "1.0.0", @@ -12950,6 +12981,12 @@ } } }, + "sax": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", + "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", + "dev": true + }, "saxes": { "version": "3.1.11", "resolved": "https://registry.npmjs.org/saxes/-/saxes-3.1.11.tgz", @@ -13775,6 +13812,57 @@ "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true }, + "stylus": { + "version": "0.54.8", + "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.8.tgz", + "integrity": "sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==", + "dev": true, + "requires": { + "css-parse": "~2.0.0", + "debug": "~3.1.0", + "glob": "^7.1.6", + "mkdirp": "~1.0.4", + "safer-buffer": "^2.1.2", + "sax": "~1.2.4", + "semver": "^6.3.0", + "source-map": "^0.7.3" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "dev": true + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + }, + "source-map": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", + "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", + "dev": true + } + } + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index 558344b15..9f9155c49 100644 --- a/package.json +++ b/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" }