How to use it with css files concat?

[shoomyth]

/* button.css */
.button { background: grey; }

/* login-button.css */
.login-button {
  composes: button from "button.css";
  background: green;
}

/* logout-button.css */
.logout-button {
  composes: button from "button.css";
  background: red;
}

return gulp.src('**/*.css')
    .pipe(gulpPostcss([
        postcssModules({
            getJSON: saveCssModulesJson
        })
    ]))
    .pipe(gulpConcat('bundle.css'))

._button_aaa {
    background: grey;
}

._login-button_bbb {
    background: green;
}

._button_aaa {
    background: grey;
}

._logout-button_ccc {
    background: red;
}

<button class="_login-button_bbb _button_aaa">Login</button>
<button class="_logout-button_ccc _button_aaa">Logout</button>

Logout button works as expected (red background). But login doesn't: second ._button_aaa selector overrides ._login-button_bbb's background. And login-button has grey background.

Any suggestions?

[madyankin]

@shoomyth Sorry for the late answer. I'll check this in a couple of days and will get back.

[jtomaszewski]

I'd love to have an option that allows me to skip adding styles for classes imported from other files through composes.
So that I could include them separately (on my own), only once on my website.

[jtomaszewski]

For now I guess the only workaround is to generate a unique hashPrefix per each entry file. This will cause CSS to be duplicated (it'll be loaded n many times on your page, where n is the number of "entrypoints" that include the common files), but will prevent style conflicts (each entrypoint will have different classnames).