postcss / postcss-color-function

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

Wrong output when using the * operator and <percentage> #46

Open nia1048596 opened 6 years ago

nia1048596 commented 6 years ago

The color hsl(0, 0%, 10%) with lightness multiplied by 5% should be nearly black, but the output seems to be hsl(0, 0%, 10% 5) == rgb(128, 128, 128) rather than hsl(0, 0%, 10% 5%). If use 0.05 instead the output is correct.

test.css:

.test1 {
    background-color: color(hsl(0, 0%, 10%) lightness(* 5%));
}
.test2 {
    background-color: color(hsl(0, 0%, 10%) lightness(* 0.05));
}

postcss.config.js:

module.exports = {
    plugins: {
        'postcss-color-function': {},
    },
}

Output:

nia@nia-PC [~/temp/test] $ ./node_modules/.bin/postcss test.css
✔ Finished test.css (17 ms)
.test1 {
    background-color: rgb(128, 128, 128);
}
.test2 {
    background-color: rgb(3, 3, 3);
}
nia@nia-PC [~/temp/test] $

The version is 4.0.0

nia@nia-PC [~/temp/test] $ npm list postcss-color-function
/home/nia/temp/test
└── postcss-color-function@4.0.0

Since the spec says we should use <percentage>, I think this is a bug.