mirror of
https://github.com/penpot/penpot-export.git
synced 2025-03-18 02:11:16 -05:00
refactor!(cli): rename pentpot-css-export to penpot-export
This commit is contained in:
Roberto Redradix
Roberto RedRadix
parent
ec802a35d0
commit
e13d644805
27 changed files with 21 additions and 26 deletions
20
README.md
20
README.md
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 .",
|
||||
|
|
@ -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.',
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -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)
|
||||
Loading…
Add table
Reference in a new issue