@import with layer gets reordered before @layer and changes the behavior #567
Description
@layer reset, bootstrap;
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.css') layer(bootstrap);
@layer reset {
h1 {
margin-top: 100px;
}
}This input is transformed into:
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.css') layer(bootstrap);
@layer reset, bootstrap;
@layer reset {
h1 {
margin-top: 100px;
}
}But the output CSS has a different meaning from the input CSS (bootstrap layer is now overridden with reset layer).
Reproduction: https://stackblitz.com/edit/template-sapphi-red-postcss-sass-kasrpt?file=src%2Finput.css,postcss.js