Can the `extraPublicTrees` Embroider option be used for merging/pulling in styles?

[plush drum]

We have some css files in a folder called bar/styles that would need to be copied to the main, app/styles folder so that the build can find them there. (In reality, it's a bit more complex, as we decide on whether to pull in css files from bar or another folder).

Before switching to Embroider, the functionality was done in an in-repo add-on which had a treeForStyles hook, with a funnel.

It seemed to me like the same can be achived by creating a tree with the same funnel and passing the resulting tree as the extraPublicTrees option in Embroider:

let stylesTree = funnel('bar/styles', {
  destDir: 'app/styles',
});

return require('@embroider/compat').compatBuild(app, Webpack, {
  extraPublicTrees: [stylesTree],
});

When I print out stylesTree with broccoli-stew, it all seems good, the css files were copied over. However, the PostCSS processor doesn't see it:

Build Error (PostcssCompiler)

File not found: /app/styles/app.css
in any of the following include paths:
  /tmp/broccoli-88165eq8hUc9Hfrr1/out-0948-funnel

, and I don't think this problem is related to PostCSS – I'm fairly certain I'd see it without the PostCSS processing.

Is extraPublicTrees not meant for this purpose? If not, what's the recommended way to achieve the merging (the pulling in of CSS files from another folder/add-on)?

Thank you!

Can the extraPublicTrees Embroider option be used for merging/pulling in styles?

[tall ivy]

for pulling in styles, you'll want to import them in to a js file, like app.js or something

for embroider, you'll typically not touch the ember-cli-build.js to include extra assets

import './my-styles.css';

[plush drum]

Thanks! That doesn't really change the outcome, unfortunately, though this time the error is thrown during Webpack compilation.

[tall ivy]

where is bar/styles located?

[plush drum]

In the same folder as app

Which is the top-most folder of the app

Let's say we have app, bar and baz and depending on the value of an env var, we want to copy either the contents of bar/styles or baz/styles into app.

[tall ivy]

app which thing?

[plush drum]

(And do it in a way which would not be a one-off cp -r so that adding further files or modifying existing ones just works)

Sorry, copy it to app/styles

[tall ivy]

if app.js,

import './bar/sytles.css'; // need extension

[tall ivy]

oh we don't want to use the legacy style pipeline

it's 😬

[plush drum]

Right, I first tried with Webpack but it seems to operate "on another level" (for lack of a better term)

It can copy images/bear.png to smaller-images/cub.png but it doesn't seem to be able to copy files into app in a way that Ember's module resolution finds it

[tall ivy]

what do you mean by copy in to app?

where are these files originally? and why move them?

[plush drum]

If I use a webpack plugin to copy files, the output appears in the dist directory, where you have the assets folder and inside it, the chunks

[tall ivy]

but why copy at all? (I feel like I'm missing something)

[plush drum]

Because the foo and bar directories contain files specific to the device type we're building for

For desktop we might have different styles, and even different components (and component templates) than we do for mobile

And that's a clean way to keep them separate and only "merge" them when building for a specific device type

[tall ivy]

ahhh ok

so, I think we can still go towards imports, and not worry about the implementation details of where the files end up

for example

if (macroCondition(getOwnConfig().isDesktop) {
  importSync('./desktop/styles.css');
} else {
  importSync('./mobile/styles.css');
}

depending on your build, you'd only build with the appropriate CSS

all those functions are from @embroider/macros (you don't need to "use embroider" to use these)

[plush drum]

Thanks, that's also a good way. However, if I understand correctly, you'd have to have such a conditional in all files of which there are different versions for desktop and mobile

[tall ivy]

naw, just once, in like app.js or something

oh wait

I didn't read

you said you have a bunch of differetn files for this sort of thing

hmm

it is sounding like a build time thing would be useful

[plush drum]

There are hundreds of files with different versions: css files, components, services, even routes

[tall ivy]

(sorry I'm slow!)

[plush drum]

No worries, you're helping a ton!

Yes, it can absolutely be a build time thing

[tall ivy]

ok, well back to your question about extraPublicTrees

postcss -- ember-cli-postcss?

it's been known to not work all that great with custom stuff

you could wrap your styles tree in a postcss tree tho!

[plush drum]

Right, but the problem doesn't seem to be about styles only

It's the same with components

I pass a tree (received as a result of new Funnel) to extraPublicTrees and the tree, when printed out, looks perfect.

And yet, Ember prints an error when looking for component:button (or any component that should've been copied from desktop

[tall ivy]

hmmm

I don't know if that'd be supported

probably time to ask a wider pool in #dev-embroider ❤️