From b627ff1e2b9ec0b9d72ba7181f2e66f73c08b04b Mon Sep 17 00:00:00 2001 From: jorenbroekema Date: Sat, 15 Apr 2023 11:07:54 +0200 Subject: [PATCH] feat: allow overriding formatting, add commentStyle long-above, short-above --- .../formatHelpers/createPropertyFormatter.js | 80 ------------------- .../createPropertyFormatter.test.js | 50 ++++++------ .../formatHelpers/createPropertyFormatter.js | 48 ++++++----- 3 files changed, 51 insertions(+), 127 deletions(-) delete mode 100644 __tests__/common/formatHelpers/createPropertyFormatter.js diff --git a/__tests__/common/formatHelpers/createPropertyFormatter.js b/__tests__/common/formatHelpers/createPropertyFormatter.js deleted file mode 100644 index 43e30e4da..000000000 --- a/__tests__/common/formatHelpers/createPropertyFormatter.js +++ /dev/null @@ -1,80 +0,0 @@ -/* - * 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. - */ - -const createPropertyFormatter = require('../../../lib/common/formatHelpers/createPropertyFormatter'); -const createDictionary = require('../../../lib/utils/createDictionary'); - -const properties = { - color: { - red: { - name: "color-red", - value: "#FF0000", - comment: "Foo bar qux", - attributes: { - category: "color", - type: "red", - }, - path: [ - "color", - "red", - ] - }, - blue: { - name: "color-blue", - value: "#0000FF", - comment: "Foo\nbar\nqux", - attributes: { - category: "color", - type: "blue", - }, - path: [ - "color", - "blue", - ] - } - } -}; -const dictionary = createDictionary({ properties }); - -describe('common', () => { - describe('createPropertyFormatter', () => { - it(`should default to putting comment next to the output value`, () => { - // long commentStyle - const cssFormatter = createPropertyFormatter({ format: 'css', dictionary }); - // short commentStyle - const sassFormatter = createPropertyFormatter({ format: 'sass', dictionary }); - - // red = single-line comment, blue = multi-line comment - const cssRed = cssFormatter(dictionary.tokens.color.red); - const cssBlue = cssFormatter(dictionary.tokens.color.blue); - const sassRed = sassFormatter(dictionary.tokens.color.red); - const sassBlue = sassFormatter(dictionary.tokens.color.blue); - - // Note that since CSS puts it inside a selector, there is an indentation of 2 spaces as well - // CSS also has commentStyle long, whereas sass uses short - expect(cssRed).toEqual(' --color-red: #FF0000; /* Foo bar qux */'); - expect(cssBlue).toEqual(` /** - * Foo - * bar - * qux - */ - --color-blue: #0000FF;`); - - expect(sassRed).toEqual('$color-red: #FF0000; // Foo bar qux'); - expect(sassBlue).toEqual(`// Foo -// bar -// qux -$color-blue: #0000FF;`); - }); - }); -}); \ No newline at end of file diff --git a/__tests__/common/formatHelpers/createPropertyFormatter.test.js b/__tests__/common/formatHelpers/createPropertyFormatter.test.js index abcea9a59..9099fcf9e 100644 --- a/__tests__/common/formatHelpers/createPropertyFormatter.test.js +++ b/__tests__/common/formatHelpers/createPropertyFormatter.test.js @@ -10,30 +10,30 @@ * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions * and limitations under the License. */ -const createPropertyFormatter = require('../../../lib/common/formatHelpers/createPropertyFormatter'); -const createDictionary = require('../../../lib/utils/createDictionary'); +const createPropertyFormatter = require("../../../lib/common/formatHelpers/createPropertyFormatter"); +const createDictionary = require("../../../lib/utils/createDictionary"); const dictionary = createDictionary({ properties: { tokens: { foo: { original: { - value: '5px', - type: 'spacing' + value: "5px", + type: "spacing", }, attributes: { - category: 'tokens', - type: 'foo' + category: "tokens", + type: "foo", }, - name: 'tokens-foo', - path: ['tokens', 'foo'], - value: '5px', - type: 'spacing' + name: "tokens-foo", + path: ["tokens", "foo"], + value: "5px", + type: "spacing", }, ref: { original: { - value: '{tokens.foo}', - type: 'spacing' + value: "{tokens.foo}", + type: "spacing", }, attributes: { category: 'tokens', @@ -53,22 +53,22 @@ const transformedDictionary = createDictionary({ tokens: { foo: { original: { - value: '5px', - type: 'spacing' + value: "5px", + type: "spacing", }, attributes: { - category: 'tokens', - type: 'foo' + category: "tokens", + type: "foo", }, - name: 'tokens-foo', - path: ['tokens', 'foo'], - value: '5px', - type: 'spacing' + name: "tokens-foo", + path: ["tokens", "foo"], + value: "5px", + type: "spacing", }, ref: { original: { - value: '{tokens.foo}', - type: 'spacing' + value: "{tokens.foo}", + type: "spacing", }, attributes: { category: 'tokens', @@ -79,8 +79,8 @@ const transformedDictionary = createDictionary({ value: 'changed by transitive transform', type: 'spacing' }, - } - } + }, + }, }); const numberDictionary = createDictionary({ @@ -245,4 +245,4 @@ describe('common', () => { }) }) }) -}) \ No newline at end of file +}) diff --git a/lib/common/formatHelpers/createPropertyFormatter.js b/lib/common/formatHelpers/createPropertyFormatter.js index 4042088b9..fe7e40633 100644 --- a/lib/common/formatHelpers/createPropertyFormatter.js +++ b/lib/common/formatHelpers/createPropertyFormatter.js @@ -31,10 +31,11 @@ const defaultFormatting = { function addComment(to_ret_prop, options) { const { comment, style, indentation } = options; + const [commentStyle,placeAbove] = style.split('-above'); const commentsByNewLine = comment.split("\n"); const hasNewLines = commentsByNewLine.length > 1; - const commentCase = `${style}${hasNewLines ? '-new-lines' :''}`; + const commentCase = `${commentStyle}${hasNewLines ? '-new-lines' :''}`; let processed; switch(commentCase) { @@ -49,19 +50,21 @@ function addComment(to_ret_prop, options) { (acc, curr) => `${acc}${indentation}// ${curr}\n`, '' ); + // remove trailing newline + processed = processed.replace(/\n$/g, ''); break; case 'long-new-lines': processed = commentsByNewLine.reduce( (acc, curr) => `${acc}${indentation} * ${curr}\n`, `${indentation}/**\n` ); - processed += `${indentation} */\n`; + processed += `${indentation} */`; break; } - if (hasNewLines) { - // put the comment above the prop if it's multi-line - to_ret_prop = `${processed}${to_ret_prop}`; + if (hasNewLines || placeAbove !== undefined) { + // put the comment above the prop if it's multi-line or if commentStyle ended with -above + to_ret_prop = `${processed}\n${to_ret_prop}`; } else { to_ret_prop = `${to_ret_prop} ${processed}`; } @@ -107,33 +110,34 @@ function createPropertyFormatter({ formatting = {}, themeable = false }) { - let {prefix, commentStyle, indentation, separator, suffix} = Object.assign({}, defaultFormatting, formatting); - + const formatDefaults = {}; switch(format) { case 'css': - prefix = '--'; - indentation = ' '; - separator = ':'; + formatDefaults.prefix = '--'; + formatDefaults.indentation = ' '; + formatDefaults.separator = ':'; break; case 'sass': - prefix = '$'; - commentStyle = 'short'; - indentation = ''; - separator = ':'; + formatDefaults.prefix = '$'; + formatDefaults.commentStyle = 'short'; + formatDefaults.indentation = ''; + formatDefaults.separator = ':'; break; case 'less': - prefix = '@'; - commentStyle = 'short'; - indentation = ''; - separator = ':'; + formatDefaults.prefix = '@'; + formatDefaults.commentStyle = 'short'; + formatDefaults.indentation = ''; + formatDefaults.separator = ':'; break; case 'stylus': - prefix = '$'; - commentStyle = 'short'; - indentation = ''; - separator = '='; + formatDefaults.prefix = '$'; + formatDefaults.commentStyle = 'short'; + formatDefaults.indentation = ''; + formatDefaults.separator = '='; break; } + let {prefix, commentStyle, indentation, separator, suffix} = Object.assign({}, defaultFormatting, formatDefaults, formatting); + return function(prop) { let to_ret_prop = `${indentation}${prefix}${prop.name}${separator} `;