css_write

This Prolog library provides a DCG, css//1 for generating CSS in the style of html//.

You can install it by running pack_install(css_write). or view it in the SWI-Prolog package directory.

You can use this to write CSS rules as nested functors with arity one or two; see below for examples.

One-arity functors are interpreted as selector(styles), so for example p(margin('3em')) will generate the CSS rule p { margin: 3em; }. The styles can also be a list, to provide multiple styles (e.g. p([margin('3em'), 'font-size'(small)]) generates p { margin: 3em; font-size: small; }).

For two-arity functors, the first argument is the styles, as above, and the second argument will be nested child selectors. For example, p(margin('3em'), [img(width('300px'), strong('font-size'(large)))]) generates:

p { margin:3em; }
pimg { width:300px; }
pstrong { font-size: large; }

This can of course themselves be nested, so you could write:

p([],
strong([color(blue)],
emph([color(red)]))).

to generate

pstrong { color: blue; }
pstrongemph { color: red; }

One special extension to the CSS syntax is added: if a selector begins with &, the ampersand will be replaced with the parent rule. For example,

p(color(red),
'&:hover'(color(blue))).

Generates

p { color: red; }
p:hover { color: blue; }

To include a CSS DCG inside another one, you write \(module:other_dcg). For example:

:- module(foo, []).some_css-->
css([code('font-family'('"PragmataPro Mono"))]).main_css-->
css([body(margin('3em')),
\(foo:some_css)]).

Generates

body { margin:3em; }
code { font-family:"PragmataPro Mono"; }

See the example in tests/ for some more complicated usage.

Examples

Using with html_write

:- use_module(library(css_write), [css//1, write_css/2]).
:- use_module(library(http/html_write), [reply_html_page/2,
html//1,
html_post//2,
html_receive//1]).main_css-->
css([body(margin('3em')),
p([color(red), 'font-size'(small)],
['.thing'([margin('0 auto'),
'font-family'(monospace)])])])
home_page(_Request) :-
reply_html_page([title('CSS Demo'),
\html_receive(css)],
\home_page_body).include_css(CssDcg) -->
{ write_css(CssDcg, CssTxt) },
html_post(css, style([], CssTxt)).home_page_body-->
html([\include_css(main_css),
div(id(main),
[p([],
["Hello world",
strong(class(thing), "Some stuff")])])]).