Not globalizing nth-child correctly

[jonasgeiler]

Describe the bug
This global style:

<style global>
  .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
    border-left-color: #e5e5e5;
  }
</style>

Gets processed into to this:

:global(.uk-subnav-divider) > :global(:nth-child(n)+:global(2):not(.uk-first-column)::before) {
  border-left-color: #e5e5e5;
}

Which makes the rule unusable.

Expected behavior

:global(.uk-subnav-divider) > :global(:nth-child(n+2):not(.uk-first-column)::before) {
  border-left-color: #e5e5e5;
}

I'd recommend you to add all these to the tests:
:nth-child() - CSS: Cascading Style Sheets | MDN

Information about your project:

• Chrome 84.0.4147.125
• Windows 10
• svelte-preprocess version: 4.0.12
  • Set implementation option to sass, version 1.26.10
• Rollup

Additional context
Actually what I'm trying to do is importing UIKit 3 inside a component:

<style global lang="scss">
  @import "uikit/src/scss/mixins-theme";
  @import "uikit/src/scss/variables-theme";
  @import "uikit/src/scss/uikit-theme";
</style>

[jonasgeiler]

Fixed it temporarily with

code.replace(/:nth-child\(n\)\+:global\(/g, ':nth-child(n+');

[kaisermann]

That's happening because we try to split the selectors into separate parts via the following regex: (?<!\\)(?:\\\\)*([ >+~,]\s*)(?![^[]+\]) and, unfortunately, it's considering the + inside the nth-child a separator. I've been wanting to replace that regex with something more stable and correct, but I still didn't find a lightweight solution to split a CSS selector into multiple parts.

[brunnerh]

@kaisermann What do you mean by "lightweight"? I would suggest using a simple tokenizer, maybe the one used by postcss internally could be used for this.

[kaisermann]

I mean a way to split selectors without having to install any extra library 😁. Using what PostCSS uses may resolve it, but I have to take a deeper look at its API.

[flayks]

+1 on this, it's a bit odd 🙈