neomaclin / sbt-simple-url-update Goto Github PK

I cannot find the dependency for this plugin. I've tried
addSbtPlugin("com.nurun.sbt" % "sbt-simple-url-update" % "1.0.0")
and
addSbtPlugin("com.nurun.sbt" % "sbt-simple-url-update" % "1.0.0-SNAPSHOT")
with
resolvers += Classpaths.sbtPluginSnapshots.

I've detected a bug, that takes place, if NO rjs presents in pipeline.

/app
  /assets
    /stylesheets
      /1.css

File 1.css contains something like this:

.some-icon {
    background-repeat: no-repeat;
    background-image: url('/assets/images/16.png');
}

build.sbt contains this:

pipelineStages ++= Seq(uglify, cssCompress, digest, simpleUrlUpdate, digest)

After calling sbt stage, original source file 1.css is modified by simpleUrlUpdate:

    background-image: url('/assets/images/0e62383352fa6de7092f51a29143260f-16.png');

Need to do hg revert after such stage...

File plugins.sbt contains this:

addSbtPlugin("com.typesafe.sbt" % "sbt-gzip" % "1.0.0")

addSbtPlugin("com.typesafe.sbt" % "sbt-digest" % "1.1.0")

addSbtPlugin("com.typesafe.sbt" % "sbt-web" % "1.2.0")

addSbtPlugin("com.typesafe.sbt" % "sbt-uglify" % "1.0.3")

addSbtPlugin("net.ground5hark.sbt" % "sbt-css-compress" % "0.1.3")

addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.4.0-M3")

It would be nice if the plugin could also replace RequireJS config paths.

This would also fix issue sbt/sbt-web#49

If I have an asset, say images/logo.png, and then I have a URL on a different server that ends in the same path, http://example.com/images/logo.png, then the current implementation will fingerprint the example.com logo - not good.

A simple solution to this would be to only replace URLs in quotes (both single and double). In CSS, this has the limitation that unquoted URLs won't get replaced, but I think it's best practice to only use quoted URLs, so that's probably fine. In JS, I can't think of a place where you would have a URL that wasn't in a string by itself.

But then we have a problem, relative URLs are not correctly fingerprinted in CSS files, and it's very common to use relative URLs in CSS files - particularly when you're deploying to a CDN which might server assets from a different path, then you have to use relative URLs, eg ../images/foo.png.

So my suggestion is that you properly parse, at very least, the CSS, to find URLs, then process those URLs to work out which asset they are referring to locally. I've got some example regexps that I wrote some time ago here:

  val QuotedString = """(?:"[^"]*")|(?:'[^']*')"""

  val UrlRegex = ("""url\(\s*(""" + QuotedString + """|[^"'()\s\\]*)\s*\)""").r
  val ImportRegex = ("""@import\s+(""" + QuotedString + """)\s*;""").r

This will ensure that only URLs inside of url(...) or after an @import statement are matched. Another nice thing about this is it means you only run two regular expressions over each file, rather than running one regexp for every asset. It does make replacement a bit harder (you need to go through and manage a StringBuilder, using the start/end methods on the match group to transfer the parts of the file in between etc), but it means you can easily handle relative URLs, include URLs that traverse up like ../images/foo.png, and also absolute path URLs correctly.

I don't think there's an equivalent solution for JavaScript, but at least in JavaScript you generally don't need to deal with relative URLs in the same way that you need to in CSS, it should be sufficient there to just replace quoted URLs.

It'd be great to also look for -min.[(js)|(css)] and .min.[(js)|(css)] files also. If the min exists then rewrite the urls for that. This is exactly what Play's reverse router is doing.