From dc5380b3b15b4ab23b420f654e34429166a06092 Mon Sep 17 00:00:00 2001 From: Matt Chaffe Date: Tue, 28 Jan 2025 21:47:21 +0000 Subject: [PATCH] continue: cleanup --- src/github.ts | 4 +-- src/processors/border.processor.ts | 4 +-- src/transformers/css.transformer.ts | 5 +-- src/transformers/scss.transformer.ts | 10 +++--- src/utils.ts | 53 ---------------------------- src/utils/array.utils.ts | 8 +++++ src/utils/index.ts | 5 +++ src/utils/node.utils.ts | 6 ++-- src/utils/string.utils.ts | 29 +++++++++++++++ 9 files changed, 57 insertions(+), 67 deletions(-) delete mode 100644 src/utils.ts create mode 100644 src/utils/array.utils.ts create mode 100644 src/utils/index.ts create mode 100644 src/utils/string.utils.ts diff --git a/src/github.ts b/src/github.ts index 9446300..74bc6f5 100644 --- a/src/github.ts +++ b/src/github.ts @@ -1,4 +1,4 @@ -import Utils from './utils'; +import { toBase64 } from './utils/index'; export interface PRResult { prUrl: string; @@ -102,7 +102,7 @@ export default { headers, body: JSON.stringify({ message: 'Update SCSS variables from Figma', - content: Utils.toBase64(content), + content: toBase64(content), branch: branchName, ...(fileSha && { sha: fileSha }) // Include SHA if file exists }) diff --git a/src/processors/border.processor.ts b/src/processors/border.processor.ts index d36acaf..2d98419 100644 --- a/src/processors/border.processor.ts +++ b/src/processors/border.processor.ts @@ -1,5 +1,5 @@ import { StyleProcessor, ProcessedValue } from '../types'; -import Utils from '../utils'; +import { rgbaToString } from '../utils/index'; export const borderProcessors: StyleProcessor[] = [ { @@ -19,7 +19,7 @@ export const borderProcessors: StyleProcessor[] = [ if (stroke?.type === "SOLID") { const { r, g, b } = stroke.color; const a = stroke.opacity ?? 1; - const value = Utils.rgbaToString(r, g, b, a); + const value = rgbaToString(r, g, b, a); return { value, rawValue: value }; } } diff --git a/src/transformers/css.transformer.ts b/src/transformers/css.transformer.ts index 313d7c7..ea4f0ee 100644 --- a/src/transformers/css.transformer.ts +++ b/src/transformers/css.transformer.ts @@ -1,5 +1,6 @@ import { StyleToken, TokenCollection } from '../types'; -import Utils from '../utils'; +import { groupBy } from '../utils/index'; + export function transformToCss(tokens: TokenCollection): string { let output = "/* Generated CSS */"; @@ -8,7 +9,7 @@ export function transformToCss(tokens: TokenCollection): string { token.type === 'style' ); - const variantGroups = Utils.groupBy(styleTokens, t => t.path.join('_')); + const variantGroups = groupBy(styleTokens, t => t.path.join('_')); Object.entries(variantGroups).forEach(([variantPath, groupTokens]) => { if (!variantPath) return; // Remove properties with zero values and unnecessary defaults diff --git a/src/transformers/scss.transformer.ts b/src/transformers/scss.transformer.ts index 46e154c..d7f7114 100644 --- a/src/transformers/scss.transformer.ts +++ b/src/transformers/scss.transformer.ts @@ -1,5 +1,5 @@ import { TokenCollection, StyleToken } from '../types'; -import Utils from '../utils'; +import { sanitizeName, groupBy } from '../utils/index'; export function transformToScss(tokens: TokenCollection): string { let output = ""; @@ -8,7 +8,7 @@ export function transformToScss(tokens: TokenCollection): string { const colorVariables = new Map(); tokens.tokens.forEach(token => { if (token.type === 'variable') { - colorVariables.set(Utils.sanitizeName(token.name), token.rawValue); + colorVariables.set(sanitizeName(token.name), token.rawValue); } }); @@ -27,7 +27,7 @@ export function transformToScss(tokens: TokenCollection): string { if (token.type === 'style' && token.property === 'fills' && (token.rawValue.includes('gradient'))) { - const name = `gradient-${Utils.sanitizeName(token.name)}`; + const name = `gradient-${sanitizeName(token.name)}`; gradientVariables.set(name, token); } }); @@ -54,7 +54,7 @@ export function transformToScss(tokens: TokenCollection): string { token.type === 'style' ); - const variantGroups = Utils.groupBy(styleTokens, t => t.path.join('_')); + const variantGroups = groupBy(styleTokens, t => t.path.join('_')); Object.entries(variantGroups).forEach(([variantPath, groupTokens]) => { if (!variantPath) return; @@ -68,7 +68,7 @@ export function transformToScss(tokens: TokenCollection): string { if (token.property === 'fills' && token.rawValue.includes('gradient')) { // Only use CSS variables if the token has associated variables if (token.variables && token.variables.length > 0) { - const gradientName = `gradient-${Utils.sanitizeName(token.name)}`; + const gradientName = `gradient-${sanitizeName(token.name)}`; output += ` ${token.property}: var(--${gradientName}, #{$${gradientName}})\n`; } else { // Use the raw value directly if no variables are involved diff --git a/src/utils.ts b/src/utils.ts deleted file mode 100644 index 6f703bf..0000000 --- a/src/utils.ts +++ /dev/null @@ -1,53 +0,0 @@ -export default { - toBase64(str: string): string { - const base64chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; - const utf8str = encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, - (_, p1) => String.fromCharCode(parseInt(p1, 16)) - ); - let i = 0; - let result = ''; - while (i < utf8str.length) { - const char1 = utf8str.charCodeAt(i++); - const char2 = i < utf8str.length ? utf8str.charCodeAt(i++) : NaN; - const char3 = i < utf8str.length ? utf8str.charCodeAt(i++) : NaN; - const enc1 = char1 >> 2; - const enc2 = ((char1 & 3) << 4) | (char2 >> 4); - const enc3 = ((char2 & 15) << 2) | (char3 >> 6); - const enc4 = char3 & 63; - result += base64chars[enc1] + base64chars[enc2] + - (isNaN(char2) ? '=' : base64chars[enc3]) + - (isNaN(char3) ? '=' : base64chars[enc4]); - } - return result; - }, - sanitizeName(name: string): string { - return name.toLowerCase().replace(/[^a-z0-9]/g, '-'); - }, - sanitizeSegment(segment: string): string { - return segment.toLowerCase().replace(/[^a-z0-9]/g, '-'); - }, - rgbToHex(r: number, g: number, b: number): string { - const rHex = Math.round(r * 255).toString(16).padStart(2, '0'); - const gHex = Math.round(g * 255).toString(16).padStart(2, '0'); - const bHex = Math.round(b * 255).toString(16).padStart(2, '0'); - return '#' + rHex + gHex + bHex; - }, - rgbaToString(r: number, g: number, b: number, a: number): string { - const rHex = Math.round(r * 255).toString(16).padStart(2, '0'); - const gHex = Math.round(g * 255).toString(16).padStart(2, '0'); - const bHex = Math.round(b * 255).toString(16).padStart(2, '0'); - const aHex = Math.round(a * 255).toString(16).padStart(2, '0'); - - return a === 1 ? - '#' + rHex + gHex + bHex : - '#' + rHex + gHex + bHex + aHex; - }, - groupBy(arr: T[], key: (item: T) => string): Record { - return arr.reduce((groups, item) => { - const k = key(item); - if (!groups[k]) groups[k] = []; - groups[k].push(item); - return groups; - }, {} as Record); - } -}; \ No newline at end of file diff --git a/src/utils/array.utils.ts b/src/utils/array.utils.ts new file mode 100644 index 0000000..2a7fb4c --- /dev/null +++ b/src/utils/array.utils.ts @@ -0,0 +1,8 @@ +export function groupBy(arr: T[], key: (item: T) => string): Record { + return arr.reduce((groups, item) => { + const k = key(item); + if (!groups[k]) groups[k] = []; + groups[k].push(item); + return groups; + }, {} as Record); +} \ No newline at end of file diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..f5696d3 --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,5 @@ +export * from './string.utils'; +export * from './color.utils'; +export * from './array.utils'; +export * from './gradient.utils'; +export * from './node.utils'; \ No newline at end of file diff --git a/src/utils/node.utils.ts b/src/utils/node.utils.ts index 1f25c6f..d058657 100644 --- a/src/utils/node.utils.ts +++ b/src/utils/node.utils.ts @@ -1,4 +1,4 @@ -import Utils from '../utils'; +import { sanitizeSegment } from "./string.utils"; export function getNodePathName(node: SceneNode): string { const pathParts: string[] = []; @@ -19,7 +19,7 @@ export function getNodePathName(node: SceneNode): string { export function parseVariantWithoutKey(variant: string): string { const [_, valueRaw] = variant.split("="); if (!valueRaw) { - return Utils.sanitizeSegment(variant); + return sanitizeSegment(variant); } - return Utils.sanitizeSegment(valueRaw); + return sanitizeSegment(valueRaw); } \ No newline at end of file diff --git a/src/utils/string.utils.ts b/src/utils/string.utils.ts new file mode 100644 index 0000000..dc01613 --- /dev/null +++ b/src/utils/string.utils.ts @@ -0,0 +1,29 @@ +export function toBase64(str: string): string { + const base64chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; + const utf8str = encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, + (_, p1) => String.fromCharCode(parseInt(p1, 16)) + ); + let i = 0; + let result = ''; + while (i < utf8str.length) { + const char1 = utf8str.charCodeAt(i++); + const char2 = i < utf8str.length ? utf8str.charCodeAt(i++) : NaN; + const char3 = i < utf8str.length ? utf8str.charCodeAt(i++) : NaN; + const enc1 = char1 >> 2; + const enc2 = ((char1 & 3) << 4) | (char2 >> 4); + const enc3 = ((char2 & 15) << 2) | (char3 >> 6); + const enc4 = char3 & 63; + result += base64chars[enc1] + base64chars[enc2] + + (isNaN(char2) ? '=' : base64chars[enc3]) + + (isNaN(char3) ? '=' : base64chars[enc4]); + } + return result; +} + +export function sanitizeName(name: string): string { + return name.toLowerCase().replace(/[^a-z0-9]/g, '-'); +} + +export function sanitizeSegment(segment: string): string { + return segment.toLowerCase().replace(/[^a-z0-9]/g, '-'); +} \ No newline at end of file