Question

我正在努力在大型框架上实现RTL支持。为此，我用mixins替换了所有方向性规则：

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

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

每个mixin都会为ltr创建一个案例，为rtl创建一个案例。

这是mixins的结果：

[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的padding-left可以覆盖它。如果我向下合并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);
}

Answer 1

我为dir编写了一个特定的修补程序，因为它是我的主要问题，而不是其他重复项，只是我的一小部分。

非常简单，完成工作，0秒。它不会向上或向下合并，而是删除代码并在末尾添加包含合并方向代码的块。（对于方向性而言并不重要，因为一切都保持其顺序和特异性）

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;
}

CSS规则合并

1 个答案: