amzn / style-dictionary

A build system for creating cross-platform styles.
https://styledictionary.com
Apache License 2.0
3.87k stars 543 forks source link

Swift literals are wrapped in quotes twice #936

Open zackphilipps opened 1 year ago

zackphilipps commented 1 year ago

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""
}
zackphilipps commented 1 year ago

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"
],
zackphilipps commented 1 year ago

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, "'")}"`;
    },
});