Semicolons being added after `&` nesting rules `postcss-nesting`

[AlbertMarashi]

Bug description

Semicolons being added after } blocks using css nesting, leading to invalid CSS (semicolons not valid after } block)

Source CSS

button {
    display: flex;
    border: 1px solid var(--dark);
    width: 100%;
    justify-content: center;
    height: 100%;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 500;
    &.selected {
        background: rgba(var(--brand-rgb), 0.1);
    }
    &:first-child {
        border-radius: 50px 0 0 50px;
    }
    &:last-child {
        border-radius: 0 50px 50px 0;
    }
}

Expected CSS

button.s-gwue9lYI_bHl{display:flex;border:1px solid var(--dark);width:100%;justify-content:center;height:100%;align-items:center;gap:8px;padding:4px 8px;font-size:14px;font-weight:500;}button.s-gwue9lYI_bHl.selected {
        background: rgba(var(--brand-rgb), 0.1);
    }button.s-gwue9lYI_bHl:first-child {
        border-radius: 50px 0 0 50px;
    }button.s-gwue9lYI_bHl:last-child {
        border-radius: 0 50px 50px 0;
    }.s-gwue9lYI_bHl{}

Actual CSS

button.s-gwue9lYI_bHl{display:flex;border:1px solid var(--dark);width:100%;justify-content:center;height:100%;align-items:center;gap:8px;padding:4px 8px;font-size:14px;font-weight:500;}button.s-gwue9lYI_bHl.selected {
        background: rgba(var(--brand-rgb), 0.1);
    };button.s-gwue9lYI_bHl:first-child {
        border-radius: 50px 0 0 50px;
    };button.s-gwue9lYI_bHl:last-child {
        border-radius: 0 50px 50px 0;
    }.s-gwue9lYI_bHl{}

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

• no

Debug output

No response

Extra config

Using SvelteKit, Vite

What plugin are you experiencing this issue on?

PostCSS Nesting

Plugin version

^12.0.1

What OS are you experiencing this on?

Windows

Node Version

18.17

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[romainmenke]

Hi @AlbertMarashi,

Thank you for reaching out about this.

I can't seem to be able to replicate this issue in the playground

We do have code to add semicolons to address this issue : #497

Is it possible that another plugin is causing this issue?
What is the output when you disable everything except for postcss-nesting?

[romainmenke]

@AlbertMarashi Have you had a chance to look into this?

To us it seems that the bug lies elsewhere, so I am inclined to close this issue.
Do you have any other info you could share?

[AlbertMarashi]

@romainmenke Yes I've tried with only postcss-nesting. I also attempted to replicate this in the minimal example but wasn't able to replicate it.

I am wondering if it's an issue to do with Svelte or Vite which I am using in my project

import { sveltekit } from "@sveltejs/kit/vite"
import { defineConfig } from "vite"
import postcssNesting from "postcss-nesting"

export default defineConfig({
    plugins: [sveltekit()],
    css: {
        postcss: {
            plugins: [
                // polyfill for nesting css (not widely supported yet)
                postcssNesting(),
            ],
        },
    }
})

This doesn't work. I got no idea why it isn't working. Is it possible this could be a svelte or vite issue that is causing these rules to be merged by a ; (maybe Svelte thinks they are invalid rules)

Weirdly enough, when I don't use postcss-nesting it just works with svelte/vite which leads me to believe this is an interop issue, but unfortunately I lose browser support with that option

[AlbertMarashi]

https://github.com/AlbertMarashi/postcss-nesting-bug

Here is a minimal reproducible example demonstrating the issue. Disable postcss-nesting in vite.config.ts and it starts working

[AlbertMarashi]

source code

<div class="foo">
    this should be blue
</div>
<div class="foo bar">
    this should be green
</div>
<style>

div {
    border: 1px solid red;
    padding: 10px;
    &.foo {
        border: 1px solid blue;
    }
    &.bar {
        border: 1px solid green;
    }
}

</style>

rendered result

output css

[AlbertMarashi]

I've just opted to use lightningcss because it happens to work fine with vite

[romainmenke]

This is not a bug in postcss-nesting.
Some other part of your stack is changing the AST and is adding ownSemicolon to rules.

ownSemicolon is never added or removed by postcss-nesting.
This flag indicates if a rule should have a semicolon at the end.

e.g. @import 'foo.css';

I think that Svelte/Vite/... contains some plugin for CSS modules?
And I suspect that this part doesn't support the css nesting spec (yet).

You are obviously free to use any tool you want and whatever works for you is also the best tool ;)

[romainmenke]

@AlbertMarashi I am a bit surprised to find that you are fully aware that CSS nesting is not supported in Svelte 😕

I am not sure why you would expect all this to work when you know that Svelte is working on it... sveltejs/svelte#8587 (comment)

I've just spend considerable time trying to pinpoint what is going on and how to fix this issue. You could have given me the background that it simply isn't supported at all in Svelte...

Please be respectful of other peoples time.
Especially when those people create tools for you to use for free.

[romainmenke]

I've filed the issue in the right place : sveltejs/svelte#9320