Non JS Assets - cljsjs/packages GitHub Wiki

The :foreign-libs feature provided by Clojurescript does not have any support for non-JavaScript files like CSS files and images.

Many JavaScript libraries depend on additional assets like CSS and images.

This page documents some approaches to using these CSS or images files in your application.

Importing using Less/Sass compiler

less4clj and sass4clj can import files directly from classpath. This makes it easy to embed files from jar dependencies in CSS.

To find the correct file path check the build.boot file for the package or inspect the jar file, e.g. by opening the jar file in you local maven repo (~/.m2/repo) with archive file manager.

Less

To inline the css file contents one can use (inline) import directive: http://lesscss.org/features/#import-directives-feature.

@import (inline) "cljsjs/production/fixed-data-table.min.inc.css";

Sass

Sass4clj will inline the css file contents if you do not include .css file extension in the import path. Including the file extension would result in css @import rule being written.

@import "cljsjs/production/fixed-data-table.min.inc";

Ring middleware

To serve files so that you can refer to them from e.g. script or img, one can use Ring-cljsjs

Boot task

A minimal layer over the sift task above intended to take full paths as arguments.

WARNING This will break as soon as multiple files from a single jar are imported. A fix is left as an exercise to the reader.

(deftask from-jars
  "Import files from jars (e.g. CLJSJS) and move them to the desired location in the fileset."
  [i imports IMPORT #{[sym str str]} "Tuples describing imports: [jar-symbol path-in-jar target-path]"]
  (let [add-jar-args (into {} (for [[j p]   imports] [j (re-pattern (str "^" p "$"))]))
        move-args    (into {} (for [[_ p t] imports] [(re-pattern (str "^" p "$")) t]))]
    (sift :add-jar add-jar-args :move move-args)))

(task-options!
 from-jars {:imports #{['cljsjs/emojione
                        "cljsjs/emojione/common/sprites/emojione.sprites.svg"
                        "public/img/emojione.sprites.svg"]}})