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).
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:
Output:
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).