Using 7.1 theme in Vaadin 7.3

Flow
1

I have a project with a reindeer based theme which was created with vaadin 7.1. I updated the project few weeks ago succesfully to vaadin 7.2. Now vaadin 7.3 is out with a new theme.

my question is : can i upgrade to vaadin 7.3 and still use my old theme or could it cause problems?

2

Some parts will work, others not as nicely as in 7.3. There are changes for instance to Notifications and other overlay elements, to enable CSS animations for those, so not all animations are going to work with 7.2.

But I would suggest you try it, and list any major issues you have on this topic for instance, and we can try to figure out some workarounds if needed.

3

I’m attaching to this post because I’m trying to update Vaadin from 7.1.11 to 7.3.0, but I cannot compile any theme (which in 7.1.11 compiled successfully),

the compiler gives me this error:
Sep 15, 2014 11:48:21 AM com.vaadin.sass.internal.tree.
MixinNode traverse
SEVERE: null
com.vaadin.sass.internal.parser.ParseException: Mixin Definition: keyframes not found
at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixins(MixinNodeHandler.java:42)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.traverse(MixinNodeHandler.java:34)
at com.vaadin.sass.internal.tree.MixinNode.traverse(MixinNode.java:115)
at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:213)
at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverseChildren(TemporaryNode.java:53)
at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:91)
at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:98)
at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:213)
at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverseChildren(TemporaryNode.java:53)
at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:91)
at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:98)
at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:213)
at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverseChildren(TemporaryNode.java:53)
at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:91)
at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:98)
at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:213)
at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:200)
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:270)
at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:239)
at com.vaadin.sass.SassCompiler.main(SassCompiler.java:58)

This is my scss main file:
/* Import all the mixins for this theme */
@import “ReAppWebTheme.scss”;

/* Font embeds and keyframe definitions need to be

  • on the top level of the stylesheet, not nested
  • with any selectors, so we output them here */
    @include font-open-sans;
    @include fontawesome;
    @include icons-fontello;
    @include ReAppWebTheme-keyframes;

/* Output the actual theme selectors */
.ReAppWebTheme {
@include ReAppWebTheme;
}

It seems that all the @include directives are not resolved by SassCompiler (even if some of them are at the same level of the scss file), has something changed in classpath loading of SassCompiler?

4

First thing to check: did you switch from using vaadin-theme-compiler to using the latest version of vaadin-sass-compiler. That is easy to miss when migrating from 7.1, hidden somewhere in the release notes of 7.2.

5

Yes I’m compiling using command-line and the new version of Vaadin-Sass-Compiler

6

So it seems there should be a mixin named “keyframes” defined somewhere, and looks like it should be in “ReAppWebTheme.scss”. Can you share the content of that file, or at least the mixin definition from that file?

7

Hi Jouni,

this zip contains all the .*css files I’m using, many thanks for the support.
16473.zip (3.3 MB)

8

