Skip to content

Commit f3c91f3

Browse files
lukasoppermannlukasoppermann
committed
bugfix for originalTransformer
1 parent 323841c commit f3c91f3

File tree

7 files changed

+149
-72
lines changed

7 files changed

+149
-72
lines changed

‎dist/plugin.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ui.html

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎dist/ui.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/extractor/extractFonts.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ const textCases = {
1717
ORIGINAL: 'none',
1818
UPPER: 'uppercase',
1919
LOWER: 'lowercase',
20-
TITLE: 'capitalize'
20+
TITLE: 'capitalize',
21+
SMALL_CAPS: 'small-caps'
2122
}
2223

2324
const fontWeights = {
@@ -149,7 +150,7 @@ const extractFonts: extractorInterface = (tokenNodes: TextStyle[], prefixArray:
149150
type: 'number' as PropertyType
150151
},
151152
textCase: {
152-
value: textCases[node.textCase] as TextCase,
153+
value: textCases[node.textCase] as TextCase || 'none' as TextCase,
153154
type: 'string' as PropertyType
154155
}
155156
},

‎src/transformer/originalFormatTransformer.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ const valueTransformer: {} | undefined = {
170170
}
171171

172172
const transformer = (token: internalTokenInterface, _settings): OriginalFormatTokenInterface => {
173+
if (token.extensions[config.key.extensionPluginData].exportKey === 'variables') return null
173174
return {
174175
name: token.name,
175176
category: token.category,

‎src/ui/components/GeneralSettings.tsx

Lines changed: 139 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -70,147 +70,222 @@ export const GeneralSettings = () => {
7070

7171
return (
7272
<form className={style} onSubmit={handleFormSubmit}>
73-
<Title size='xlarge' weight='bold'>Design Token Settings</Title>
73+
<Title size="xlarge" weight="bold">
74+
Design Token Settings
75+
</Title>
7476
<Row>
7577
<Checkbox
76-
label='Add token type to name of the token'
77-
type='switch'
78+
label="Add token type to name of the token"
79+
type="switch"
7880
checked={settings.keyInName}
79-
onChange={value => updateSettings(draft => { draft.keyInName = value })}
81+
onChange={(value) =>
82+
updateSettings((draft) => {
83+
draft.keyInName = value;
84+
})
85+
}
86+
/>
87+
<Info
88+
width={240}
89+
label='The token type (e.g. "color" or "font") will be added to the name e.g. "color/light/bg".'
8090
/>
81-
<Info width={240} label='The token type (e.g. "color" or "font") will be added to the name e.g. "color/light/bg".' />
8291
</Row>
83-
<Title size='small' weight='bold'>
92+
<Title size="small" weight="bold">
8493
Filename
85-
<Info width={160} label='The file name used when exporting the tokens' />
94+
<Info
95+
width={160}
96+
label="The file name used when exporting the tokens"
97+
/>
8698
</Title>
87-
<div className='grid-2-col'>
99+
<div className="grid-2-col">
88100
<Input
89-
type='text'
101+
type="text"
90102
required
91-
pattern='^[\w\d\s\[\]._-]+$'
103+
pattern="^[\w\d\s\[\]._\-]+$"
92104
placeholder={figmaMetaData.filename}
93105
value={settings.filename}
94-
onChange={value => updateSettings((draft: Settings) => { draft.filename = value })}
106+
onChange={(value) =>
107+
updateSettings((draft: Settings) => {
108+
draft.filename = value;
109+
})
110+
}
95111
/>
96112
<Select
97113
defaultValue={settings.extension}
98-
onChange={({ value }) => updateSettings((draft: Settings) => { draft.extension = value as string })}
99-
placeholder='file extension'
114+
onChange={({ value }) =>
115+
updateSettings((draft: Settings) => {
116+
draft.extension = value as string;
117+
})
118+
}
119+
placeholder="file extension"
100120
options={config.fileExtensions}
101121
/>
102122
</div>
103123
<Separator />
104-
<div className='grid-2-col'>
124+
<div className="grid-2-col">
105125
<div>
106-
<Title size='small' weight='bold'>Name conversion</Title>
126+
<Title size="small" weight="bold">
127+
Name conversion
128+
</Title>
107129
<Select
108130
defaultValue={settings.nameConversion}
109-
onChange={({ value }) => updateSettings((draft: Settings) => { draft.nameConversion = value as nameConversionType })}
110-
placeholder='Name conversion'
131+
onChange={({ value }) =>
132+
updateSettings((draft: Settings) => {
133+
draft.nameConversion = value as nameConversionType;
134+
})
135+
}
136+
placeholder="Name conversion"
111137
options={[
112138
{
113-
label: 'Default',
114-
value: 'default'
139+
label: "Default",
140+
value: "default",
115141
},
116142
{
117-
label: 'camelCase',
118-
value: 'camelCase'
143+
label: "camelCase",
144+
value: "camelCase",
119145
},
120146
{
121-
label: 'kebab-case',
122-
value: 'kebabCase'
123-
}
147+
label: "kebab-case",
148+
value: "kebabCase",
149+
},
124150
]}
125151
/>
126152
</div>
127153
<div>
128-
<Title size='small' weight='bold'>Token format<Info width={240} label='The structure of the output json file. Learn more in the docs.' /></Title>
154+
<Title size="small" weight="bold">
155+
Token format
156+
<Info
157+
width={240}
158+
label="The structure of the output json file. Learn more in the docs."
159+
/>
160+
</Title>
129161
<Select
130162
defaultValue={settings.tokenFormat}
131163
onChange={({ value }) => {
132-
updateSettings((draft: Settings) => { draft.tokenFormat = value as tokenFormatType })
133-
setStandard(value === 'standard')
164+
updateSettings((draft: Settings) => {
165+
draft.tokenFormat = value as tokenFormatType;
166+
});
167+
setStandard(value === "standard");
134168
}}
135-
placeholder='Token format'
169+
placeholder="Token format"
136170
options={[
137171
{
138-
label: 'Standard (W3C draft)',
139-
value: 'standard'
172+
label: "Standard (W3C draft)",
173+
value: "standard",
140174
},
141175
{
142-
label: 'Original (deprecated)',
143-
value: 'original'
144-
}
176+
label: "Original (deprecated)",
177+
value: "original",
178+
},
145179
]}
146180
/>
147181
</div>
148182
</div>
149183
<Separator />
150-
<div className='grid-2-col'>
184+
<div className="grid-2-col">
151185
<div>
152-
<Title size='small' weight='bold'>Exclusion prefix <Info width={240} label='Styles & tokens with this prefix will be ignored when exporting. ("." and "_" work by default)' /></Title>
186+
<Title size="small" weight="bold">
187+
Exclusion prefix{" "}
188+
<Info
189+
width={240}
190+
label='Styles & tokens with this prefix will be ignored when exporting. ("." and "_" work by default)'
191+
/>
192+
</Title>
153193
<Input
154-
type='text'
155-
pattern='^[#\+*\\/&%$!?;:~,\s]+$'
156-
placeholder='#, @'
194+
type="text"
195+
pattern="^[#\+*\\/&%$!?;:~,\s]+$"
196+
placeholder="#, @"
157197
value={settings.exclusionPrefix}
158-
onChange={value => updateSettings((draft: Settings) => { draft.exclusionPrefix = value })}
198+
onChange={(value) =>
199+
updateSettings((draft: Settings) => {
200+
draft.exclusionPrefix = value;
201+
})
202+
}
159203
/>
160204
</div>
161205
{isStandard && (
162206
<div>
163-
<Title size='small' weight='bold'>Alias identifier <Info width={180} label='Use to define an alias for a token; case insensitive' /></Title>
207+
<Title size="small" weight="bold">
208+
Alias identifier{" "}
209+
<Info
210+
width={180}
211+
label="Use to define an alias for a token; case insensitive"
212+
/>
213+
</Title>
164214
<Input
165-
type='text'
166-
pattern='^[A-Za-z,\s]+$'
167-
placeholder='alias, ref, reference'
215+
type="text"
216+
pattern="^[A-Za-z,\s]+$"
217+
placeholder="alias, ref, reference"
168218
value={settings.alias}
169-
onChange={value => updateSettings((draft: Settings) => { draft.alias = value })}
219+
onChange={(value) =>
220+
updateSettings((draft: Settings) => {
221+
draft.alias = value;
222+
})
223+
}
170224
/>
171225
</div>
172226
)}
173227
</div>
174228
<Separator />
175-
<Title size='small' weight='bold'>Token prefixes <Info width={150} label='Use commas to separate multiple prefixed' /></Title>
176-
<Text className={textStyle} size='small'>
177-
Prefixes are the first part of a tokens name e.g. "radius" in "radius/small". They are used to identify the type of a custom token.
229+
<Title size="small" weight="bold">
230+
Token prefixes{" "}
231+
<Info width={150} label="Use commas to separate multiple prefixed" />
232+
</Title>
233+
<Text className={textStyle} size="small">
234+
Prefixes are the first part of a tokens name e.g. "radius" in
235+
"radius/small". They are used to identify the type of a custom token.
178236
</Text>
179237
<Row>
180238
<Checkbox
181-
label='Include token prefix in token names'
182-
type='switch'
239+
label="Include token prefix in token names"
240+
type="switch"
183241
checked={settings.prefixInName}
184-
onChange={(value) => updateSettings(draft => { draft.prefixInName = value })}
242+
onChange={(value) =>
243+
updateSettings((draft) => {
244+
draft.prefixInName = value;
245+
})
246+
}
247+
/>
248+
<Info
249+
width={240}
250+
label='When disabled the prefix is removed ("radius/small" → "small"), when enabled it is added ("radius/small" → "radius/small").'
185251
/>
186-
<Info width={240} label='When disabled the prefix is removed ("radius/small" → "small"), when enabled it is added ("radius/small" → "radius/small").' />
187252
</Row>
188253
<Separator />
189-
<div className='grid-2-col'>
190-
{Object.entries(settings.prefix).map(([key, currentValue]) =>
254+
<div className="grid-2-col">
255+
{Object.entries(settings.prefix).map(([key, currentValue]) => (
191256
<Row fill key={key}>
192-
<Label
193-
className={`${labelStyle} flex-grow--none`}
194-
>{key}
195-
{isStyle(key) ? <Info width={90} label='Prefix for style' /> : ''}
257+
<Label className={`${labelStyle} flex-grow--none`}>
258+
{key}
259+
{isStyle(key) ? <Info width={90} label="Prefix for style" /> : ""}
196260
</Label>
197261
<Input
198-
type='text'
262+
type="text"
199263
// eslint-disable-next-line
200-
pattern={isStyle(key) ? '^[\\w\\-@]+$' : '^[\\w\\-@,\\s]+$'}
264+
pattern={isStyle(key) ? "^[\\w\\-@]+$" : "^[\\w\\-@,\\s]+$"}
201265
required
202266
placeholder={key}
203267
value={currentValue}
204-
onChange={value => updateSettings((draft: Settings) => { draft.prefix[key] = value })}
268+
onChange={(value) =>
269+
updateSettings((draft: Settings) => {
270+
draft.prefix[key] = value;
271+
})
272+
}
205273
/>
206274
</Row>
207-
)}
275+
))}
208276
</div>
209277
<Footer>
210-
<WebLink align='start' href='https://github.com/lukasoppermann/design-tokens#design-tokens'>Documentation</WebLink>
278+
<WebLink
279+
align="start"
280+
href="https://github.com/lukasoppermann/design-tokens#design-tokens"
281+
>
282+
Documentation
283+
</WebLink>
211284
<CancelButton />
212-
<Button type='submit' autofocus>Save changes</Button>
285+
<Button type="submit" autofocus>
286+
Save changes
287+
</Button>
213288
</Footer>
214289
</form>
215-
)
290+
);
216291
}

‎src/utilities/prepareExport.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const prepareExport = (tokens: string, settings: Settings) => {
4141
// add to name
4242
const prefixedTokens = prefixTokenName(tokensFiltered, settings)
4343
// converted values
44-
const tokensConverted = prefixedTokens.map(token => tokenTransformer[settings.tokenFormat](token, settings))
44+
const tokensConverted = prefixedTokens.map(token => tokenTransformer[settings.tokenFormat](token, settings)).filter(Boolean)
4545
// group items by their names
4646
// @ts-ignore
4747
const tokensGroupedByName = groupByKeyAndName(tokensConverted, settings)

0 commit comments

Comments
 (0)