style-dictionary
style-dictionary copied to clipboard
Swift literals are wrapped in quotes twice
Given the following config:
const config = {
platforms: {
"ios-swift": {
transformGroup: "ios-swift",
buildPath: "dist/ios-swift/",
files: [
{
destination: "Assets.swift",
format: "ios-swift/enum.swift",
className: "Assets",
filter: (token) => {
return token.attributes.category === "asset";
},
options: {
outputReferences: true,
showFileHeader: false,
},
},
],
},
},
};
I'm seeing this output:
//
// Assets.swift
//
import UIKit
public enum Assets {
public static let assetFontBoldWeight = ""800 900""
public static let assetFontBoldStyle = ""normal""
public static let assetFontBoldFileName = ""FontWeb-Bold.woff2""
public static let assetFontBoldName = ""FontWeb""
public static let assetFontMediumWeight = ""600 700""
public static let assetFontMediumStyle = ""normal""
public static let assetFontMediumFileName = ""FontWeb-Medium.woff2""
public static let assetFontMediumName = ""FontWeb""
public static let assetFontWeight = ""400 500""
public static let assetFontStyle = ""normal""
public static let assetFontFileName = ""FontWeb-Regular.woff2""
public static let assetFontName = ""FontWeb""
public static let assetLogoAltWhite = ""assets/logos/logo-alt-white.svg""
public static let assetLogoAltGreen = ""assets/logos/logo-alt-green.svg""
public static let assetLogoWhite = ""assets/logos/logo-white.svg""
public static let assetLogoGreen = ""assets/logos/logo-green.svg""
}
This line is the culprit: https://github.com/amzn/style-dictionary/blob/6182d63765b86b19a83d27eeee227d5b0b9ea4ee/lib/common/formatHelpers/createPropertyFormatter.js#L131
So, it appears that the asset/swift/literal transform is not necessary. A workaround is replacing transformGroup: "ios-swift", with this:
transforms: [
"attribute/cti",
"name/cti/camel",
"color/UIColorSwift",
"content/swift/literal",
"size/swift/remToCGFloat",
"font/swift/literal"
],
Closing the loop here, I still needed a transform to wrap all strings in ", some of which didn't fall within asset, content, or font categories. Here's what I wrote; maybe someone else will find it useful.
StyleDictionary.registerTransform({
name: "value/swift/literal",
type: "value",
matcher: function (token) {
return (
!["color", "size", "asset"].includes(token.attributes.category) &&
typeof token.value === "string"
);
},
transformer: function (token) {
return `"${String(token.original.value).replace(/"/g, "'")}"`;
},
});