diff --git a/scripts/legacy-tokeniser.ts b/scripts/legacy-tokeniser.ts index 4bb1fb3a0..7185958f3 100644 --- a/scripts/legacy-tokeniser.ts +++ b/scripts/legacy-tokeniser.ts @@ -1,27 +1,118 @@ import {resolve} from 'path' -import {Project, ScriptTarget, SyntaxKind, Node} from 'ts-morph' +import {Project, ScriptTarget, SyntaxKind} from 'ts-morph' +import fallbacks from '../src/tokens/fallback/color-fallbacks.json' + +type FallbackMap = Record +const getNewVariable = (oldVariable: string) => { + return Object.keys(fallbacks as FallbackMap).find(newVariable => { + return (fallbacks as FallbackMap)[newVariable] === `var(${oldVariable})` + }) +} const project = new Project({compilerOptions: {target: ScriptTarget.ES3}}) project.addSourceFilesAtPaths(resolve('./data/colors/vars/global_light.ts')) -project.getSourceFiles().forEach(sourceFile => { +project.getSourceFiles().map(sourceFile => { + /** + * export default { } + * ↑ first object expression + */ const exportedObject = sourceFile.getDescendantsOfKind(SyntaxKind.ObjectLiteralExpression)[0] - const propertyAssignments = exportedObject.getChildrenOfKind(SyntaxKind.PropertyAssignment) - - // fg: { - // default: (theme: any) => `var(--fgColor-default, var(--color-fg-default, ${get('scale.black')(theme)}))`, - // muted: '#656d76', - // subtle: get('scale.gray.5'), - // onEmphasis: get('scale.white') - // }, + /** + * export default { + * ↓ property assignment + * fg : { + * default : get('scale.black'), + * ↑ also property assignment + * ↓ also property assignment + * muted : '#656d76' + * }, + * canvas: { } ← property assignment + * } + */ + const propertyAssignments = exportedObject.getDescendantsOfKind(SyntaxKind.PropertyAssignment) + let prefix = '' propertyAssignments.map(propertyAssignment => { - const key = propertyAssignment.getName() - const variable = `color-${key}` + /** + * export default { + * ↓ property name + * fg: { } + * ↑ initialiser (property value) + * + * fg: { + * ↓ property name + * subtle: get('scale.gray.5'), + * ↑ initialiser (property value) + */ + + const propertyName = propertyAssignment.getName() + const propertyValue = propertyAssignment.getInitializer() + + if (!propertyValue) return // doesn't actually happen, just for completion + + /** + * propertValue can be of 4 types: ObjectLiteralExpression, StringLiteral, CallExpression, ArrowFunction + * + * fg: { }, ← ObjectLiteralExpression, we can ignore these + * primer: { + * fg: { } ← ObjectLiteralExpression, we can ignore these + * }, + * + * + * fg: { + * muted: '#656d76', ← StringLiteral, + * subtle: get('scale.gray.5'), ← CallExpression + * }, + * shadow: { + * small: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.04)(theme)}`, ← ArrowFunction + * } + * + */ + + if (propertyValue.getKind() === SyntaxKind.ObjectLiteralExpression) { + /** + * fg: { } ← ObjectLiteralExpression + * + * We can ignore these + * because the propertyAssignment inside the object would be handled + * + * We only set the prefix, so that it can be used in the children + */ + prefix = propertyName + } else if (propertyValue.getKind() === SyntaxKind.StringLiteral) { + /** + * Before: + * fg: { + * muted: '#656d76' ← StringLiteral + * } + * + * After: + * fg: { + * muted: "var(--color-fg-muted, '#656d76')" + * } + */ + + const oldValue = propertyValue.getText() + if (oldValue.startsWith(`"var(--`)) return // already replaced, skip! + + const oldVariableName = `--color-${prefix}-${propertyName}` + const newVariableName = getNewVariable(oldVariableName) + const newValue = `"var(${newVariableName}, var(${oldVariableName}, ${oldValue}))"` - const value = propertyAssignment.getInitializer() - console.log(value?.getKindName()) - // value can be of type Object (key:value), function call(get, arrow theme function) or string (hex color/variable) + propertyValue.replaceWithText(newValue) + } else if (propertyValue.getKind() === SyntaxKind.CallExpression) { + /** + * fg: { + * subtle: get('scale.gray.5'), ← CallExpression + * } + */ + // const t = { + // before: get('scale.black'), + // after: `var(--color-fg-default, ${get('scale.black')(theme)})`, + // } + } }) + sourceFile.save() })