Skip to content

Unknown at-rules, are incorrectly hoisted #1232

@RobinMalfait

Description

@RobinMalfait

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions