feat(core): sort assets reproducibly by name

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 {

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,

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,