Doesn't work with ember-cli@2.9.1 and ember-cli-postcss

[buschtoens]

I am using the 0.2.0-beta.4 version. It seems that the pod-styles.css is not generated.

[webark]

@buschtoens what's the error that you are getting..? There is no pod-styles.css that get's generated. You'll have to import it into your current app stylesheet.

[webark]

@buschtoens just released a none beta 0.2.1 version. Please check it out and see if it fixes your issues. Also updated the wiki to with better instructions.

[buschtoens]

We're using ember-cli-postcss and the relevant section of our ember-cli-build.js looks like this:

postcssOptions: {
  compile: {
    enabled: true,
    plugins: [
      { module:  require('postcss-easy-import') },
      { module:  require('postcss-nested-ancestors') },
      { module:  require('postcss-nested') },
      {
        module:  require('postcss-simple-vars'),
        options: { silent: true }
      },
      { module: require('postcss-each') },
      { module: require('postcss-for') },
      { module: require('precss') },
      {
        module:  require('postcss-cssnext'),
        options: {
          features: {
            customProperties: { strict: false }
          }
        }
      }
    ]
  }
}

An excerpt from our app/styles/app.css looks like this:

/* ember-component-css */
@import "pod-styles.css";

/* Print specific styles */
@import "print.css";

print.css is in the same directory as app.css and can be imported without problems.

My understanding was that ember-component-css concatenates all component styles.css into a "virtual" (for lack of a better name) pod-styles.css file during build time and places this file in the "virtual" app/styles/ directory.

This did work prior to upgrading to ember-cli@2.9.1, i.e. in 2.8.0.

However now, postcss cannot find that file anymore:

The Broccoli Plugin: [PostcssCompiler] failed with:
Error: ENOENT: no such file or directory, open '/home/jan/workspace/web/tmp/postcss_compiler-input_base_path-vRydnhSb.tmp/0/app/styles/pod-styles.css'
    at Error (native)

