diff --git a/.changeset/wise-moose-buy.md b/.changeset/wise-moose-buy.md new file mode 100644 index 0000000..68b7ace --- /dev/null +++ b/.changeset/wise-moose-buy.md @@ -0,0 +1,5 @@ +--- +"penpot-exporter": patch +--- + +Fix local styles categorization system diff --git a/plugin-src/translators/styles/index.ts b/plugin-src/translators/styles/index.ts index 7a370c9..c08dced 100644 --- a/plugin-src/translators/styles/index.ts +++ b/plugin-src/translators/styles/index.ts @@ -1,2 +1,4 @@ export * from './translatePaintStyle'; +export * from './translateStyleName'; +export * from './translateStylePath'; export * from './translateTextStyle'; diff --git a/plugin-src/translators/styles/translatePaintStyle.ts b/plugin-src/translators/styles/translatePaintStyle.ts index 8950d13..2a6d9f5 100644 --- a/plugin-src/translators/styles/translatePaintStyle.ts +++ b/plugin-src/translators/styles/translatePaintStyle.ts @@ -2,6 +2,8 @@ import { translateFill } from '@plugin/translators/fills/translateFills'; import { FillStyle } from '@ui/lib/types/utils/fill'; +import { translateStyleName, translateStylePath } from '.'; + export const translatePaintStyle = (figmaStyle: PaintStyle): FillStyle => { const fillStyle: FillStyle = { name: figmaStyle.name, @@ -10,12 +12,11 @@ export const translatePaintStyle = (figmaStyle: PaintStyle): FillStyle => { }; const colorName = (figmaStyle: PaintStyle, index: number): string => { - return figmaStyle.paints.length > 1 ? `Color ${index + 1}` : figmaStyle.name; + return figmaStyle.paints.length > 1 ? `Color ${index + 1}` : translateStyleName(figmaStyle); }; let index = 0; - const path = - (figmaStyle.remote ? 'Remote / ' : '') + (figmaStyle.paints.length > 1 ? figmaStyle.name : ''); + const path = translatePaintStylePath(figmaStyle); for (const fill of figmaStyle.paints) { const penpotFill = translateFill(fill); @@ -32,3 +33,13 @@ export const translatePaintStyle = (figmaStyle: PaintStyle): FillStyle => { return fillStyle; }; + +const translatePaintStylePath = (figmaStyle: PaintStyle) => { + const path = translateStylePath(figmaStyle); + + if (figmaStyle.paints.length <= 1) { + return path; + } + + return path + (path !== '' ? ' / ' : '') + translateStyleName(figmaStyle); +}; diff --git a/plugin-src/translators/styles/translateStyleName.ts b/plugin-src/translators/styles/translateStyleName.ts new file mode 100644 index 0000000..e7ee842 --- /dev/null +++ b/plugin-src/translators/styles/translateStyleName.ts @@ -0,0 +1,9 @@ +export const translateStyleName = (figmaStyle: BaseStyle): string => { + const splitName = figmaStyle.name.split('/'); + + if (splitName.length > 0) { + return splitName.pop() as string; + } + + return figmaStyle.name; +}; diff --git a/plugin-src/translators/styles/translateStylePath.ts b/plugin-src/translators/styles/translateStylePath.ts new file mode 100644 index 0000000..cb07b56 --- /dev/null +++ b/plugin-src/translators/styles/translateStylePath.ts @@ -0,0 +1,16 @@ +export const translateStylePath = (figmaStyle: BaseStyleMixin) => { + const path = []; + + if (figmaStyle.remote) { + path.push('Remote'); + } + + if (figmaStyle.name.includes('/')) { + const pathParts = figmaStyle.name.split('/'); + pathParts.pop(); + + path.push(...pathParts); + } + + return path.join(' / '); +}; diff --git a/plugin-src/translators/styles/translateTextStyle.ts b/plugin-src/translators/styles/translateTextStyle.ts index 933c213..70519a3 100644 --- a/plugin-src/translators/styles/translateTextStyle.ts +++ b/plugin-src/translators/styles/translateTextStyle.ts @@ -9,11 +9,13 @@ import { import { TypographyStyle } from '@ui/lib/types/shapes/textShape'; +import { translateStyleName, translateStylePath } from '.'; + export const translateTextStyle = (figmaStyle: TextStyle): TypographyStyle => { const name = (figmaStyle.remote ? 'Remote / ' : '') + figmaStyle.name; return { - name: figmaStyle.name, + name: translateStyleName(figmaStyle), textStyle: { ...translateFontName(figmaStyle.fontName), fontFamily: figmaStyle.fontName.family, @@ -25,7 +27,7 @@ export const translateTextStyle = (figmaStyle: TextStyle): TypographyStyle => { lineHeight: translateLineHeight(figmaStyle) }, typography: { - path: '', + path: translateStylePath(figmaStyle), name } };