Package "css_write"

Title:	DCG for generating CSS
Rating:	Not rated. Create the first rating!
Latest version:	1.4.0
SHA1 sum:	e3cebdf787b7cb50ad589cdf5e16ad176097e4a6
Author:	James N. V. Cash <james.cash@occasionallycogent.com>
Home page:	https://github.com/jamesnvc/css_write
Download URL:	https://github.com/jamesnvc/css_write/releases/*.zip
Requires:	list_util

Reviews

No reviews. Create the first review!.

Details by download location

Version	SHA1	#Downloads	URL
1.4.0	e3cebdf787b7cb50ad589cdf5e16ad176097e4a6	6	https://github.com/jamesnvc/css_write/archive/refs/tags/v1.4.0.zip
1.3.2	3d3ace44264bfb737b59f5b29a630694bc2e2a11	17	https://github.com/jamesnvc/css_write/archive/v1.3.2.zip
1.3.0	13dd0432bca7fcd59b173c34105d7b72a3403612	1	https://github.com/jamesnvc/css_write/archive/v1.3.0.zip
1.2.0	307d01fa7c0bf0347ee340e9fa5c0ad2008ad782	7	https://github.com/jamesnvc/css_write/archive/v1.2.0.zip
1.1.0	7a9c45729d1d50ccb8fe27fdcf6fa5829a9932b5	1	https://github.com/jamesnvc/css_write/archive/v1.1.0.zip
1.0.0	77bf6bedb19dd2a3fca5eceb68404a99c529d123	26	https://github.com/jamesnvc/css_write/archive/v1.0.0.zip
0.0.1	557cad1584e4b827cac2bbbc271c01380c4ffe69	1	https://github.com/jamesnvc/css_write/archive/v0.0.1.zip

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; }
p img { width: 300px; }
p strong { font-size: large; }

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

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

to generate

p strong { color: blue; }
p strong emph { 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")])])]).

Contents of pack "css_write"

Pack contains 5 files holding a total of 17.2K bytes.