The broccoli plugin was instantiated at: 
    at PostcssCompiler.Plugin (/home/jan/workspace/web/node_modules/broccoli-plugin/index.js:7:31)
    at PostcssCompiler.CachingWriter [as constructor] (/home/jan/workspace/web/node_modules/broccoli-postcss-single/node_modules/broccoli-caching-writer/index.js:18:10)
    at new PostcssCompiler (/home/jan/workspace/web/node_modules/broccoli-postcss-single/index.js:18:17)
    at /home/jan/workspace/web/node_modules/ember-cli-postcss/index.js:36:12
    at Array.map (native)
    at PostcssPlugin.toTree (/home/jan/workspace/web/node_modules/ember-cli-postcss/index.js:33:34)
    at /home/jan/workspace/web/node_modules/ember-cli-preprocess-registry/preprocessors.js:180:26
    at Array.forEach (native)
    at processPlugins (/home/jan/workspace/web/node_modules/ember-cli-preprocess-registry/preprocessors.js:178:11)
    at module.exports.preprocessCss (/home/jan/workspace/web/node_modules/ember-cli-preprocess-registry/preprocessors.js:148:10)
    at EmberApp.styles (/home/jan/workspace/web/node_modules/ember-cli/lib/broccoli/ember-app.js:1318:28)
    at EmberApp.toArray (/home/jan/workspace/web/node_modules/ember-cli/lib/broccoli/ember-app.js:1641:10)
    at EmberApp.toTree (/home/jan/workspace/web/node_modules/ember-cli/lib/broccoli/ember-app.js:1662:30)
    at module.exports (/home/jan/workspace/web/ember-cli-build.js:72:14)
    at CoreObject.setupBroccoliBuilder (/home/jan/workspace/web/node_modules/ember-cli/lib/models/builder.js:70:19)
    at CoreObject.init (/home/jan/workspace/web/node_modules/ember-cli/lib/models/builder.js:50:10)
    at CoreObject.superWrapper [as init] (/home/jan/workspace/web/node_modules/core-object/lib/assign-properties.js:32:18)
    at CoreObject.Class (/home/jan/workspace/web/node_modules/core-object/core-object.js:32:33)
    at CoreObject.run (/home/jan/workspace/web/node_modules/ember-cli/lib/tasks/serve.js:15:19)
    at /home/jan/workspace/web/node_modules/ember-cli/lib/commands/serve.js:76:24
    at tryCatch (/home/jan/workspace/web/node_modules/rsvp/dist/rsvp.js:538:12)
    at invokeCallback (/home/jan/workspace/web/node_modules/rsvp/dist/rsvp.js:553:13)
    at /home/jan/workspace/web/node_modules/rsvp/dist/rsvp.js:628:16
    at flush (/home/jan/workspace/web/node_modules/rsvp/dist/rsvp.js:2373:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

ls /home/jan/workspace/web/tmp/postcss_compiler-input_base_path-vRydnhSb.tmp/0/app/styles/ indeed confirms that there is no pod-styles.css nor pod-styles file.

These are our dependencies:

"devDependencies": {
  "babel-eslint": "^6.1.2",
  "broccoli-asset-rev": "^2.4.5",
  "chartist": "^0.9.8",
  "ember-ajax": "^2.4.1",
  "ember-cli": "2.9.1",
  "ember-cli-active-link-wrapper": "^0.3.1",
  "ember-cli-app-version": "^2.0.0",
  "ember-cli-babel": "^5.1.7",
  "ember-cli-content-security-policy": "^0.5.0",
  "ember-cli-copyable": "^0.9.6",
  "ember-cli-dependency-checker": "^1.3.0",
  "ember-cli-deploy": "^0.6.4",
  "ember-cli-deploy-build": "^0.1.1",
  "ember-cli-deploy-git-tag": "^0.2.0",
  "ember-cli-deploy-redis": "^0.4.1",
  "ember-cli-deploy-revision-data": "^0.2.1",
  "ember-cli-eslint": "^3.0.0",
  "ember-cli-htmlbars": "^1.0.10",
  "ember-cli-htmlbars-inline-precompile": "^0.3.3",
  "ember-cli-inject-live-reload": "^1.4.1",
  "ember-cli-lorem-ipsum": "^0.0.2",
  "ember-cli-postcss": "^3.0.5",
  "ember-cli-qunit": "^3.0.1",
  "ember-cli-sri": "^2.1.0",
  "ember-cli-template-lint": "^0.4.12",
  "ember-cli-test-loader": "^1.1.0",
  "ember-cli-uglify": "^1.2.0",
  "ember-component-css": "^0.2.1",
  "ember-composable-helpers": "^1.1.2",
  "ember-computed-decorators": "^0.2.2",
  "ember-data": "^2.9.0",
  "ember-data-preload": "^0.1.4",
  "ember-disable-proxy-controllers": "^1.0.1",
  "ember-export-application-global": "^1.0.5",
  "ember-font-awesome": "^2.2.0",
  "ember-href-to": "^1.6.0",
  "ember-intl": "^2.13.0",
  "ember-keyboard-shortcuts": "^0.3.0",
  "ember-light-table": "^1.5.0",
  "ember-load-initializers": "^0.5.1",
  "ember-metrics": "^0.6.2",
  "ember-one-way-controls": "^0.9.1",
  "ember-pad": "^1.2.1",
  "ember-page-title": "^3.0.9",
  "ember-promise-helpers": "^1.0.2",
  "ember-resize": "^0.0.17",
  "ember-resolver": "^2.0.3",
  "ember-route-action-helper": "^2.0.0",
  "ember-run-raf": "^1.1.2",
  "ember-simple-auth": "^1.1.0-beta.4",
  "ember-truth-helpers": "^1.2.0",
  "eslint": "^3.6.1",
  "eslint-config-ember": "^0.3.0",
  "liquid-fire": "^0.26.1",
  "loader.js": "^4.0.10",
  "normalize.css": "^4.2.0",
  "postcss-cssnext": "^2.7.0",
  "postcss-each": "^0.9.1",
  "postcss-easy-import": "^1.0.1",
  "postcss-for": "^2.1.1",
  "postcss-nested": "^1.0.0",
  "postcss-nested-ancestors": "0.0.1",
  "postcss-simple-vars": "^3.0.0",
  "precss": "^1.4.0",
  "sanitize.css": "^4.1.0",
  "stylelint": "^7.3.1",
  "stylelint-config-standard": "^13.0.2"
}

[webark]

ok. @buschtones i'll take a look at it in the morning..

[buschtoens]

Thanks a bunch. :)

[buschtoens]

This is probably gonna come up so I gave it a shot right away. Switching from compile to filter mode doesn't help. Switching from postcss-easy-import to postcss-import doesn't help either.

postcssOptions: {
  compile: { enabled: false },
  filter:  {
    enabled: true,
    plugins: [
      { module:  require('postcss-import') },
      { module:  require('postcss-nested-ancestors') },
      { module:  require('postcss-nested') },
      {
        module:  require('postcss-simple-vars'),
        options: { silent: true }
      },
      { module: require('postcss-each') },
      { module: require('postcss-for') },
      { module: require('precss') },
      {
        module:  require('postcss-cssnext'),
        options: {
          features: {
            customProperties: { strict: false }
          }
        }
      }
    ]
  }
}

