csstools / csstools/postcss-advanced-variables

Mixins: Inconsistent errors when not passing required params

Open
#79 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
144
Forks
33
PR merge metrics
No merged PRs in 30d

Description

Related to: https://github.com/jonathantneal/postcss-advanced-variables/issues/76

There are two ways to avoid passing a required param to a mixin: empty params (`@include some-mixin();`) and no params (`@include some-mixin;`). However, they behave differently.

Empty Params Example:
```css
/* Mixin with no defaults */
@mixin heading-text($font-size) {
font-size: $font-size;
}

/* Using empty param form results in empty value instead of error */
h1 {
@include heading-text();
}
```

Output:
```css
/* Mixin with no defaults */
/* Using empty param form results in empty value instead of error */
h1 {
font-size: ; /* <= ERROR */
}
```

This is invalid CSS.

---

No Params Example:
```css
/* Mixin with no defaults */
@mixin heading-text($font-size) {
font-size: $font-size;
}

/* Using no param form results in PreCSS throwing */
h1 {
@include heading-text;
}
```

Output (throws):
```
Message:
precss: /.../main.css:3:5: Could not resolve the variable "$font-size" within "$font-size"

1 | /* Mixin with no defaults */
2 | @mixin heading-text($font-size) {
> 3 | font-size: $font-size;
| ^
4 | }
5 |
```

This is confusing because the issue is at the site of the `@include`, not at the `@mixin`. ("What do you mean you can't resolve the variable?! It's RIGHT THERE!")

---

I do not know what the correct answer should be, only that it should be consistent. I see two reasonable options:

1. Output the CSS without the result of the mixin's failed operation (and maybe a warning about what happened).
```css
h1 {}
```
2. Throw with a more specific error, like:
```
Message:
precss: /.../main.css:8:5: Included mixin without required variable "$font-size"

6 | /* Using empty param form results in empty value instead of error */
7 | h1 {
> 8 | @include heading-text;
| ^
9 | }
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.