Did you know ... Search Documentation:
Packs (add-ons) for SWI-Prolog

Package "tailwind_pl"

Title:Tailwind-style CSS generator for Prolog
Rating:Not rated. Create the first rating!
Latest version:2.0.2
SHA1 sum:8ff3afb3c79a8d73970e9ee52ac35168b757bb88
Author:James N. V. Cash <james.cash@occasionallycogent.com>
Home page:https://github.com/jamesnvc/tailwind_pl
Download URL:https://github.com/jamesnvc/tailwind_pl/releases/*.zip
Requires:inotify
tailwind_pl_generate
Provides:tailwind

Reviews

No reviews. Create the first review!.

Details by download location

VersionSHA1#DownloadsURL
1.0.1493c8109c9a0085b8bf10c15f63f8fc3664999bd2https://github.com/jamesnvc/tailwind_pl/archive/v1.0.1.zip
1.0.2fa2152498ba634bbde77815313c8cac30225252c1https://github.com/jamesnvc/tailwind_pl/archive/v1.0.2.zip
1.0.38ddd090e37c07a1274783a4d361daec63a5ca6251https://github.com/jamesnvc/tailwind_pl/archive/v1.0.3.zip
1.0.42b16df8657a8cb27a3ebbfaa2d2e87534770c22b1https://github.com/jamesnvc/tailwind_pl/archive/v1.0.4.zip
1.0.5ff2cad35ef86abffc4641f6b5103f299d5fa7a136https://github.com/jamesnvc/tailwind_pl/archive/v1.0.5.zip
1.1.0d1b88f436a85a121df57b8fa6911ee09ea103c7e1https://github.com/jamesnvc/tailwind_pl/archive/v1.1.0.zip
1.1.164340f4e69a00d15d2d62c8d4d19d69c3213c3b33https://github.com/jamesnvc/tailwind_pl/archive/v1.1.1.zip
2.0.0ada394ddf5033946f35dc78a0ec35df6a9751c071https://github.com/jamesnvc/tailwind_pl/archive/v2.0.0.zip
2.0.1e96b1474111bd5456265bf7315d566c74ba4f8f72https://github.com/jamesnvc/tailwind_pl/archive/v2.0.1.zip
2.0.28ff3afb3c79a8d73970e9ee52ac35168b757bb8810https://github.com/jamesnvc/tailwind_pl/archive/v2.0.2.zip

Tailwind_pl

Tailwind_pl is a pack for SWI-Prolog that lets you do CSS styling with TailwindCSS without any Node.js dependency. It is effectively a rewrite of Tailwind's JIT compiler in Prolog, inspired by Girouette's approach in Clojure.

Tailwind_pl watches the given directories for changes to Prolog files, searches for Tailwind-style CSS selectors and generates a CSS file containing just the used selectors.

Tailwind_pl also extends Tailwind by allowing more dynamic class-names that use exact colours or numbers (ex. w-42%).

Installation

``` prolog ?- pack_install(tailwind_pl).


## Example Usage


``` prolog
  :- module(myapp, [go/1]).

:- use_module(library(filesex), [directory_file_path/3, make_directory_path/1]).
:- use_module(library(http/http_dispatch), [http_redirect/3,
                                            http_dispatch/1,
                                            http_reply_file/3,
                                            http_handler/3,
                                            http_location_by_id/2
                                           ]).
:- use_module(library(http/html_write), [html//1,
                                         reply_html_page/2,
                                         html_receive//1]).
:- use_module(library(http/thread_httpd), [http_server/2,
                                           http_stop_server/2]).
:- use_module(library(tailwind), [start_watching_dirs/3,
                                  stop_watching_dirs/1,
                                  reset_style/1]).

%! go(+Port) is det.
%  Interactive entry point to start the server.
go(Port) :-
    start_css_watcher,
    http_server(http_dispatch, [port(Port)]).

user:file_search_path(css, CssDir) :-
    working_directory(Cwd, Cwd),
    directory_file_path(Cwd, "../resources/css", CssDir).

:- dynamic css_watcher/1.
start_css_watcher :-
    stop_css_watcher,
    working_directory(Cwd, Cwd),
    directory_file_path(Cwd, "../resources/css", CssDir),
    ( exists_directory(CssDir) -> true ; make_directory_path(CssDir) ),
    absolute_file_name(css("styles.css"), CssFile, [access(none)]),
    start_watching_dirs([Cwd], CssFile, Watcher),
    assertz(css_watcher(Watcher)).

stop_css_watcher :-
    css_watcher(Watcher), !,
    stop_watching_dirs(Watcher),
    retractall(css_watcher(Watcher)).
stop_css_watcher.

% Routes

:- multifile http:location/3.
:- dynamic http:location/3.

http:location(css, root(css), []).

:- http_handler(root(.), home_page_handler, [method(get), id(home_page),
                                             spawn(handler_pool)]).

:- http_handler(css('styles.css'), css_file_handler, [method(get), id(tw_css)]).
:- http_handler(css('reset.css'), reset_css_handler, [method(get), id(reset_css)]).

home_page_handler(_Request) :-
    reply_html_page(title('Hotwire.pl'), [\home_page]).

css_file_handler(Request) :-
    http_reply_file(css('styles.css'), [], Request).

reset_css_handler(_) :-
    reset_style(Style),
    format("Content-Type: text/css~n~n~s", [Style]).

% content

user:head(default, Head) -->
    html([Head,
          \html_receive(head),
          link([rel(stylesheet), href(#(reset_css))], []),
          link([rel(stylesheet), href(#(tw_css))], [])
         ]).

% Home Page

home_page -->
    html(
        div(class(["flex-col", "text-purple-500", 'bg-rose-50']),
            [h2(class(['text-lg',
                       'hover:animation-ping',
                       'bg-green-300', 'hover:text-rose-100']),
                "Info"),
             \p("here's some stuff, some information"),
             \p("Another paragraph")
            ])
    ).

p(Text) -->
    html(p(class(['text-sm', 'text-blue', 'hover:opacity-50']),
           Text)).

Differences from Tailwind

All the selectors from Tailwind should also be supported here. If any don't work, please file a bug!

Additionally, some new features are supported, taking advantage of the fact that the styles are created dynamically as needed.

  • Colours can be specified not just as the predefined colour names (e.g. pink-500) but as RGB(A) and HSL(A); for example, all of the following are valid styles: `text-#c0ffee`, bg-rgb-cafeba, from-hsla-50-60-70-0.5. This feature is copied from Girouette.
  • in most places where a size is given as just a number in Tailwind (e.g. mx-4 which will set the left and right margins to `1rem`), you can use arbitrary distances -- e.g. `mx-2.3rem, `font-size-17.5px`. This feature is copied from Girouette.
  • Similar to the `group-hover:`, `group-focus:`, etc, you can use `group-attr-SOMEATTR:` which will effective do `.group[SOMEATTR]`, as group-hover does `.group:hover`. This can be used, for example, to do put the group class on a `<details>` element and group-attr-open:hidden on some child, do hide said element when the detail element is open

Contents of pack "tailwind_pl"

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