How do I include the css required to use Vaadin spreadsheet in my theme?

Question

I'm having a hard time getting the css (scss to be more specific) for Vaadin spreadsheet to be included in my project's theme.

Do I add it like this to styles.scss?

@import "../valo/valo.scss";

.wastecentertheme {
  @include valo;
}

@mixin addons {
  @include spreadsheet;
}

Or is it like this?

@import "../valo/valo.scss";

.wastecentertheme {
  @include valo;

  @mixin addons {
    @include spreadsheet;
  }

}

The former compiles but the output .css does not appear to have any of the required rules. The second breaks with this message...

[INFO] --- vaadin-maven-plugin:8.1.1:compile-theme (default) @ portal ---
[INFO] Updating theme VAADIN/themes/base
[INFO] Theme "VAADIN/themes/base" compiled
[INFO] Updating theme VAADIN/themes/valo
[INFO] Theme "VAADIN/themes/valo" compiled
[INFO] Updating theme VAADIN/themes/wastecentertheme
[ERROR] Aug 09, 2017 1:36:31 AM com.vaadin.sass.internal.handler.SCSSErrorHandler log
[ERROR] SEVERE: Error when parsing file 
[ERROR] /usr/local/code/Waste Center/src/main/webapp/VAADIN/themes/wastecentertheme/styles.scss on line 4, column 17
[ERROR] Aug 09, 2017 1:36:31 AM com.vaadin.sass.internal.handler.SCSSErrorHandler log
[ERROR] SEVERE: encountered "@mixin". Was expecting one of: "}" "+" "-" ";" ">" "~" "[" "*" "%" "&" "." "and" "or" "not" ":" "#{" "through" "in" "@include" "@debug" "@warn" "@for" "@each" "@while" "@if" "@extend" "@content" <MICROSOFT_RULE> <IDENT> <VARIABLE> <HASH> "@import" "@media" <KEY_FRAME_SYM> <ATKEYWORD> 
[ERROR] org.w3c.css.sac.CSSParseException: encountered "@mixin". Was expecting one of: "}" "+" "-" ";" ">" "~" "[" "*" "%" "&" "." "and" "or" "not" ":" "#{" "through" "in" "@include" "@debug" "@warn" "@for" "@each" "@while" "@if" "@extend" "@content" <MICROSOFT_RULE> <IDENT> <VARIABLE> <HASH> "@import" "@media" <KEY_FRAME_SYM> <ATKEYWORD> 
[ERROR]     at com.vaadin.sass.internal.parser.Parser.reportError(Parser.java:418)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.styleRule(Parser.java:2203)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.topLevelDeclaration(Parser.java:591)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.parserUnit(Parser.java:487)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.parseStyleSheet(Parser.java:122)
[ERROR]     at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:172)
[ERROR]     at com.vaadin.sass.SassCompiler.main(SassCompiler.java:92)
[ERROR] 
[ERROR] Aug 09, 2017 1:36:31 AM com.vaadin.sass.internal.handler.SCSSErrorHandler warn
[ERROR] WARNING: Warning when parsing file 
[ERROR] /usr/local/code/Waste Center/src/main/webapp/VAADIN/themes/wastecentertheme/styles.scss on line 8, column 4
[ERROR] Aug 09, 2017 1:36:31 AM com.vaadin.sass.internal.handler.SCSSErrorHandler warn
[ERROR] WARNING: Skipping: }
[ERROR] org.w3c.css.sac.CSSParseException: Skipping: }
[ERROR]     at com.vaadin.sass.internal.parser.Parser.reportWarningSkipText(Parser.java:434)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.topLevelDeclaration(Parser.java:618)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.parserUnit(Parser.java:487)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.parseStyleSheet(Parser.java:122)
[ERROR]     at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:172)
[ERROR]     at com.vaadin.sass.SassCompiler.main(SassCompiler.java:92)
[ERROR] 
[ERROR] Compiling theme "VAADIN/themes/wastecentertheme" failed

Any ideas? Maybe I need to grab the .scss from the .jar maven imports for Vaadin-Spreadsheet and drop a copy of it in my directory and do an @import as well?

Answer 1

addons.scss is a file which is managed by Vaadin through Maven targets. If some add-on has css that need to be included in the theme, then the maven target will automatically include it in addons.scss upon theme compilation. It is split into an own file so that it can be overwritten at any point of time and it should not be manually edited. After adding the Spreadsheet dependency to your pom.xml and running for example mvn install, addons.scss should look like this:

/* This file is automatically managed and will be overwritten from time to time. */
/* Do not manually edit this file. */

/* Provided by vaadin-spreadsheet-2.0.1.jar */
@import "../../../VAADIN/addons/spreadsheet/spreadsheet.scss";


/* Import and include this mixin into your project theme to include the addon themes */
@mixin addons {
    @include spreadsheet;
}

then the default setup of styles.scss includes the addons mixin to the main theme. styles.scss:

@import "addons.scss";
@import "apptheme.scss";
@import "designs.scss";

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in apptheme.scss */
.apptheme {
  @include vaadin-crud-template;
  @include addons;
  @include apptheme;
}

Not that Designer template styling is handled the same way with designs.scss. The developer's custom scss goes into the apptheme.scss.

Answer 2

The answer seems to be that Vaadin somehow auto generated an addons file you should include as an important as well as include directive in .scss. This should really be documented more clearly.

@import "../valo/valo.scss";
@import "addons.scss";

.wastecentertheme {
  @include valo;
  @include addons;
}