postcss / postcss-color-function

PostCSS plugin to transform W3C CSS color function to more compatible CSS
MIT License
323 stars 31 forks source link

Can not calculate hue under 0 over 360 #13

Closed bangseongbeom closed 8 years ago

bangseongbeom commented 8 years ago

Can not calculate hue under 0 over 360. The CSS color draft says:

The angle 0deg represents red (as does 360deg, 720deg, etc.)

In this sentence we can infer that numbers under 0 over 360 are allowed.

Input:

.a {
    color: color(red hue(-120));
    color: color(red hue(0));
    color: color(red hue(+120));

    color: color(blue hue(-120));
    color: color(blue hue(0));
    color: color(blue hue(+120));
}

Expected:

.a {
    color: rgb(0, 0, 255); /* Green */
    color: rgb(255, 0, 0);
    color: rgb(0, 255, 0);

    color: rgb(0, 255, 0);
    color: rgb(255, 0, 0);
    color: rgb(0, 0, 255); /* Blue */
}

Real:

.a {
    color: rgb(255, 0, 0); /* Expected green but red */
    color: rgb(255, 0, 0);
    color: rgb(0, 255, 0);

    color: rgb(0, 255, 0);
    color: rgb(255, 0, 0);
    color: rgb(255, 0, 0); /* Expected blue but red */
}
kinday commented 8 years ago

Hey, @bangseongbeom, my PR should fix this issue, but pay attention to your syntax:

.absolute-hue {
  color: color(hsl(120, 50%, 50%) hue(-120)); /* results in hsl(240, 50%, 50%) */
}

.relative-hue {
  color: color(hsl(120, 50%, 50%) hue(- 120)); /* results in hsl(0, 50%, 50%) */
}

Or as specs say:

Note: While scaling can be specified without any spaces, like lightness(*150%), adding/subtracting must be done with spaces after the +/-, or else the +/- will be interpreted as part of the number by the CSS parser.

MoOx commented 8 years ago

Closed. See #22