How to link materiel styles CSS properties in Polymer 3 template?

Flow
1

I’m using the material design CSS properties out @vaadin/vaadin-material-styles/color.js and mentioned in the [Vaadin Material Theme]
(https://cdn.vaadin.com/vaadin-material-styles/1.3.2/demo/index.html) .

#content {
    background-color: var(--material-secondary-background-color);
}

It works as expected, but the IDE can’t find the variable:
![screenshot]
(http://cloud.screenpresso.com/oB71g/2020-01-15_15h57_17.png)

I also added

import '@vaadin/vaadin-material-styles/color';

Which doesn’t helped. Also tried it with clean install to be sure all modules are loaded.

Full example available here: [achievement.js]
(https://github.com/TobseF/CleanCodeDeveloperJournal/blob/dev/frontend/src/achievement.js)

How can I get rid of this error and point the IDE to the correct location?

2

Hi!

My guess is that this can’t be solved, given the current implementation of the themes (Lumo and Material). The CSS for those is packaged in JS files, instead of traditional .css files.

I assume IDEs can mainly parse the CSS contents from a .css file (e.g. from @import "color.css" if that was a thing), to be used in linting and code completion. Not sure though.

What IDE are you using? Do you have a similar type of example (using some other frameworks/libraries) that works?

3

OK… no I have no other example without that warning. Of course I use IntelliJ (Ultimate). I only hoped there is some trick to get rid of it. I try to keep my repo clean without errors. Especially for a sample demo project I want too keep irritating errors at the minimum. Also for a dev it’s not clear what magic resolves the var. And auto completion would be also nice.

So it seems to be a good task for the Vaadin team to find a solution. Maybe its possible to generate a dummy CSS file. So can also get code completion for those variables.