style-dictionary
style-dictionary copied to clipboard
Add options.outputStringLiterals to typescript/es6-declarations
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.
Hi!
Thanks in advance to repo maintainers. Would it be help to create an issue to discuss?
@dbanksdesign Would you be able to create a release which includes this commit?