[Feature Request] Support to merge duplicate code

[fengyuanchen]

Current:

@block btn {
  color: #333;

  &:disabled {
    color: #ccc;
  }

  @modifier disabled {
    color: #ccc;
  }
}

Feature:

@block btn {
  color: #333;

  &:disabled,
  @modifier disabled {
    color: #ccc;
  }
}

[tbremer]

I don't plan to support this, there are two plugins postcss-merge-rules and postcss-merge-selectors that enable this type of code tidying.

Those plugins combined with postcsss-nested would let this work out.

[fengyuanchen]

Not work with the following config (postcss.config.js):

module.exports = {
  plugins: {
    'postcss-atrule-bem': {},
    'postcss-merge-rules': {}, // or 'postcss-merge-selectors': {},
    'postcss-nested': {},
  },
};

Or:

module.exports = {
  plugins: {
    'postcss-atrule-bem': {},
    'postcss-nested': {},
    'postcss-merge-rules': {},  // or 'postcss-merge-selectors': {},
  },
};

[fengyuanchen]

Only works after removed at-rule as this:

@block btn {
  color: #333;

  &:disabled,
  &[disabled] {
    color: #ccc;
  }
}

[tbremer]

I was able to get this working with postcss-merge-rules as the last plugin in my setup: https://runkit.com/tbremer/5a2039571ab5510012be0073

[fengyuanchen]

I mean support to write merge rules in source css, not merge rules automatically in bundled css: https://runkit.com/cfy/5a20ba024fb2d10011dac2b8