-
Notifications
You must be signed in to change notification settings - Fork 1
feat: Add helpers and parser #67
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: feat/ios/build-tokens
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { AUTO_GENERATED_FILE_HEADER } from '../../constants/auto-generated-file-header.ts'; | ||
|
|
||
| export const VARIABLE_PREFIX = 'esds'; | ||
|
|
||
| export const T1_DIRECTORY_NAME = 't1-primitive'; | ||
| export const T2_DIRECTORY_NAME = 't2-semantic'; | ||
| export const T3_DIRECTORY_NAME = 't3-component'; | ||
|
Comment on lines
+5
to
+7
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit: these constants are already defined in |
||
|
|
||
| export const DESIGN_TOKEN_TIERS = [T1_DIRECTORY_NAME, T2_DIRECTORY_NAME, T3_DIRECTORY_NAME]; | ||
|
|
||
| export const AUTOGENERATED_SWIFT_HEADER = ['//', `// ${AUTO_GENERATED_FILE_HEADER}`, '//']; | ||
|
|
||
| export function segmentKebabCase(segment: string): string { | ||
| return ( | ||
| segment | ||
| // replace white-spaces with single dash | ||
| .replace(/\s+/g, '-') | ||
| // convert camelCase/PascalCase to dash-case | ||
| .replace( | ||
| /[A-Z]/g, | ||
| (letter: string, offset: number): string => | ||
| `${offset > 0 ? '-' : ''}${letter.toLowerCase()}`, | ||
| ) | ||
| // remove starting and ending dashes | ||
| .replace(/^-+|-+$/g, '') | ||
| // remove consecutive dashes | ||
| .replace(/--+/g, '-') | ||
| // remove all non-alphanumeric or dash characters | ||
| .replace(/[^a-z0-9-]/g, '') | ||
| ); | ||
| } | ||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,23 @@ | ||||||
| /** | ||||||
| * Custom parser that moves root-level $type into each top-level group. | ||||||
| * This prevents SD5's merge from losing per-file $type when multiple | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Question: what does
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Style Dictionary 5
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| * source files define different $type at their root level. | ||||||
| */ | ||||||
| export const fixTypeInheritanceParser = { | ||||||
| name: 'esds/fix-type-inheritance', | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Question: should |
||||||
| pattern: /\.tokens\.json$/, | ||||||
| parser: ({ contents }: { filePath: string; contents: string }) => { | ||||||
| const data = JSON.parse(contents); | ||||||
| const rootType = data['$type']; | ||||||
| if (rootType) { | ||||||
| delete data['$type']; | ||||||
| for (const [key, val] of Object.entries(data)) { | ||||||
| if (key.startsWith('$')) continue; | ||||||
| if (val && typeof val === 'object' && !(val as any)['$type']) { | ||||||
| (val as any)['$type'] = rootType; | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
| return data; | ||||||
| }, | ||||||
| }; | ||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import type { Transform, TransformedToken } from 'style-dictionary/types'; | ||
| import { segmentKebabCase } from './helpers.ts'; | ||
|
|
||
| /** | ||
| * Name transform that replicates the exact naming logic from the custom DTCG framework. | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Question: how is DTCG custom? It should be a standard, no? Do you mean "custom parser" ?
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not, it's not a parser, it's for the output. |
||
| */ | ||
| export const nameTransform: Transform = { | ||
| name: 'esds/name', | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Question: should
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think you're right! |
||
| type: 'name', | ||
| transform: (token: TransformedToken): string => { | ||
| return token.path | ||
| .map(segmentKebabCase) | ||
| .filter((s: string) => s !== '' && s !== '-') | ||
| .join('-'); | ||
| }, | ||
| }; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: could we re-use or defined this constant in the same folder as
CSS_VARIABLE_PREFIX, seepackages/tokens/scripts/scripts/build-tokens/src/constants/css-variable-prefix.ts