Skypack cdn breaking Lit and Material

[e111077]

Heya, apologies in advance because I don't know how to reduce this issue further.

This is in regards to material-components/material-components-web-components#2359

The issues are twofold:

Skypack Eliding Certain imports

Skypack seems to be eliding certain imports that do not include a from.

Reproduction

We have packages that have custom element side effects that need to run so we have the following patterns in our material code:

// mwc-tab-bar.ts
import '@material/mwc-tab-scroller'; // loads custom element definition
import {TabScroller} from '@material/mwc-tab-scroller'; // loads class / type

...

skypack seems to be eliding the first import.

see

• skypack output
• source code (lines 19 and 20)

Skypack breaking Lit directives

TBH I'm out of my depth trying to figure out why this one is breaking, but it seems like the markup is correct in skypack, but somewhere along the lines Lit directives break and it just inlines the code rather than running it into the tagged template.

Reproduction

we use the Lit ClassMap directive which uses Lit's directives to simply apply classes to a component via a binding.

• skypack output
• source code (line 66)

inspect the <button> in the rendered fab in this example and see that the text of the function was simply.

This seems to work in unpkg, so my guess is that this may be a skypack compilation issue

[e111077]

cc @aomarks

[coryrylan]

We have run into a similar issue as well with our design system. With this import import 'https://cdn.skypack.dev/@cds/core@v5.2.0/badge/register.js'; it loads what seems to be two versions of the lit library. One portion is the optimized while the other is unoptimized. Prior versions of lit library loaded the same optimized path.

Edit it looks like prior versions are now broken as well

[matthewp]

Thanks for letting us know. I have one idea of what this might be. Will take a look and update the issue.

[treeder]

I posted an issue in material-web repo that seems related: https://github.com/material-components/material-web/issues/2812