Fix style paths (#194)

* Fix style path

* add changelog

.changeset/wise-moose-buy.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": patch
+---
+
+Fix local styles categorization system

plugin-src/translators/styles/index.ts

@@ -1,2 +1,4 @@
 export * from './translatePaintStyle';
+export * from './translateStyleName';
+export * from './translateStylePath';
 export * from './translateTextStyle';

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 =
+  const path = translatePaintStylePath(figmaStyle);
-    (figmaStyle.remote ? 'Remote / ' : '') + (figmaStyle.paints.length > 1 ? figmaStyle.name : '');
 
   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);
+};

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;
+};

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(' / ');
+};

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
     }
   };