csstools / csstools/postcss-advanced-variables

Mixins: Default values break when using empty parens

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

Description

Including empty params on a mixin include (when there are default params) causes an empty string to be assumed for the passed value, rather than indicating that nothing was passed. This creates invalid styles.

Example, using mixin defined in the README:
```css
/* Start: From the README */
@mixin heading-text($color: #242424, $font-size: 4em) {
color: $color;
font-size: $font-size;
}

h1, h2, h3 {
@include heading-text;
}

.some-heading-component > :first-child {
@include heading-text(#111111, 6em);
}
/* End: From the README */

/* Empty parens results in corrupted data */
.empty-params {
@include heading-text();
}
```

Output:
```css
/* Start: From the README */
h1, h2, h3 {
color: #242424;
font-size: 4em;
}
.some-heading-component > :first-child {
color: #111111;
font-size: 6em;
}
/* End: From the README */
/* Empty parens results in corrupted data */
.empty-params {
color: ; /* <= ERROR */
font-size: 4em;
}
```

I attempted to create a live code example on CodePen, as recommended, but I was unable to figure out how to tell CodePen to use PreCSS (or this plugin specifically) on top of PostCSS. However, my example compiles locally as described through PostCSS (version 7.0.16), which is using the PreCSS plugin (version 4.0.0, latest), which is using postcss-advanced-variables (version 3.0.0, latest). This is run via gulp-postcss (version 8.0.0, latest).

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.