From 8c22eb244bf622ab1a5aa347a12b74257d0a64ef Mon Sep 17 00:00:00 2001 From: kbayrhammer Date: Tue, 2 Feb 2021 09:02:01 +0100 Subject: [PATCH] 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 --- .../formats/__snapshots__/all.test.js.snap | 8 ++ __tests__/formats/stylusVariables.test.js | 65 ++++++++++++++ lib/common/formats.js | 19 +++- package-lock.json | 86 +++++++++++++++++++ package.json | 3 +- 5 files changed, 178 insertions(+), 3 deletions(-) create mode 100644 __tests__/formats/stylusVariables.test.js diff --git a/__tests__/formats/__snapshots__/all.test.js.snap b/__tests__/formats/__snapshots__/all.test.js.snap index 86f5b33de..5e4120c85 100644 --- a/__tests__/formats/__snapshots__/all.test.js.snap +++ b/__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" +`; diff --git a/__tests__/formats/stylusVariables.test.js b/__tests__/formats/stylusVariables.test.js new file mode 100644 index 000000000..fe6ab82a0 --- /dev/null +++ b/__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(); + }); + }); + + }); +}); diff --git a/lib/common/formats.js b/lib/common/formats.js index 678326625..770435e11 100644 --- a/lib/common/formats.js +++ b/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 * diff --git a/package-lock.json b/package-lock.json index f650c70eb..20a43ea17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5278,6 +5278,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", @@ -12686,6 +12715,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": "5.0.1", "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz", @@ -13696,6 +13731,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.1.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", diff --git a/package.json b/package.json index 6a644a32f..0e663dd9e 100644 --- a/package.json +++ b/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" } }