webark / ember-component-css Goto Github PK

I would like to ban styling by tag-based selectors in these pod-based styles.css files. For example, this would not be valid:

h3 {
  color: red;
}

You would be required to chain a class:

h3.my-header {
  color: red;
}

This is my conservative approach, but I'm interested in perhaps completely banning tag-based selectors that don't contain a dash, or maybe having a whitelist of legitimate usages.

Any thoughts?

Right now, if you install ember-component-css inside of an addon, it will not detect styles defined inside of the addon's pods. Support for pods inside of addons is pretty limited, but you can do it within the addon's app directory just like you would inside of your app itself.

For example:

addon
├── components
│   └── ui-test.js
└── templates
    └── components
        └── ui-test.hbs
app
└── ui-test
    ├── component.js
    └── styles.css

It's not ideal, but it'll do the trick.

The first step to making ember-component-css detect styles inside of addons is to include the addon's app tree in the pod styles funnel input here: https://github.com/ebryn/ember-component-css/blob/master/index.js#L66

Change:

var podStyles = new Funnel(this.trees.app, {

To:

var podStyles = new Funnel(mergeTrees([this.trees.app].concat(this.addonTreesFor('app')), {overwrite: true}), {

More investigation is needed...

Should be implemented similarly to #20

Looking to break down the Monolithic .CSS file in an Ember & PostCSS project. Is this currently compatible? If not, is this on the radar?

Thanks!

I'm trying to test this plugin out but it doesn't appear to work in canary. I see that my styles are correctly being converted from this:

& {
  background-color: red;
}
.test {
  background-color: green;
}

To this:

.invoice-card-5fa7b904 {
  background-color: red;
}
.invoice-card-5fa7b904 .test {
  background-color: green;
}

However, when I create the component with either traditional helper or modern html syntax:

{{#invoice-card}}{{/invoice-card}}
<invoice-card></invoice-card>

Neither seem to have the injected class. Instead I get this as my html:

<div class="ember-view" id="ember416"></div>
<div class="ember-view" id="ember416"></div>

Thoughts? Am I missing something? Thanks for your work on this, I'm excited to try it out.

Am i missing some config or anthing? I have an ember app, which uses pods which are stored on pods dir.. the structure is pretty much like this

app

• pods
  ...
  • components
    -user-menu (which has a styles.scss)

In my app/styles/app.scss i've added the @import "pod-styles"; and when i run the build i get this error:

File:C:/Projects/DummyEmber/tmp/tree_merger-tmp_dest_dir-c96WuQ59.tmp/app/styles/app.scss
file to import not found or unreadable: pod-styles.scss
Current dir: C:/Projects/DummyEmber/tmp/tree_merger-tmp_dest_dir-c96WuQ59.tmp/app/styles/

It seems my pod.styles.scss is not getting created on the build.. i'm wondering why this is happening.

I'm using latest version of ember-cli

Thanks,
Seba

Would be awesome to support https://github.com/ebryn/ember-cli-cssnext

It seems to me there are 3 layers of help this addon could provide:

1. Allow devs to do the "right thing"
2. Encourage devs to do the "right thing"
3. Force devs to do the "right thing"

My understanding is that @ebryn wants to get to level 3 here but I think it would be useful to address all the levels. My idea of the layers is

1. Allow devs to do the "right thing"
   • Allow devs to put CSS in each pod - done!
   • Component generator creates styles/components/my-component.css if app is not using pod format
2. Encourage devs to do the "right thing"
   • Emit amazing warnings (ala the Rust compiler) when the user does something that is likely to cause them pain e.g. a tag selector in a component. Ideally the warnings would contain a URL where the dev could read a longer discussion of why the thing they did is considered a warning.
   • generate more files under styles/ e.g. styles/tags.css. The presence of empty files (perhaps with a short comment explaining what should go in them) makes the path of least resistance obvious and encourages devs to split their styles in a consistent manner
3. Force devs to do the "right thing"
   • Here warnings are enforced but can be adjusted in config
   • This is the level where we provide the most help but also where most of the edge cases live
   • This level is the most difficult to get correct without a lot of real world usage of the addon

The advantages of this layered approach are

• Easier to migrate legacy CSS to this approach
• The "right thing" in CSS is difficult to have consensus on. Even if my "right thing" is not exactly the same as your "right thing" I can config the enforced warnings and the addon is still very useful to me.
• The correct set of enforced warnings may become clearer over time as this addon gets used. Level 3 could become more opinionated over time as the community converges on shared solution.

Sorry this is a bit rambling. Love your work! :-)

When we're installed inside of an app, we should add a styles.css file into pod directories when the standard ember generate component blueprint is used with either --pod or if usePods: true is enabled in .ember-cli

I am generating an addon which relies on ember-component-css. I would like to be able to generate component styles for the components provided by my addon (e.g. the components in addon/pods/components). However, these styles don't seem to be compiled and the component doesn't get it's className adjusted.

I tried adding the scss file to the corresponding file in app/pods/components and this works correctly when developing the addon. When the addon is installed into another app it fails, however.

I came across #54 when investigating and I wasn't clear if this was the same issue?

Is my use-case supported? Is there a way that I can opt into it (maybe merging the relevant files from the addon into the app in treeFor?)?

Thanks!

This has come out of discussions in #27. I think we need to wrap our heads around our sourcemapping strategy by starting with sourcemaps support for plain CSS-based pod styles.

When using this add-on I get this error:

ENOENT, no such file or directory '/my/path/tmp/tree_merger-tmp_dest_dir-IM5xf41a.tmp/app/'
Error: ENOENT, no such file or directory '/my/path/tmp/tree_merger-tmp_dest_dir-IM5xf41a.tmp/app/'
    at Object.fs.readdirSync (fs.js:666:18)
    at walkSync (/my/path/node_modules/ember-component-css/node_modules/walk-sync/index.js:14:20)
    at Funnel.processFilters (/my/path/node_modules/ember-component-css/node_modules/broccoli-funnel/index.js:113:15)
    at Funnel.rebuild (/my/path/node_modules/ember-component-css/node_modules/broccoli-funnel/index.js:108:10)
    at RSVP.resolve.then.then.broccoliInfo (/my/path/node_modules/ember-component-css/node_modules/broccoli-funnel/node_modules/broccoli-read-compat/index.js:59:21)
    at lib$rsvp$$internal$$tryCatch (/my/path/node_modules/ember-component-css/node_modules/broccoli-funnel/node_modules/broccoli-read-compat/node_modules/rsvp/dist/rsvp.js:489:16)
    at lib$rsvp$$internal$$invokeCallback (/my/path/node_modules/ember-component-css/node_modules/broccoli-funnel/node_modules/broccoli-read-compat/node_modules/rsvp/dist/rsvp.js:501:17)
    at /my/path/node_modules/ember-component-css/node_modules/broccoli-funnel/node_modules/broccoli-read-compat/node_modules/rsvp/dist/rsvp.js:1095:13
    at Object.lib$rsvp$asap$$flush [as _onImmediate] (/my/path/node_modules/ember-component-css/node_modules/broccoli-funnel/node_modules/broccoli-read-compat/node_modules/rsvp/dist/rsvp.js:1290:9)
    at processImmediate [as _immediateCallback] (timers.js:354:15)
file added components/join-form/styles.css

Versions

os: mac os 10.10.3
version: 0.2.0
node: 0.10.36
npm: 2.7.0

If you need more I'm glad to help!

xomaczar/ember-cli-styles-reloader#8

There's a problem over at ember-cli-styles-reloader. Because the class name suffixes change with every edit a complete page reload is needed as well.

It would be nice, if the suffixes could stay the same for one ember serve session once they were generated for the first time.

Is this even possible? I don't know much about the current build pipeline...

The ember app still tries to load it (in this example, at /assets/just-testing.css) but fails with error 404

$ ember new just-testing
version: 0.2.7
installing
  create .bowerrc
  create .editorconfig
  create .ember-cli
  create .jshintrc
  create .travis.yml
  create .watchmanconfig
  create Brocfile.js
  create README.md
  create app/app.js
  create app/components/.gitkeep
  create app/controllers/.gitkeep
  create app/helpers/.gitkeep
  create app/index.html
  create app/models/.gitkeep
  create app/router.js
  create app/routes/.gitkeep
  create app/styles/app.css
  create app/templates/application.hbs
  create app/templates/components/.gitkeep
  create bower.json
  create config/environment.js
  create .gitignore
  create package.json
  create public/crossdomain.xml
  create public/robots.txt
  create testem.json
  create tests/.jshintrc
  create tests/helpers/resolver.js
  create tests/helpers/start-app.js
  create tests/index.html
  create tests/test-helper.js
  create tests/unit/.gitkeep
  create vendor/.gitkeep
Installing packages for tooling via npm.  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
Installing packages for tooling via npm..  SOLINK_MODULE(target) Release/bufferutil.node
  SOLINK_MODULE(target) Release/bufferutil.node: Finished
  CXX(target) Release/obj.target/validation/src/validation.o
Installing packages for tooling via npm...  SOLINK_MODULE(target) Release/validation.node
  SOLINK_MODULE(target) Release/validation.node: Finished
Installing packages for tooling via npm  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
Installed packages for tooling via npm.
Installed browser packages via Bower.
Successfully initialized git.

$ cd just-testing/

$ ember build
version: 0.2.7
Built project successfully. Stored in "dist/".

$ ll -1 dist/assets/just-testing.css 
dist/assets/just-testing.css

$ ember install ember-component-css
version: 0.2.7
Installed packages for tooling via npm.
Installed addon package.

$ grep ember-component-css package.json 
    "ember-component-css": "0.1.3",

$ ember build
version: 0.2.7
Built project successfully. Stored in "dist/".

$ ll -1 dist/assets/just-testing.css 
ls: dist/assets/just-testing.css: No such file or directory

It should be possible to import arbitrary files when using a preprocessor.

For example, I have some definitions that are common for all components. Like responsive breakpoints or color schemes.

// /app/components/application-navbar/styles.sass
// /tmp/tree_merger-tmp_dest_dir-xxx.tmp/styles.sass

@import "../../styles/definitions.sass"

// expected: /app/styles/definitions.sass
// actual:   /styles/definitions.sass

This yields and error, as the cwd for the sass compiler is the tmp directory located at /tmp/tree_merger-tmp_dest_dir-xxx.tmp and not the actual location of the component directory.

As a workaround I can use this path, which exits the tmp directory and enters the app dir:

// /app/components/application-navbar/styles.sass
// /tmp/tree_merger-tmp_dest_dir-xxx.tmp/styles.sass

@import "../../app/styles/definitions.sass"

This is ugly and feels hacky. A possible solution would be adding the actual path of the component or the /app/styles directory itself to the lookup paths of the preprocessor.

I'm sure you know this so perhaps there was a reason not to mock the likely-future syntax?

The component lookup factory gets passed a name that includes the angle brackets ('<bracket-component>' instead of 'bracket-component'). Therefore, the lookup always fails, so ember-component-css can't reopen and add the class name that includes the guid.

It seems like this is an ember bug and either having the lookup factory strip the brackets or having them stripped further up the stack would fix this. It might be intended behavior though? I don't know enough about ember internals to be sure.

Edit: looks like that's not quite the issue here actually (although what I mentioned above may still be an ember issue). You'll notice both of the self-selector tests fail in 1.13.0-beta.1 since the ember-htmlbars-component-generation flag is now true. The problem is that angle bracket components hit ComponentLookup.componentFor() instead of 'ComponentLookup.lookupFactory()'. So, we just need to override componentFor as well. I'll add a pull request.

Now that they're broken up we should add unit tests for ComponentCssPreprocessor, BrocComponentCssPreprocessor, and ComponentCssPostprocessor. I can outline my thoughts on this if anyone wants to try their hand at it. Otherwise I'll get to it eventually.

Can we have a configurations option to turn off auto-namespacing, if it doesn't already exist?

I am a big boy and can arrange for my own component classes. I would prefer not to have weird auto-generated class names cluttering up the DOM.

We should have an option that allows the addon to dynamically require/load the CSS the first time a component is instantiated and potentially also unload it after every instance of it is removed. This will help prevent leakage and might even have some performance benefits?

Thanks for this awesome lib!

I have a list-item component and I use modified BEM syntax, so I end up having DOM like this

<div class='List-item List-item--bordered List-item--excluded'>

using class bindings. I usually write scss like this

.List-item {
  &--bordered {
    border-bottom: 1px solid $border-color;
  }
  &--excluded {
    opacity: 0.5;
  }
}

With ember-component-css, the generated DOM looks like

<div class='list-item-55646a5f List-item List-item--bordered List-item--excluded'>

and generated css looks like

.list-item-55646a5f .List-item--border {
  border-bottom: 1px solid #EEE; }

.list-item-55646a5f .List-item--is-excluded {
  opacity: 0.5; }

which doesn't work bc the parent List-item (and modified versions of it) aren't children of the autogenerated .list-item-55646a5f element.

Is it possible to disable this auto nesting or, if not could you point me to the spot in the code that I'd need to change?

I've created a nested component, while the styles get picked up, the correct class name is not applied to my component element.

// cmd
ember g component my-components/my-first-component

// tree
app/
  components/
    my-component/
     my-first-component/
       styles.less

// template
{{my-components.my-first-component}}

Possible that I was setting the config wrong but it looks like ENV.podModulePrefix isn't supported right now.

var ENV = {
  modulePrefix: 'canvas-web-components',
  podModulePrefix: 'canvas-web-components/pods',
  [...]
  },

  APP: {
    [...]
  }
};

Imagine a nested component with an element that shares the class name of an element in it's parent component, or even uses a class that is also defined in the global application styles. These styles would seep in and cause unwanted results due to the descendant selector.

Namespacing the class itself should ensure that there will be no unexpected style leaking.

By this I mean an .avatar selector should likely be output as .componentNamespace-avatar instead of .componentNamespace .avatar.

Adding a sass entry here prevents one error, but I then get stuck with a cryptic error message as follows:

pod-styles.sass (17) invalid top-level expression Error: invalid top-level expression at options.error (/Users/sheldonnbbaker/projects/foo/node_modules/ember-cli-sass/node_modules/node-sass/lib/index.js:261:32)

Line number 17 appears to correspond to the length of my .sass file in components/my-component/styles.sass.

{{my-component}} works like a charm but <my-component /> doesn’t get the hashed identifier class added.

Hi,

I need to call my components like {{components/my-component}} when they lie in components/ folder, otherwise the generated class is not added.

I tried it with Ember 1.11.1 and 1.12.0beta1 and the loader.js (because I figured component lookup might be related) specified in this addon's bower.json to no avail..

BR,
Dominik

Hey,

since #44 was merged, I can't import ember-modal-dialog's scss files anymore because they are filtered out by the funnel introduced in that commit.

BR,
Dominik

After I update the ember to 1.13 I notice some strange behavior. In handlebars each the number of class names grow with number of items for example I have

<ul>
{{#each items as |item| }} 
    {{my-component-name}}
{{/each}}
</ul>

the result is

<ul>
<li className="ember-view-412 my-component-name-453"></li>
<li className="ember-view-412 my-component-name-453 my-component-name-453"></li>
<li className="ember-view-412 my-component-name-453 my-component-name-453 my-component-name-453"></li>
</ul>

Would allow inheriting styles from a parent component make sense? Let's say I have an x-embed and a github-embed component. github-embed inherits from x-embed:

import Ember from 'ember';
import Embed from 'canvas-web-components/x-embed/component';

export default Embed.extend({
});

If I have styles for both components would it make sense to append both classes to the view?

To reproduce:

• Create new app and install this addon
• Generate a new component in the pod structure

Build will fail complaining that /tmp/broccoli_merge_trees-output_path-xxxxxxx.tmp/app/pods/ doesn't exist. I'm guessing that it's assuming that at least one styles.css file will exist inside at least one component, and therefore assumes app/pods/ will exist.

After upgrading to ember-cli v 1.13.0, component-css throws an error.

Error: Cannot find module 'ember-cli/lib/preprocessors'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at monkeyPatch (/Users/rkanna/Documents/test-app/node_modules/ember-component-css/index.js:14:11)
    at Class.module.exports.included (/Users/rkanna/Documents/test-app/node_modules/ember-component-css/index.js:127:5)

As discussed in #10

I don't know whether this is out of scope (considering routable components probably not) but here goes.

It'd be great, if ember-component-css would work with pod-structured routes as well, i.e. this could be a thing:

app/login/
├── controller.js
├── route.js
├── styles.sass     <-- Here be dragons
└── template.emblem

It appears that plain CSS usage generates a /pod-styles.css file at the root of the application rather than inside of the /assets directory.

Can the name styles.css be made configurable? Since we have component.js and template.hbs, it seems like style.css (singular) would be more consistent. At a minimum, I would like the ability to configure that.

I've tried to install it, installation goes fine.
$> ember install ember-component-css

when I try start server again it gives me following error:

$ember server
Future versions of Ember CLI will not support v0.13.0-pre. Please update to Node 0.12 or io.js.
version: 0.2.3
Looks like you have a different program called watchman, falling back to NodeWatcher.
Visit http://www.ember-cli.com/#watchman for more info.
Cannot find module 'ember-cli/lib/broccoli/custom-static-compiler'
Error: Cannot find module 'ember-cli/lib/broccoli/custom-static-compiler'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:367:17)
at require (module.js:386:17)
at monkeyPatch (/home/prompto/src/project/crm-frontend/node_modules/ember-component-css/index.js:124:21)
at Class.module.exports.included (/home/prompto/src/project/crm-frontend/node_modules/ember-component-css/index.js:215:5)
at EmberApp. (/home/prompto/src/project/crm-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:312:15)
at Array.filter (native)
at EmberApp._notifyAddonIncluded (/home/prompto/src/project/crm-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:307:45)
at new EmberApp (/home/prompto/src/project/crm-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:103:8)

I've installed broccoli-static-compiler module but custom-static-compiler module is not found and result is still same. Any suggession?

Currently, this plugin uses a custom character, &, to represent styles for the containing component. However, this is not according to the spec, and I suggest that this be replaced with the new web component shadow DOM selector, ::host, as mentioned here.

Another problem present with the current approach is that preprocessors understand the & character differently than browsers parsing normal CSS. For example, take the following SASS code:

& {
    color: #fff;
}

In this case, the & character resolves to the current context (which is null), and therefore produces nothing. Currently, to circumvent this, the user must escape the selector:

#{"&"} {
    color: #fff;
}

But by replacing this with ::host, we regain compatibility with all preprocessors, and we are aligned with the spec:

::host {
    color: #fff;
}

When running ember build --environment=production, the following error occurs within UglifyJS:

Unexpected token: eof (undefined)
Error
   at new JS_Parse_Error (/Users/trentmwillis/workspace/testing/node_modules/ember-cli-uglify/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/lib/parse.js:196:18)
   at js_error (/Users/trentmwillis/workspace/testing/node_modules/ember-cli-uglify/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/lib/parse.js:204:11)
   at croak (/Users/trentmwillis/workspace/testing/node_modules/ember-cli-uglify/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/lib/parse.js:679:41)
   at token_error (/Users/trentmwillis/workspace/testing/node_modules/ember-cli-uglify/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/lib/parse.js:683:9)
   at unexpected (/Users/trentmwillis/workspace/testing/node_modules/ember-cli-uglify/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/lib/parse.js:689:9)
   at block_ (/Users/trentmwillis/workspace/testing/node_modules/ember-cli-uglify/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/lib/parse.js:1001:28)
   at /Users/trentmwillis/workspace/testing/node_modules/ember-cli-uglify/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/lib/parse.js:975:25
   at function_ (/Users/trentmwillis/workspace/testing/node_modules/ember-cli-uglify/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/lib/parse.js:980:15)
   at expr_atom (/Users/trentmwillis/workspace/testing/node_modules/ember-cli-uglify/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/lib/parse.js:1188:24)
   at maybe_unary (/Users/trentmwillis/workspace/testing/node_modules/ember-cli-uglify/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/lib/parse.js:1358:19)

Hi there! Our team just decided to start using ember-component-css (which has been great so far!) and in the process of cramming scss files into our pods, I ran across a situation where we have two components that both subclass a base-widget component. The children widgets share some styling so I was like, "let me try cramming all those shared styles into the base-css pod"!

Unsurprisingly, it didn't work because the base-widget styles assume anticipate a .base-widget-blah class applied to the component elements, but instead all they have is the .child-widget-blah class.

Right now, I've just bailed on using pod-bound styling for the shared styling but I'd love to see this case supported in the future!

ember-cli/ember-cli#4199

When running ember build --environment=production I get the following error:

preprocessMinifyCss is not defined
ReferenceError: preprocessMinifyCss is not defined
    at EmberApp.styles (/code/some-project/node_modules/ember-component-css/index.js:85:25)
    at EmberApp.toArray (/code/some-project/node_modules/ember-cli/lib/broccoli/ember-app.js:1249:10)
    at EmberApp.toTree (/code/some-project/node_modules/ember-cli/lib/broccoli/ember-app.js:1270:30)
    at Object.<anonymous> (/code/some-project/Brocfile.js:23:22)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

I tried to fix it by adding the following:

// index.js

var preprocessCss = p.preprocessCss; // line 14
var preprocessMinifyCss = p.preprocessMinifyCss; // <- This was missing 

I'm using ember-cli version: 0.2.3

If I get a chance I'll look further into this and submit a PR. But in case anyone else is experiencing this, let the discussion commence.

In componentCssPostprocessor:47 the JS patch to ember componen lookup is written into the file vendor.js. This works fine in development environments, where the file is expected to be named vendor.js, but fails catastrophically in production, where the file is named something like vendor-e53bb1e69f45c067078bae608a90d051.js.

The support JS is written into the (empty) file vendor.js, which means it is not loaded in production, and none of the CSS actually works, because the components all have the wrong DOM IDs. :/

I'm running into this error when using ember-component-css with a new 2.6 app that uses pods:

ENOENT, no such file or directory '~/component-css-example/tmp/tree_merger-tmp_dest_dir-6A9qyx20.tmp/app/pods/'
Error: ENOENT, no such file or directory '~/component-css-example/tmp/tree_merger-tmp_dest_dir-6A9qyx20.tmp/app/pods/'
    at Error (native)
    at Object.fs.readdirSync (fs.js:765:18)
    at walkSync (~/component-css-example/node_modules/ember-component-css/node_modules/walk-sync/index.js:14:20)
    at Funnel.processFilters (~/component-css-example/node_modules/ember-component-css/node_modules/broccoli-funnel/index.js:113:15)
    at Funnel.rebuild (~/component-css-example/node_modules/ember-component-css/node_modules/broccoli-funnel/index.js:108:10)
    at ~/component-css-example/node_modules/ember-cli/node_modules/broccoli/lib/api_compat.js:42:21
    at lib$rsvp$$internal$$tryCatch (~/component-css-example/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:489:16)
    at lib$rsvp$$internal$$invokeCallback (~/component-css-example/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:501:17)
    at ~/component-css-example/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1095:13
    at lib$rsvp$asap$$flush (~/component-css-example/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1290:9)

I pushed the repo here - you can see my one and only commit after ember new here.

Maybe I'm just missing a config option somewhere? Or, are pods not supported?

Hey,

because all processed files are concatenated in pod-styles.scss, source maps aren't really useful. All styles show up as being defined in pod-styles.scss, it would be much nicer to see which file they actually come from.

BR,
Dominik

ember-cli/ember-cli#3402

Should be implemented similarly to #20

It should be possible to use with CSS preprocessors like Sass/Less

I have setup my project following the guide. Everything works perfectly locally in development mode. However when trying to run the app in the production environment locally and on my heroku staging server, the css is missing.

An example are my header-title-component which are located at

app/pods/components/header-title-component

and contains

component.js
styles.less
template.hbs

Inside my app.less i have the following:

@import "pod-styles";

Like described above this works fine locally, however when running in production the css is missing. Any ideas?