How to include external css into a Lit-Element based Component?

Flow
1

CssImport with themeFor seems to expect a ThemeableMixin. How can I do the same with a Lit-Element based Component?

2

I’m not sure if it will answer your question, but with litElement you can use CssImport.

ThemeableMixin is for Polymer, for Lit you have ThemeableElement.

Here is an example for Vaadin 14: https://github.com/vaadin-component-factory/explorer-tree-grid-flow/blob/master/explorer-tree-grid-flow/src/main/resources/META-INF/resources/frontend/src/explorer-tree-toggle.js#L3

And the npm package: https://www.npmjs.com/package/@vaadin/themable-element

For Vaadin 15+, you can use directly VaadinElement, https://www.npmjs.com/package/@vaadin/element-base

The last time I tried VaadinElement, it was not compatible with Vaadin 14.

3

Hi Jean-Christophe,

Could you please give an example of how to use VaadinElement directly to import an external scss file in a lit-element component in Vaadin Fusion 18…?

Currently, the external file is in a module, but I could also move it to the /frontend dir.

Much appreciated.

4

By default Vaadin 10+ is not using scss.

To use scss files in a Vaadin project you need to change the webpack configuration:
https://github.com/jcgueriaud1/sass-in-vaadin14

I think it should work exactly the same way for Fusion.

VaadinElement will give you the possibility to use CssImport.

Do you have an example that I could read and update? (with css for example)

5

Thanks for offering to take a look.

See:
[fusion-simplegrid-demo]
(https://github.com/markhm/fusion-simplegrid-demo/) and
[simplegrid-view.ts]
(https://github.com/markhm/fusion-simplegrid-demo/blob/main/frontend/views/test/simplegrid-view.ts).

I’ve already ‘npm installed’ simplegrid, node-sass and sass-loader and applied the change in webpack.config.js.

As context: I am trying to build page that has the menu options on top and uses the classic 12-column style to layout various components. For the menu options, I’ll rework the <vaadin-app-layout> from the Fusion starter and for the 12-column style, I thought simplegrid would be the simplest solution, rather than bringing on full Bootstrap (I did notice your example btw), since I’d like to go with Lumo. For the layouting, I did not find a Vaadin equivalent atm.

6

I’ve added the simplegrid css content to /frontend/styles/simplegrid-styles.js, in the same way as shared-styles.js is defined and added it to index.ts.

Unfortunately, it does not work yet, but this seems like the proper approach.

The repo now directly shows the correct demo view under http://localhost:8080/test/simplegrid.

7

Ok, in this case you don’t need VaadinElement/ThemeMixin.
ThemeMixin is only for CssImport.

In Vaadin 19, the theme will be much easier for Fusion. (basically import automatically your css instead of using a javascript that you have to write).
I’ll encourage you to use Vaadin 19 alpha (or wait for Vaadin 19) and use the Application theme.

You can also try twind.
Basically it’s tailwind that works inside shadow dom. Quite impressive. Here is an example: https://github.com/jcgueriaud1/typescript-parcel-minimal/blob/grid-example/src/grid-sample.ts That could give you the simple grid. Here is the package: https://github.com/tw-in-js/twind

I tried to import css in your project and it didn’t work. I probably did something wrong :confused:

8

Thank you for your response, Jean-Christophe.

I’ve been able to use a global import by defining my global styles in frontend/styles/shared-styles.ts:

import {css, CSSResult} from 'lit-element';

export const sharedStyles: CSSResult = css`
              .test {
                color: darkred;
                font-weight: bold;
            }
  `;

And then importing in the view like this:

import { sharedStyles } from '../../styles/shared-styles';

static get styles() {
  return [
    sharedStyles,
    CSSModule('lumo-typography'),
    CSSModule('lumo-color'),
    css`
      :host {
        display: block;
        padding: 1em;
      }
  `];
}

Thanks…!

9

twind seems definitely interesting…! Thanks for mentioning that.

I tried to run your [typescript-parcel-minimal]
(https://github.com/jcgueriaud1/typescript-parcel-minimal/blob/grid-example/src/grid-sample.ts) repo, but got the following error when I tried to start:

typescript-parcel-minimal/node_modules/typescript/lib/tsc.js:87003
        throw e;
                ^
TypeError: Cannot read property 'flags' of undefined
...

I am using node v15.6.0 and npm v7.4.0. Are you using other versions…?

Will try to migrate to Vaadin 19 as soon as the frontend components have stabilised.