Skip to content

Commit ee85609

Browse files
jcfrancojcfranco
authored
fix(formats): fix misaligned comments in typescript/es6-declarations (#1473)
* fix(formats): fix misaligned comments in typescript/es6-declarations * chore: revert barrel-file import * test: remove unrelated test snapshot from initial approach * feat: allow typescript/es6-declarations formatting overrides
1 parent 31c29df commit ee85609

File tree

9 files changed

+47
-23
lines changed

9 files changed

+47
-23
lines changed

‎.changeset/olive-lions-admire.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'style-dictionary': patch
3+
---
4+
5+
fix misaligned comments in typescript/es6-declarations

‎__integration__/__snapshots__/w3c-forward-compat.test.snap.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ snapshots["integration DTCG draft spec forward compatibility should match snapsh
88
99
:root {
1010
--colors-black-500: rgb(0, 0, 0);
11-
--colors-black-dimension: 5px; /* Some description */
11+
--colors-black-dimension: 5px; /** Some description */
1212
--colors-foo: rgb(0, 0, 0);
1313
}
1414
`;

‎__tests__/common/formatHelpers/__snapshots__/createPropertyFormatter.test.snap.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* @web/test-runner snapshot v1 */
22
export const snapshots = {};
33
snapshots["common formatHelpers createPropertyFormatter commentStyle should default to putting comment next to the output value 1"] =
4-
` --color-red: #FF0000; /* Foo bar qux */`;
4+
` --color-red: #FF0000; /** Foo bar qux */`;
55
/* end snapshot common formatHelpers createPropertyFormatter commentStyle should default to putting comment next to the output value 1 */
66

77
snapshots["common formatHelpers createPropertyFormatter commentStyle should default to putting comment next to the output value 2"] =
@@ -25,7 +25,7 @@ $color-blue: #0000FF;`;
2525
/* end snapshot common formatHelpers createPropertyFormatter commentStyle should default to putting comment next to the output value 4 */
2626

2727
snapshots["common formatHelpers createPropertyFormatter commentStyle allows overriding formatting commentStyle 1"] =
28-
` /* Foo bar qux */
28+
` /** Foo bar qux */
2929
--color-green: #00FF00;`;
3030
/* end snapshot common formatHelpers createPropertyFormatter commentStyle allows overriding formatting commentStyle 1 */
3131

@@ -53,11 +53,11 @@ snapshots["common formatHelpers createPropertyFormatter commentStyle supports DT
5353
/* end snapshot common formatHelpers createPropertyFormatter commentStyle supports DTCG spec $description property for comments 3 */
5454

5555
snapshots["common formatHelpers createPropertyFormatter DTCG supports DTCG spec $description property for comments 1"] =
56-
` --color-red: #FF0000; /* Foo bar qux red */`;
56+
` --color-red: #FF0000; /** Foo bar qux red */`;
5757
/* end snapshot common formatHelpers createPropertyFormatter DTCG supports DTCG spec $description property for comments 1 */
5858

5959
snapshots["common formatHelpers createPropertyFormatter DTCG supports DTCG spec $description property for comments 2"] =
60-
` --color-green: #00FF00; /* Foo bar qux green */`;
60+
` --color-green: #00FF00; /** Foo bar qux green */`;
6161
/* end snapshot common formatHelpers createPropertyFormatter DTCG supports DTCG spec $description property for comments 2 */
6262

6363
snapshots["common formatHelpers createPropertyFormatter DTCG supports DTCG spec $description property for comments 3"] =

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ snapshots["formats all should match css/variables snapshot"] =
77
*/
88
99
:root {
10-
--color_red: #FF0000; /* comment */
10+
--color_red: #FF0000; /** comment */
1111
}
1212
`;
1313
/* end snapshot formats all should match css/variables snapshot */
@@ -19,7 +19,7 @@ snapshots["formats all should match css/variables snapshot with fileHeaderTimest
1919
*/
2020
2121
:root {
22-
--color_red: #FF0000; /* comment */
22+
--color_red: #FF0000; /** comment */
2323
}
2424
`;
2525
/* end snapshot formats all should match css/variables snapshot with fileHeaderTimestamp set */
@@ -1170,7 +1170,7 @@ snapshots["formats all should match ios-swift/class.swift snapshot"] =
11701170
import UIKit
11711171
11721172
public class {
1173-
public static let color_red = #FF0000 /* comment */
1173+
public static let color_red = #FF0000 /** comment */
11741174
}`;
11751175
/* end snapshot formats all should match ios-swift/class.swift snapshot */
11761176

@@ -1187,7 +1187,7 @@ snapshots["formats all should match ios-swift/class.swift snapshot with fileHead
11871187
import UIKit
11881188
11891189
public class {
1190-
public static let color_red = #FF0000 /* comment */
1190+
public static let color_red = #FF0000 /** comment */
11911191
}`;
11921192
/* end snapshot formats all should match ios-swift/class.swift snapshot with fileHeaderTimestamp set */
11931193

@@ -1203,7 +1203,7 @@ snapshots["formats all should match ios-swift/enum.swift snapshot"] =
12031203
import UIKit
12041204
12051205
public enum {
1206-
public static let color_red = #FF0000 /* comment */
1206+
public static let color_red = #FF0000 /** comment */
12071207
}`;
12081208
/* end snapshot formats all should match ios-swift/enum.swift snapshot */
12091209

@@ -1220,7 +1220,7 @@ snapshots["formats all should match ios-swift/enum.swift snapshot with fileHeade
12201220
import UIKit
12211221
12221222
public enum {
1223-
public static let color_red = #FF0000 /* comment */
1223+
public static let color_red = #FF0000 /** comment */
12241224
}`;
12251225
/* end snapshot formats all should match ios-swift/enum.swift snapshot with fileHeaderTimestamp set */
12261226

@@ -1236,7 +1236,7 @@ snapshots["formats all should match ios-swift/any.swift snapshot"] =
12361236
import UIKit
12371237
12381238
public class {
1239-
public static let color_red = #FF0000 /* comment */
1239+
public static let color_red = #FF0000 /** comment */
12401240
}`;
12411241
/* end snapshot formats all should match ios-swift/any.swift snapshot */
12421242

@@ -1253,7 +1253,7 @@ snapshots["formats all should match ios-swift/any.swift snapshot with fileHeader
12531253
import UIKit
12541254
12551255
public class {
1256-
public static let color_red = #FF0000 /* comment */
1256+
public static let color_red = #FF0000 /** comment */
12571257
}`;
12581258
/* end snapshot formats all should match ios-swift/any.swift snapshot with fileHeaderTimestamp set */
12591259

@@ -1424,7 +1424,7 @@ import 'dart:ui';
14241424
class {
14251425
._();
14261426
1427-
static const color_red = #FF0000; /* comment */
1427+
static const color_red = #FF0000; /** comment */
14281428
}`;
14291429
/* end snapshot formats all should match flutter/class.dart snapshot */
14301430

@@ -1444,7 +1444,7 @@ import 'dart:ui';
14441444
class {
14451445
._();
14461446
1447-
static const color_red = #FF0000; /* comment */
1447+
static const color_red = #FF0000; /** comment */
14481448
}`;
14491449
/* end snapshot formats all should match flutter/class.dart snapshot with fileHeaderTimestamp set */
14501450

‎__tests__/formats/__snapshots__/scssMaps.test.snap.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ snapshots["should respect formatting options for scss/map-flat"] =
6161
$tokens: (
6262
'size-font-small': 12rem,
6363
'size-font-large': 18rem,
64-
/* comment */
64+
/** comment */
6565
'color-base-red': #ff0000,
6666
'color-white': #ffffff,
6767
'asset-icon-book': url("data:image/png;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItYm9vayI+PHBhdGggZD0iTTQgMTkuNUEyLjUgMi41IDAgMCAxIDYuNSAxN0gyMCI+PC9wYXRoPjxwYXRoIGQ9Ik02LjUgMkgyMHYyMEg2LjVBMi41IDIuNSAwIDAgMSA0IDE5LjV2LTE1QTIuNSAyLjUgMCAwIDEgNi41IDJ6Ij48L3BhdGg+PC9zdmc+")
@@ -77,7 +77,7 @@ snapshots["should respect formatting options for scss/map-deep"] =
7777
7878
$size-font-small: 12rem !default;
7979
$size-font-large: 18rem !default;
80-
/* comment */
80+
/** comment */
8181
$color-base-red: #ff0000 !default;
8282
$color-white: #ffffff !default;
8383
$asset-icon-book: url("data:image/png;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItYm9vayI+PHBhdGggZD0iTTQgMTkuNUEyLjUgMi41IDAgMCAxIDYuNSAxN0gyMCI+PC9wYXRoPjxwYXRoIGQ9Ik02LjUgMkgyMHYyMEg2LjVBMi41IDIuNSAwIDAgMSA0IDE5LjV2LTE1QTIuNSAyLjUgMCAwIDEgNi41IDJ6Ij48L3BhdGg+PC9zdmc+") !default;

‎__tests__/formats/__snapshots__/typeScriptEs6Declarations.test.snap.js

+4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ snapshots["formats typescript/es6-declarations with outputStringLiterals should
66
* Do not edit directly, this file was auto-generated.
77
*/
88
9+
export const colorBlue: "#0000FF";
910
/** Used for errors */
1011
export const colorRed: "#FF0000";
1112
export const fontFamily: '"Source Sans Pro", Arial, sans-serif';
@@ -17,6 +18,7 @@ snapshots["formats typescript/es6-declarations without outputStringLiterals shou
1718
* Do not edit directly, this file was auto-generated.
1819
*/
1920
21+
export const colorBlue: string;
2022
/** Used for errors */
2123
export const colorRed: string;
2224
export const fontFamily: string;
@@ -28,6 +30,7 @@ snapshots["formats typescript/es6-declarations with DTCG tokens and outputString
2830
* Do not edit directly, this file was auto-generated.
2931
*/
3032
33+
export const colorBlue: "#0000FF";
3134
/** Used for errors */
3235
export const colorRed: "#FF0000";
3336
export const fontFamily: '"Source Sans Pro", Arial, sans-serif';
@@ -39,6 +42,7 @@ snapshots["formats typescript/es6-declarations with DTCG tokens and without outp
3942
* Do not edit directly, this file was auto-generated.
4043
*/
4144
45+
export const colorBlue: string;
4246
/** Used for errors */
4347
export const colorRed: string;
4448
export const fontFamily: string;

‎__tests__/formats/typeScriptEs6Declarations.test.js

+9
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ const file = {
2525

2626
const tokens = {
2727
color: {
28+
blue: {
29+
name: 'colorBlue',
30+
value: '#0000FF',
31+
},
2832
red: {
2933
comment: 'Used for errors',
3034
name: 'colorRed',
@@ -41,6 +45,11 @@ const tokens = {
4145

4246
const DTCGTokens = {
4347
color: {
48+
blue: {
49+
$type: 'color',
50+
$value: '#0000FF',
51+
name: 'colorBlue',
52+
},
4453
red: {
4554
$description: 'Used for errors',
4655
$type: 'color',

‎lib/common/formatHelpers/createPropertyFormatter.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export function addComment(to_ret_token, comment, options) {
7676
);
7777
processedComment += `${indentation} */`;
7878
} else {
79-
processedComment = `${commentPosition === above ? indentation : ''}/* ${comment} */`;
79+
processedComment = `${commentPosition === above ? indentation : ''}/** ${comment} */`;
8080
}
8181
break;
8282
}

‎lib/common/formats.js

+11-5
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ import scssMapFlatTemplate from './templates/scss/map-flat.template.js';
5353
import macrosTemplate from './templates/ios/macros.template.js';
5454
import plistTemplate from './templates/ios/plist.template.js';
5555
import {
56+
commentPositions,
5657
commentStyles,
5758
fileHeaderCommentStyles,
5859
formats as fileFormats,
@@ -72,6 +73,7 @@ import { addComment } from './formatHelpers/createPropertyFormatter.js';
7273
* @typedef {import('../utils/stripMeta.js').StripMetaOptions} StripMetaOptions
7374
*/
7475

76+
const { above } = commentPositions;
7577
const { none } = commentStyles;
7678
const { long, short, xml } = fileHeaderCommentStyles;
7779
const { css, sass, less, stylus } = propertyFormatNames;
@@ -746,15 +748,19 @@ const formats = {
746748
options,
747749
);
748750
const comment = options.usesDtcg ? token.$description : token.comment;
751+
const to_ret = `export const ${token.name} : ${typescriptType};`;
752+
const format = {
753+
commentPosition: above,
754+
commentStyle: long,
755+
indentation: '',
756+
...formatting,
757+
};
749758

750-
return [
751-
`${comment ? `/** ${comment} */` : ''}`,
752-
`export const ${token.name} : ${typescriptType};`,
753-
].join('\n');
759+
return comment ? addComment(to_ret, comment, format) : to_ret;
754760
}),
755761
]
756762
.flat()
757-
.join('');
763+
.join('\n');
758764
return formatJS(content, true);
759765
},
760766

0 commit comments

Comments
 (0)