search

girder / girder_web_components

Reusable Javascript and VueJS components for interacting with a Girder server.
https://gwc.girder.org
Apache License 2.0
16 stars 9 forks source link

Still getting CSS issues in >= 3.0.1 #305

Open subdavis opened 3 years ago

subdavis commented 3 years ago

I think something about Vue's CSS preprocessing is broken when the module entrypoint is discovered through package.json's main property. I think most packages are immune to this because they pre-compile the CSS into a js bundle or directly into the render function, but we're shipping SFCs.

If I import everything directly through index.js via @girder/components/src instead of the naked package name, everything works. But using the package name forces resolution of index.js using the main property. I don't know if that process lands you on a different webpack code path or what.

Seems simplest to just update all the docs here to make @girder/components/src the official import string, but I'm going to do some more testing.

Similar to #295 for the demo app because @/ is an alias directly to the index.js rather than forcing resolution with the package file I think. It's a different problem though, because this is about the CSS defined in each component and not the MDI css tree shaking.

For anyone wanting to use GWC 3.0.1 in a typescript project and get a quick workaround, here's the definitions to forward:

// src/@types/girder-components-src.d.ts
declare module '@girder/components/src' {
  export * from '@girder/components';
  export { default } from '@girder/components';
}