How to bundle css/elementary-flow.css?

[Lucca-mito]

First, thank you @sliemeobn for creating ElementaryUI and ElementaryFlow. The framework is truly incredible already, and I'm excited to follow its development.

I’m working on a project using ElementaryUI and -Flow for its web front-end. I’m able to build and serve the web app, and the .styles defined in the code are loaded (a .background(.black) I defined shows up as --e-bg: black in the CSS inspector). But the styles are not actually applied, suggesting that whatever stylesheet defines ElementaryFlow’s CSS variables (such as --e-bg) is not loaded.

ElementaryFlow’s How to Use It explains that

The package contains a single, static CSS file that must be loaded for ElementaryFlow to work: css/elementary-flow.css. Make sure to bundle this file as part of your web project build.

So I imagine the issue is that I’m not bundling css/elementary-flow.css. So, how exactly should this file be bundled?

The Swiftle sample app bundles it by setting resolve.alias["ElementaryFlow"] to resolve(__dirname, ".build/checkouts/elementary-flow/css/elementary-flow.css"). So I added node:path as a dev dependency, followed the resolve+__dirname approach, rebuilt, and re-served, but no stylesheet.

WasmExample bundles the file by using explicit relative paths for resolve.alias["ElementaryFlow"] instead (in its case, "../../css/elementary-flow.css"), and I see that other ElementaryFlow-provided .build resources (namely .build/checkouts/elementary-ui/BrowserRuntime) are bundled in the starter project and in all sample apps via a different approach entirely (by adding them to the "dependencies" in package.json).

So, what is the right way to bundle the ElementaryFlow stylesheet? Thanks!

[Lucca-mito]

Update: I was able to get the resolve+__dirname approach to work by adding import "ElementaryFlow"; to index.ts!

WasmExample does something different: it adds an index.css file with @import "ElementaryFlow"; and adds <link rel="stylesheet" href="./index.css"> to its index.html. (This might actually be better since having an index.css allows us to override UA styles on body.) Either way, adding one of these approaches to loading the stylesheet in ElementaryFlow's README.md may be helpful to other users. EDIT: created a PR doing so.

[sliemeobn]

hey @Lucca-mito, thanks for getting in touch and for the nice words! sorry for the delayed response, I was busy chasing the easter bunny the last few days ; )

I am happy to read you figured it out in the end - and I agree that the docs are pretty bare-bones ATM, thanks for the PR!