Text libraries (penpot#185)

* color library

* fixes

* wip

* wip

* wip

* wip

* working

* improvements

* changeset

* changeset

* changeset & cleaning

* changeset & cleaning

* improvements

* fixes

* rebase

.changeset/heavy-timers-sit.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Add support for typographies

.changeset/mean-clouds-jog.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": patch
+---
+
+Improve font weight translation

.changeset/selfish-spies-cover.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": patch
+---
+
+Fix letter spacing

plugin-src/TextLibrary.ts

@@ -0,0 +1,21 @@
+class TextLibrary {
+ private styles: Map<string, TextStyle | undefined> = new Map();
+
+ public register(id: string, styles?: TextStyle | undefined) {
+ this.styles.set(id, styles);
+ }
+
+ public get(id: string): TextStyle | undefined {
+ return this.styles.get(id);
+ }
+
+ public has(id: string): boolean {
+ return this.styles.has(id);
+ }
+
+ public all(): Record<string, TextStyle | undefined> {
+ return Object.fromEntries(this.styles.entries());
+ }
+}
+
+export const textLibrary = new TextLibrary();

plugin-src/transformers/partials/transformFills.ts

@@ -1,15 +1,11 @@
 import { translateFillStyleId, translateFills } from '@plugin/translators/fills';
-import { StyleTextSegment } from '@plugin/translators/text/paragraph';
+import { TextSegment } from '@plugin/translators/text/paragraph';
 
 import { ShapeAttributes } from '@ui/lib/types/shapes/shape';
 import { TextStyle } from '@ui/lib/types/shapes/textShape';
 
 export const transformFills = (
- node:
- | (MinimalFillsMixin & DimensionAndPositionMixin)
- | VectorRegion
- | VectorNode
- | StyleTextSegment
+ node: (MinimalFillsMixin & DimensionAndPositionMixin) | VectorRegion | VectorNode | TextSegment
 ): Pick<ShapeAttributes, 'fills' | 'fillStyleId'> | Pick<TextStyle, 'fills' | 'fillStyleId'> => {
  if (hasFillStyle(node)) {
  return {
@@ -39,11 +35,7 @@ export const transformVectorFills = (
 };
 
 const hasFillStyle = (
- node:
- | (MinimalFillsMixin & DimensionAndPositionMixin)
- | VectorRegion
- | VectorNode
- | StyleTextSegment
+ node: (MinimalFillsMixin & DimensionAndPositionMixin) | VectorRegion | VectorNode | TextSegment
 ): boolean => {
  return (
  node.fillStyleId !== figma.mixed &&

plugin-src/transformers/partials/transformText.ts

@@ -1,5 +1,5 @@
 import { transformFills } from '@plugin/transformers/partials';
-import { transformTextStyle, translateStyleTextSegments } from '@plugin/translators/text';
+import { transformTextStyle, translateTextSegments } from '@plugin/translators/text';
 import { translateGrowType, translateVerticalAlign } from '@plugin/translators/text/properties';
 
 import { TextAttributes, TextShape } from '@ui/lib/types/shapes/textShape';
@@ -16,7 +16,8 @@ export const transformText = (node: TextNode): TextAttributes & Pick<TextShape,
  'indentation',
  'listOptions',
  'fills',
- 'fillStyleId'
+ 'fillStyleId',
+ 'textStyleId'
  ]);
 
  return {
@@ -30,7 +31,7 @@ export const transformText = (node: TextNode): TextAttributes & Pick<TextShape,
  children: [
  {
  type: 'paragraph',
- children: translateStyleTextSegments(node, styledTextSegments),
+ children: translateTextSegments(node, styledTextSegments),
  ...transformTextStyle(node, styledTextSegments[0]),
  ...transformFills(node)
  }

plugin-src/transformers/transformDocumentNode.ts

@@ -2,16 +2,26 @@ import { componentsLibrary } from '@plugin/ComponentLibrary';
 import { imagesLibrary } from '@plugin/ImageLibrary';
 import { remoteComponentLibrary } from '@plugin/RemoteComponentLibrary';
 import { styleLibrary } from '@plugin/StyleLibrary';
+import { textLibrary } from '@plugin/TextLibrary';
 import { translateRemoteChildren } from '@plugin/translators';
-import { translatePaintStyles } from '@plugin/translators/fills';
+import { translatePaintStyle, translateTextStyle } from '@plugin/translators/styles';
 import { sleep } from '@plugin/utils';
 
 import { PenpotPage } from '@ui/lib/types/penpotPage';
+import { TypographyStyle } from '@ui/lib/types/shapes/textShape';
 import { FillStyle } from '@ui/lib/types/utils/fill';
 import { PenpotDocument } from '@ui/types';
 
 import { transformPageNode } from '.';
 
+const isPaintStyle = (style: BaseStyle): style is PaintStyle => {
+ return style.type === 'PAINT';
+};
+
+const isTextStyle = (style: BaseStyle): style is TextStyle => {
+ return style.type === 'TEXT';
+};
+
 const downloadImages = async (): Promise<Record<string, Uint8Array>> => {
  const imageToDownload = Object.entries(imagesLibrary.all());
  const images: Record<string, Uint8Array> = {};
@@ -71,7 +81,7 @@ const getFillStyles = async (): Promise<Record<string, FillStyle>> => {
  for (const [styleId, paintStyle] of stylesToFetch) {
  const figmaStyle = paintStyle ?? (await figma.getStyleByIdAsync(styleId));
  if (figmaStyle && isPaintStyle(figmaStyle)) {
- styles[styleId] = translatePaintStyles(figmaStyle);
+ styles[styleId] = translatePaintStyle(figmaStyle);
  }
 
  figma.ui.postMessage({
@@ -87,8 +97,41 @@ const getFillStyles = async (): Promise<Record<string, FillStyle>> => {
  return styles;
 };
 
-const isPaintStyle = (style: BaseStyle): style is PaintStyle => {
- return style.type === 'PAINT';
+const getTextStyles = async (): Promise<Record<string, TypographyStyle>> => {
+ const stylesToFetch = Object.entries(textLibrary.all());
+ const styles: Record<string, TypographyStyle> = {};
+
+ if (stylesToFetch.length === 0) return styles;
+
+ let currentStyle = 1;
+
+ figma.ui.postMessage({
+ type: 'PROGRESS_TOTAL_ITEMS',
+ data: stylesToFetch.length
+ });
+
+ figma.ui.postMessage({
+ type: 'PROGRESS_STEP',
+ data: 'typographies'
+ });
+
+ for (const [styleId, style] of stylesToFetch) {
+ const figmaStyle = style ?? (await figma.getStyleByIdAsync(styleId));
+ if (figmaStyle && isTextStyle(figmaStyle)) {
+ styles[styleId] = translateTextStyle(figmaStyle);
+ }
+
+ figma.ui.postMessage({
+ type: 'PROGRESS_PROCESSED_ITEMS',
+ data: currentStyle++
+ });
+
+ await sleep(0);
+ }
+
+ await sleep(20);
+
+ return styles;
 };
 
 const processPages = async (node: DocumentNode): Promise<PenpotPage[]> => {
@@ -122,6 +165,11 @@ export const transformDocumentNode = async (node: DocumentNode): Promise<PenpotD
  styleLibrary.register(style.id, style);
  });
 
+ const localTextStyles = await figma.getLocalTextStylesAsync();
+ localTextStyles.forEach(style => {
+ textLibrary.register(style.id, style);
+ });
+
  const children = await processPages(node);
 
  if (remoteComponentLibrary.remaining() > 0) {
@@ -135,11 +183,14 @@ export const transformDocumentNode = async (node: DocumentNode): Promise<PenpotD
 
  const images = await downloadImages();
 
+ const typographies = await getTextStyles();
+
  return {
  name: node.name,
  children,
  components: componentsLibrary.all(),
  images,
- styles
+ styles,
+ typographies
  };
 };

plugin-src/translators/fills/index.ts

@@ -1,4 +1,3 @@
 export * from './translateFills';
 export * from './translateImageFill';
-export * from './translatePaintStyles';
 export * from './translateSolidFill';

plugin-src/translators/styles/index.ts

@@ -0,0 +1,2 @@
+export * from './translatePaintStyle';
+export * from './translateTextStyle';

plugin-src/translators/fills/translatePaintStyles.ts → plugin-src/translators/styles/translatePaintStyle.ts

@@ -2,15 +2,14 @@ import { translateFill } from '@plugin/translators/fills/translateFills';
 
 import { FillStyle } from '@ui/lib/types/utils/fill';
 
-export const translatePaintStyles = (figmaStyle: PaintStyle): FillStyle => {
+export const translatePaintStyle = (figmaStyle: PaintStyle): FillStyle => {
  const fillStyle: FillStyle = {
  name: figmaStyle.name,
  fills: [],
  colors: []
  };
 
  const colorName = (figmaStyle: PaintStyle, index: number): string => {
- // @TODO: Think something better
  return figmaStyle.paints.length > 1 ? `Color ${index + 1}` : figmaStyle.name;
  };
 

plugin-src/translators/styles/translateTextStyle.ts

@@ -0,0 +1,32 @@
+import { translateFontName } from '@plugin/translators/text/font';
+import {
+ translateFontStyle,
+ translateLetterSpacing,
+ translateLineHeight,
+ translateTextDecoration,
+ translateTextTransform
+} from '@plugin/translators/text/properties';
+
+import { TypographyStyle } from '@ui/lib/types/shapes/textShape';
+
+export const translateTextStyle = (figmaStyle: TextStyle): TypographyStyle => {
+ const path = figmaStyle.remote ? 'Remote / ' : '';
+
+ return {
+ name: figmaStyle.name,
+ textStyle: {
+ ...translateFontName(figmaStyle.fontName),
+ fontFamily: figmaStyle.fontName.family,
+ fontSize: figmaStyle.fontSize.toString(),
+ fontStyle: translateFontStyle(figmaStyle.fontName.style),
+ textDecoration: translateTextDecoration(figmaStyle),
+ letterSpacing: translateLetterSpacing(figmaStyle),
+ textTransform: translateTextTransform(figmaStyle),
+ lineHeight: translateLineHeight(figmaStyle)
+ },
+ typography: {
+ path,
+ name: figmaStyle.name
+ }
+ };
+};

plugin-src/translators/text/font/custom/translateCustomFont.ts

@@ -1,10 +1,15 @@
 import { getCustomFontId, translateFontVariantId } from '@plugin/translators/text/font/custom';
 
-import { FontId } from '@ui/lib/types/shapes/textShape';
+import { TextTypography } from '@ui/lib/types/shapes/textShape';
 
-export const translateCustomFont = (fontName: FontName, fontWeight: number): FontId | undefined => {
+export const translateCustomFont = (
+ fontName: FontName,
+ fontWeight: string
+): Pick<TextTypography, 'fontId' | 'fontVariantId' | 'fontWeight'> | undefined => {
+ const customFontId = getCustomFontId(fontName);
  return {
- fontId: `custom-${getCustomFontId(fontName)}`,
- fontVariantId: translateFontVariantId(fontName, fontWeight)
+ fontId: customFontId ? `custom-${customFontId}` : '',
+ fontVariantId: translateFontVariantId(fontName, fontWeight),
+ fontWeight
  };
 };

plugin-src/translators/text/font/custom/translateFontVariantId.ts

@@ -1,5 +1,5 @@
-export const translateFontVariantId = (fontName: FontName, fontWeight: number) => {
+export const translateFontVariantId = (fontName: FontName, fontWeight: string) => {
  const style = fontName.style.toLowerCase().includes('italic') ? 'italic' : 'normal';
 
- return `${style}-${fontWeight.toString()}`;
+ return `${style}-${fontWeight}`;
 };

plugin-src/translators/text/font/gfonts/translateFontVariantId.ts

@@ -3,7 +3,7 @@ import { GoogleFont } from './googleFont';
 export const translateFontVariantId = (
  googleFont: GoogleFont,
  fontName: FontName,
- fontWeight: number
+ fontWeight: string
 ) => {
  // check match directly by style
  const variant = googleFont.variants?.find(variant => variant === fontName.style.toLowerCase());
@@ -13,7 +13,7 @@ export const translateFontVariantId = (
  // check match by style and weight
  const italic = fontName.style.toLowerCase().includes('italic') ? 'italic' : '';
  const variantWithWeight = googleFont.variants?.find(
- variant => variant === `${fontWeight.toString()}${italic}`
+ variant => variant === `${fontWeight}${italic}`
  );
 
  if (variantWithWeight !== undefined) return variantWithWeight;

plugin-src/translators/text/font/gfonts/translateGoogleFont.ts

@@ -3,21 +3,25 @@ import slugify from 'slugify';
 import { Cache } from '@plugin/Cache';
 import { translateFontVariantId } from '@plugin/translators/text/font/gfonts';
 
-import { FontId } from '@ui/lib/types/shapes/textShape';
+import { TextTypography } from '@ui/lib/types/shapes/textShape';
 
 import { items as gfonts } from './gfonts.json';
 import { GoogleFont } from './googleFont';
 
 const fontsCache = new Cache<string, GoogleFont>({ max: 30 });
 
-export const translateGoogleFont = (fontName: FontName, fontWeight: number): FontId | undefined => {
+export const translateGoogleFont = (
+ fontName: FontName,
+ fontWeight: string
+): Pick<TextTypography, 'fontId' | 'fontVariantId' | 'fontWeight'> | undefined => {
  const googleFont = getGoogleFont(fontName);
 
  if (googleFont === undefined) return;
 
  return {
  fontId: `gfont-${slugify(fontName.family.toLowerCase())}`,
- fontVariantId: translateFontVariantId(googleFont, fontName, fontWeight)
+ fontVariantId: translateFontVariantId(googleFont, fontName, fontWeight),
+ fontWeight
  };
 };
 

plugin-src/translators/text/font/index.ts

@@ -1 +1 @@
-export * from './translateFontId';
+export * from './translateFontName';

plugin-src/translators/text/font/local/translateFontVariantId.ts

@@ -3,13 +3,12 @@ import { LocalFont } from './localFont';
 export const translateFontVariantId = (
  localFont: LocalFont,
  fontName: FontName,
- fontWeight: number
+ fontWeight: string
 ): string | undefined => {
  // check match by style and weight
  const italic = fontName.style.toLowerCase().includes('italic');
  const variantWithStyleWeight = localFont.variants?.find(
- variant =>
- variant.weight === fontWeight.toString() && variant.style === (italic ? 'italic' : 'normal')
+ variant => variant.weight === fontWeight && variant.style === (italic ? 'italic' : 'normal')
  );
 
  if (variantWithStyleWeight !== undefined) return variantWithStyleWeight.id;

plugin-src/translators/text/font/local/translateLocalFont.ts

@@ -1,17 +1,21 @@
 import { LocalFont, translateFontVariantId } from '@plugin/translators/text/font/local';
 
-import { FontId } from '@ui/lib/types/shapes/textShape';
+import { TextTypography } from '@ui/lib/types/shapes/textShape';
 
 import { items as localFonts } from './localFonts.json';
 
-export const translateLocalFont = (fontName: FontName, fontWeight: number): FontId | undefined => {
+export const translateLocalFont = (
+ fontName: FontName,
+ fontWeight: string
+): Pick<TextTypography, 'fontId' | 'fontVariantId' | 'fontWeight'> | undefined => {
  const localFont = getLocalFont(fontName);
 
  if (localFont === undefined) return;
 
  return {
  fontId: localFont.id,
- fontVariantId: translateFontVariantId(localFont, fontName, fontWeight)
+ fontVariantId: translateFontVariantId(localFont, fontName, fontWeight),
+ fontWeight
  };
 };