File: app/styles/app.css
The Broccoli Plugin: [PostcssFilter] failed with:
Error: ENOENT: no such file or directory, open '/home/jan/workspace/web/app/styles/pod-styles.css'
    at Error (native)

The broccoli plugin was instantiated at: 
    at PostcssFilter.Plugin (/home/jan/workspace/web/node_modules/broccoli-plugin/index.js:7:31)
    at PostcssFilter.Filter [as constructor] (/home/jan/workspace/web/node_modules/broccoli-persistent-filter/index.js:60:10)
    at new PostcssFilter (/home/jan/workspace/web/node_modules/broccoli-postcss/index.js:17:10)
    at PostcssFilter (/home/jan/workspace/web/node_modules/broccoli-postcss/index.js:14:12)
    at Class.postprocessTree (/home/jan/workspace/web/node_modules/ember-cli-postcss/index.js:85:14)
    at /home/jan/workspace/web/node_modules/ember-cli/lib/broccoli/ember-app.js:543:27
    at Array.forEach (native)
    at EmberApp.addonPostprocessTree (/home/jan/workspace/web/node_modules/ember-cli/lib/broccoli/ember-app.js:541:23)
    at EmberApp.toTree (/home/jan/workspace/web/node_modules/ember-cli/lib/broccoli/ember-app.js:1667:15)
    at module.exports (/home/jan/workspace/web/ember-cli-build.js:73:14)
    at CoreObject.setupBroccoliBuilder (/home/jan/workspace/web/node_modules/ember-cli/lib/models/builder.js:70:19)
    at CoreObject.init (/home/jan/workspace/web/node_modules/ember-cli/lib/models/builder.js:50:10)
    at CoreObject.superWrapper [as init] (/home/jan/workspace/web/node_modules/core-object/lib/assign-properties.js:32:18)
    at CoreObject.Class (/home/jan/workspace/web/node_modules/core-object/core-object.js:32:33)
    at CoreObject.run (/home/jan/workspace/web/node_modules/ember-cli/lib/tasks/serve.js:15:19)
    at /home/jan/workspace/web/node_modules/ember-cli/lib/commands/serve.js:76:24
    at tryCatch (/home/jan/workspace/web/node_modules/rsvp/dist/rsvp.js:538:12)
    at invokeCallback (/home/jan/workspace/web/node_modules/rsvp/dist/rsvp.js:553:13)
    at /home/jan/workspace/web/node_modules/rsvp/dist/rsvp.js:628:16
    at flush (/home/jan/workspace/web/node_modules/rsvp/dist/rsvp.js:2373:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Also doesn't work with pod-styles instead of pod-styles.css.

[webark]

it looks like for some reason when the app.registry.extensionsForType('css') is only ['css'] those styles don't get processed. Trying to figure out why that is. Must be something that got updated with 2.9

[jakesjews]

I ran into this issue with ember-cli-stylus as well. Removing this line from the package.json file with a npm postinstall hook fixes it so I assume it would work with other pre-processors. I would make a PR to remove the lines but I assume they were added for a reason.

[webark]

@jakesjews the issue with ember-cli-stylus might be that it doesn't adds in the registry in the include method, rather then the setupPreprocessorRegistry method. I might do a PR to update that project, but will look into maybe removing that before clause.

The issue with postcss and plain css files, is a little different. I locally rewrote the plugin, and was only able to get it to work if I added an additional allowed extension for the plugin. So I haven't isolated what has changed in 2.9 to make that happen yet. But it appears that just removing the before clause didn't fix that issue.

[webark]

@buschtoens @jakesjews So.. oddly enought.. If you add in

setupPreprocessorRegistry: function(type, registry) {
  registry.add('css', {
    ext: ['dummy'],
    toTree: function(tree) {
      return tree;
    }
  })
},

into the index.js file, or into any addon that is, It will trigger the processing of the files that get included in the treeForStyles method. I'm not sure why this is as of yet.

[webark]

but apparently if extensionsForType('css') only has ['css'] then things don't work.. I'll look more into it later.

[buschtoens]

Using v0.2.2 I get the following message:

ember-component-css: You have not yet created a component style file.

Adding your code snippet to a dummy addon indeed fixes this. I published this pseudo-addon here for the convenience of others that might run into this: buschtoens/fix-ember-component-css

ember install buschtoens/fix-ember-component-css

So would you consider this a bug in ember-cli and not ember-component-css? If not, would you mind reopening this issue?

[webark]

@buschtoens That warning message was added to notify people that they have not yet created any component styles yet. Maybe it's extraneous?

And ya, i'll reopen the issue. You mind changing the title to specify that this is only for postcss?