Skip to content

Still getting CSS issues in >= 3.0.1 #305

@subdavis

Description

@subdavis

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';
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions