import * as Figma from 'figma-js' ; import { getFile } from './get-file' ; function flattenTree ( arr = [ ] ) { return arr . reduce ( ( a , b ) => a . concat ( [ b , ... flattenTree ( b . children ) ] ) , [ ] ) ; } export async function fetchStyles ( fileId ) { const file = await getFile ( fileId ) ; const flatTree = flattenTree ( file . document . children as Figma . Node [ ] ) ; const styleEntries = Object . entries ( file . styles ) ; const colorStyles = Object . fromEntries ( styleEntries . filter ( ( [ , node ] ) => node . styleType === 'FILL' ) . map ( ( [ id , node ] ) => [ node . name , { description : node . description , value : ( flatTree . find ( ( node ) => { return ( node . styles ?. fills || node . styles ?. fill ) === id ; } ) as Figma . Frame | Figma . Vector ) . fills , } , ] ) ) ; const effectStyles = Object . fromEntries ( styleEntries . filter ( ( [ , node ] ) => node . styleType === 'EFFECT' ) . map ( ( [ id , node ] ) => [ node . name , { description : node . description , value : ( flatTree . find ( ( node ) => node . styles ?. effect === id ) as Figma . Frame | Figma . Vector ) . effects , } , ] ) ) ; const textStyles = Object . fromEntries ( styleEntries . filter ( ( [ , node ] ) => node . styleType === 'TEXT' ) . map ( ( [ id , node ] ) => [ node . name , { description : node . description , value : ( flatTree . filter ( node => node . type === 'TEXT' ) . find ( ( node ) => node . styles ?. text === id ) as Figma . Text ) . style , } , ] ) ) ; return { colorStyles , effectStyles , textStyles , } ; }