diff --git a/packages/core/src/lib/adapters/inbound/colorsToCssVariables.ts b/packages/core/src/lib/adapters/inbound/colorsToCssVariables.ts index 33ed12f..d5b055a 100644 --- a/packages/core/src/lib/adapters/inbound/colorsToCssVariables.ts +++ b/packages/core/src/lib/adapters/inbound/colorsToCssVariables.ts @@ -1,6 +1,7 @@ import { textToCssCustomProperyName } from '../../css/helpers' -import { CSSClassDefinition, PenpotExportFile } from '../../types' +import { PenpotApiFile } from '../../api' +import { CSSClassDefinition } from '../../types' const toRgbaCssValue = (hex: string, alpha: number = 1) => { const channels = hex.match(/\w{2}/g) @@ -14,11 +15,11 @@ const toRgbaCssValue = (hex: string, alpha: number = 1) => { } export const adaptColorsToCssVariables = ( - penpotFile: PenpotExportFile, + penpotFile: PenpotApiFile, ): CSSClassDefinition => { - const { colors } = penpotFile + const colors = Object.values(penpotFile.data.colors ?? {}) - const cssPropsEntries = Object.values(colors).map((color) => { + const cssPropsEntries = colors.map((color) => { const objectClassName = textToCssCustomProperyName(color.name) return [objectClassName, toRgbaCssValue(color.color, color.opacity)] diff --git a/packages/core/src/lib/adapters/inbound/pageComponentsToCssClasses.ts b/packages/core/src/lib/adapters/inbound/pageComponentsToCssClasses.ts index 35a72f0..68de03b 100644 --- a/packages/core/src/lib/adapters/inbound/pageComponentsToCssClasses.ts +++ b/packages/core/src/lib/adapters/inbound/pageComponentsToCssClasses.ts @@ -5,8 +5,8 @@ import { } from '../../api/helpers' import { textToCssClassSelector } from '../../css/helpers' -import { PenpotApiObject } from '../../api' -import { CSSClassDefinition, PenpotExportFile } from '../../types' +import { PenpotApiFile, PenpotApiObject } from '../../api' +import { CSSClassDefinition } from '../../types' const extractObjectCssProps = (object: PenpotApiObject) => { let { textDecoration, ...styles } = object.positionData[0] @@ -35,17 +35,17 @@ const getTextObjectCssProps = (object: PenpotApiObject) => { } export const adaptPageComponentsToCssClassDefinitions = ( - penpotFile: PenpotExportFile, + penpotFile: PenpotApiFile, options: { pageId: string }, ): CSSClassDefinition[] => { - const cssClassDefinitions = [] - - const page = penpotFile.pages[options.pageId] - - const components = Object.values(page.objects) + const pages = penpotFile.data.pagesIndex ?? {} + const page = pages[options.pageId] + const pageObjects = Object.values(page.objects) + const components = pageObjects .filter(isComponent) .map((object) => getObjectShapesFromPage(object, page)) + const cssClassDefinitions = [] for (const component of components) { for (const objectId in component.objects) { const object = component.objects[objectId] diff --git a/packages/core/src/lib/adapters/inbound/typographyToCssClasses.ts b/packages/core/src/lib/adapters/inbound/typographyToCssClasses.ts index 0b3b288..7a01111 100644 --- a/packages/core/src/lib/adapters/inbound/typographyToCssClasses.ts +++ b/packages/core/src/lib/adapters/inbound/typographyToCssClasses.ts @@ -1,7 +1,7 @@ import { textToCssClassSelector } from '../../css/helpers' -import { PenpotApiTypography, CssTextProperty } from '../../api' -import { CSSClassDefinition, PenpotExportFile } from '../../types' +import { PenpotApiTypography, CssTextProperty, PenpotApiFile } from '../../api' +import { CSSClassDefinition } from '../../types' const getTypographyAssetCssProps = ( typography: PenpotApiTypography, @@ -18,11 +18,12 @@ const getTypographyAssetCssProps = ( } export const adaptTypographiesToCssClassDefinitions = ( - penpotFile: PenpotExportFile, + penpotFile: PenpotApiFile, ): CSSClassDefinition[] => { - const { fileName, typographies } = penpotFile + const fileName = penpotFile.name + const typographies = Object.values(penpotFile.data.typographies ?? {}) - const cssClassDefinitions = Object.values(typographies).map((typography) => { + const cssClassDefinitions = typographies.map((typography) => { const cssProps = getTypographyAssetCssProps(typography) const selector = textToCssClassSelector(`${fileName}--${typography.name}`) diff --git a/packages/core/src/lib/api/penpot.ts b/packages/core/src/lib/api/penpot.ts index ba0f03b..00ceb93 100644 --- a/packages/core/src/lib/api/penpot.ts +++ b/packages/core/src/lib/api/penpot.ts @@ -6,7 +6,6 @@ import type { PenpotClientGetFileOptions, PenpotClientSettings, } from './types' -import { PenpotExportFile } from '../types' class PenpotApiError extends Error { constructor(parsedError: PenpotApiErrorResponse) { @@ -65,9 +64,7 @@ export class Penpot { return json as ResultType } - async getFile( - options: PenpotClientGetFileOptions, - ): Promise { + async getFile(options: PenpotClientGetFileOptions): Promise { const file = await this.fetcher({ command: 'get-file', body: { @@ -75,11 +72,6 @@ export class Penpot { }, }) - return { - fileName: file.name, - colors: file.data.colors ?? {}, - typographies: file.data.typographies ?? {}, - pages: file.data.pagesIndex ?? {}, - } + return file } } diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts index 0ae80ed..cbe7020 100644 --- a/packages/core/src/lib/index.ts +++ b/packages/core/src/lib/index.ts @@ -24,7 +24,7 @@ export default async function penpotExport( fileId: fileConfig.fileId, }) - console.log('🎨 Processing Penpot file: %s', penpotFile.fileName) + console.log('🎨 Processing Penpot file: %s', penpotFile.name) for (const colorsConfig of fileConfig.colors) { const cssPath = path.resolve(rootProjectPath, colorsConfig.output) diff --git a/packages/core/src/lib/types.ts b/packages/core/src/lib/types.ts index e45a63e..02d01c0 100644 --- a/packages/core/src/lib/types.ts +++ b/packages/core/src/lib/types.ts @@ -6,13 +6,6 @@ import type { export type { UserConfig } from './config/types' -export interface PenpotExportFile { - fileName: string - colors: Record - typographies: Record - pages: Record -} - export interface CSSClassDefinition { selector: string cssProps: Record