using a CSS compressor with SCSS?

48 views
Skip to first unread message

Performant Data LLC

unread,
May 21, 2015, 3:28:15 PM5/21/15
to wr...@googlegroups.com

I was using cssMin per the example on http://wro4j.readthedocs.org/en/stable/MavenPlugin/ but stripped down to:


preProcessors=jsMin,cssMin
postProcessors
=rubySassCss


since I'm interested in SCSS, not Less or Coffeescript. I'm also not using @import yet. This turns


@charset "UTF-8";
/*! Copyright ... */

@font-face {
  font-family: Roboto;
  font-weight: 300;
  src: url(../font/...) format("truetype");
}


into


@font-face {
  font-family: Roboto;
  font-weight: 300;
  src: url(../font/...) format("truetype");
}


stripping out the /*! comments and, strangely, the @charset. It also doesn't do much compression. So following what seems to be the standard advice, I tried a different compressor:


preProcessors=jsMin,yuiCssMin
postProcessors
=rubySassCss


That output:


@charset "UTF-8";
/* Copyright ... */
@font-face {
  font-family: Roboto;
  font-weight: 300;
  src: url(../font/...) format("truetype");
}


but again didn't do much compression. So I tried:


preProcessors=jsMin
postProcessors
=yuiCssMin,rubySassCss


Same output. Tried:


preProcessors=jsMin
postProcessors
=rubySassCss,yuiCssMin


which gives:


@charset "UTF-8";@font-face{font-family:Roboto;font-weight:300;src:url(../font/...) format("truetype")}


Good compression, but now I lose the comments. I also tried:


preProcessors=jsMin,cssCompressor
postProcessors
=rubySassCss


but the Sass processor throws an exception on syntax, and


preProcessors=jsMin
postProcessors
=rubySassCss,cssCompressor


gives the same as the last result.

So what's the proper configuration?

This was all done from command-line Maven, with Eclipse shut down so it wouldn't interfere. The output files were all under target/ROOT/.

Alex Objelean

unread,
May 22, 2015, 4:31:00 AM5/22/15
to wr...@googlegroups.com, perform...@gmail.com
Hi,

to understand what is happening I have updated several unit tests. More specifically, I have processed the css file from your example with each processor independently. You could reproduce it yourself, by updating the configurations from wro.properties (use only one processor at a time). Here are my observations:

  • Processing with cssMin produce the following result:
    • @charset "UTF-8";@font-face{font-family:Roboto;font-weight:300;src:url(../font/...) format("truetype");}
    • From my point of view, this result is correct as expected.
  • Processing with rubySassCss produce the following result:
      • /* Copyright ... */
        @font-face {
          font-family: Roboto;
          font-weight: 300;
          src: url(../font/...) format("truetype"); }
      • Apparently this processor strip the charset annotation. This doesn't seem to be an expected behavior. Therefore, this might be reported as a bug to the ruby version of this processor. Wro4j does nothing, but delegate the processing to ruby gem.
    • Processing with rubySassCss minimized content of the same resource (simulating the flow reported by you, when the cssMin is applied first, then the rubySassCss is applied at the end)
        • @font-face {
            font-family: Roboto;
            font-weight: 300;
            src: url(../font/...) format("truetype"); }
        • Apparently this processor does the opposite of the minimization. Is this expected behavior? I believe not. Therefore, this could be reported as a bug to the ruby based library. 
      Conclusions
      • Apparently rubySassCss processor has a couple of issues: strip the charset annotation and performs the opposite of the minimization.
      • cssMin processor works as expected.
      • Applying cssMin after rubySass processor could be used as a workaround for one of the identified issues.
      • Applying processors one by one can help identify the problem easier.
      • It would make sense report some of the found issues to the native ruby library responsible for processing sass resources.
      Let me know if you have other questions or suggestions.

      Thanks,
      Alex

      Performant Data LLC

      unread,
      May 22, 2015, 5:12:17 PM5/22/15
      to wr...@googlegroups.com
      Alex Objelean wrote:
      • Applying processors one by one can help identify the problem easier.
      OK
      • It would make sense report some of the found issues to the native ruby library responsible for processing sass resources.
      What project are you getting your code from? https://github.com/sass/ruby-libsass? You don't mention on http://wro4j.readthedocs.org/en/stable/RubySassCss/.
      Reply all
      Reply to author
      Forward
      0 new messages