demonguyj commented 3 years ago

I was update postcss-nexted@5.0.2. But something different 5.0.1 and 5.0.2

My postcss config is

"postcss-import": {}, "postcss-advanced-variables": {}, "postcss-custom-properties": { preserve: false, }, "postcss-custom-selectors": {}, "postcss-nested": {}, "postcss-calc": {}, "postcss-custom-media": {}, "postcss-initial": {}, "postcss-flexbugs-fixes": {}, autoprefixer: { grid: autoplace, },

Check this please.

Test1> @keyframes position is wrong. -postcss source .loading { position: fixed; z-index: 1010; top: 0%; left: 0%; display: none; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden; background-color: rgba(0, 0, 0, 0.4);

&.white {
    background-color: rgba(255, 255, 255, 0.4);
}

&.selected {
    display: block;
}

&::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    animation: loading 2s linear infinite;
    background-size: 100%;
}

@keyframes loading {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

}

-5.0.1 .loading{ position:fixed; z-index:1010; top:0; left:0; display:none; width:100%; height:100%; text-indent:-9999px; overflow:hidden; background-color:rgba(0, 0, 0, .4); }

.loading.white{ background-color:hsla(0, 0%, 100%, .4); }

.loading.selected{ display:block; }

.loading:before{ content:""; position:absolute; top:50%; left:50%; display:block; width:50px; height:50px; margin:-25px 0 0 -25px; -webkit-animation:loading 2s linear infinite; animation:loading 2s linear infinite; background-size:100%; }

@-webkit-keyframes loading{ 0%{ transform:rotate(0deg); }

    to{
        transform:rotate(1turn);
    }
}

@keyframes loading{ 0%{ transform:rotate(0deg); }

    to{
        transform:rotate(1turn);
    }
}

-5.0.2 .loading{ position:fixed; z-index:1010; top:0; left:0; display:none; width:100%; height:100%; text-indent:-9999px; overflow:hidden; background-color:rgba(0, 0, 0, .4);

@-webkit-keyframes loading{
    0%{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(1turn);
    }
}

}

.loading.white{ background-color:hsla(0, 0%, 100%, .4); }

.loading.selected{ display:block; }

.loading:before{ content:""; position:absolute; top:50%; left:50%; display:block; width:50px; height:50px; margin:-25px 0 0 -25px; -webkit-animation:loading 2s linear infinite; animation:loading 2s linear infinite; background-size:100%; }

@keyframes loading{ 0%{ transform:rotate(0deg); }

    to{
        transform:rotate(1turn);
    }
}

Test2> width remove -postcss source .btn_wrap { position: fixed; z-index: 1; bottom: 0; left: 0; width: 100%; box-sizing: border-box; padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background-color: var(--grayscaleWhite); border-top: 1px rgba(0, 0, 0, 0.1) solid;

        & button {
            width: 100%;
            height: 50px;
            background-color: var(--colorsRed);
            font-size: 15px;
            color: var(--grayscaleWhite);
            text-align: center;
        }

-5.0.1

login.joinComplete .btn_wrap{

        position:fixed;
        z-index:1;
        bottom:0;
        left:0;
        width:100%;
        box-sizing:border-box;
        padding:10px;
        padding-bottom:calc(10px + env(safe-area-inset-bottom));
        background-color:#fff;
        border-top:1px solid rgba(0, 0, 0, .1);
    }

login.joinComplete .btn_wrap button{

            width:100%;
            height:50px;
            background-color:#ff422e;
            font-size:15px;
            color:#fff;
            text-align:center;
        }

-5.0.2

login.joinComplete .btn_wrap{

        position:fixed;
        z-index:1;
        bottom:0;
        left:0;
        box-sizing:border-box;
        padding:10px;
        padding-bottom:calc(10px + env(safe-area-inset-bottom));
        background-color:#fff;
        border-top:1px solid rgba(0, 0, 0, .1);
    }

login.joinComplete .btn_wrap button{

            height:50px;
            background-color:#ff422e;
            font-size:15px;
            color:#fff;
            text-align:center;
        }

ai commented 3 years ago

Can you disable all other plugins and find minimum example of input, output and expected output CSS?

demonguyj commented 3 years ago

TEST1 is remove autoprefixer and works like 5.0.1

TEST2 is change cssnano({preset: [default, { mergeRules: false, }],}) and works like 5.0.1

ai commented 3 years ago

I need a small CSS input example, expected output, and real output.

Let’s try to find a small example with postcss-nested and autoprefixer plugins (cssnano is too complicated).

demonguyj commented 3 years ago

Okay.

I write my small example.

css input

login {

&.joinComplete { & .btn_wrap { position: fixed; z-index: 1; bottom: 0; left: 0; width: 100%; box-sizing: border-box; padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background-color: #fff; border-top: 1px rgba(0, 0, 0, 0.1) solid;
```
    & button {
        width: 100%;
        height: 50px;
        background-color: #fff;
        font-size: 15px;
        color: #000;
        text-align: center;
    }
}
```
} }

.loading { position: fixed; z-index: 1010; top: 0%; left: 0%; display: none; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden; background-color: rgba(0, 0, 0, 0.4);

&::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    animation: loading 2s linear infinite;
    background-size: 100%;
}

@keyframes loading {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

}

expected output

login.joinComplete .btn_wrap{

    position:fixed;
    z-index:1;
    bottom:0;
    left:0;
    width:100%;
    box-sizing:border-box;
    padding:10px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    background-color:#fff;
    border-top:1px solid rgba(0, 0, 0, .1);
}

    #login.joinComplete .btn_wrap button{
        width:100%;
        height:50px;
        background-color:#fff;
        font-size:15px;
        color:#000;
        text-align:center;
    }

.loading{ position:fixed; z-index:1010; top:0; left:0; display:none; width:100%; height:100%; text-indent:-9999px; overflow:hidden; background-color:rgba(0, 0, 0, .4); }

.loading:before{ content:""; position:absolute; top:50%; left:50%; display:block; width:50px; height:50px; margin:-25px 0 0 -25px; -webkit-animation:loading 2s linear infinite; animation:loading 2s linear infinite; background-size:100%; }

@-webkit-keyframes loading{ 0%{ transform:rotate(0deg); }

    to{
        transform:rotate(1turn);
    }
}

@keyframes loading{ 0%{ transform:rotate(0deg); }

    to{
        transform:rotate(1turn);
    }
}

real output

login.joinComplete .btn_wrap{

    position:fixed;
    z-index:1;
    bottom:0;
    left:0;
    box-sizing:border-box;
    padding:10px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(0, 0, 0, .1);
}
#login.joinComplete .btn_wrap button{
        height:50px;
        font-size:15px;
        color:#000;
        text-align:center;
    }

