CSS规则合并

我正在一个大框架上实现RTL支持。为此，我用mixin替换了所有定向规则，如：

a {
  @include padding(0, 1px, 0, 0);
  @include margin(0, 1px, 0, 0);
}

这样做的目的是根据文档的方向添加相关的填充/边距

每个mixin都为

ltr

和

rtl

创建一个案例

这是这些混合的结果：

[dir="ltr"] a {
  padding: 0 1px 0 0;
}
[dir="rtl"] a {
  padding: 0 0 0 1px;
}
[dir="ltr"] a {
  margin: 0 1px 0 0;
}
[dir="rtl"] a {
  margin: 0 0 0 1px;
}

这是可行的，但会创建大量重复选择器（每个mixin 2个），因此css包大小会增加100kb（20%），其中很大一部分是由于这种重复

预期结果：

[dir="ltr"] a {
  padding: 0 1px 0 0;
  margin: 0 1px 0 0;
}
[dir="rtl"] a {
  padding: 0 0 0 1px;
  margin: 0 0 0 1px;

}

我可以做什么后处理来合并相关的重复选择器，而不影响css执行的顺序

不希望出现的情况：

假设我有以下代码：

b.s1 { 
  padding-left: 1px; 
  margin: 0; 
}

b.s2 { 
  padding-left: 0; 
  margin: 1px; 
}

b.s1 { 
  padding-left: 1px; 
}

如果我向上合并b.s1，那么s2的左边填充可以覆盖它。 如果我向下合并b.s1，则s2的边距将被覆盖

这个问题有什么解决办法吗

编辑：原始代码

// Add property for all sides
// @param {string} $prop
// @param {string} $top
// @param {string} $end
// @param {string} $bottom
// @param {string} $start
// @param {boolean} $content include content or use default
// ----------------------------------------------------------
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end, $content: false) {
  @if $top == $end and $top == $bottom and $top == $start {
    @include multi-dir() {
      #{$prop}: $top;
    }
  } @else if $top == $bottom and $end == $start and $top != null and $end != null {
    @include multi-dir() {
      #{$prop}: $top $end;
    }
  } @else if $end == $start and $top != null and $end != null and $bottom != null {
    @include multi-dir() {
      #{$prop}: $top $end $bottom;
    }
  } @else if $top != null and $end != null and $bottom != null and $start != null {
    @include ltr() {
      #{$prop}: $top $end $bottom $start;
    }
    @include rtl() {
      #{$prop}: $top $start $bottom $end;
    }
  } @else {
    @if $content == true { // TODO check if @content exists instead
      @content;
    } @else {
      @include property-horizontal($prop, $start, $end);
      @include multi-dir() {
        #{$prop}-top: $top;
        #{$prop}-bottom: $bottom;
      }
    }
  }
}
// Add padding for all sides
// @param {string} $top
// @param {string} $end
// @param {string} $bottom
// @param {string} $start
// ----------------------------------------------------------
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
  @include property(padding, $top, $end, $bottom, $start);
}

// Add margin for all sides
// @param {string} $top
// @param {string} $end
// @param {string} $bottom
// @param {string} $start
// ----------------------------------------------------------
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
  @include property(margin, $top, $end, $bottom, $start);
}

---

我为

dir

编写了一个特定的修复程序，因为这是我的主要问题，而不是我包中的一小部分的其他复制

非常简单，完成任务，0秒。它不向上或向下合并，而是删除代码，并在末尾添加一个包含合并方向代码的块。（这与方向无关，因为一切都保持着它的秩序和特殊性）

---

你也可以发布你的混音代码吗？为什么不能将padding和margin合并到一个mixin中，并通过传递正确的参数来选择合适的mixin呢；请回答您的问题并附上该预处理器的标签。@MikeMcCaughan我使用的是标准sass预处理和gulp。我在答案中添加了一个吞咽任务，它以有限的方式满足了我的需求

function joinDirections(contents) {
  // This includes multi directional selectors, like `[dir="ltr"] sel, [dir="rtl"] sel`,
  // Which go into the ltr pile, but it is ok as the rest (`sel, [dir="rtl"] sel`) is still good.
  const dirExp = /\[dir="(.*?)"\](.*?){\s*([^}]*?)\s*}/gm;

  let directions = {};

  let matches;
  while (matches = dirExp.exec(contents)) {
    if (!(matches[1] in directions))
      directions[matches[1]] = {};
    if (!(matches[2] in directions[matches[1]]))
      directions[matches[1]][matches[2]] = '';
    directions[matches[1]][matches[2]] += matches[3];
  }

  contents = contents.replace(dirExp, '');
  let directionalContents = '';

  Object.keys(directions).forEach(dir => {
    Object.keys(directions[dir]).forEach(selector => {
      directionalContents += `[dir="${dir}"]${selector}{${directions[dir][selector]}}\n`;
    });
  });

  return contents + directionalContents;
}