[2.0.0-beta] [AdminUI] theme.min.css is not exported

[alexisvigoureux]

Describe the bug We add custom extensions to the admin UI (React) and in version 1.9.x we did an import at import '@vendure/admin-ui/static/theme.min.css' to reuse some class. In the 2.0 beta we get this error => Module not found: Error: Package path ./static/theme.min.css is not exported from package /node_modules/@vendure/admin-ui (see exports field in /node_modules/@vendure/admin-ui/package.json)

To Reproduce Steps to reproduce the behavior:

1. Create an AdminUiPlugin
2. Add this line in your custom module import '@vendure/admin-ui/static/theme.min.css'
3. Launch the app

Expected behavior That the theme.min.css file can be imported in custom module of the AdminUiPlugin

Environment (please complete the following information):

• @vendure/core version: 2.0.0-beta.1
• Nodejs version: 18.15
• Database (mysql/postgres etc): postgres

[michaelbromley]

I suspect the difference here stems from the fact that the latest Angular compiler is using webpack 5 under the hood as opposed to webpack 4.

References:

• https://github.com/brianvoe/slim-select/issues/269

I'll see if I can figure out an "exports" configuration that solves this.

[michaelbromley]

OK, I tried locally adding the following export to the @vendure/admin-ui package.json:

"exports": {
    "./static/theme.min.css": {
      "default": "./static/theme.min.css"
    },
}

This gets us further, but then the you run into this error:

../node_modules/@vendure/admin-ui/static/theme.min.css:1:0 - Error: Module parse failed: Unexpected token (1:0)

This is discussed here:

• https://github.com/angular/angular-cli/issues/23273#issuecomment-1145831043

I'm not yet sure of the solution. Perhaps you could try some alternate way of loading the style than including it as an import into a JS/TS file?

[alexisvigoureux]

Thanks for the investigation. We made this workaround for the moment, to load the style files of the parent in the iframe.

window.onload = function() {
      Array.prototype.forEach.call(window.parent.document.querySelectorAll("link[rel=stylesheet]"), function(link) {
        const newLink = document.createElement("link");
        newLink.rel  = link.rel;
        newLink.href = link.href;
        document.head.prepend(newLink);
      });
    };