Build fails when "could not find vendor styles in index.html"

[johanrd]

It could be quite useful to not include default styles from addons.

Pre-embroider, the suggested solution from @stefanpenner was to remove the vendor.css link from index.html:

- <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css"> 

However, on embroider this creates a hard fail:

Build Error (WaitForTrees)
could not find vendor styles in index.html

We should either introduce a config to disable vendor style generation, or at least re-introduce the option to not load vendor css in index.html.

[ef4]

The failure you're hitting here is due to the compatibility layer which is trying to infer where you wanted the CSS to appear in your HTML.

But setting aside the compatibility layer, embroider takes a very different view of what your index.html file means. It won't refer to the output of the build (files like assets/vendor.css), because that locks us forever into bad assumptions like "there are exactly two CSS bundles, named app.css and vendor.css". The app author shouldn't need to hard-code any assumptions about how their app is getting optimized and distributed.

So even if we were going to introduce this feature, it would not be from index.html that you would control it, because you have no way of knowing what bundle or bundles any particular addon's CSS is going to be in.

That said, I am opposed to adding this feature (the ability to suppress all addon CSS) in any form. It really doesn't fit with the modules-based worldview we're trying to move toward. Whoever consumes some CSS should import that CSS at the point where they need it. That is the best way to ensure that it's only included when it's actually needed.

An addon component that needs some CSS for correctness should import that CSS directly, so that the two modules always travel together. If the component gets used, the CSS gets included, and otherwise not.

An addon component that wants to optionally provide some default styles that app authors may or may not want can tell app authors "if you want the default styles, say import "my-addon/default-styles.css", if you don't want them, don't import them.

So while it's true that under embroider presently, a lot of stuff goes into vendor.css for compatibility reasons, over time we want that file to dwindle to nothing as everybody expresses finer-grained dependencies on their CSS

[johanrd]

Ok, thanks for the reply.

I somewhat agree in theory, but in practice I often ended up drowned in a specificity war with an addon's (often overly specified) css. After removing the reference to vendor.css, I just needed to import addon css one-by-one in app/styles/app.css, which for me is kind of the same mental model as controlled import of es6 modules in javascript.

Maybe there are better ways to specify to "whoever consumes some CSS should import that CSS at the point where they need it"?

Anyways, feel free to close this issue if it is considered a won't fix.