Calls to Less mixins are removed

[jonegard]

Hi, thank you for putting the time into building this excellent tool! I unfortunately ran into an issue shortly after installing it where calls to Less mixins are removed when I run Prettier on a file with this plugin enabled. I couldn't find any instructions in regards to whether PostCSS configuration is needed to run this tool so I assume it should work out of the box.

Here's an example of the code that breaks.

.figtree(@style, @size, @weight) {
  font-style: @style;
  font-weight: @weight;
  font-size: @size;
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
}

.figtree-normal(@size: 1rem) {
  .figtree(normal, @size, 400);
}

Which results in:

.figtree(@style, @size, @weight) {
  font-style: @style;
  font-weight: @weight;
  font-size: @size;
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
}

.figtree-normal(@size: 1rem) {
  ;
}

[Siilwyn]

Hey thank you for this descriptive issue, it should work out of the box.
It could be something unexpected in the parsing, https://github.com/shellscape/postcss-less is used for this.

Unfortunately I don't have time to investigate this at the moment, so open for help!

[jonegard]

Hi. Sorry for the late response. Either way, I understand, no problem. After looking into it a bit solving this issue unfortunately doesn't seem to be straight forward. Since mixins result in CSS properties the order of the mixins may matter unlike the plain old inline CSS properties. It seems reasonable to place mixins above other CSS properties (as any properties after the mixins are likely to be overrides of whatever the mixins result in) but the question is then whether to sort the mixins and in what order to not give unexpected behaviour. Since what I would prefer from this tool may not be what others desire it might be most practical to just use this tool for CSS without special preprocessor logic. I'll close this issue.

[ffiona]

@Siilwyn I faced the same issue. All my mixins just got removed. I tried to explicitly set "less" as parser for less files and add postcss-less dependency. Nothing helped.

[ffiona]

@jonegard Hi! During your quick looking into this issue, did you find a possible reason by any chance? postcssLess is used for this plugin so it should support LESS files. But at the moment it doesn't look like it, because removing mixins is a serious problem which can't be ignored. They can keep their initial positions or put at the bottom as custom or undefined properties, but definitely not removed.

[jonegard]

@ffiona Hi. I never looked into the code so I unfortunately don't know where the issue originates. I removed this plugin from my Prettier configuration in order to continue working on my project.

[dwiyatci]

Hi guys, I tried to parse the following LESS text using postcss-less directly:

postcss test.less --syntax postcss-less --no-map

.a {
  color: red;
}
#a {
  color: blue;
}
.mixin-class {
  .a();
}
.mixin-id {
  #a();
}

...and the transformations result didn't seem to be convincingly correct:

.a {
  color: red;
}
#a {
  color: blue;
}
.mixin-class {
  @a();
}
.mixin-id {
  @a();
}

@Siilwyn As you suspected earlier, could this be a parsing bug in the postcss-less itself?

[dwiyatci]

I found a workaround using Aliasing Mixins. So in your code above, it'd be something like:

.figtree-normal(@size: 1rem) {
  @figtree: .figtree(normal, @size, 400);
  @figtree();
}

Not ideal, but I think it should work =)