Sass parse exception when moving to 7.5

Today I switched to 7.5 and found this error when I run the war after building it. Any help is much appreciated.

Severe:   com.vaadin.sass.internal.parser.ParseException: Argument substitution error: there is no value for the argument primary-style. Formal arguments: FormalArgumentList[$primary-style: null]
, actual arguments: Actual argument list [ArgumentList []
]
    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:73)
    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:116)
    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:116)
    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:227)
    at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:214)
    at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:294)
    at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:263)
    at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:238)
    at com.vaadin.server.VaadinServlet.compileScssOnTheFly(VaadinServlet.java:1092)
    at com.vaadin.server.VaadinServlet.serveOnTheFlyCompiledScss(VaadinServlet.java:1024)
    at com.vaadin.server.VaadinServlet.serveStaticResourcesInVAADIN(VaadinServlet.java:734)
    at com.vaadin.server.VaadinServlet.serveStaticResources(VaadinServlet.java:704)
    at com.vaadin.server.VaadinServlet.service(VaadinServlet.java:343)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:790)
    at org.apache.catalina.core.StandardWrapper.service(StandardWrapper.java:1682)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:344)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:214)
    at org.glassfish.tyrus.servlet.TyrusServletFilter.doFilter(TyrusServletFilter.java:295)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:256)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:214)
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:316)
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:160)
    at org.apache.catalina.core.StandardPipeline.doInvoke(StandardPipeline.java:734)
    at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:673)
    at com.sun.enterprise.web.WebPipeline.invoke(WebPipeline.java:99)
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:174)
    at org.apache.catalina.connector.CoyoteAdapter.doService(CoyoteAdapter.java:415)
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:282)
    at com.sun.enterprise.v3.services.impl.ContainerMapper$HttpHandlerCallable.call(ContainerMapper.java:459)
    at com.sun.enterprise.v3.services.impl.ContainerMapper.service(ContainerMapper.java:167)
    at org.glassfish.grizzly.http.server.HttpHandler.runService(HttpHandler.java:201)
    at org.glassfish.grizzly.http.server.HttpHandler.doHandle(HttpHandler.java:175)
    at org.glassfish.grizzly.http.server.HttpServerFilter.handleRead(HttpServerFilter.java:235)
    at org.glassfish.grizzly.filterchain.ExecutorResolver$9.execute(ExecutorResolver.java:119)
    at org.glassfish.grizzly.filterchain.DefaultFilterChain.executeFilter(DefaultFilterChain.java:284)
    at org.glassfish.grizzly.filterchain.DefaultFilterChain.executeChainPart(DefaultFilterChain.java:201)
    at org.glassfish.grizzly.filterchain.DefaultFilterChain.execute(DefaultFilterChain.java:133)
    at org.glassfish.grizzly.filterchain.DefaultFilterChain.process(DefaultFilterChain.java:112)
    at org.glassfish.grizzly.ProcessorExecutor.execute(ProcessorExecutor.java:77)
    at org.glassfish.grizzly.nio.transport.TCPNIOTransport.fireIOEvent(TCPNIOTransport.java:561)
    at org.glassfish.grizzly.strategies.AbstractIOStrategy.fireIOEvent(AbstractIOStrategy.java:112)
    at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy.run0(WorkerThreadIOStrategy.java:117)
    at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy.access$100(WorkerThreadIOStrategy.java:56)
    at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy$WorkerThreadRunnable.run(WorkerThreadIOStrategy.java:137)
    at org.glassfish.grizzly.threadpool.AbstractThreadPool$Worker.doWork(AbstractThreadPool.java:565)
    at org.glassfish.grizzly.threadpool.AbstractThreadPool$Worker.run(AbstractThreadPool.java:545)
    at java.lang.Thread.run(Thread.java:745)

I never had this problem in 7.4.8. I am using Netbeans IDE.

Hey Ryan,

  1. What theme are you using?
  2. Have you added any custom styles?
  3. Does this problem occur on a fresh/new Vaadin app? (If not, then try removing your theme customization temporarily. If the problem disappears, it’s most likely a SCSS syntax error.)

Hello Joacim,

Thank you for replying. I am using my own theme, but I include valo. I have a few custom styles and some override styles as well. I created a new default project in 7.5.1 and no problem at all.

But the error showing in my project is it needs an arguement for primary-style which I don’t have in my custom style. Here are my styles:

styles.css

@import "mytheme.scss";
@import "addons.scss";

// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss

.mytheme {
  @include addons;
  @include mytheme;

}

mytheme.css

// Global variable overrides. Must be declared before importing Valo.

// Defines the plaintext font size, weight and family. Font size affects general component sizing.
//$v-font-size: 16px;
//$v-font-weight: 300;
//$v-font-family: "Open Sans", sans-serif;

// Defines the border used by all components.
//$v-border: 1px solid (v-shade 0.7);
//$v-border-radius: 4px;

// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g  Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;

// Affects the visual appearance of all components
//$v-gradient: v-linear 8%;
//$v-bevel-depth: 30%;
//$v-shadow-opacity: 5%;

// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;

// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples

// Custom text under spinner
$v-app-loading-text: "Loading components...";

$login-background-color: #2C59A9 !default;
$login-background-opacity: 0.7 !default;

$login-info-width: 300px !default;

$logo-text-font-size: 4rem;
$logo-text-color: #000;

$login-footer-height: 40px !default;
$login-footer-background-color: #132F63 !default;
$login-footer-font-color: #fff !default;
$login-footer-font-size: 0.8rem;

