sbt / sbt-stylus

sbt-web plugin for the stylus compiler

sbt-stylus

Note that this plugin is presently only working with an engineType set to Node e.g. (which is the default if a node command can be detected): set JsEngineKeys.engineType := JsEngineKeys.EngineType.Node

Allows stylus to be used from within sbt. Builds on com.github.sbt:sbt-js-engine in order to execute the stylus compiler along with the scripts to verify. js-engine enables high performance linting given parallelism and native JS engine execution.

To use this plugin use the addSbtPlugin command within your project's plugins.sbt (or as a global setting) i.e.:

addSbtPlugin("com.github.sbt" % "sbt-stylus" % "1.2.0")

Your project's build file also needs to enable sbt-web plugins. For example with build.sbt:

lazy val root = (project in file(".")).enablePlugins(SbtWeb)

The compiler allows some of the same options to be specified as the (stylus CLI itself)[http://learnboost.github.io/stylus/docs/executable.html]. Here are the options:

Option	Description
compress	Compress output by removing some whitespaces.
useNib	Adds nib dependency.
plugins	List of extra styles plugins to enable.

Use Nib:

Assets / StylusKeys.useNib := true

@import 'nib'

div
  box-shadow: 2px 2px 2px #000

will compile to:

div {
  -webkit-box-shadow: 2px 2px 2px #000;
  box-shadow: 2px 2px 2px #000;
}

Additional Plugins

Add any stylus plugin via a webjar library dependency to your project's plugins.sbt file, then add the key as so:

StylusKeys.plugins = Vector("nib", "jeet")

Compression

The following sbt code illustrates how compression can be enabled:

Assets / StylusKeys.compress := true

File filters

By default only main.styl is looked for given that the Stylus compiler must be explicitly fed the files that are required for compilation. Beyond just main.styl, you can use an expression in your build.sbt like the following:

Assets / StylusKeys.stylus / includeFilter := "foo.styl" | "bar.styl"

...where both foo.styl and bar.styl will be considered for the Stylus compiler.

Alternatively you may want a more general expression to exclude Stylus files that are not considered targets for the compiler. Quite commonly, Stylus files are divided up into those entry point files and other files, with the latter set intended for importing into the entry point files. These other files tend not to be suitable for the compiler in isolation as they can depend on the global declarations made by other non-imported Stylus files. For example, you may have a convention where any Stylus file starting with an _ should not be considered for direct compilation. To include all .styl files but exclude any beginning with an _ you can use the following declaration:

Assets / StylusKeys.stylus / includeFilter := "*.styl"

Assets / StylusKeys.stylus / excludeFilter := "_*.styl"

sbt-stylus's Issues

Unable to run

Hi,

I have recently update to play to 2.3, all my colleagues can run app properly, however, I am struggling so I assume it's a setup problem on my computer. It would be good it play exception was more accurate, as now I am totally lost.

I am on ubuntu 14.10, stylus seems to be installed.

[info] play - Listening for HTTP on /0:0:0:0:0:0:0:0:9000

(Server started, use Ctrl+D to stop and go back to the console...)

[info] Stylus compiling on 3 source(s)
[info]
[info]
[info]
[trace] Stack trace suppressed: run last web-assets:stylus for the full output.
error com.typesafe.sbt.jse.SbtJsTask$JsTaskFailure:
[error] application -

! @6j1j4gimo - Internal server error, for (GET) [/] ->

play.PlayExceptions$UnexpectedException: Unexpected exception[JsTaskFailure: ]
at play.PlayReloader$$anon$1$$anonfun$play$PlayReloader$$anon$$taskFailureHandler$1.apply(PlayReloader.scala:300) ~[na:na]
at play.PlayReloader$$anon$1$$anonfun$play$PlayReloader$$anon$$taskFailureHandler$1.apply(PlayReloader.scala:292) ~[na:na]
at scala.Option.map(Option.scala:145) ~[scala-library-2.11.1.jar:na]
at play.PlayReloader$$anon$1.play$PlayReloader$$anon$$taskFailureHandler(PlayReloader.scala:292) ~[na:na]
at play.PlayReloader$$anon$1$$anonfun$reload$2.apply(PlayReloader.scala:325) ~[na:na]
Caused by: com.typesafe.sbt.jse.SbtJsTask$JsTaskFailure:
at com.typesafe.sbt.jse.SbtJsTask$$anonfun$com$typesafe$sbt$jse$SbtJsTask$$executeJsOnEngine$1.apply(SbtJsTask.scala:195) ~[na:na]
at com.typesafe.sbt.jse.SbtJsTask$$anonfun$com$typesafe$sbt$jse$SbtJsTask$$executeJsOnEngine$1.apply(SbtJsTask.scala:167) ~[na:na]
at scala.util.Success$$anonfun$map$1.apply(Try.scala:206) ~[scala-library-2.11.1.jar:na]
at scala.util.Try$.apply(Try.scala:161) ~[scala-library-2.11.1.jar:na]
at scala.util.Success.map(Try.scala:206) ~[scala-library-2.11.1.jar:na]
[warn] play - No application found at invoker init

stylus-shell.js: TypeError: Object #<Renderer> has no method 'deps'

Good day.

I've stumbled over runtime exception in stylus-shell.js.

NOTE: this issue reproduceable only in 5-10% developers workstations, but in 100% cases on this 5-10% workstations.

So, let's look at log:

$ sbt
[proj2] $ assets
[info] Stylus compiling on 1 source(s)
[error] [TypeError: Object #<Renderer> has no method 'deps']
[info] 
[success] Total time: 1 s, completed Jun 27, 2014 3:25:28 PM
[proj2] $ ^D

$ ls -R target/web/stylus
target/web/stylus/main/stylesheets:
main.css

As you can see, sbt-stylus printed error, printed "success" and successfully compiled .styl sources.

Let's look at stylus-shell.js:

  }).then(function(result) {
    return {
      source: input,
      result: {
          filesRead: [input].concat(result.style.deps()),
          filesWritten: [output]
      }
    };

As you can see, dangerous .deps() method is called here, not in stylus.

Problem goes away, if I replace .concat(result.style.deps()), with ,:

  }).then(function(result) {
    return {
      source: input,
      result: {
          filesRead: [input],
          filesWritten: [output]
      }
    };

This is quick and dirty solution, but it works. Hope, there will be better solution...

Unable to call `stylus` from SBT

Trying to write a task that calls the stylus task from within it (so I can copy generated CSS files), but SBT doesn't recognize stylus as a task while IntelliJ does. How can I compile the stylus from an SBT?

lazy val electron = TaskKey[Unit]("electron")
electron := {
  clean.value
  val electronDir = new File("target/electron")
  electronDir.mkdir()
  val optJS = fullOptJS.value
  val elecOptJS = new File(electronDir, "main.js")
  Files.copy(optJS.data.toPath, elecOptJS.toPath)
  // stylus
  val resFolder = new File("target/web/stylus/main/css")
  val endResFolder = new File(electronDir, "css")
  Files.copy(resFolder.toPath, endResFolder.toPath)
}

// stylus is where the stylus task execution should go.

sbt-stylus doesn't work on Trireme

Warning: node.js detection failed, sbt will use the Rhino based Trireme JavaScript engine instead to run JavaScript assets compilation, which in some cases may be orders of magnitude slower than using node.js.
[info] Stylus compiling on 1 source(s)
[error] /path/to/app/assets/main.styl:3: TypeError: Cannot call method "call" of undefined
[error] Unknown line
[error] ^
[error] one error found
[error] (front-end/web-assets:stylus) com.typesafe.sbt.web.CompileProblemsException

Installing node solved the problem.

Compress only in production mode

Is it possible to do compression only in production mode? Compression would be nice, but it'd be annoying to have it on in development mode because then you couldn't easily read the file. However, it'd also be annoying to have to edit your file whenever you wanted to switch between packaging your app for deployment and running it in development mode.

Requesting update to latest stylus and stylus-nib with more options

The options I'm looking for the most are source maps and the --include-css flag to pull in imported external css during compilation.

Add a Nib flag

https://github.com/visionmedia/nib