deraen / sass4clj Goto Github PK
View Code? Open in Web Editor NEWSASS compiler for Clj, Lein and Boot, using Libsass Java wrapper
SASS compiler for Clj, Lein and Boot, using Libsass Java wrapper
Related #17
Currently sass4clj compiles any non-partial files (i.e. not starting with _
) in source-paths. It could be useful to select input files using option in some cases, like if the source-path contains some Sass libraries which include non-partial files.
Things to consider:
(build {:inputs ["foo.scss" "bar.scss"]})
clj -Asass -i foo.scss -i bar.scss
If I for example have sass files that import mixins from a library in npm
and I pull node_modules into fileset:
e.g:
(deftask add-node-modules []
(with-pre-wrap fileset
(let [nm (clojure.java.io/file "node_modules")]
(when-not (and (.exists nm) (.isDirectory nm))
(dosh "npm" "install"))
(-> fileset
(add-resource (clojure.java.io/file ".") :include #{#"^node_modules/"})
commit!))))
thanks @anmonteiro
boot-sass tries to compile things in node_modules. Definitely not something desired
I'm using @import "magnific-popup/dist/magnific-popup";
and I'm expecting the .css to be loaded.
This works as I expect:
(sass4clj.core/find-webjars
{:asset-map (sass4clj.webjars/asset-map)}
"magnific-popup/dist/magnific-popup.css")
So I'm not sure why the @import
form doesn't work. But I'd expect this code to generate that string from my import.
Oh I should mention, I'm using boot-sass
This may be a boot-sass bug, this works:
(sass4clj.core/sass-compile
"@import \"magnific-popup/dist/magnific-popup\""
{})
as does this:
(sass4clj.core/sass-compile-to-file
(clojure.java.io/file "src/scss/public/main.scss")
(clojure.java.io/file "/tmp/output.css")
{})
Using the sass
task in Boot, I'm getting this exception whenever I make any changes to any .scss
file and compilation is broken until the pipeline is restarted. Using deraen/boot-sass "0.1.1"
along with org.webjars.bower/bootstrap-sass "3.3.6"
and org.webjars.bower/compass-mixins "0.12.7"
.
See: https://sass-lang.com/blog/libsass-is-deprecated
I presume there could be a CLJS library using the JS API: https://github.com/sass/dart-sass/blob/master/README.md#javascript-api
It would be nice if the boot task sets boot.core/*warnings*
so the speak task picks those up. Also compilation errors should perhaps throw an exception?
Somewhat related: adzerk-oss/boot-reload#72
It looks like jsass defaults to 8 (https://github.com/bit3/jsass/blob/59e1f48422109adb6ef44756e43f5f20e42efa5e/src/main/java/io/bit3/jsass/Options.java#L57) which is actually enough for my needs currently, but I can easily imagine wanting to change it in the future.
Hi there,
our SCSS structure is the following:
Where sass/themes/dark.scss
and sass/themes/lite.scss
are the "top-level" stylesheets, everything else being dependencies of them.
This is reflected in our project.clj:
:source-paths ["sass/themes"]
This setup compiles correctly.
The problem is, if I edit any stylesheet that is not a top-level one, sass4clj auto
will not detect the changes. I'd have to touch
them manually (or with some script) for a recompile to be triggered.
Is this a bug in the auto
implementation? Or maybe is our scss structure improvable?
Cheers - Victor
Is there a way to automatically run this task when compiling the uberjar? I tried both hooks and prep-tasks and I couldn't get it to work.
Same fixes should be applied to less4clj.
There are some API changes and just fixing the renamed calls didn't seem to be enough.
I was trying to find an easy solution for SASS-like syntax with ClojureScript for shadow-cljs but have not found it yet, but I think this could be fire if you could make your lib work with shadow-cljs. Thanks for the contribution though!
The Boot plugin dynamically adds the sass4clj dependency at runtime, when the plugin is called.
This is a problem in CI, because my dependencies have already been downloaded before I run my SASS build. Is it possible to add the sass4clj dependency to the POM for the Boot and Leiningen plugins? I know version handling stuff like this can be tricky, so I wanted to check if my idea made sense.
Line 76 in 240c099
Running boot sass target -d target
shows some WTF warning. The compilation still works though.
Compiling {sass}... 1 changed files.
SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
SLF4J: Defaulting to no-operation (NOP) logger implementation
SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.
Writing target dir(s)...
With boot -vv
:
Adding stylesheets/style.scss...
Adding funfin/core.cljs...
Adding main.cljs.edn...
Adding index.html...
Released java.util.concurrent.Semaphore@1757cd72[Permits = 1]...
Compiling {sass}... 1 changed files.
SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
SLF4J: Defaulting to no-operation (NOP) logger implementation
SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.
found META-INF/resources/webjars/bootstrap/4.0.0-alpha.2/scss/bootstrap.scss at webjars
Found jar:file:/Users/be9/.m2/repository/org/webjars/bootstrap/4.0.0-alpha.2/bootstrap-4.0.0-alpha.2.jar!/META-INF/resources/webjars/bootstrap/4.0.0-alpha.2/scss/bootstrap.scss from resources
Not sure if this is an issue in sass4clj or some other configuration, but I'm having trouble figuring why the source maps don't work.
/*# sourceMappingURL=main.css.map */
Any pointers on how to troubleshoot this?
Currently @import works for files with extension .scss. It would be great if the plugin would also understand importing from file with extension .sass.
The syntax is slightly different between the two formats: http://sass-lang.com/guide
I don't know if this makes things more complicated.
I'd love to be able to use this, it looks like it would be great to be able to watch
and sass
with boot instead of having a ruby setup running in parallel in the project just for stylesheets.
The only thing holding me back is not being able to glob :(
https://github.com/chriseppstein/sass-globbing
Maybe I misunderstand, but there's already a custom @import
setup in this project, so it wouldn't be crazy hard to add globbing?
Took me nearly a day to figure out how to get Foundation working with this task - found the solution here: http://hoplon.discoursehosting.net/t/trying-to-create-a-boot-task-to-compile-sass-files/386/10
Might be a good idea to document this kind of stuff in a wiki or something.
Sass4clj should be usable from REPL similar to how figwheel (start-figwheel) works. This should also allow use with Component/Integrant.
Similar main function should be usable with Clojure CLI.
Related: Deraen/less4clj#17
Jsass or libsass does some magic so just setting main.css.map
as sourceMapFile causes bad values for sourceMappingUrl.
/*# sourceMappingURL=../../2m7mhu/css/main.css.map */
/*# sourceMappingURL=../../../../../../../../../../Source/saapas/main.css.map */
I have the following task.
It compiles fine, but keeps outputting files to target.
I want it to compile into compiled_css instead.
Main reason, is I would like to run SASS compilation on its own.
(set-env!
:source-paths #{"src/cljs" "test/clj"}
:resource-paths #{"src/clj" "src/cljc" "resources"}
:dependencies '[
[adzerk/boot-cljs "1.7.228-1" :scope "test"]
[adzerk/boot-cljs-repl "0.3.0" :scope "test"]
[adzerk/boot-reload "0.4.5" :scope "test"]
[pandeiro/boot-http "0.7.1-SNAPSHOT" :scope "test"]
[crisptrutski/boot-cljs-test "0.2.2-SNAPSHOT" :scope "test"]
[org.clojure/clojure "1.7.0"]
[org.clojure/clojurescript "1.7.228"]
[adzerk/boot-test "1.1.1" :scope "test"]
[com.cemerick/piggieback "0.2.1" :scope "test"]
[weasel "0.7.0" :scope "test"]
[org.clojure/tools.nrepl "0.2.12" :scope "test"]
[org.clojure/core.async "0.2.374"
:exclusions [org.clojure/tools.reader]]
[sablono "0.4.0"]
[devcards "0.2.1-5"]
[deraen/boot-sass "0.2.1"]
[org.omcljs/om "1.0.0-alpha32" :exclusions [org.clojure/clojure]]])
(require
'[adzerk.boot-cljs :refer [cljs]]
'[adzerk.boot-cljs-repl :refer [cljs-repl start-repl repl-env]]
'[adzerk.boot-reload :refer [reload]]
'[adzerk.boot-test :refer [test]]
'[deraen.boot-sass :refer [sass]]
'[pandeiro.boot-http :refer [serve]])
(task-options!
pom {:project 'torca
:version "0.1.0-SNAPSHOT"
:description "TORCA CLJS Front-End"
:license {"The MIT License (MIT)" "http://opensource.org/licenses/mit-license.php"}}
aot {:namespace #{'backend.main}}
jar {:main 'backend.main}
cljs {:source-map true})
(deftask dev
"Start the dev env..."
[s speak bool "Notify when build is done"
p port PORT int "Port for web server"]
(comp
(watch)
(reload :on-jsload 'torca.core/reload)
(cljs-repl)
(cljs :compiler-options {:devcards true})
(serve :port port, :dir "target")
(target)
(if speak (boot.task.built-in/speak) identity)))
(deftask styles []
"Compile Styles"
(set-env! :source-paths #{"sass"}
:target "compiled_css")
(comp (watch)
(speak)
(sass)
(target)))
(deftask run-tests []
(test))
(deftask autotest []
(comp
(watch)
(run-tests)))
(deftask package
"Build the package"
[]
(comp
(cljs :compiler-options {:devcards false :optimizations :advanced})
(target)))
Tried this:
Results in this output:
Compiling {sass}... 77 changed files.
Error: file to import not found or unreadable: bootstrap/variables
Current dir:
on line 8 of bootstrap
>> @import "bootstrap/variables";
--------^
Moving the bootstrap directory up one level to the root of the resource path gets me this:
Compiling {sass}... 77 changed files.
Error: file to import not found or unreadable: mixins/hide-text
Current dir:
on line 5 of mixins
>> @import "mixins/hide-text";
--------^
So it gets passed the variables, but isn't able to locate the mixins sub-directory. It seems like it expects all imports to be relative to the root of the resource path.
Hi there,
first of all thank you for sass4clj - it's a pleasure to see it working!
One downside vs. my previous setup (ruby-sass) is the RAM penalty of having a JVM around just for this (500mb in my machine).
I already have JVMs for Clojure(Script) processes, would it be possible to hack one's project.clj so whenever I run lein figwheel
, the sass4clj library does its thing too?
I realise that this might be more of a generic leiningen question, but still I feel this would be a very commonly derisable thing, worth documenting.
Thoughts?
Cheers - Victor
Hi, thanks for maintaining this -- it's been very helpful to provide a smooth development experience!
I was wondering if you would considering returning a status report when errors are encountered. I'm calling sass4clj.api/build
, and it swallows any exceptions thrown during the compilation. I'd like to plug in my own error reporting.
I'm working around this by using with-out-str
and parsing the resulting text but surely that's a hack :)
I'm happy to submit a PR for this.
This add-ext/find logic just needs some tweaking to check for css files if scss doesn't exist: https://github.com/Deraen/sass4clj/blob/master/src/sass4clj/core.clj#L60-L71
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.