From f988d736559f84fedd82171a90ad5edcb1efd52a Mon Sep 17 00:00:00 2001
From: Roberto Redradix <roberto@redradix.com>
Date: Mon, 25 Sep 2023 15:06:14 +0200
Subject: [PATCH] feat(core): sort assets reproducibly by name

---
 packages/core/src/lib/api/adapters/colors.ts       |  3 +++
 packages/core/src/lib/api/adapters/typographies.ts |  3 +++
 packages/core/src/lib/api/helpers.ts               | 13 ++++++++++++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/lib/api/adapters/colors.ts b/packages/core/src/lib/api/adapters/colors.ts
index 45ce861..7eec7cc 100644
--- a/packages/core/src/lib/api/adapters/colors.ts
+++ b/packages/core/src/lib/api/adapters/colors.ts
@@ -1,5 +1,6 @@
 import { CSSCustomPropertyDefinition, ColorAssets } from '../../types'
 
+import { compareByName } from '../helpers'
 import { PenpotApiFile } from '../types'
 
 const toHexQuartet = (hexTriplet: string, alpha: number = 1) => {
@@ -24,6 +25,8 @@ const toHexQuartet = (hexTriplet: string, alpha: number = 1) => {
 const adaptColorsToCssVariables = (penpotFile: PenpotApiFile): ColorAssets => {
   const fileName = penpotFile.name
   const colors = Object.values(penpotFile.data.colors ?? {})
+    .slice()
+    .sort(compareByName)
 
   const cssPropsEntries = colors.map<CSSCustomPropertyDefinition>((color) => {
     return {
diff --git a/packages/core/src/lib/api/adapters/typographies.ts b/packages/core/src/lib/api/adapters/typographies.ts
index 5bcd526..d3903b6 100644
--- a/packages/core/src/lib/api/adapters/typographies.ts
+++ b/packages/core/src/lib/api/adapters/typographies.ts
@@ -1,5 +1,6 @@
 import { CSSClassDefinition, FontsSummary, TypographyAssets } from '../../types'
 
+import { compareByName } from '../helpers'
 import { PenpotApiTypography, CssTextProperty, PenpotApiFile } from '../types'
 
 const mapTypographyAssetCssProps = (
@@ -68,6 +69,8 @@ const summarizeTypographies = (
 const adaptTypographies = (penpotFile: PenpotApiFile): TypographyAssets => {
   const fileName = penpotFile.name
   const typographies = Object.values(penpotFile.data.typographies ?? {})
+    .slice()
+    .sort(compareByName)
 
   return {
     scope: fileName,
diff --git a/packages/core/src/lib/api/helpers.ts b/packages/core/src/lib/api/helpers.ts
index 2311a5d..6ef3015 100644
--- a/packages/core/src/lib/api/helpers.ts
+++ b/packages/core/src/lib/api/helpers.ts
@@ -1,9 +1,20 @@
-import { PenpotApiComponent, PenpotApiObject, PenpotApiPage } from './types'
+import {
+  PenpotApiColor,
+  PenpotApiComponent,
+  PenpotApiObject,
+  PenpotApiPage,
+  PenpotApiTypography,
+} from './types'
 
 export function isComponent(object: PenpotApiObject) {
   return object.componentRoot === true
 }
 
+export const compareByName = (
+  assetA: PenpotApiColor | PenpotApiTypography,
+  assetB: PenpotApiColor | PenpotApiTypography,
+) => (assetA.name > assetB.name ? 1 : -1)
+
 export function getObjectShapesFromPage(
   object: PenpotApiObject,
   page: PenpotApiPage,