Closed demonguyj closed 3 years ago
Can you disable all other plugins and find minimum example of input, output and expected output CSS?
TEST1 is remove autoprefixer and works like 5.0.1
TEST2 is change cssnano({preset: [default
, {
mergeRules: false,
}],})
and works like 5.0.1
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).
Okay.
I write my small example.
css input
&.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
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);
}
}
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);
}
}
Are you sure that it is minimal CSS input?
Can you try to remove some CSS long properties until error is reproduced?
I wrote more minimal input css.
Check please. :)
#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);
}
}
}
#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);
}
}
#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);
}
}
Fixed https://github.com/postcss/postcss-nested/commit/003adb56d2095c0202a15f782a5b558d72385f70
Released in 5.0.3
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);
}
-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); }
@keyframes loading{ 0%{ transform:rotate(0deg); }
-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);
}
.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); }
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;
-5.0.1
login.joinComplete .btn_wrap{
login.joinComplete .btn_wrap button{
-5.0.2
login.joinComplete .btn_wrap{
login.joinComplete .btn_wrap button{