Skip to content

Commit

Permalink
CLI updates (#48)
Browse files Browse the repository at this point in the history
* cli accepts config and dest arg

OR a single arg for config file to be backwards compat

* Update README.md
  • Loading branch information
tbeseda authored May 26, 2024
1 parent 6a1abf8 commit 99fca34
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 15 deletions.
29 changes: 22 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -229,25 +229,40 @@ Enhance Styles includes a CSS reset by default. To opt out of this reset being i

## Standalone usage

To use Enhance Styles in other applications or frameworks, clone the repository:
To use Enhance Styles in other applications or frameworks, install Enhance Styles from npm:

```shell
git clone https://github.com/enhance-dev/enhance-styles.git
npm i -D @enhance/styles
```

Enhance Styles can be customized to your liking. See [the customization instructions](#customize) for a reference to which aspects of Enhance Styles can be adjusted to your liking. After writing your preferred `config.json` options, write the generated styles to `dist/enhance.css`:
The built in CLI, `enhance-styles`, takes two arguments: `--config=` and `--output=`. The `--config` argument is the path to your configuration file and the `--output` argument is the path where the .css file will be created.

If you do not specify config, the default configuration will be used.
You can use the default configuration or [create your own](#customize). We recommend a local project file like `./styleguide.json`.

If you do not specify output, the CSS will be printed to stdout.

```shell
npm run build
npx enhance-styles --config=./styleguide.json --output=./public/enhance.css
```

Or add it as a script to your package.json:

```json
{
"scripts": {
"enhance-styles": "enhance-styles --config=./styleguide.json --output=./public/enhance.css"
}
}
```

Minify `dist/enhance.css` to `dist/enhance.min.css`:
Then run:

```shell
npm run dist
npm run enhance-styles
```

Copy `enhance.css` or `enhance.min.css` to your project and either reference it with the `<link>` element, or inline it in a `<style>` element in your document head.
If you'd like, minification can be added as a part of your build process.

## Prior art

Expand Down
48 changes: 40 additions & 8 deletions cli.mjs
Original file line number Diff line number Diff line change
@@ -1,10 +1,42 @@
#!/usr/bin/env node
import fs from 'fs'
import path from 'path'
import * as url from 'url'
const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
const arg = process.argv[2]
const configpath = arg || path.join(__dirname, './config.json')
import { readFileSync, writeFileSync } from 'node:fs'
import { join } from 'node:path'
import { argv, cwd, stderr, stdout } from 'node:process'
import { fileURLToPath } from 'node:url'
import styles from './index.mjs'
const config = fs.readFileSync(configpath, 'utf-8')
process.stdout.write(styles(config))

function getArg(key) {
const value = argv.find(a => a.startsWith(`--${key}=`))
if (!value) return null
return value.replace(`--${key}=`, '')
}

const here = fileURLToPath(new URL('.', import.meta.url))

const configArg = getArg('config')
const outputArg = getArg('output')
const configPath = configArg
? join(cwd(), configArg)
: join(here, './config.json')

let configBlob
try {
configBlob = readFileSync(configPath, 'utf-8')
}
catch (err) {
stderr.write(`Error reading config file: ${configPath}\n`)
process.exit(1)
}

if (outputArg) {
const outputPath = join(cwd(), outputArg)
try {
writeFileSync(outputPath, styles(configBlob))
}
catch (err) {
stderr.write(`Error writing to output file: ${outputPath}\n`)
process.exit(1)
}
} else {
stdout.write(styles(configBlob))
}

0 comments on commit 99fca34

Please sign in to comment.