Granular and directional control of merging selectors

[scottgit]

This is a feature request related to:

1. #930: Building mixins should combine duplicate nested selectors
2. #1372: Request for "rule replacement" feature

The request is to allow control of where a globally merge occurs and also the option of overriding the globally set value to merge or not merge selectors on an individual selector basis. For explanation of reason, see this comment and some of the following comment discussions. This is to give control to the coder for purposes of utilizing the cascade in css if so desired:

1. Directing whether the merge should occur at the first selector instance or the last (this should be a setting both for the global merging and granular merging).
2. A setting to override the global merge setting for an individual selector group.

Perhaps syntax for granular control might be something like:

To Opt Out
.someSelector:merge(none) { prop: somevalue; }

To Direct Merge Location

.someSelector:merge(first) { prop: somevalue; } //or maybe keyword "up"
.someSelector:merge(last) { prop: somevalue; } //or maybe keyword "down"

[danielkatz]

@scottgit, it worth considering if successive identical selectors can be merged by default since it will not affect the computed style.

I don't want to fragment this feature request but IMO there is another feature that related to the same problem domain that might be a place to consider, which is implementing "channels/groups/sections/regions" that will allow coders to "group" subset of styles from different places to be outputted as css in a specified location.
For example, if i want to place all my mobile or RTL style into a separate CSS file without code duplication or fragmentation.

Consider this syntax:

@rtl-root-class: rtl;

.style {
  color: green;
  .bidi-padding-start(20px);
  .bidi-margin-end(10px);
}

.bidi-padding-start(@padding) {
  padding-left: @padding;

  .@{rtl-root-class} &:merge(top):group(rtl-section) {
    padding-right: @padding;
  }
}

.bidi-margin-end(@margin) {
  margin-right: @margin;

  .@{rtl-root-class} &:merge(top):group(rtl-section) {
    margin-left: @margin;
  }
}

.style2 {
  color: red;
}

.rtl-section:group() {}

The :merge(top) directive will merge all the overridden properties by their selectors, and the :group(group-name) directive will group all of those to into the placeholder with the same name as the group, that also marked with parameterless :group() directive, and located at the end (but could be in a separate file).
The expected css might look like that:

.style {
  color: green;
  padding-left: 20px;
  margin-right: 10px;
}
.style2 {
  color: red;
}
.rtl .style {
  padding-right: 20px;
  margin-left: 10px;
}

The same idea will work also for @media selectors.
I think that :merge and :group features are completing each other to provide reach syntax to decouple the logical code placement from the physical.

[scottgit]

@danielkatz I very much like the grouping idea added to the discussion. I have to disagree somewhat, however, with your opening statement "if successive identical selectors can be merged by default since it will not affect the computed style." I do think there should be the option to merge by default (that is what #930 is about), but the whole point of my adding this feature request was because merging identical selectors can affect computed style, because of the css cascade. That was what I illustrated in this comment. So having the option to merge or not merge on an individual selector basis allows one to control the cascade sequence.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.