0
Fork 0
mirror of https://github.com/penpot/penpot-export.git synced 2025-03-11 23:11:17 -05:00

refactor!: split penpot-export into cli and core modules

This commit is contained in:
Roberto Redradix 2023-09-01 15:26:25 +02:00 committed by Roberto RedRadix
parent e13d644805
commit e35186eae9
31 changed files with 88 additions and 222 deletions

View file

@ -2,7 +2,7 @@
## Description
`penpot-export` is an npm tool designed to export your design components created in Penpot directly to CSS files. With a simple `pce` command, you can convert your designs into ready-to-use CSS classes.
`penpot-export` is a tool designed to export your design components created in Penpot directly to CSS files. With a simple `penpot-export` command, you can convert your designs into ready-to-use CSS declarations.
## Installation
@ -10,10 +10,10 @@ To install `penpot-export`, simply run:
```bash
# npm
npm install penpot-export --save-dev
npm install @penpot-export/cli --save-dev
# yarn
yarn add penpot-export
yarn add @penpot-export/cli
```
## Configuration
@ -23,10 +23,15 @@ Before you can use `penpot-export`, you need to set up a [`penpot-export.config.
Configuration example:
```js
// @ts-check
require('dotenv').config()
if (typeof process.env.PENPOT_ACCESS_TOKEN !== 'string') {
throw new Error('Missing PENPOT_ACCESS_TOKEN environment variable')
}
/**
* @type {import('penpot-export').UserConfig}
* @type {import('@penpot-export/core').UserConfig}
*/
const config = {
instance: process.env.PENPOT_BASE_URL || undefined,
@ -65,7 +70,7 @@ module.exports = config
Once you've set up the `penpot-export.config.js` file, simply run the following command to generate your CSS files:
```bash
pce
penpot-export
```
This will read your Penpot designs and generate CSS files in the places specified in your configuration file.
@ -74,7 +79,7 @@ This will read your Penpot designs and generate CSS files in the places specifie
### Using Yarn Workspaces
This project utilizes [Yarn Workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/) to manage multiple packages within a single repository. This allows us to house the module's source code and a demo in separate packages, streamlining development and testing.
This project utilizes [Yarn Workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/) to manage multiple packages within a single repository. This allows us to house the source code of the penpot-export modules and a demo in separate packages, streamlining development and testing.
> **Why Yarn Workspaces?**
@ -82,12 +87,13 @@ This project utilizes [Yarn Workspaces](https://classic.yarnpkg.com/lang/en/docs
### Package Structure
- [**packages/penpot-export**](./packages/penpot-export/): This package contains the CLI tool written in TypeScript. This is where the primary tool code resides.
- [**packages/demo**](./packages/demo/): This package serves as a demonstration environment. You can run the `pce` command within this package to test out implementations in development.
- [**packages/core**](./packages/core/): This package contains the tool written in TypeScript. This is where the primary tool code resides.
- [**packages/cli**](./packages/cli/): This package contains the CLI tool written in TypeScript.
- [**packages/demo**](./packages/demo/): This package serves as a demonstration environment. You can run the `penpot-export` command within this package to test out implementations in development.
### Local Development
For the "demo" package to utilize the local version of the `pce` command you're developing, it's essential first to compile the TypeScript code from the "penpot-export" package.
For the "demo" package to utilize the local version of the `penpot-export` command you're developing, it's essential first to compile the TypeScript code from the "penpot-export" package.
### Handy Commands
@ -95,6 +101,6 @@ To facilitate the development process, we've set up the following commands that
- **yarn dev**: Runs the CLI tool in development mode. Ideal for making changes and seeing real-time results.
- **yarn build**: Compiles the TypeScript code in production mode. Ensure you run this command before testing the tool in the "demo" package.
- **yarn demo**: Runs the `pce` command within the "demo" package. It's handy for quickly testing implementations after making changes to the source code.
- **yarn demo**: Runs the `penpot-export` command within the "demo" package. It's handy for quickly testing implementations after making changes to the source code.
We recommend following this workflow: make changes to the code, run `yarn build`, and then `yarn demo` to test your changes.

View file

@ -1,12 +1,12 @@
{
"name": "root",
"name": "penpot-export",
"private": true,
"workspaces": [
"packages/*"
],
"scripts": {
"dev": "npm run dev -w penpot-export",
"build": "npm run build -w penpot-export",
"dev": "npm run dev -w @penpot-export/cli",
"build": "npm run build -w @penpot-export/core -w @penpot-export/cli",
"demo": "npm run generate-css -w demo"
}
}

View file

@ -1,20 +1,21 @@
{
"name": "penpot-export",
"name": "@penpot-export/cli",
"version": "0.0.0",
"license": "UNLICENSED",
"main": "dist/bin/index.js",
"types": "dist/lib/types.d.ts",
"files": [
"dist"
],
"bin": "./dist/bin/index.js",
"bin": {
"penpot-export": "./dist/bin/index.js"
},
"scripts": {
"build": "tsc",
"format": "prettier -w .",
"dev": "tsc-watch"
},
"dependencies": {
"node-fetch": "2",
"@penpot-export/core": "0.0.0",
"prettier": "^3.0.2"
},
"devDependencies": {

View file

@ -1,8 +1,8 @@
#! /usr/bin/env node
import fs from 'fs'
import path from 'path'
import { generateCssFromConfig } from '../lib'
import fs from 'node:fs'
import path from 'node:path'
import penpotExport from '@penpot-export/core'
const rootProjectPath = fs.realpathSync(process.cwd())
const configFilePath = path.resolve(rootProjectPath, 'penpot-export.config.js')
@ -16,4 +16,4 @@ if (!exists) {
const config = require(configFilePath)
generateCssFromConfig(config, rootProjectPath)
penpotExport(config, rootProjectPath)

1
packages/core/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
dist

View file

@ -0,0 +1,3 @@
# yarn-managed files
package.json
yarn.lock

View file

@ -0,0 +1,6 @@
{
"trailingComma": "all",
"tabWidth": 2,
"semi": false,
"singleQuote": true
}

View file

@ -0,0 +1,25 @@
{
"name": "@penpot-export/core",
"version": "0.0.0",
"license": "UNLICENSED",
"main": "dist/lib/index.js",
"types": "dist/lib/index.d.ts",
"files": [
"dist"
],
"scripts": {
"build": "tsc",
"format": "prettier -w ."
},
"dependencies": {
"node-fetch": "2",
"prettier": "^3.0.2"
},
"devDependencies": {
"@types/node": "^20.5.0",
"@types/node-fetch": "2",
"ts-node": "^10.9.1",
"tsc-watch": "^6.0.4",
"typescript": "^5.1.6"
}
}

View file

@ -6,7 +6,8 @@ import { adaptTypographiesToCssClassDefinitions } from './adapters/inbound/typog
import { adaptColorsToCssVariables } from './adapters/inbound/colorsToCssVariables'
import { adaptPageComponentsToCssClassDefinitions } from './adapters/inbound/pageComponentsToCssClasses'
export async function generateCssFromConfig(
export type * from './types'
export default async function penpotExport(
userConfig: object,
rootProjectPath: string,
) {

View file

@ -0,0 +1,20 @@
{
"compilerOptions": {
"rootDir": "./src",
"outDir": "dist",
"target": "es5",
"module": "commonjs",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"downlevelIteration": true,
"declaration": true,
"noEmit": false
},
"include": ["src"]
}

View file

@ -6,7 +6,7 @@
"generate-css": "penpot-export"
},
"dependencies": {
"penpot-export": "0.0.0"
"@penpot-export/cli": "0.0.0"
},
"devDependencies": {
"dotenv": "^16.3.1"

View file

@ -1,3 +1,4 @@
// @ts-check
require('dotenv').config()
if (typeof process.env.PENPOT_ACCESS_TOKEN !== 'string') {
@ -5,7 +6,7 @@ if (typeof process.env.PENPOT_ACCESS_TOKEN !== 'string') {
}
/**
* @type {import('penpot-export').UserConfig}
* @type {import('@penpot-export/core').UserConfig}
*/
const config = {
instance: process.env.PENPOT_BASE_URL || undefined,

View file

@ -1,198 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
"@cspotcode/source-map-support@^0.8.0":
version "0.8.1"
resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"
integrity sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==
dependencies:
"@jridgewell/trace-mapping" "0.3.9"
"@jridgewell/resolve-uri@^3.0.3":
version "3.1.1"
resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"
integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==
"@jridgewell/sourcemap-codec@^1.4.10":
version "1.4.15"
resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
"@jridgewell/trace-mapping@0.3.9":
version "0.3.9"
resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz#6534fd5933a53ba7cbf3a17615e273a0d1273ff9"
integrity sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==
dependencies:
"@jridgewell/resolve-uri" "^3.0.3"
"@jridgewell/sourcemap-codec" "^1.4.10"
"@tsconfig/node10@^1.0.7":
version "1.0.9"
resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2"
integrity sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==
"@tsconfig/node12@^1.0.7":
version "1.0.11"
resolved "https://registry.yarnpkg.com/@tsconfig/node12/-/node12-1.0.11.tgz#ee3def1f27d9ed66dac6e46a295cffb0152e058d"
integrity sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==
"@tsconfig/node14@^1.0.0":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@tsconfig/node14/-/node14-1.0.3.tgz#e4386316284f00b98435bf40f72f75a09dabf6c1"
integrity sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==
"@tsconfig/node16@^1.0.2":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.4.tgz#0b92dcc0cc1c81f6f306a381f28e31b1a56536e9"
integrity sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==
"@types/node-fetch@2":
version "2.6.4"
resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.4.tgz#1bc3a26de814f6bf466b25aeb1473fa1afe6a660"
integrity sha512-1ZX9fcN4Rvkvgv4E6PAY5WXUFWFcRWxZa3EW83UjycOB9ljJCedb2CupIP4RZMEwF/M3eTcCihbBRgwtGbg5Rg==
dependencies:
"@types/node" "*"
form-data "^3.0.0"
"@types/node@*":
version "20.5.1"
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.5.1.tgz#178d58ee7e4834152b0e8b4d30cbfab578b9bb30"
integrity sha512-4tT2UrL5LBqDwoed9wZ6N3umC4Yhz3W3FloMmiiG4JwmUJWpie0c7lcnUNd4gtMKuDEO4wRVS8B6Xa0uMRsMKg==
"@types/node@^20.5.0":
version "20.5.0"
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.5.0.tgz#7fc8636d5f1aaa3b21e6245e97d56b7f56702313"
integrity sha512-Mgq7eCtoTjT89FqNoTzzXg2XvCi5VMhRV6+I2aYanc6kQCBImeNaAYRs/DyoVqk1YEUJK5gN9VO7HRIdz4Wo3Q==
acorn-walk@^8.1.1:
version "8.2.0"
resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
acorn@^8.4.1:
version "8.10.0"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
arg@^4.1.0:
version "4.1.3"
resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
asynckit@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
combined-stream@^1.0.8:
version "1.0.8"
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
dependencies:
delayed-stream "~1.0.0"
create-require@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
delayed-stream@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
diff@^4.0.1:
version "4.0.2"
resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
esm@^3.2.25:
version "3.2.25"
resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
form-data@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
integrity sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==
dependencies:
asynckit "^0.4.0"
combined-stream "^1.0.8"
mime-types "^2.1.12"
make-error@^1.1.1:
version "1.3.6"
resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
mime-db@1.52.0:
version "1.52.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
mime-types@^2.1.12:
version "2.1.35"
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
dependencies:
mime-db "1.52.0"
node-fetch@2:
version "2.6.13"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.13.tgz#a20acbbec73c2e09f9007de5cda17104122e0010"
integrity sha512-StxNAxh15zr77QvvkmveSQ8uCQ4+v5FkvNTj0OESmiHu+VRi/gXArXtkWMElOsOUNLtUEvI4yS+rdtOHZTwlQA==
dependencies:
whatwg-url "^5.0.0"
tr46@~0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
ts-node@^10.9.1:
version "10.9.1"
resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b"
integrity sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==
dependencies:
"@cspotcode/source-map-support" "^0.8.0"
"@tsconfig/node10" "^1.0.7"
"@tsconfig/node12" "^1.0.7"
"@tsconfig/node14" "^1.0.0"
"@tsconfig/node16" "^1.0.2"
acorn "^8.4.1"
acorn-walk "^8.1.1"
arg "^4.1.0"
create-require "^1.1.0"
diff "^4.0.1"
make-error "^1.1.1"
v8-compile-cache-lib "^3.0.1"
yn "3.1.1"
typescript@^5.1.6:
version "5.1.6"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
v8-compile-cache-lib@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
webidl-conversions@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
whatwg-url@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
dependencies:
tr46 "~0.0.3"
webidl-conversions "^3.0.0"
yn@3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==