Make it possible to load Lumo as a CSS file

[marcushellberg]

Describe your motivation

I often start projects from start.spring.io and need to manually load Lumo in my project. I'm primarily working with Hilla and I don't want to introduce the added complexity of a theme in my demos when a plain CSS import would do.

Describe the solution you'd like

I would like to be able to import Lumo in a React component (or just in any HTML) similar to this:

import '@vaadin/vaadin-lumo-styles/lumo.css';

Describe alternatives you've considered

Right now, I create a separate file where I import separate files from react-components (which is odd).

@import url('@vaadin/react-components/css/Lumo.css');
@import url('@vaadin/react-components/css/lumo/Typography.css');
@import url('@vaadin/react-components/css/lumo/Utility.module.css');

The problem with this, besides the added work in a live code demo, is that I don't actually know which all files I should include.

Additional context

No response

[web-padawan]

would like to be able to import Lumo in a React component (or just in any HTML)

Note that HTML doesn't support .css imports without tools like Vite. That's why we don't use it for loading global styles.

Also IIRC there was a problem with the following CSS files in @vaadin/react-components affecting Lumo icon font:

@import url(@vaadin/react-components/css/Lumo.css);
@import url(@vaadin/react-components/css/lumo/FontIcons.css);

[web-padawan]

Also IIRC there was a problem with the following CSS files in @vaadin/react-components affecting Lumo icon font:

This is still an issue, e.g. this is how vaadin-drawer-toggle looks when I add one of the above imports to the theme e.g. frontend/themes/my-app/styles.css (changing it to e.g. document.css produces the same result):

We probably need to update the css-generator script so that it excludes font-icons.js so we don't re-define font icons.

[sissbruecker]

Importing the CSS files through JS already seems to work in a Vite project at least:

import '@vaadin/react-components/css/Lumo.css';
import '@vaadin/react-components/css/lumo/Typography.css';

The utility styles are problematic though. They are structured as CSS module, so just adding:

import '@vaadin/react-components/css/lumo/Utility.module.css';

doesn't register any global classes because Vite expects you to import individual classes from the module. However:

import {uppercase} from '@vaadin/react-components/css/lumo/Utility.module.css';

results in a TS error because there are no TS definitions for that module. I think we should just use a regular CSS file here, having to import every single utility class you want to use through an import sounds like a pain.

---

@marcushellberg Can you maybe clarify your expectations:

• Your request is mainly about being able to import only a single file?
• Do you expect that file to also load utility classes?
• Do you expect that file to reside in @vaadin/vaadin-lumo-styles or in @vaadin/react-components?

I think it we want to do something along those lines we'd probably structure it so that utility styles are optional. Though there could be a file that imports everything. Putting the CSS files into @vaadin/vaadin-lumo-styles might make more sense than using @vaadin/react-components, as we also had users of the standalone web components that wanted to apply Lumo global styles to their app.

[marcushellberg]

I would like to be able to import two files: Lumo itself and the utility classes. In some cases, I want to use Tailwind instead of our utility classes, so it's more flexible if they're a separate import.

Intuitively, I would expect the Lumo styles to be in @vaadin/vaadin-lumo-styles based on naming. I would not have found the ones in our react components package if it hadn't been for our internal slack.