JPeer264 / node-rcs-core

Rename css selectors across all files
MIT License
37 stars 7 forks source link

The order of parsing CSS file breaks the renaming #96

Closed X-Ryl669 closed 5 years ago

X-Ryl669 commented 5 years ago

Ok, this is a more complex issue. To simplify, let's say you have 2 CSS files containing: B.css

.i-icon:before { color: red; }

A.css

[class^="i-"]:before {
  font: myfont;
}

.i-icon:before {
   content: '\f101';
}
.i-file:before {
   content: '\f102';
}

If B.css is parsed first, then the selector .i-icon will be mapped to .a. If A.css is parsed first, then the selector .i-icon will be (correctly) mapped to .i-a (because of the attribute selector above).

In the former case, all the rules in the attribute selector are ignored, and this is a bug.

X-Ryl669 commented 5 years ago

I wonder how we can solve this. Should we re-analyze all mappings when we register a new attribute selector, and remap all matching selectors differently so they match the attribute selector rule ? In that case, we'll loose a slot in the renaming (since the current name generator does not keep track of usage), but at least it would not break the site. This would also probably disrupt any renaming_map.json since if you ever parse a new stylesheet and it's containing an attribute selector, the mapping will have to evolve. We can trigger a warning now when this happens.

Or, should we run a first pass on any attribute selector on all input stylesheet (that would be a job for rename-css-selector to do that) and then we would be safe to run the stylesheets again. This would also probably disrupt any renaming_map.json since if you ever parse a new stylesheet after a first run and it's containing an attribute selector, the mapping will have to evolve.

My last idea would be to modify the rule where the attribute selector is found to include the already mapped selector, so instead of:

[class^="i-"]:before {
  font: myfont;
}

we would get

[class^="i-"]:before, .a:before {
  font: myfont;
}

Please notice that can be very cumbersome too maintain too and will enlarge the CSS file instead of reducing it.

What do you prefer ? I'm prefer first option (it's probably easier to write too since it does not cross project boundaries).