$v-focus-color: rgb(96, 160, 234) !default;
$v-error-indicator-color: #eb2977 !default;
$v-friendly-color: rgb(54, 185, 85);

$v-font-size: 15px !default;
$v-font-weight: 400 !default;
$v-unit-size: 32px !default;

$v-layout-margin-top: round($v-unit-size / 1.5) !default;
$v-layout-margin-right: $v-layout-margin-top !default;
$v-layout-margin-bottom: $v-layout-margin-top !default;
$v-layout-margin-left: $v-layout-margin-top !default;

$view-padding: round($v-unit-size / 1.1) !default;
$header-height: round($v-unit-size / 1.1) !default;

@import "../valo/valo.scss";
@import "views/announcement-view.scss";
@import "views/lecturer-coursework-view.scss";
@import "views/lecturer-submit-announcement-view.scss";
@import "views/student-submit-success-view.scss";

@mixin mytheme {
    @include valo;
    @include announcement-view;
    @include lecturer-coursework-view;
    @include lecturer-submit-announcement-view;
    @include student-submit-success-view;

    // Login Screen
    .login-screen {
        background: $login-background-color;

        .main-panel {
            @include valo-panel-style;
            border: none;
            padding-top: $v-layout-margin-top;
            padding-left: $v-layout-margin-left;
            padding-bottom: $v-layout-margin-bottom;
            padding-right: $v-layout-margin-right;
            @include animation(valo-animate-in-fade 1s 1s backwards);


            .logo-main {
                padding-bottom: 5px;
                text-align: center;
            }

            h1 {
                font-size: $logo-text-font-size;
                color: $logo-text-color;
                text-align: center;
            }
        }

        width: 100%;
        height: 100%;

        .centering-layout {
            display: block;
            width: 100%;
            height: 100%;

            .v-slot {
                height: 100%;
            }
        }

        .login-footer {
            display: inline-block;
            position: absolute;
            bottom: 0;
            left: 0;
            font-size: $login-footer-font-size;
            width: 100%;
            color: $login-footer-font-color;
            background-color: $login-footer-background-color;
            padding-top: 10px;
            padding-bottom: 10px;
            @include animation(valo-animate-in-slide-up 1s 1s backwards);
        }

        /* Lay the options horizontally */
        .v-select-optiongroup-horizontal .v-select-option {
            display: inline-block;
        }

        /* Avoid wrapping if the layout is too tight */
        .v-select-optiongroup-horizontal {
            white-space: nowrap;
        }

        /* Some extra spacing is needed */
        .v-select-optiongroup-horizontal
        .v-select-option.v-radiobutton {
            padding-right: 10px;
        }

        /* Removes padding for button as link in ValoTheme */
        .v-button-link {
            height: auto;
            padding: 0;
        }



    }

    .view-dashboard-header {
        padding-bottom: $view-padding;
        width: 100%;
        height: $header-height;
        text-align: right;
        white-space: normal;

        .v-slot-h2 {
            float: left;
        }

        .h1 {
            white-space: normal;
        }

        .dashboard-toolbar {
            white-space: normal;

            > .v-spacing {
                height: round($v-unit-size / 4);
            }

            .v-label.welcome-text { font-size: 0.8rem }
        }
    }

    .v-Notification.custom-tray-notification-info {
        background:rgba(19,47,99,0.7);
        font-size: 0.8rem;
        color: #fff;
        border-radius: 5px;

        h1 {
            color: #fff;
        }
    }

    .v-Notification.custom-tray-notification-warning {
        background:rgba(153,61,0,0.7);
        font-size: 0.8rem;
        color: #fff;
        border-radius: 5px;

        h1 {
            color: #fff;
        }
    }

    // override default error style to include
    // visual indicator that it needs to be closed
    .v-Notification.error {
        @include valo-notification-error-style;
        @include valo-notification-closable-style;
    }

    .dashboard-footer {
        font-size: $login-footer-font-size;
        width: 100%;
        padding-top: 30px;

        a {
            color: #000;
            text-decoration:none !important;
        }
    }

    .v-table-row.v-table-row-unread, 
    .v-table-row-odd.v-table-row-unread {
        font-weight: bolder;
        background-color: #fff;
    }
    
    .v-table-row.v-table-row-read, 
    .v-table-row-odd.v-table-row-read {
        background-color: #efefef;
    }

}

Hey Ryan,

Try removing everything inside the mytheme mixin, except @include valo. If that doesn’t work, remove the view imports one-by-one.

Me too on this one. Similarly it seems to have happened after upgrading to 7.5.

Ryan: did you ever figure it out ??

I’ve created
ticket 18940
which is related to this problem. The ticket isn’t about a solution to the problem, it is about providing enough information in the log message so that Vaadin users can figure out for themselves what the problem is.

The Error apears as Well in our Project after including the following lines:
// override default error style to include
// visual indicator that it needs to be closed
.v-Notification.error {
@include valo-notification-error-style;
@include valo-notification-closable-style;
}

We so this because of Ticket: https://dev.vaadin.com/ticket/17373
So the question is: how must the code look like to show the visual indicator and not forcing an sass-compiler error.

I have this same problem with

.v-Notification.error {
@include valo-notification-error-style;
@include valo-notification-closable-style;
}

did you resolve it, what is the correct syntax here?

anyone solved?

Here is what I’m using, I think I got it from another post somewhere on this forum

.v-Notification.error {
@include valo-notification-error-style($primary-style: v-Notification);
@include valo-notification-closable-style;
text-align: left;
}