feat(cli): support third-party Penpot instances

README.md

@@ -29,6 +29,7 @@ require('dotenv').config()
  * @type {import('penpot-css-export').Config}
  */
 const config = {
+  instance: process.env.PENPOT_BASE_URL || undefined,
   accessToken: process.env.PENPOT_ACCESS_TOKEN,
   pages: [
     {

packages/demo/penpot-css-export.config.js

@@ -4,6 +4,7 @@ require('dotenv').config()
  * @type {import('penpot-css-export').Config}
  */
 const config = {
+  instance: process.env.PENPOT_BASE_URL || undefined,
   accessToken: process.env.PENPOT_ACCESS_TOKEN,
   colors: [
     {

packages/penpot-css-export/src/lib/api/penpot.ts

@@ -33,9 +33,11 @@ class PenpotApiUnknownError extends Error {
 }
 
 export class Penpot {
+  private instanceBaseUrl: string
   private accessToken: string
 
   constructor(settings: PenpotSettings) {
+    this.instanceBaseUrl = settings.baseUrl
     this.accessToken = settings.accessToken
   }
 
@@ -54,7 +56,7 @@ export class Penpot {
     }
 
     const response = await fetch(
-      `https://design.penpot.app/api/rpc/command/${command}`,
+      `${this.instanceBaseUrl}/api/rpc/command/${command}`,
       config,
     )
 

packages/penpot-css-export/src/lib/api/types.ts

@@ -1,4 +1,5 @@
 export interface PenpotSettings {
+  baseUrl: string
   accessToken: string
 }
 

packages/penpot-css-export/src/lib/config.ts

@@ -1,6 +1,7 @@
 import { Config, PagesConfig } from './types'
 
 const BASE_CONFIG: Omit<Config, 'pages' | 'typographies' | 'colors'> = {
+  instance: 'https://design.penpot.app',
   accessToken: '',
 }
 
@@ -16,6 +17,12 @@ class MissingAccessTokenError extends Error {
   }
 }
 
+class InvalidInstanceUrlError extends Error {
+  constructor() {
+    super('Invalid .instance URL in penpot export config.')
+  }
+}
+
 class MissingOutputPathError extends Error {
   constructor(index: number) {
     super(`Missing or empty .path in penpot export config at index ${index}.`)
@@ -47,6 +54,22 @@ export function validateAndNormalizePenpotExportConfig(config: Config): Config {
     colors: [],
   }
 
+  if (config.instance != null) {
+    try {
+      new URL(config.instance)
+    } catch (error) {
+      if (error instanceof TypeError) {
+        throw new InvalidInstanceUrlError()
+      }
+
+      throw error
+    }
+
+    normalizedConfig.instance = config.instance.endsWith('/')
+      ? config.instance.slice(0, -1)
+      : config.instance
+  }
+
   for (const [index, colorsConfig] of config.colors.entries()) {
     const { output, fileId } = colorsConfig
 

packages/penpot-css-export/src/lib/index.ts

@@ -13,7 +13,10 @@ export async function generateCssFromConfig(
   rootProjectPath: string,
 ) {
   const validatedConfig = validateAndNormalizePenpotExportConfig(config)
-  const penpot = new Penpot({ accessToken: config.accessToken })
+  const penpot = new Penpot({
+    baseUrl: validatedConfig.instance,
+    accessToken: validatedConfig.accessToken,
+  })
 
   for (const colorsConfig of validatedConfig.colors) {
     const cssClassDefinition: CSSClassDefinition = {

packages/penpot-css-export/src/lib/types.ts

@@ -15,6 +15,7 @@ export interface ColorsConfig {
 }
 
 export interface Config {
+  instance: string
   accessToken: string
   colors: ColorsConfig[]
   typographies: TypographiesConfig[]