csstools / postcss-advanced-variables

Use Sass-like variables, conditionals, and iterators in CSS
Creative Commons Zero v1.0 Universal
130 stars 33 forks source link

Mixins: Default values break when using empty parens #76

Open dwighthouse opened 5 years ago

dwighthouse commented 5 years ago

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:

/* 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:

/* 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).