Unwanted styles dependency resolution

[darsain]

Project: https://gist.github.com/anonymous/807ee9ea89692a000e6d

To test:

git clone https://gist.github.com/807ee9ea89692a000e6d.git
cd 807ee9ea89692a000e6d
duo -S test.css

The expected output would be:

.a { color: red; }
.test { color: blue; }

but instead, we get the remaining styles from component.json:styles array appended at the end, resulting in:

.a { color: red; }
.test { color: blue; }
.b { color: green; }

---

And while I'm at it, how would you build styles for this component with Duo, assuming there is no test.css, just styles split into separate files?

Is there some shorthand like new Duo(__dirname).entry('styles') that would build styles from component.json located at __dirname? I haven't found anything in docs regarding this.

[dominicbarnes]

This is being done automatically by the duo-css-compat plugin, which is in there for "backwards-compatibility" with component projects.

There isn't a way to disable currently, but since it's just a plugin it shouldn't be hard to add some sort of public API to configure this.

[darsain]

So currently, it is impossible to build 2 separate CSS files If you want to specify dependencies in component.json, as every dependency defined there will be included into every CSS file built, correct?

Well, that sux :)

[dominicbarnes]

Why exactly wouldn't you want that to happen? It seems like pretty reasonable behavior to me, but I don't really understand what your use-case could be.

[darsain]

Any use case where you need more than one stylesheet. For example:

• Different styles for public site main.css, and admin interface admin.css, which share some, but not a lot of dependencies.
• You have a not very often visited page with heavy additional CSS load, so you split that into a separate file and load it only on this page.

[dominicbarnes]

So, do you need the component.json at all? (are you supporting both component and duo?)

[darsain]

I'm not creating a component. I'm creating a final project/website whose front-end assets should be build with duo, and having dependency versions defined in manifest instead of code is definitely more maintainable. Also dependency pinning (shrinkwrap).

[dominicbarnes]

Oh, then I would just encourage you to exclude things like scripts, styles, etc. They aren't necessary in this case.

Duo begins with "entry files" (the ones you pass to the duo builder) and ascertains any dependencies via static analysis. (not unlike browserify) Thus, unlike component, you don't need to specify every file (or any file for that matter) in a component.json. But you can definitely still use it to manage versions for your dependencies. :)

[darsain]

Oh, true. I've actually run into this when developing a component and trying to build test.css for testing page, and every style from component got included. What do you suggest in such case?

Also, how would you build component styles, when styles array has multiple files inside it? They basically need to be concatenated and than build, but I'm curious if it can be done purely with Duo API, without bringing in other tools. Something like new Duo(__dirname).entry('styles')... would be great.