style-dictionary icon indicating copy to clipboard operation
style-dictionary copied to clipboard

Add options.outputStringLiterals to typescript/es6-declarations

Open isaac-y-baron opened this issue 2 years ago • 1 comments

Issue #, if available: N/A

Description of changes: Problem: Currently, the typescript/es6-declarations format assigns string tokens the type string. As a result, tokens are un-assignable to stricter types, such as string literal unions, without type assertion. The assignment of type string to tokens with string values does not align with Typescript's built-in type inference, which assigns string-literal types to string variables.

Solution: Add feature flag options.outputStringLiterals to the typescript/es6-declarations format's interface. If this boolean option is set to true, tokens with string values will be assigned string-literal types in the outputted files.

Example (current):

// tokens/config.js (incomplete style-dictionary config)
module.exports = {
  platforms: {
    js: {
      files: [
        {
          destination: "globals.d.ts",
          format: "typescript/es6-declarations",
        },
      ],
    },
  },
}

// tokens/dist/myComponent.js
module.exports = {
  myComponentSize: "small"
}

// tokens/dist/myComponent.d.ts
export const myComponentSize : string;

// myComponent.ts
import { myComponentSize } from "tokens"

interface MyComponentOptions {
  size: "small" | "medium" | "large";  
}

const options: MyComponentOptions = {
  size: myComponentSize   // TS Error: Type 'string' is not assignable to type '"small" | "medium" | "large"'
}

Example with suggested change:

// tokens/config.js (incomplete style-dictionary config)
module.exports = {
  platforms: {
    js: {
      files: [
        {
          destination: "globals.d.ts",
          format: "typescript/es6-declarations",
          options: {
            outputStringLiterals: true,
          },
        },
      ],
    },
  },
}

// tokens/dist/myComponent.js
module.exports = {
  myComponentSize: "small"
}

// tokens/dist/myComponent.d.ts
export const myComponentSize : "small";   // type has been updated from string to "small"

// myComponent.ts
import { myComponentSize } from "tokens"

interface MyComponentOptions {
  size: "small" | "medium" | "large";  
}

const options: MyComponentOptions = {
  size: myComponentSize   // No error!
}

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

isaac-y-baron avatar Aug 30 '22 00:08 isaac-y-baron

Hi!

Thanks in advance to repo maintainers. Would it be help to create an issue to discuss?

isaac-y-baron avatar Aug 30 '22 00:08 isaac-y-baron

@dbanksdesign Would you be able to create a release which includes this commit?

christianvuerings avatar Mar 15 '23 22:03 christianvuerings