Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bacoords/postcss-understrap-palette-generator
PostCSS plugin to generate a json file for Understrap theme
https://github.com/bacoords/postcss-understrap-palette-generator
bootstrap postcss understrap wordpress
Last synced: 2 months ago
JSON representation
PostCSS plugin to generate a json file for Understrap theme
- Host: GitHub
- URL: https://github.com/bacoords/postcss-understrap-palette-generator
- Owner: bacoords
- License: mit
- Created: 2021-08-19T23:11:53.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-09T22:53:13.000Z (about 1 year ago)
- Last Synced: 2024-10-10T00:23:26.757Z (3 months ago)
- Topics: bootstrap, postcss, understrap, wordpress
- Language: JavaScript
- Homepage: https://understrap.com
- Size: 80.1 KB
- Stars: 0
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Understrap Palette Generator
[PostCSS] plugin to generate a json file of your Bootstrap color variables. This is a dependency for the [Understrap] open source WordPress theme framework. We're then digesting this JSON file to populate Gutenberg with theme colors that actually match your designs.
[PostCSS]: https://github.com/postcss/postcss
[Understrap]: https://github.com/understrap/understrap
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev https://github.com/bacoords/postcss-understrap-palette-generator
```
**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
**Step 3:** Add the plugin to plugins list:
```diff
module.exports = {
plugins: [
autoprefixer : {}
+ 'postcss-understrap-palette-generator':{},
]
}
```
## Options
### defaults: object
Pass default values for variables that may or may not be in your Bootstrap's variables. They'll get added to the JSON file with the value you set. However, if they exist in your CSS and they're in the `colors` option below, they may get overwritten by the value in your CSS. Example:
```diff
module.exports = {
plugins: [
autoprefixer : {}
'postcss-understrap-palette-generator':{
+ defaults: {
+ "--magenta": "#ff00ff"
+ }
},
]
}
```
### colors: array
An array of color variables you explicitly want the tool to parse from your CSS file. The difference from `defaults` is that these are NOT added to the final output UNLESS a value is found in your CSS. Also, if you don't include a variable in this array, it does not get parsed by the tool at all.
```diff
module.exports = {
plugins: [
autoprefixer : {}
'postcss-understrap-palette-generator':{
+ colors: [
+ "--primary"
+ ]
},
]
}
```
### output: string
The name of the JSON file you explicitly want the tool to save the parsed colors to. Defaults to `inc/editor-color-palette.json`.
```diff
module.exports = {
plugins: [
autoprefixer : {}
'postcss-understrap-palette-generator':{
+ output: 'example/example-file.json'
},
]
}
```
[official docs]: https://github.com/postcss/postcss#usage