scss -ms-filter compilation problem

Daniel246 · July 3, 2013, 8:55am

Hi,
I have problem with compilation -ms-filter property in scss mixin.

mytheme.scss

@import "../reindeer/reindeer.scss";
@import "bg-alpha.scss";
 
@mixin mytheme {
  @include reindeer;

  .v-button {
  	@include bg-alpha(0.7); 
  	-ms-filter:alpha(opacity=0.4);
 }
}

bg-alpha.scss

@mixin bg-alpha ($a) {
	opacity:$a;
	-ms-filter:alpha(opacity=$a*100);
}

During compilation is thrown this error


com.vaadin.sass.internal.parser.SCSSParseException: Error when parsing file C:\Develop\...\VAADIN\themes\mytheme\bg-alpha.scss
Encountered "-ms-filter" at line 3, column 9.
Was expecting one of:
    "}" ...
    "+" ...
    ">" ...
    "~" ...
    "[" ...
    "*" ...
    "&" ...
    "." ...
    ":" ...
    <INTERPOLATION> ...
    "@include" ...
    "@debug" ...
    "@warn" ...
    "@each" ...
    "@if" ...
    "@extend" ...
    "@content" ...
    <IDENT> ...
    <VARIABLE> ...
    <HASH> ...
    "@media" ...
    "@page" ...
    "@font-face" ...
    <KEY_FRAME_SYM> ...
    
	at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:141)
	at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:69)
	at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:81)
	at com.vaadin.sass.internal.ScssStylesheet.importOtherFiles(ScssStylesheet.java:192)
	at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:185)
	at com.vaadin.server.VaadinServlet.serveOnTheFlyCompiledScss(VaadinServlet.java:815)
	at com.vaadin.server.VaadinServlet.serveStaticResourcesInVAADIN(VaadinServlet.java:601)
	at com.vaadin.server.VaadinServlet.serveStaticResources(VaadinServlet.java:571)
	at com.vaadin.server.VaadinServlet.service(VaadinServlet.java:229)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:298)
	at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:859)
	at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:588)
	at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:489)
	at java.lang.Thread.run(Unknown Source)

This problem belongs to mixins, because when I delete “-ms-filter:alpha(opacity=$a*100);” from bg-alpha mixin, everything is ok and no error is thrown.

Please, can anybody help me solve this problem? I googled lot of hours for finding solution, but I wasnt successful. Also I tryed simulate this problem with pure sass compilator. It seems to be right sass code.

Angel20 · July 10, 2013, 5:00pm

Hi Daniel,
There is a ticket for that: http://dev.vaadin.com/ticket/11747 but is not resolved. We had the same issue than you and our solution was to compile the sass file using the ruby compiler. You can do that with your own servlet and write the css compiled into the response.
Hope this helps.

Henri2 · July 11, 2013, 6:39am

I added a workaround to the ticket using the parent selector, something like

@mixin apply_transparent($color) {
  & {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}', endColorstr='#{$color}');
  }
}

Daniel246 · July 11, 2013, 11:40am

Thanks, workaround is working.

Seshu1 · January 7, 2015, 11:03am

com.vaadin.sass.internal.parser.SCSSParseException: Error when parsing file C:\Documents and Settings\Sasi\Desktop\OpteBizCloudV0.0.3_T\war\VAADIN\themes\optebiz\optebiz.scss
Encountered “flatten-list(” at line 72, column 22.
Was expecting one of:
…
…
…
…
…

at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:141) at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:52) at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:78) at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:271) at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:280) at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:187) at com.vaadin.server.VaadinServlet.serveOnTheFlyCompiledScss(VaadinServlet.java:818) at com.vaadin.server.VaadinServlet.serveStaticResourcesInVAADIN(VaadinServlet.java:601) at com.vaadin.server.VaadinServlet.serveStaticResources(VaadinServlet.java:566) at com.vaadin.server.VaadinServlet.service(VaadinServlet.java:231) at javax.servlet.http.HttpServlet.service(HttpServlet.java:717) at org.mortbay.jetty.servlet.ServletHolder.handle(ServletHolder.java:511) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1166) at com.google.appengine.api.socket.dev.DevSocketFilter.doFilter(DevSocketFilter.java:74) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157) at com.google.appengine.tools.development.ResponseRewriterFilter.doFilter(ResponseRewriterFilter.java:123) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157) at com.google.appengine.tools.development.HeaderVerificationFilter.doFilter(HeaderVerificationFilter.java:34) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157) at com.google.appengine.api.blobstore.dev.ServeBlobFilter.doFilter(ServeBlobFilter.java:63) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157) at com.google.apphosting.utils.servlet.TransactionCleanupFilter.doFilter(TransactionCleanupFilter.java:43) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157) at com.google.appengine.tools.development.StaticFileFilter.doFilter(StaticFileFilter.java:125) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157) at com.google.appengine.tools.development.DevAppServerModulesFilter.doDirectRequest(DevAppServerModulesFilter.java:366) at com.google.appengine.tools.development.DevAppServerModulesFilter.doDirectModuleRequest(DevAppServerModulesFilter.java:349) at com.google.appengine.tools.development.DevAppServerModulesFilter.doFilter(DevAppServerModulesFilter.java:116) at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157) at org.mortbay.jetty.servlet.ServletHandler.handle(ServletHandler.java:388) at org.mortbay.jetty.security.SecurityHandler.handle(SecurityHandler.java:216) at org.mortbay.jetty.servlet.SessionHandler.handle(SessionHandler.java:182) at org.mortbay.jetty.handler.ContextHandler.handle(ContextHandler.java:765) at org.mortbay.jetty.webapp.WebAppContext.handle(WebAppContext.java:418) at com.google.appengine.tools.development.DevAppEngineWebAppContext.handle(DevAppEngineWebAppContext.java:97) at org.mortbay.jetty.handler.HandlerWrapper.handle(HandlerWrapper.java:152) at com.google.appengine.tools.development.JettyContainerService$ApiProxyHandler.handle(JettyContainerService.java:487) at org.mortbay.jetty.handler.HandlerWrapper.handle(HandlerWrapper.java:152) at org.mortbay.jetty.Server.handle(Server.java:326) at org.mortbay.jetty.HttpConnection.handleRequest(HttpConnection.java:542) at org.mortbay.jetty.HttpConnection$RequestHandler.headerComplete(HttpConnection.java:923) at org.mortbay.jetty.HttpParser.parseNext(HttpParser.java:547) at org.mortbay.jetty.HttpParser.parseAvailable(HttpParser.java:212) at org.mortbay.jetty.HttpConnection.handle(HttpConnection.java:404) at org.mortbay.io.nio.SelectChannelEndPoint.run(SelectChannelEndPoint.java:409) at org.mortbay.thread.QueuedThreadPool$PoolThread.run(QueuedThreadPool.java:582)