.loading{ position:fixed; z-index:1010; top:0; left:0; display:none; width:100%; height:100%; text-indent:-9999px; overflow:hidden; background-color:rgba(0, 0, 0, .4);

@-webkit-keyframes loading{
    0%{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(1turn);
    }
}

}

.loading:before{ content:""; position:absolute; top:50%; left:50%; display:block; width:50px; height:50px; margin:-25px 0 0 -25px; -webkit-animation:loading 2s linear infinite; animation:loading 2s linear infinite; background-size:100%; }

@keyframes loading{ 0%{ transform:rotate(0deg); }

    to{
        transform:rotate(1turn);
    }
}

ai commented 3 years ago

Are you sure that it is minimal CSS input?

Can you try to remove some CSS long properties until error is reproduced?

demonguyj commented 3 years ago

I wrote more minimal input css.

Check please. :)

minimal input

#login {
    &.joinComplete {
        & .btn_wrap {
            width: 100%;

            & button {
                width: 100%;
                height: 50px;
            }
        }
    }
}

.loading {
    animation: loading 2s linear infinite;

    @keyframes loading {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}

expect output

#login.joinComplete .btn_wrap{
            width:100%;
        }

            #login.joinComplete .btn_wrap button{
                width:100%;
                height:50px;
            }

.loading{
    -webkit-animation:loading 2s linear infinite;
            animation:loading 2s linear infinite;
}

@-webkit-keyframes loading{
        0%{
            transform:rotate(0deg);
        }

        to{
            transform:rotate(1turn);
        }
    }

@keyframes loading{
        0%{
            transform:rotate(0deg);
        }

        to{
            transform:rotate(1turn);
        }
    }

real output

#login.joinComplete .btn_wrap button{
                height:50px;
            }

.loading{
    -webkit-animation:loading 2s linear infinite;
            animation:loading 2s linear infinite;

    @-webkit-keyframes loading{
        0%{
            transform:rotate(0deg);
        }

        to{
            transform:rotate(1turn);
        }
    }
}

@keyframes loading{
        0%{
            transform:rotate(0deg);
        }

        to{
            transform:rotate(1turn);
        }
    }

ai commented 3 years ago

Fixed https://github.com/postcss/postcss-nested/commit/003adb56d2095c0202a15f782a5b558d72385f70

Released in 5.0.3

postcss / postcss-nested

postcss-nested 5.0.1 and 5.0.2 is something different. #103

login.joinComplete .btn_wrap{

login.joinComplete .btn_wrap button{

login.joinComplete .btn_wrap{

login.joinComplete .btn_wrap button{

login {

login.joinComplete .btn_wrap{

login.joinComplete .btn_wrap{