mensch icon indicating copy to clipboard operation
mensch copied to clipboard

Fixing nested @ tags not closing properly

Open gieoon opened this issue 2 years ago • 1 comments

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.

gieoon avatar Feb 10 '23 16:02 gieoon

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.

gieoon avatar Feb 11 '23 03:02 gieoon