Right now Lightning CSS doesn't have support for the native @apply at-rule (https://drafts.csswg.org/css-mixins-1/#apply-rule). Adding proper support for everything related to this might be a big job. Today, Lightning CSS marks this as an unknown at-rule, but it also hoists the rule to the top which I think is incorrect.
I would expect that unknown at-rules stay in place. However, I'm just thinking in scope of this @apply at-rule, so there could be situations where you do want to hoist.
Let's say you have this input:
.foo {
text-decoration-line: underline;
@apply --my-mixin-1;
@apply --my-mixin-1();
@apply --my-mixin-1 --my-mixin-2;
@apply --my-mixin-1() --my-mixin-2();
@apply --my-mixin-3 {
color: red;
}
}
Lightning CSS marks all of them as unknown, which is fine, but then also hoists them outside of the .foo rule:
.foo {
text-decoration-line: underline;
}
@apply --my-mixin-1;
@apply --my-mixin-1();
@apply --my-mixin-1 --my-mixin-2;
@apply --my-mixin-1() --my-mixin-2();
@apply --my-mixin-3 {
color: red;
}
https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22.foo%20%7B%5Cn%20%20text-decoration-line%3A%20underline%3B%5Cn%20%20%40apply%20--my-mixin-1%3B%5Cn%20%20%40apply%20--my-mixin-1()%3B%5Cn%20%20%40apply%20--my-mixin-1%20--my-mixin-2%3B%5Cn%20%20%40apply%20--my-mixin-1()%20--my-mixin-2()%3B%5Cn%20%20%40apply%20--my-mixin-3%20%7B%5Cn%20%20%20%20color%3A%20red%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5Cn%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D
I think that in this situation, the @apply should just stay in-place instead of getting hoisted.
I'll open a PR where it keeps this in-place, but I'll let you decide whether you think this is the correct behavior or not.
Right now Lightning CSS doesn't have support for the native
@applyat-rule (https://drafts.csswg.org/css-mixins-1/#apply-rule). Adding proper support for everything related to this might be a big job. Today, Lightning CSS marks this as an unknown at-rule, but it also hoists the rule to the top which I think is incorrect.I would expect that unknown at-rules stay in place. However, I'm just thinking in scope of this
@applyat-rule, so there could be situations where you do want to hoist.Let's say you have this input:
Lightning CSS marks all of them as unknown, which is fine, but then also hoists them outside of the
.foorule:https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22.foo%20%7B%5Cn%20%20text-decoration-line%3A%20underline%3B%5Cn%20%20%40apply%20--my-mixin-1%3B%5Cn%20%20%40apply%20--my-mixin-1()%3B%5Cn%20%20%40apply%20--my-mixin-1%20--my-mixin-2%3B%5Cn%20%20%40apply%20--my-mixin-1()%20--my-mixin-2()%3B%5Cn%20%20%40apply%20--my-mixin-3%20%7B%5Cn%20%20%20%20color%3A%20red%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5Cn%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D
I think that in this situation, the
@applyshould just stay in-place instead of getting hoisted.I'll open a PR where it keeps this in-place, but I'll let you decide whether you think this is the correct behavior or not.