Wraps datauri module with template support.
npm install --save datauri.template
GET STARTED
This template method runs on top of Hogan(Mustache) by default, but you can change to any engine of your choice.
Hello World
We are going to start creating a template file, this can be CSS, HTML or JS. Make sure to add the variables classNameSuffix and dataURISchema. Both are reserved at this time, but custom variable names will be available soon.
/* foobar.css */}
Now we can create a JS file to preprocess the respective template. Remember that you do not necessarily need to instance DataURI like the example bellow. More examples using Callbacks and Events are available in the main doc.
var DataURI = data = 'test/myfile.png'; var content = data; // resultconsole; // =>> .image-myfile {\n...
Write file + Extra variables
/* variables.css */} };}
var fs = DataURI = data = 'test/flag.gif' content = data; fs;
/* variables.compiled.css */
Custom template engine
Consider lodash.template as example. If your favorite template engine does support a compile + render shorthand, you just need to point the handler after a given template path, otherwise you will need to create a template adapter.
/* lodash.css */
var fs = DataURI = _ = // or lodash.template for custom builds handleb = // or lodash.template for custom builds data = 'test/flag.gif'; content = data; fs;
/* lodash.css */
Create a template adapter
Some templates engines does not have a shorthand to compile + render at the same call. In this specific cases we can create a template wrapper as the example bellow:
var DataURI = handlebars = data = 'test/flag.gif'; data { var tpl = handlebars; // bind is used to ensure scope return tpl;}; var content = data; // resultconsole; // =>> .image-flag {\n...
DEVELOPING
$ make install$ make test
If you'd like to test the full process including npm installer, just run:
$ make fulltest
Release notes
- 0.1 - First release
License
MIT License (c) Helder Santana