Non JS Assets

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.

Currently there is no predefined way to solve this problem. This page is meant to document and discuss ongoing efforts in this area.

• A Boot-specific solution utilizing the fileset is documented in boot-cljsjs #21 (fleshing this out into a Wiki page would be welcome).

• A similar approach has been discussed in the Hoplon forum

• An example, using cljsjs/c3. In build.boot:

  (deftask build []
    (comp (sift :add-jar {'cljsjs/c3 #"^cljsjs/c3/common/c3.min.css$"})
          (cljs)))

  In index.html:

  <link rel="stylesheet" type="text/css" href="cljsjs/c3/common/c3.min.css">

from-jars 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"]}})

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.

// Less
// http://lesscss.org/features/#import-directives-feature
@import (inline) "cljsjs/production/fixed-data-table.min.inc.css";

Ring middleware

Ring-cljsjs