CSS rules merging - css

Question

I am working to implement RTL support on a large framework. For that, I replaced all of the rules that are directional with mixins like:
a {
#include padding(0, 1px, 0, 0);
#include margin(0, 1px, 0, 0);
}
What this does, is to add the relevant padding/margin depending on the direction of the document.
Every mixin creates a case for ltr and a case for rtl.
This is the result from those 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;
}
Which works, and is fine, but creates a lot of duplicate selectors (2 per mixin), so the css bundle size increases by 100kb (20%), and a large part of it is because of this duplication.
Expected result:
[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;
}
What post-processing I can do to merge relevant duplicate selectors, without hurting the order of css execution?
Undesired case:
Lets say I have this code:
b.s1 {
padding-left: 1px;
margin: 0;
}
b.s2 {
padding-left: 0;
margin: 1px;
}
b.s1 {
padding-left: 1px;
}
If I merge b.s1 upwards, then s2's padding-left can override it.
If I merge b.s1 downwards, then s2's margin is overriden.
Is there any solution to this problem?
EDIT: Original code
// 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

I wrote a specific fix for dir, as it is my main problem, not other duplications which are a tiny proportion of my bundle.
Pretty simple, and does the job, 0 seconds. It does not merge up or down, but instead removes the code and adds a chunk with the merged directional code at the end. (it doesn't matter for directional, as everything maintains its order and specificity)
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;
}