ember-cli-addon including styles folder

[jackmatt2]

I have created an ember-addon using ember addon myaddon

I have css styles in the styles folder.

myaddon/app/styles/style1.css
myaddon/app/styles/style2.css

The other folders /components, /templates etc are all getting merged properly. Styles do not seem to get merged at all into projects using the addon.

I can't find an example anywhere of importing styles using the most recent ember-cli-addon plugin.

What am I doing wrong?

[jakecraige]

My guess is that the styles will have to be imported in your app.css. Try adding @import 'style1'; @import 'style2'; to your app.css in your app and they should be included in the output.

This seems weird though as I'd probably expect them to be included in the output as well. Maybe we should auto add addon's styles to the vendor.css ?

[bcardarella]

This is a bug. The intent is to have the addon's styles in app/ concat'ed into app-name.css and the ones in addon/ concat'ed into vendor.css

[rwjblue]

@bcardarella - I thought that the styles in addon/styles should be appended to addon-name.css, and the ones in app/styles should be merged with the applications styles tree (which defaults to app/styles/) and will need to be imported from (since we only process/export a single css file from the styles tree).

[jackmatt2]

I am still having trouble with this after the 0.0.44 update.

I have a boilerplate project and I want all the styles (top-menu.css, side-menu.css etc) all included into the projects that are using the addon.

How do I achieve this?

[stefanpenner]

@bcardarella is the concat automatic or as a result of import statements in the host app (i hope the later)

[bcardarella]

@stefanpenner automatic for whatever is in addon/styles. All addon styles should get concat'd into a single addons.css then that will get concat'd into vendor.css

[rwjblue]

@bcardarella - The code exists to do this, but most likely it is only grabbing addon/styles/app.css (just like the regular preprocessCss does for app/styles/app.css). There have been a number of issues/pr's for making this work with an array of paths (#1888 is the closest to completion).

[bcardarella]

@rwjblue gotcha

[stefanpenner]

@bcardarella any thoughts on allowing selective css imports from an addon?

[bcardarella]

@stefanpenner I don't think that should happen if you put your styles in app/styles. My concept of the addon is that it is isolated yet complete. If we are asking people to opt into assets then it could put the addon into a broken state. If people wanted to distribute styles that require opt-in they should put them into vendor/

[rwjblue]

@bcardarella, @stefanpenner - Agreed, at that point the styles are actually "vendor" files (they are in support of the rest of the app if needed/used).

[stefanpenner]

@bcardarella another example that I'm sure you are familiar with is how ruby's require system works. When you have a gem, you then require 'gem' which then may or may not choose to include all of its subfiles. This leaves the option for a consumer to pull in require 'gem/specific-adapter' without also being forced to load gem/other-adapter.

translating that back to ember-cli-addons it seems that

<addon-name>/app/styles/<addon-name>.scss should decide what of the addon provided scss is included by default

<addon-name>/app/styles/<addon-name>/* or <addon-name>/addon/styles/<addon-name>* would be where sub-files exist.

I believe ^^ gives us a scss story that is symmetric to our js story.

[bcardarella]

@stefanpenner I don't see the two as compatible. With ruby you have the option of requiring a file that could have other deps and those get pulled into automatically. That isn't happening with the styles in ember-cli. It's one and done.

[bcardarella]

@stefanpenner In addition, with the vendor/ folder we would ask people to import from two different locations, why do this when the functionality already exists?

If the concern is about having the styles always opt-in then I'd be OK with eliminating app/styles all together. I just don't think we should support opt-in behavior if we do keep app/styles

[stefanpenner]

@bcardarella maybe we are confused because different per-processors do different things. Got time this week for a quick google hangout to sanity check each other?

[crazymykl]

So what's going on with this right now?

[RobbieTheWagner]

So how do we package styles up as part of the addon? I have the css file in the dist directory, but it doesn't automatically get included. Do I need to add an import for it in index.js? Not sure of the best way to accomplish this. I would assume they would be included by default.

To be more specific as to my issue, I am trying to use ember-cli-less, which I use to create my css file. The first issue, is it won't find app.less, unless I put it in the dummy app. I want to pull app/styles/app.less, how do I do that?

The second issue is automatically including the css that is generated into the addon.

I put this in my Brocfile.js:

var app = new EmberAddon({
  outputPaths: {
    app: {
      css: {
        'app': '/assets/ember-x-editable.css'
      }
    }
  }
});

For some reason instead of looking for app/styles/ember-x-editable.less, it is looking for tests/dummy/app/styles/ember-x-editable.less. How do I make it look at just app and not the dummy app?

[RobbieTheWagner]

Has a solution for this been implemented? Is there a way to do it with .less files or are only .css and .scss supported as of now? I can't make it work with ember-cli-less. Are there any guides on including styles in addons out there? I would really appreciate some guidance! @stefanpenner @rwjblue @bcardarella

[stefanpenner]

I would really appreciate some guidance! @stefanpenner @rwjblue @bcardarella

i am aware of this issue, no need to ping me. I am working through all the issues as time/energy permits.

[ahmed1490]

Any update/documentation about this?

[BryanCrotaz]

Is there a recommended workaround for this when writing an addon that requires embedded css? (upgrading ember-split-view to 1.13.7)

[AshesOfOwls]

I wanted to chime in on this - I feel like that components in ember addons should be able to use the pod structure that is already half set up. The styles for an addon component should live in addon/components/component-name/style.scss and then be able to be referenced in an application.css.scss that lives within addon/styles/.

It would feel much cleaner to me to have all the dependencies for a component within a folder, which is the reason for pod structure IMO.

[RobbieTheWagner]

Still trying to figure this out over a year later. Anyone have some insights?

[pixelhandler]

this issue puzzles me. I ended up sharing a post on my path toward figuring out how an addon can use CSS and processing here -> https://pixelhandler.com/posts/developing-ember-addons-next-generation-css-with-postcss

[stefanpenner]

Although this sucks, this isn't really a bug. We will need to explore improving the world of css (from add-ons) CSS is strange thing when it comes to composition, which makes it strange.

Anyways, I'm closing this issue. As this issue tracker should stay on focus, and be for bugs. That doesn't mean we don't care, but this needs to be explored from RFC / POC and in. Work like @pixelhandler post is interesting, and a great idea.

[NullVoxPopuli]

4 years later, I'm trying to figure this out, too. ;)

@pixelhandler your blog has an expired certificate, and I can't view it. :-
Does the post still exist? does the cert just need updated?