java.lang.Exception: Mixin Definition: optebiz not found
at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixins(MixinNodeHandler.java:40)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.traverse(MixinNodeHandler.java:33)
at com.vaadin.sass.internal.tree.MixinNode.traverse(MixinNode.java:104)
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:271)
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:280)
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:280)
at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:187)
at com.vaadin.server.VaadinServlet.serveOnTheFlyCompiledScss(VaadinServlet.java:818)
at com.vaadin.server.VaadinServlet.serveStaticResourcesInVAADIN(VaadinServlet.java:601)
at com.vaadin.server.VaadinServlet.serveStaticResources(VaadinServlet.java:566)
at com.vaadin.server.VaadinServlet.service(VaadinServlet.java:231)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
at org.mortbay.jetty.servlet.ServletHolder.handle(ServletHolder.java:511)
at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1166)
at com.google.appengine.api.socket.dev.DevSocketFilter.doFilter(DevSocketFilter.java:74)
at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157)
at com.google.appengine.tools.development.ResponseRewriterFilter.doFilter(ResponseRewriterFilter.java:123)
at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157)
at com.google.appengine.tools.development.HeaderVerificationFilter.doFilter(HeaderVerificationFilter.java:34)
at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157)
at com.google.appengine.api.blobstore.dev.ServeBlobFilter.doFilter(ServeBlobFilter.java:63)
at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157)
at com.google.apphosting.utils.servlet.TransactionCleanupFilter.doFilter(TransactionCleanupFilter.java:43)
at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157)
at com.google.appengine.tools.development.StaticFileFilter.doFilter(StaticFileFilter.java:125)
at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157)
at com.google.appengine.tools.development.DevAppServerModulesFilter.doDirectRequest(DevAppServerModulesFilter.java:366)
at com.google.appengine.tools.development.DevAppServerModulesFilter.doDirectModuleRequest(DevAppServerModulesFilter.java:349)
at com.google.appengine.tools.development.DevAppServerModulesFilter.doFilter(DevAppServerModulesFilter.java:116)
at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1157)
at org.mortbay.jetty.servlet.ServletHandler.handle(ServletHandler.java:388)
at org.mortbay.jetty.security.SecurityHandler.handle(SecurityHandler.java:216)
at org.mortbay.jetty.servlet.SessionHandler.handle(SessionHandler.java:182)
at org.mortbay.jetty.handler.ContextHandler.handle(ContextHandler.java:765)
at org.mortbay.jetty.webapp.WebAppContext.handle(WebAppContext.java:418)
at com.google.appengine.tools.development.DevAppEngineWebAppContext.handle(DevAppEngineWebAppContext.java:97)
at org.mortbay.jetty.handler.HandlerWrapper.handle(HandlerWrapper.java:152)
at com.google.appengine.tools.development.JettyContainerService$ApiProxyHandler.handle(JettyContainerService.java:487)
at org.mortbay.jetty.handler.HandlerWrapper.handle(HandlerWrapper.java:152)
at org.mortbay.jetty.Server.handle(Server.java:326)
at org.mortbay.jetty.HttpConnection.handleRequest(HttpConnection.java:542)
at org.mortbay.jetty.HttpConnection$RequestHandler.headerComplete(HttpConnection.java:923)
at org.mortbay.jetty.HttpParser.parseNext(HttpParser.java:547)
at org.mortbay.jetty.HttpParser.parseAvailable(HttpParser.java:212)
at org.mortbay.jetty.HttpConnection.handle(HttpConnection.java:404)
at org.mortbay.io.nio.SelectChannelEndPoint.run(SelectChannelEndPoint.java:409)
at org.mortbay.thread.QueuedThreadPool$PoolThread.run(QueuedThreadPool.java:582)