0
Fork 0
mirror of https://github.com/penpot/penpot-export.git synced 2025-03-20 19:21:16 -05:00

refactor!(cli): rename pentpot-css-export to penpot-export

This commit is contained in:
Roberto Redradix 2023-09-01 16:40:04 +02:00 committed by Roberto RedRadix
parent ec802a35d0
commit e13d644805
27 changed files with 21 additions and 26 deletions

View file

@ -1,24 +1,24 @@
# penpot-css-export
# penpot-export
## Description
`penpot-css-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 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.
## Installation
To install `penpot-css-export`, simply run:
To install `penpot-export`, simply run:
```bash
# npm
npm install penpot-css-export --save-dev
npm install penpot-export --save-dev
# yarn
yarn add penpot-css-export
yarn add penpot-export
```
## Configuration
Before you can use `penpot-css-export`, you need to set up a [`penpot-css-export.config.js`](./packages/demo/penpot-css-export.config.js) file at the root of your project. This file defines how your Penpot designs will be exported.
Before you can use `penpot-export`, you need to set up a [`penpot-export.config.js`](./packages/demo/penpot-export.config.js) file at the root of your project. This file defines how your Penpot designs will be exported.
Configuration example:
@ -26,7 +26,7 @@ Configuration example:
require('dotenv').config()
/**
* @type {import('penpot-css-export').UserConfig}
* @type {import('penpot-export').UserConfig}
*/
const config = {
instance: process.env.PENPOT_BASE_URL || undefined,
@ -62,7 +62,7 @@ module.exports = config
## Usage
Once you've set up the `penpot-css-export.config.js` file, simply run the following command to generate your CSS files:
Once you've set up the `penpot-export.config.js` file, simply run the following command to generate your CSS files:
```bash
pce
@ -82,12 +82,12 @@ This project utilizes [Yarn Workspaces](https://classic.yarnpkg.com/lang/en/docs
### Package Structure
- [**packages/penpot-css-export**](./packages/penpot-css-export/): This package contains the CLI tool written in TypeScript. This is where the primary tool code resides.
- [**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.
### 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-css-export" package.
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.
### Handy Commands

View file

@ -5,8 +5,8 @@
"packages/*"
],
"scripts": {
"dev": "npm run dev -w penpot-css-export",
"build": "npm run build -w penpot-css-export",
"dev": "npm run dev -w penpot-export",
"build": "npm run build -w penpot-export",
"demo": "npm run generate-css -w demo"
}
}

View file

@ -3,10 +3,10 @@
"private": true,
"version": "0.0.0",
"scripts": {
"generate-css": "pce"
"generate-css": "penpot-export"
},
"dependencies": {
"penpot-css-export": "0.0.0"
"penpot-export": "0.0.0"
},
"devDependencies": {
"dotenv": "^16.3.1"

View file

@ -5,7 +5,7 @@ if (typeof process.env.PENPOT_ACCESS_TOKEN !== 'string') {
}
/**
* @type {import('penpot-css-export').UserConfig}
* @type {import('penpot-export').UserConfig}
*/
const config = {
instance: process.env.PENPOT_BASE_URL || undefined,

View file

@ -1,6 +1,6 @@
<html>
<head>
<title>penpot-css-export demo</title>
<title>penpot-export demo</title>
<link href='https://fonts.googleapis.com/css?family=Work%20Sans:400,700' rel='stylesheet'>
<link rel="stylesheet" href="./styles/typographies.css">
<link rel="stylesheet" href="./styles/colors.css">

View file

@ -1,5 +1,5 @@
{
"name": "penpot-css-export",
"name": "penpot-export",
"version": "0.0.0",
"license": "UNLICENSED",
"main": "dist/bin/index.js",
@ -7,9 +7,7 @@
"files": [
"dist"
],
"bin": {
"pce": "./dist/bin/index.js"
},
"bin": "./dist/bin/index.js",
"scripts": {
"build": "tsc",
"format": "prettier -w .",

View file

@ -5,15 +5,12 @@ import path from 'path'
import { generateCssFromConfig } from '../lib'
const rootProjectPath = fs.realpathSync(process.cwd())
const configFilePath = path.resolve(
rootProjectPath,
'penpot-css-export.config.js',
)
const configFilePath = path.resolve(rootProjectPath, 'penpot-export.config.js')
const exists = fs.existsSync(configFilePath)
if (!exists) {
throw new Error(
'penpot-css-export: Config file not found. Check if file penpot-css-export.config.js exists at root.',
'penpot-export: Config file not found. Check if file penpot-export.config.js exists at root.',
)
}

View file

@ -12,7 +12,7 @@ export async function generateCssFromConfig(
) {
if (!validateUserConfig(userConfig))
throw new Error(
'Error validating user config. This is probably an error in penpot-css-export code.',
'Error validating user config. This is probably an error in penpot-export code.',
)
const config = normalizePenpotExportUserConfig(userConfig)