How to source nested libraries?

[Hugos68]

I have a npm package: @skeletonlabs/skeleton-svelte
When I do @source "../node_modules/@skeletonlabs/skeleton-svelte" this works great!
But, @skeletonlabs/skeleton-svelte, also consumes some tailwind classes from the @skeletonlabs/skeleton-common package.
These tailwind classes aren't "seen" by Tailwind, how can I tell Tailwind to include this nested dependency?

The chain in the docs show how to use source in this scenario:

(project-with-tailwind) -> (some-library-with-classes)

This is my scenario:

(project with tailwind) -> (some-library) -> (some-library-with-classes)

I want to source some-library-with-classes but I don't know how.

[wongjn]

Usually, dependencies would be installed in the same node_modules folder so you can do:

@source "../node_modules/@skeletonlabs/skeleton-svelte";
@source "../node_modules/@skeletonlabs/skeleton-common";

You can double-check the location of the @skeletonlabs/skeleton-common package and adjust the path if needed.

[Hugos68]

Ok, so pnpm moves it to:
@source '../node_modules/.pnpm/@[email protected]/node_modules//@skeletonlabs//skeleton-common/dist';

This works, but obviously this is far from ideal because this would mean everytime the version changes I'd need to change the path., also if someone uses npm instead of pnpm. Is there no way to tell Tailwind to always include a library? That would be much simpler IMO, something like:

@source library '@skeletonlabs/skeleton-common';

Instead of relying on system paths and what not.

[wongjn]

For pnpm, you may need to check in node_modules/.pnpm/node_modules, as per https://pnpm.io/settings#hoistpattern

[Hugos68]

Yeah, just figured that out too, thanks!

But again, this is far from ideal. The project in question that I'm working on is a library on itself aswell, so it needs to work on lots of differently setup projects without requiring changes to the path. Is this just "not" possible?

[wongjn]

There no way to tell Tailwind to always include a library. Though as a workaround, you can configure pnpm to not hoist some dependencies, so they are installed in the root node_modules folder.

[Hugos68]

Yeah that won't work as we don't control how our users setup their projects.

• @skeletonlabs/skeleton - Tailwind CSS Library, imported through @import '@skeletonlabs/skeleton'; (similar to Tailwind).
• @skeletonlabs/skeleton-{framework} - Component library using Tailwind
• @skeletonlabs/skeleton-common - Library that contains shared classes across framework packages

When users install @skeletonlabs/skeleton, we want the CSS library to automatically include sourcing for both the framework and skeleton-common packages so the user doesn't have to manually source.

[adamwathan]

Hey @Hugos68! The best way to do all of this is using CSS imports so you can place the @source rules local relative to the files they refer to:

/* @skeletonlabs/skeleton-svelte/index.css */
@import "@skeletonlabs/skeleton-common";
@source "./";

/* @skeletonlabs/skeleton-common/index.css */
@source "./";

Then in your apps you can just import @skeletonlabs/skeleton-svelte:

/* my-project/styles.css */
@import "tailwindcss";
@import "@skeletonlabs/skeleton-svelte";

Now all of those source paths are private implementation details and you don't have to worry about where the package managers put everything.

[Hugos68]

This sounds exactly what I want! Thanks for the detailed answer. One thing I'm not sure about, how can I add a css file to skeleton-common which is a TS project? Do I add a index.css and do import './index.css' in the index.ts file of skeleton-common.

[Hugos68]

Never mind, I looked at the Tailwind npm package and see you use a style entry in the exports, I'll use that and see if that works. Is this style entry documented somewhere?

[adamwathan]

I don't think you even need to do that honestly, CSS imports will automatically look for an index.css file in the package root by default if you don't specify a full path I think. We modeled the behavior after postcss-import which works that way, and it looks for style too:

This plugin can consume local files, node modules or web_modules. To resolve path of an @import rule, it can look into root directory (by default process.cwd()), web_modules, node_modules or local modules. When importing a module, it will look for index.css or file referenced in package.json in the style or main fields. You can also provide manually multiples paths where to look at.

[Hugos68]

Looks like it's all working! Thank you for the explanation and answer. Much appreiciated.