[Question] External library support?

[R-Bower]

I've read through the docs and examples but haven't seen anything related to external library support. Here's an example of what I mean:

For the sake of brevity, let's assume that I've setup a sprinkles.css.ts in an external package with the following properties:

// file defined in @my-lib/styles
const responsiveProperties = defineProperties({
  conditions: {
    mobile: {},
    tablet: { '@media': 'screen and (min-width: 768px)' },
    desktop: { '@media': 'screen and (min-width: 1024px)' },
  },
  defaultCondition: 'mobile',
  properties: {
    display: ['none', 'block', 'flex'],
    flexDirection: ['row', 'column'],
  }
});

export const flexSprinkles = createSprinkles(
  responsiveProperties,
);

I have an external application that depends on the above @my-lib/styles package.

// @my-app/frontend
import {flexSprinkles} from "@my-lib/styles"
// ...
<div className={flexSprinkles({
  display: "flex",
  flexDirection: "column",
})}></div>

Is there a way to make this work as expected? Ideally, I'd like to define reusable "sprinkles" exports for use in separate projects. I'm aware of packages like https://github.com/TheMightyPenguin/dessert-box, but these seem to be react-specific. Ideally, this solution should work in non-react libraries as well.

Nice work btw. I love what I've seen so far.

[mattcompiles]

You can definitely do this, you just have to decide where you want to do the compilation. You can either make it a requirement of your consumers to run the vanilla-extract plugin of their choice. Or you can pre-compile at the library level to CSS files and expect that your consumers can compile .css files as part of their application build. If you choose the latter than the rollup-plugin is the easiest existing option to achieve this.

[riccardoperra]

Hi @mattcompiles, I have some doubts too.

I also have a monorepo setup with an app (vite) and ui package (rollup), but I couldn't manage to get it working. What I'm trying to achieve is to define a base theme contract with createThemeContract in the library package, and consume in my application defining a new theme based of it.

An example of my use case in a larger codebase using Vite for both consumer application and external package:
theme.css.ts - external package
theme1 - consumer app

Here's a small example https://github.com/riccardoperra/solid-vanilla-extract-repro where I am trying to testing everything with rollup

Bundling only as part of application build

• Consumer app vite configuration: vite.config.ts
• Library configuration: rollup.config.js

If I do that, it seems that during css build phase vanilla extract tries to resolve solid-js imports for "node", but I don't have ssr enabled. This forced me to patch their imports momentarily in node_modules by replacing them with the browser ones. This is obviously a workaround because doing so cannot use ssr.

Screenshot error

Bundling both application and ui library

• Consumer app vite configuration: vite.config.ts
• Library configuration: rollup.config.js

Same as before, everything seems working fine if I consume components, but if I try to import themes or styles from the library package this is the error that I have

Screenshot error

---

Having said that, I don't understand if I am looking for something that is impossible to do at the moment or if I am wrong configurations / approach.

Note Using vite in the consumer application without bundling the css inside the library, I noticed that even using your branch "vite-resolution-fix" I have the same 404 error, I had to move up to @vanilla-extract/[email protected]

Screenshot error

https://github.com/riccardoperra/solid-vanilla-extract-repro/blob/ac21f9b6b9c6664759aa54419c080f015eb7507a/packages/example-1/vite.config.ts#L5

[R-Bower]

Sorry for this thread! I should've read through the discussions.
This issue is a much better thread.