How do postcss-nesting work now with the 2024-02 edition?

[felixsanz]

Hi there! I have this CSS code that works fine with the 2021 edition:

      & :global(li) {
        &:global(.visible > a) {
          color: var(--color-primary);
        }

        &:global(:not(.visible) > a:hover span) {
          color: var(--color-opposite);
        }

        & :global(a) {
          width: 100%;
          display: inline-block;
          padding: 0.5rem 0;
          font-weight: 600;
        }
      }

It's been always working fine inside .astro files. But now with the 2024-02 edition I can't make it work. Any idea what is the syntax I need to add? Or this is an issue with astro?

Thanks!

[romainmenke]

Hi @felixsanz,

From that snippet alone I am unable to say what could be the cause of the difference.

Do you have a minimal but complete repro?

---

I suspect it might be caused by wrapping in :is().

:global isn't a standard selector, so likely other tools transpile this?
Maybe they can't transpile it when it is wrapped in :is()

See how many :is() selectors are created:

demo

        :is(:is(.foo .bar) :global(li)):global(.visible > a) {
          color: var(--color-primary);
        }
:is(:is(.foo .bar) :global(li)):global(:not(.visible) > a:hover span) {
          color: var(--color-opposite);
        }
:is(:is(.foo .bar) :global(li)) :global(a) {
          width: 100%;
          display: inline-block;
          padding: 0.5rem 0;
          font-weight: 600;
        }

[felixsanz]

Thanks for the fast reply @romainmenke !

I have reproduced it in a small playground: https://stackblitz.com/edit/withastro-astro-3qrvob?file=src%2Fpages%2Findex.astro

The result of this:

div.dontworks {
  & :global(li) {
    background: red;

    & :global(a) {
      background: blue;
    }
  }
}

is this:

div[data-astro-cid-j7pv25f6].dontworks li {
    background: red
}

:is(div.dontworks :global(li))[data-astro-cid-j7pv25f6] a {
    background: blue
}

So basically the first :global() works, but the second is maintained in the output. is this because postcss-nesting now adds the :is()? Is this prevending astro from detecting the :global()?

And do you know if this is an issue with astro or it's expected and I'm doing something wrong here that I need to workaround and fix myself?

Thanks 🙏

[romainmenke]

Traditionally you would want to first resolve/transpile all non-standard syntax and only later transpile for older browsers.

I suspect that all issues will go away if you can make Astro handle :global first and only nesting later.

I don't know Astro, or :global, so I am afraid that as much as I can help :/

[felixsanz]

I'll report to astro, thanks so much!