There’s a missing semicolon (:wink: in ReAppWebTheme.scss, line 3804. That probably causes the compiler to fail.

9

Hi Jouni,
I’ve added the semicolon to line 3804, but the compiler still fails to compile with the same message.

10

Is anyone facing similar problems?

I can’t upgrade my production enviroment 'till this issue is resolved…can anyone help me please?

I’ve found no migration guide for theming between Vaadin 7.1.x and 7.3, so I believed that nothing changed…

11

Guys, please, can anyone help me?

I’ve tried to remove many @import and @include, but the theme is still not compiling…I must update to the new Vaadin version in order to use some new features, please anyone have suggestions?

12

Hi, sorry for the silence. Didn’t have any bright suggestions, so didn’t provide any answer :frowning:

Can you try your custom theme in a completely new Vaadin project, and see if it compiles there (create it with the Eclipse plugin for instance)? Since I was able to compile the theme you zipped in my environment at least…

If it does, then the problem is somewhere in the project settings/dependencies. Perhaps you are using an older version of the Java Sass compiler. It would be nice if the compiler printed the version number in the console in the beginning of the compilation to verify these things…

13

Hi Jouni,

sorry for posting many messages, but I’m going crazy for this problem.

I’m not compiling my theme from Eclipse plugin, I’m compiling using this command:


sudo java -cp ‘/lib/*’ com.vaadin.sass.SassCompiler styles.scss styles.css

Where lib path is the one bundled in Vaadin 7.3.0-all zip file, so I’m sure that it’s using the new compiler version (even because the old one didn’t give me any trouble in compiling this theme)

It there any difference between using Eclipse plugin ‘compile theme’ command and command line?

EDIT:

The problem seems to be the import of the base.scss theme, because:

  • If I keep the @import ‘…/base/base.scss’ the compiler fails with FileNotFoundException of base.scss
  • Modifying the import with @import ‘VAADIN/themes/base/base.scss’ make the compiler to find succesfully the file, but then it starts telling that many mixins (base-common, keyframes, and so on) are not found
  • If I remove it, the theme compiles succesfully (but there is no base.scss rules so it looks strange)

So I believe that it’s a classpath problem, because, even when the compiler finds the base.scss file, it’s not able to resolve its internal imports…

14

I have this problem:

— vaadin-maven-plugin:7.4.0.alpha8:compile-theme (default) @ Vaadin7_3 —
Updating theme VAADIN/themes/dashboard
Set 26, 2014 9:43:01 AM com.vaadin.sass.internal.tree.MixinNode traverse
SEVERE: null
com.vaadin.sass.internal.parser.ParseException: Argument substitution error: there is no value for the argument duration. Formal arguments: FormalArgumentList[$name: null, $duration: null, $easing: null]
, actual arguments: Actual argument list [ArgumentList [v-notification-animate-out 400ms]
] at line -1, column -1
at com.vaadin.sass.internal.parser.FormalArgumentList.replaceUnnamedAndDefaultArguments(FormalArgumentList.java:250)
at com.vaadin.sass.internal.parser.FormalArgumentList.replaceFormalArguments(FormalArgumentList.java:129)
at com.vaadin.sass.internal.tree.DefNode.replacePossibleArguments(DefNode.java:72)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixinNode(MixinNodeHandler.java:55)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixins(MixinNodeHandler.java:45)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.traverse(MixinNodeHandler.java:34)
at com.vaadin.sass.internal.tree.MixinNode.traverse(MixinNode.java:115)
at com.vaadin.sass.internal.visitor.BlockNodeHandler.traverse(BlockNodeHandler.java:68)
at com.vaadin.sass.internal.tree.BlockNode.traverse(BlockNode.java:119)
at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverse(TemporaryNode.java:71)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixinNode(MixinNodeHandler.java:75)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixins(MixinNodeHandler.java:45)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.traverse(MixinNodeHandler.java:34)
at com.vaadin.sass.internal.tree.MixinNode.traverse(MixinNode.java:115)
at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverse(TemporaryNode.java:71)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixinNode(MixinNodeHandler.java:75)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixins(MixinNodeHandler.java:45)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.traverse(MixinNodeHandler.java:34)
at com.vaadin.sass.internal.tree.MixinNode.traverse(MixinNode.java:115)
at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverse(TemporaryNode.java:71)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixinNode(MixinNodeHandler.java:75)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixins(MixinNodeHandler.java:45)
at com.vaadin.sass.internal.visitor.MixinNodeHandler.traverse(MixinNodeHandler.java:34)
at com.vaadin.sass.internal.tree.MixinNode.traverse(MixinNode.java:115)
at com.vaadin.sass.internal.visitor.BlockNodeHandler.traverse(BlockNodeHandler.java:68)
at com.vaadin.sass.internal.tree.BlockNode.traverse(BlockNode.java:119)
at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:213)
at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:200)
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:270)
at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:239)
at com.vaadin.sass.SassCompiler.main(SassCompiler.java:58)

Theme “VAADIN/themes/dashboard” compiled

Can someone help me?
Thank you.

15

Hi Carlos,

I had the same issue and fixed it by replacing in the mixins.scss file the following mixin :

@mixin animation ($name, $duration, $easing) {
-webkit-animation: $name $duration $easing;
-moz-animation: $name $duration $easing;
-ms-animation: $name $duration $easing;
-o-animation: $name $duration $easing;
animation: $name $duration $easing;
}

by

@mixin animation ($anim) {
-webkit-animation: $anim;
-moz-animation: $anim;
animation: $anim;
}

Guillaume

16

Many thanks Guillaume, had the same probem abd your solution works like a charm.

17

Thank you, Guillaume T. Very good. Solved.

18

Thank you, Guillaume T, thank you very much.

19

please give me step by step solution like in which directory and in which file of project should i modify

20

our application is built using 7.1.7 and we are trying to upgrade to 7.3.7. I jave two issues.

  • the vaadin-sass-compiler with Jboss. It throws the logging.properties cannot configure the file error. So I had to replace the logging,properties in accordance with Jboss. Once deployed The theme/css/scss is not rendering properly. All the layouts are disfigured. I get the below error

15:38:28,812 WARNING [com.vaadin.server.VaadinServlet]
(http-localhost/127.0.0.1:8080-1) Scss compilation failed: com.vaadin.sass.internal.parser.ParseException: CSS imports can only be used at the top level, not as nested imports. Within style rules, use SCSS imports.
at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:98) [vaadin-sass-compiler-0.9.10.jar:0.9.10]

at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:98) [vaadin-sass-compiler-0.9.10.jar:0.9.10]

at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:213) [vaadin-sass-compiler-0.9.10.jar:0.9.10]

at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverseChildren(TemporaryNode.java:53) [vaadin-sass-compiler-0.9.10.jar:0.9.10]

at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:91) [vaadin-sass-compiler-0.9.10.jar:0.9.10]

at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:98) [vaadin-sass-compiler-0.9.10.jar:0.9.10]

at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:213) [vaadin-sass-compiler-0.9.10.jar:0.9.10]

at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:200) [vaadin-sass-compiler-0.9.10.jar:0.9.10]

at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:270) [vaadin-sass-compiler-0.9.10.jar:0.9.10]

at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:239) [vaadin-sass-compiler-0.9.10.jar:0.9.10]

at com.vaadin.server.VaadinServlet.compileScssOnTheFly(VaadinServlet.java:948) [vaadin-server-7.3.7.jar:7.3.7]

at com.vaadin.server.VaadinServlet.serveOnTheFlyCompiledScss(VaadinServlet.java:904) [vaadin-server-7.3.7.jar:7.3.7]

at com.vaadin.server.VaadinServlet.serveStaticResourcesInVAADIN(VaadinServlet.java:682) [vaadin-server-7.3.7.jar:7.3.7]

at com.vaadin.server.VaadinServlet.serveStaticResources(VaadinServlet.java:647) [vaadin-server-7.3.7.jar:7.3.7]

at com.vaadin.server.VaadinServlet.service(VaadinServlet.java:298) [vaadin-server-7.3.7.jar:7.3.7]

at com.hcdigital.dmplatform.uiframework.ui.impl.HCApplicationServlet.service(HCApplicationServlet.java:50) [UIFramework.jar:2.0]

at javax.servlet.http.HttpServlet.service(HttpServlet.java:847) [jboss-servlet-api_3.0_spec-1.0.1.Final.jar:1.0.1.Final]

at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:329) [jbossweb-7.0.17.Final.jar:]

at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:248) [jbossweb-7.0.17.Final.jar:]

at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:275) [jbossweb-7.0.17.Final.jar:]

at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:161) [jbossweb-7.0.17.Final.jar:]

at org.jboss.as.web.session.ClusteredSessionValve.handleRequest(ClusteredSessionValve.java:134) [jboss-as-web-7.1.3.Final.jar:7.1.3.Final]

at org.jboss.as.web.session.ClusteredSessionValve.invoke(ClusteredSessionValve.java:99) [jboss-as-web-7.1.3.Final.jar:7.1.3.Final]

at org.jboss.as.web.session.JvmRouteValve.invoke(JvmRouteValve.java:92) [jboss-as-web-7.1.3.Final.jar:7.1.3.Final]

at org.jboss.as.web.session.LockingValve.invoke(LockingValve.java:64) [jboss-as-web-7.1.3.Final.jar:7.1.3.Final]

at org.jboss.as.jpa.interceptor.WebNonTxEmCloserValve.invoke(WebNonTxEmCloserValve.java:50) [jboss-as-jpa-7.1.3.Final.jar:7.1.3.Final]

at org.jboss.as.web.security.SecurityContextAssociationValve.invoke(SecurityContextAssociationValve.java:165) [jboss-as-web-7.1.3.Final.jar:7.1.3.Final]

at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:155) [jbossweb-7.0.17.Final.jar:]

at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102) [jbossweb-7.0.17.Final.jar:]

at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109) [jbossweb-7.0.17.Final.jar:]

at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:372) [jbossweb-7.0.17.Final.jar:]

at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:877) [jbossweb-7.0.17.Final.jar:]

at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:679) [jbossweb-7.0.17.Final.jar:]

at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:931) [jbossweb-7.0.17.Final.jar:]

at java.lang.Thread.run(Thread.java:722) [rt.jar:1.7.0_15]

I have everything in place… Can someone point what is going wrong…