guyner v1.3.1
GUYNER
A color convert to different formats. Format your JSON based source file to any file you want.
Installation
Installation isn't necessary, the script can be used through npx.
npx guyner --src mySourceFile.json --dest /temp --type scssBut if you really want it in your project, you can install it using npm;
npm install guyneror Yarn;
yarn add guynerArguments
| Argument | Required | Options | Description |
|---|---|---|---|
--src | ✔ | file / path string | The source file (json) or folder (with json files) for your colors |
--dest | ✔ | file / path string | Destination folder of the generated files. |
--type | × (only if template is not set) | scss, less, css, json, js, yaml | The output type of file to be used. |
--template | × (only if type is not set) | string | A template file or folder with files to use to generate the files. When the provided templates arent sufficient |
--advanced | × | hsla, rgba | Add more output types to the files. |
--prefix | × | boolean | A prefix will be used within the fixes to prefix variables or objects |
--combine | × | boolean | When given multiple sources, they can be combined into one output file |
--filename | × | string | You can give an altername output name for your file. They will use they extension of your template. When given multiple destinations (not combined) you need to give the same amount of filenames |
Usage
Guyner can be used as a npx script or as a node_module in your package. The easiest way is to install it and use it in a script in your package.json like;
// package.json
{
"scripts": {
"convert-colors": "guyner --src assets/my-colors.json --dest src/assets/scss/ --type scss"
}
}You could also, due to the total amount of arguments which could be big, create a bash script which can be ran by the scripts.
// package.json
{
"scripts": {
"convert-colors": "sh scripts/colors.sh"
}
}echo "> 01: Create a SCSS file from source"
npx guyner \
--src assets/my-colors.json \
--dest src/assets/scss/ \
--type scss
--type cssCustom templates
Besides the templates already made which can be used easily. You an also define your own template. Templates are using the ejs template syntax.
Examples can be found in the /templates folder of this package.
Example of the css template;
:root{
<% var i=0; Object.keys(colors).forEach(function(color){ i++; %>
--<%= settings.prefix %><%= colors[color].name %>: <%= colors[color].hex %>;
--<%= settings.prefix %><%= colors[color].name %>-hue: <%= colors[color].hsl.h %>;
--<%= settings.prefix %><%= colors[color].name %>-saturation: <%= colors[color].hsl.s %>;
--<%= settings.prefix %><%= colors[color].name %>-lightness: <%= colors[color].hsl.l %>;
--<%= settings.prefix %><%= colors[color].name %>-red: <%= colors[color].rgb.r %>;
--<%= settings.prefix %><%= colors[color].name %>-green: <%= colors[color].rgb.g %>;
--<%= settings.prefix %><%= colors[color].name %>-blue: <%= colors[color].rgb.b %>;
<% }); %>
}Wishlist
- Add support for rgba, hsla and 3 digix colors.
- Add option to be able to use depth in source files.
Contributing
Any help to make this package better is very welcome! So if you like this idea and have a good idea for refactor, update, write better docs or add features. Please feel free to contact me or just make a PR.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
Author
guyner © Sil van Diepen, Released under the MIT License. Authored and maintained by Sil van Diepen with help from contributors (list).
github.com/silvandiepen · GitHub @Sil van Diepen · Twitter @silvandiepen