Nested element inside same element does not work ul {ul {...}}

[Fabioni]

Hello, my problem is when I have the following:

.outerXXX {
    ul {
        background-color: #ffa;
        ul {
            background-color: #ffb;
            li a {
                background-color: #ffc;
            }
        }
    }
}

the plugin produces: .outerXXX ul{background-color:#ffa;background-color:#ffb;background-color:#ffc}

which is obviously wrong.

When I have

.outerXXX {
    ul {
        background-color: #ffa;
        ulXXX {
            background-color: #ffb;
            li a {
                background-color: #ffc;
            }
        }
    }
}

I get the correct output

.outerXXX ul{background-color:#ffa}.outerXXX ul ulXXX{background-color:#ffb}.outerXXX ul ulXXX li a{background-color:#ffc}

Even stranger with

ul {
    background-color: #ffa;
    ul {
        background-color: #ffb;
        li a {
            background-color: #ffc;
        }
    }
}

I get the correct ul{background-color:#ffa}ul ul{background-color:#ffb}ul ul li a{background-color:#ffc}

Can somebody explain what is going on here?

I use nuxt with tailwind and postcss. It works as expected in dev mode but in production mode it has the shown behaviour.

[ai]

Sorry, for the long delay. The war 😓.

I processed you example by single postcss-nested and got correct:

.outerXXX ul {
        background-color: #ffa;
    }
        .outerXXX ul ul {
            background-color: #ffb;
        }
        .outerXXX ul ul li a {
                background-color: #ffc;
            }

Sorry, seems like some another CSS tool from your process stack brakes code.

Unfortunately, I can’t help with environment debugging. Very likely that it is bug of CSS minifier.