Description
Passing color values that are not hex-based or named results in corrupted output. Different variations of rgb and hsl are tried below, with the resulting output always being a substring of the input from the start of the string to one character before the paran that is part of the color syntax. If I had to guess, I suspect that the parser being used doesn't expect parens in mixin params.
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 */
/* Hex or named colors work */
.color-hex {
@include heading-text(#ff0000);
}
.color-hex-shorthand {
@include heading-text(#f00);
}
.color-hex-alpha {
@include heading-text(#ff0000ff);
}
.color-hex-alpha-shorthand {
@include heading-text(#f00f);
}
.color-named {
@include heading-text(red);
}
/* RGB is broken (outputs string from start to one character before paran: "rg" or "rgb") */
.color-rgb {
@include heading-text(rgb(0, 0, 0));
}
.color-rgba {
@include heading-text(rgba(0, 0, 0, 0.7));
}
.color-rgbPercentage {
@include heading-text(rgb(100%, 100%, 100%));
}
/* HSL is broken (outputs string from start to one character before paran, "hs" or "hsl") */
.color-hsl {
@include heading-text(hsl(270, 60%, 70%));
}
.color-hsla {
@include heading-text(hsla(270, 60%, 70%, 70%));
}
.color-hslTurn {
@include heading-text(hsl(.75turn, 60%, 70%));
}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 */
/* Hex or named colors work */
.color-hex {
color: #ff0000;
font-size: 4em;
}
.color-hex-shorthand {
color: #f00;
font-size: 4em;
}
.color-hex-alpha {
color: rgba(255,0,0,1);
font-size: 4em;
}
.color-hex-alpha-shorthand {
color: rgba(255,0,0,1);
font-size: 4em;
}
.color-named {
color: red;
font-size: 4em;
}
/* RGB is broken (outputs string from start to one character before paran: "rg" or "rgb") */
.color-rgb {
color: rg; /* <= ERROR */
font-size: 4em;
}
.color-rgba {
color: rgb; /* <= ERROR */
font-size: 4em;
}
.color-rgbPercentage {
color: rg; /* <= ERROR */
font-size: 4em;
}
/* HSL is broken (outputs string from start to one character before paran, "hs" or "hsl") */
.color-hsl {
color: hs; /* <= ERROR */
font-size: 4em;
}
.color-hsla {
color: hsl; /* <= ERROR */
font-size: 4em;
}
.color-hslTurn {
color: hs; /* <= 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).