Does not work with postcss-bem-linter about ember-cli-postcss HOT 4 CLOSED

Yeah, I couldn't get postcss-bem-linter working either and I'm using postcss-import to process import rules as well. I didn't realize that the @define had to be on the first line in a separate file, but that makes sense otherwise it would be difficult to tell when to stop linting for that component.

I'm not quite sure how to fix this just yet. I think my assumption to use app.css or {app-name}.css is too strict and was a naive first implementation to quickly get postcss working with ember-cli.

I'll need to think about this. I don't want to break how the addon currently works, but this definitely needs to be addressed.

from ember-cli-postcss.

I'm not quite sure how to fix this just yet. I think my assumption to use app.css or {app-name}.css is too strict and was a naive first implementation to quickly get postcss working with ember-cli.

I'd say it is a good default (except for {app-name}.css, which ember-cli does not accept as an entry point for me, v0.2.3).

Maybe it would make sense to allow for people to define their own array of entry points (with globbing), and default to all css in the app/styles folder, but not the folders below it (which are typically used for partials)? You could also allow people to explicitly define partials, and then default to folders below app/styles.

I'd almost think that you'd need different stages in the preprocessing for the types of uses that I've encountered):

1. process all css (and do stuff like linting all css with bem-linter)
2. process only the entry points and build

Maybe a key in the plugin array besides module, options could define whether the plugin is to be used for step 1 or step 2?

from ember-cli-postcss.

Or, you could fork this plugin to use ember-cli's postprocessTree hook, and dedicate that fork exclusively to linting (since that's what the postprocessTree hook is for). That would separate the two use-cases cleanly.

Not sure whether postprocessTree can pass all files separately though, but if it doesn't, I'd say that that's an upstream issue to be fixed in ember-cli.

from ember-cli-postcss.

I was able to solve this issue and get BEM linting to work by passing plugins to the postcss-import plugin, which will run the plugins on each file it imports. I think this is likely a preferable solution to using the postprocessTree hook as everything will run in one place.

The config can look something like this:

postcssOptions.plugins = [
  {
    module: require('postcss-import'),
      options: {
        glob: true,
        plugins: [
          require('postcss-nesting'),
          require('postcss-nested'),
          require('postcss-bem-linter'),
          require('postcss-browser-reporter'),
          require('postcss-reporter')({
            clearMessages: true,
            noPlugin: true
          })
        ]
      }
    },
    <more plugins>
  }
]

I'm going to close this issue since it's possible to setup linting. Please reopen the issue if you're unable to get this working in your projects.

from ember-cli-postcss.