upgrade vaadin

[anoblet]

No description provided.

[github-actions]

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/index.bundled.js	108.13 KB (+6.88% 🔺)

[lkraav]

size-limit report package

Path Size
packages/cxl-ui/pkg/dist-web/index.bundled.js 112.5 KB (+11.2% small_red_triangle)

Wow, +10%? Unlucky.

[anoblet]

There's some issues with:

Error: An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.

I'm going to debug it today.

[anoblet]

Wow, +10%? Unlucky.

It will be nice when Vaadin uses Lit instead of Polymer :)

[lkraav]

There's some issues with:

Error: An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.

Depends on where.

Maybe https://github.com/conversionxl/aybolit/blob/master/packages/cxl-lumo-styles/src/utils.js needs to be updated with their latest.

[anoblet]

My first thought is that when the SCSS is parsed, it's being passed in as a string instead of a CSSResult. If we could wrap that in a unsafeCSS directive that might work.

I don't see any significant differences between our version of utils.js and master (https://github.com/vaadin/vaadin-themable-mixin/commits/master/register-styles.html).

[anoblet]

Wrapping the input with css/unsafeCSS seems to work. Now I'm running into:

Could not find style data in module named lumo-color
Could not find style data in module named lumo-typography

These posts make it seem environment related:

• https://stackoverflow.com/questions/62911532/vaadin-14-fails-to-load-lumo-color-and-lumo-typography-on-windows-10-machine
• https://vaadin.com/forum/thread/18360283/vaadin-14-fails-to-load-lumo-color-and-lumo-typography-on-windows-10-machine

[anoblet]

Removing include="lumo-color" and include="lumo-typography" from:

• aybolit/packages/cxl-lumo-styles/src/color.js

  Line 7 in 8fd661f

  <style id="cxl-lumo-styles-color" include="lumo-color">${styles}</style>

• aybolit/packages/cxl-lumo-styles/src/typography.js

  Line 7 in 8fd661f

  <style id="cxl-lumo-styles-typography" include="lumo-typography">${styles}</style>

get's rid of the errors though the typography still doesn't render correctly.

[lkraav]

With https://mobile.twitter.com/serhiikulykov/status/1466137314082660356 perhaps also look into going for optimized imports like @vaadin/context-menu.

[anoblet]

Typography is working now.

[lkraav]

Looking at https://github.com/vaadin/web-components/blob/e2b36f260eae94ac249fc9f7f1dff43e6228e52a/packages/polymer-legacy-adapter/src/style-modules.js#L8, can we also upgrade to Lit in this PR?

For some reason, cxl-app-layout media query stuff is still in here, too.

[anoblet]

Vaadin dropped support for vaadin-device-detector and it isn't available for import from @vaadin/vaadin-context-menu anymore. The observe function replaces it, though it may be better to put it into a utility file rather than at the top of cxl-app-layout and import it.

I'll start working on the import refactoring and lit upgrade.

[lkraav]

Vaadin dropped support for vaadin-device-detector and it isn't available for import from @vaadin/vaadin-context-menu anymore.

Hm, but https://github.com/vaadin/web-components/blob/master/packages/context-menu/src/vaadin-device-detector.js is still there today?

[anoblet]

It's there, I'm not sure why it won't import.

[lkraav]

It's there, I'm not sure why it won't import.

Because @vaadin/context-menu, not @vaadin/vaadin-....

[anoblet]

I see :)

[anoblet]

I'll revert the commit and fix it in the import refactor.

[anoblet]

@vaadin/vaadin-lumo-styles and @vaadin/vaadin-themable-mixin don't follow the new naming convention.

[anoblet]

@lkraav Let me know your thoughts and I will PR upstream.