mensch
mensch copied to clipboard
Fixing nested @ tags not closing properly
Closing brackets don't revert to the correct 'before-selector' and are stuck in 'at-group', causing issues with the output CSS where brackets are closed off only at the end.
An example of CSS input:
<style>
@media (min-width: 640px) {
.sm\:container {
width: 100%
}
@media (min-width: 640px) {
.sm\:container {
max-width: 640px
}
}
}
p {
background-color: red;
}
</style>
Currently, this is output as:
@media (min-width: 640px) {
.sm:container {
width: 100%;
}
@media (min-width: 640px) {
.sm:container {
max-width: 640px;
}
p {
background-color: red;
}
}
}
Where brackets are stacked at the end.
With this PR, the output becomes:
@media (min-width: 640px) {
.sm:container {
width: 100%;
}
@media (min-width: 640px) {
.sm:container {
max-width: 640px;
}
}
}
p {
background-color: red;
}
Where brackets are ordered correctly.
This PR also implements this PR from @lwenn where :not (.class1, .class2)
is being incorrectly split into two separate classes by applying smarter regex.
I have not tested this rigorously, only with a few short styles. The changes are relatively localized and should be low risk. I am currently using this fork on larger real CSS datasets. This fork will be undergoing more strenuous testing in the near future.
Added commits to support complex CSS with is:(.class1, .class2, .class3)
selectors
e.g.
-o-transition:.3s all;transition:all .3s;will-change:margin-inline-start}.e-container>.e-container>.elementor-element-overlay>.elementor-editor-element-settings:hover>:is(.elementor-editor-element-duplicate,.elementor-editor-element-remove),.elementor-widget .e-container>.elementor-element-overlay>.elementor-editor-element-settings:hover>:is(.elementor-editor-element-duplicate,.elementor-editor-element-remove){-webkit-margin-start:0;margin-inline-start:0}
Where :is(.class1, .class2, .class3)
is being split up as : :is(.class1
... etc.