Vaadin 8 version number in CSS `.v-vaadin-version:after `

Question

I am attempting to change a Maven -driven multi-module Vaadin 8 project to a slightly later version number. When searching for the version number 8.2.0 throughout my project, I found an occurrence in the styles.css file:

…
.v-vaadin-version:after {
    content: "8.2.0";
}
…

Questions:

• Is that indeed the Vaadin Framework version number?
• If so, what is it for? What purpose does it server in CSS?
• Should I change it to match my changed versions numbers in the project's main POM file ( <vaadin.version> & <vaadin.plugin.version> )?

Answer 1

No, you shouldn't change it.

That is the vaadin-themes version (which should be aligned with the framework version). If you are declaring all your Vaadin dependencies with <version>${vaadin.version}</version> (or, even better, managed from the vaadin-bom ) then the version of vaadin-themes will match those of the other Vaadin dependencies.

In _global.scss sources, v-vaadin-version is defined as:

// Version info for the debug window
.v-vaadin-version:after {
  content: "${project.version}";
}

When Vaadin is compiled, that property is replaced from the actual version in vaadin-theme POM :

<resource>
  <directory>src/main/themes</directory>
  <filtering>true</filtering>
  <includes>
    <include>**/valo/shared/_global.scss</include>
  </includes>
</resource>

Answer 2

Is that indeed the Vaadin Framework version number?

Yes it is, if the class name was chosen with intention to be descriptive and not to confuse you.

If so, what is it for? What purpose does it server in CSS?

Please see the snippet below. That's how it's being used.

Should I change it to match my changed versions numbers in the project's main POM file ( <vaadin.version> & <vaadin.plugin.version> )?

I think it would be great to do so. It may prevent possible confusion if this class is used somewhere.

 .v-vaadin-version:after { content: "8.2.0"; } 

 <span class="v-vaadin-version">version: </span> 

Answer 3

You don't need to change css file. Just change project dependencies in pom and style.css will be generated automaticaly as styles.scss file from theme used is compiled.

If you want to know more of theme compilation, for example to do it by hand, or customize it please consult documentation at https://vaadin.com/docs/framework/themes/themes-compiling.html