Closed AgentCosmic closed 1 year ago
This is a problem of postcss-nested.
I confirm this, I use tailwind and it completely ruins nested css with tailwind directives like @screen
, it just cannot parse it properly. Downgraded to 5.0.3.
I too can confirm this
.header {
@custom-plugin {
font-size: 200px;
}
font-weight: 900;
letter-spacing: -2px;
@media (--small-viewport) {
@custom-plugin {
font-size: 120px;
}
}
}
became
.header {
@custom-plugin {
font-size: 200px;
}
font-weight: 900;
letter-spacing: -2px;
}
@media (max-width: 1439px) {
@custom-plugin {
.header {
font-size: 120px;
}
}
}
on 5.0.5
rather than the expected
.header {
@custom-plugin {
font-size: 200px;
}
font-weight: 900;
letter-spacing: -2px;
}
@media (max-width: 1439px) {
.header {
@custom-plugin {
font-size: 100px;
}
}
}
Tried to downgrade to 5.0.3
and then it worked as expected :tada:
I'm facing the same issue. Here's my use case:
@define-mixin container $size {
max-width: $size;
margin-left: auto;
margin-right: auto;
}
/* usage */
.my-custom-container {
position: relative;
width: 100%;
box-sizing: border-box;
@media (min-width: $tablet-breakpoint) {
@mixin container 1400px;
}
}
becomes:
.my-custom-container {
position: relative;
width: 100%;
box-sizing: border-box;
}
@media (min-width: 970px) {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
I am too facing this issue.
@define-mixin content-breakpoint { @nest .-content-breakpoint-768 & { @media (--media-tablet) { @mixin-content; } } @nest .-content-breakpoint-800 & { @media (--media-md) { @mixin-content; } } @nest .-content-breakpoint-960 & { @media (--media-lg) { @mixin-content; } } @nest .-content-breakpoint-1024 & { @media (--media-desktop) { @mixin-content; } } }
`.filter-sidebar {
@mixin content-breakpoint {
flex-basis: 216px;
flex-grow: 0;
flex-shrink: 0;
margin-right: 16px;
width: 216px;
}
@nest .-content-breakpoint-768 & {
flex-basis: auto;
margin-right: 0;
width: 100%;
@media (--media-lg) {
flex-basis: 216px;
flex-grow: 0;
flex-shrink: 0;
margin-right: 16px;
width: 216px;
}
& + .hm-container:not(.-no-sidebar) {
@media (--media-md) {
width: calc(100% - 300px - 1rem);
flex-basis: calc(100% - 300px - 1rem);
}
@media (--media-lg) {
width: auto;
flex-basis: auto;
}
}
}
}`
becomes
.filter-sidebar{@nest .-content-breakpoint-768 &{@media (min-width:48em){-ms-flex-preferred-size:216px;flex-basis:216px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;margin-right:16px;width:216px}}@nest .-content-breakpoint-800 &{@media (min-width:50em){-ms-flex-preferred-size:216px;flex-basis:216px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;margin-right:16px;width:216px}}@nest .-content-breakpoint-960 &{@media (min-width:60em){-ms-flex-preferred-size:216px;flex-basis:216px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;margin-right:16px;width:216px}}@nest .-content-breakpoint-1024 &{@media (min-width:64em){-ms-flex-preferred-size:216px;flex-basis:216px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;margin-right:16px;width:216px}}}
I believe this is fixed in the current version. I'm not running tailwind myself, but testing the input examples from @oles and @wederribas produces a seemingly sensible output (without any TailWind interpolation, though).
For example:
Will become:
Instead of:
I've tried this with postcss-nesting, postcss-nested, and postcss-present-env. Both produced the same results. However everything works fine with version 6. Just not with version 7.