@source should support @import-like package references

[visma-ossi-koivula]

Hi,

In our micro-frontend monorepo setup, we build our component library's -- a separate npm package -- styles as part of a micro-frontend's build process. We are currently migrating to v4 and found out we need to use the @source directive to include external source files. However it doesn't seem to support the same syntax for referencing packages that @import does:

@import '@org/component-library/css';

And instead we need to use relative paths to node_modules directory:

@source '../../../node_modules/@org/component-library';

This becomes annoying when our micro-frontends might be using different versions of the component-library package, as with pnpm the package might be installed into the root node_modules or the workspace's node_modules. Each micro-frontend will need to know is their exact version living in the root or the workspace -- developers will forget about this tiny detail causing wrong versions of the library to be built. Optimally each micro-fe would have the exact same newest version of the library but this is likely not going to be the reality.

In v3 we have handled this in tailwind.config.js rather nicely:

{
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    path.join(
      path.dirname(require.resolve('@org/component-library')),
      '**/*.js'
    ),
  ],
}

Are we doing this horribly wrong, is there another workaround or would such feature to @source make sense?

[rozsazoltan]

While I understand the idea, I don't really like your v3 JavaScript solution anyway. I assume the location of your node_modules folder has never changed, so it's more complicated than just using a simple static string.

And while it's frustrating that this approach still isn't available in @source too, I believe the path there never really changes either.

[visma-ossi-koivula]

I assume the location of your node_modules folder has never changed

I could have been more clear with our node package strategy -- but due to using hoisted packages, we have multiple node_modules that may have different versions of the library. A singular project then needs to know if their required version lives in the root node_modules or the node_modules inside the project.

root/
├── node_modules/
│   └── @org/[email protected]/
├── apps/
│   ├── app-a/
│   │   ├── node_modules/
│   │   └── styles.css
│   └── app-b/
│       ├── node_modules/
│       │   └── @org/[email protected]/
│       └── styles.css

app-a's styles.css needs to know to look into../../node_modules and app-b's to ./node_modules. If we then upgrade app-b's dependency to version 0.0.2, we will also need to remember to change the path in styles.css to the hoisted ../../node_modules, quite an easy place to make difficult-to-catch mistakes in.

[adamwathan]

The solution that I would recommend is putting the @source directives in a CSS file in your package, then importing that CSS file from the main project:

/* @org/component-library/index.css */
@source "./src"; /* or whatever */

/* app-a/styles.css */
@import "@org/component-library";

Then just make sure you add index.css as your style export in the package.json file.

This is how we intended people to use this feature for sure, works better when @source stuff is in the place where the files are and you are just importing a CSS file at the point of consumption.

[visma-ossi-koivula]

Ah, that does make total sense and seems to work perfectly. Thank you.