Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not globalizing nth-child correctly #224

Closed
Skayo opened this issue Aug 15, 2020 · 5 comments
Closed

Not globalizing nth-child correctly #224

Skayo opened this issue Aug 15, 2020 · 5 comments
Assignees
Labels

Comments

@Skayo
Copy link

@Skayo Skayo commented Aug 15, 2020

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>
@Skayo
Copy link
Author

@Skayo Skayo commented Aug 15, 2020

Fixed it temporarily with

code.replace(/:nth-child\(n\)\+:global\(/g, ':nth-child(n+');
@kaisermann kaisermann self-assigned this Aug 18, 2020
@kaisermann kaisermann added the bug label Aug 18, 2020
@kaisermann
Copy link
Member

@kaisermann kaisermann commented Aug 18, 2020

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
Copy link

@brunnerh brunnerh commented Aug 19, 2020

@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
Copy link
Member

@kaisermann kaisermann commented Aug 21, 2020

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
Copy link

@flayks flayks commented Aug 23, 2020

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

kaisermann added a commit that referenced this issue Sep 25, 2020
@kaisermann kaisermann mentioned this issue Sep 25, 2020
4 of 4 tasks complete
kaisermann added a commit that referenced this issue Sep 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

4 participants
You can’t perform that action at this time.