Commit
* rework the colomin cache so use only one cache as in #771 (without using Ramda as in that PR). The cache key is now just the declaration value. Before there were two caches, one with a CSS `property|value` key and one that cached the single colors. * change the underlying library to [colord](https://github.com/omgovich/colord). Using `colord` comes with some trade-offs. On the plus side, it automatically rounds up up, which fixes an [open issue](#819) without additional work, reduces transitive dependencies from 4 to 0 (although I think the previous 4 are all maintained by the same people), is smaller and claims to be faster (haven't checked but I suspect css-value-parser is more the bottle neck than color conversion here). On the minus side, the `colord` parser is very lenient so it accepts invalid CSS colors (rgb with mixed percentages and numbers) which cssnano did not convert before, so I've added some checks to skip these values. Overall there are less lines of code. * get rid of the JSON file with precomputed CSS color names. I guess the idea was that the JSON file only contained color names that are shorter than the hex, but the color conversion libraries include all color names anyway to be able to parse, so in fact we ship the color names twice. I don't think the extra code for generating the file, plus loading the JSON is worth it to avoid a an extra length check. fix(postcss-colormin): do not replace original value with longer one fix #1042 feat(postcss-colormin): switch to colord * round color values fix #819 * reduce dependencies perf(postcss-colormin): improve caching Fix #771 refactor(postcss-colormin): drop the generate script
- Loading branch information
There are no files selected for viewing
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,66 +1,58 @@ | ||
import color from 'color'; | ||
import keywords from './keywords.json'; | ||
import { colord, extend, getFormat } from 'colord'; | ||
import namesPlugin from 'colord/plugins/names'; | ||
import toShorthand from './lib/toShorthand'; | ||
|
||
const shorter = (a, b) => (a && a.length < b.length ? a : b).toLowerCase(); | ||
extend([namesPlugin]); | ||
|
||
export default (colour, isLegacy = false, cache = false) => { | ||
const key = colour + '|' + isLegacy; | ||
|
||
if (cache && cache[key]) { | ||
return cache[key]; | ||
export default (colour, isLegacy = false) => { | ||
if (getFormat(colour) === 'rgb') { | ||
/* check that it is a valid CSS value | ||
https://www.w3.org/TR/css-color-4/#rgb-functions */ | ||
let percentCount = 0; | ||
for (const c of colour) { | ||
if (c === '%') { | ||
percentCount++; | ||
} | ||
} | ||
// rgb values should either be all percentages or all numbers | ||
if (percentCount !== 3 && percentCount !== 0) { | ||
return colour; | ||
} | ||
} | ||
|
||
try { | ||
const parsed = color(colour.toLowerCase()); | ||
const parsed = colord(colour.toLowerCase()); | ||
if (parsed.isValid()) { | ||
const alpha = parsed.alpha(); | ||
|
||
if (alpha === 1) { | ||
const toHex = toShorthand(parsed.hex().toLowerCase()); | ||
const result = shorter(keywords[toHex], toHex); | ||
|
||
if (cache) { | ||
cache[key] = result; | ||
const toHex = toShorthand(parsed.toHex()); | ||
const toName = parsed.toName(); | ||
if (toName && toName.length < toHex.length) { | ||
return toName; | ||
} else { | ||
return toHex; | ||
} | ||
|
||
return result; | ||
} else { | ||
const rgb = parsed.rgb(); | ||
const rgb = parsed.toRgb(); | ||
|
||
if ( | ||
!isLegacy && | ||
!rgb.color[0] && | ||
!rgb.color[1] && | ||
!rgb.color[2] && | ||
!alpha | ||
) { | ||
const result = 'transparent'; | ||
|
||
if (cache) { | ||
cache[key] = result; | ||
} | ||
|
||
return result; | ||
if (!isLegacy && !rgb.r && !rgb.g && !rgb.b && !alpha) { | ||
return 'transparent'; | ||
} | ||
|
||
let hsla = parsed.hsl().string(); | ||
let rgba = rgb.string(); | ||
let result = hsla.length < rgba.length ? hsla : rgba; | ||
let hsla = parsed.toHslString(); | ||
let rgba = parsed.toRgbString(); | ||
|
||
if (cache) { | ||
cache[key] = result; | ||
} | ||
const shortestConversion = hsla.length < rgba.length ? hsla : rgba; | ||
|
||
let result; | ||
if (colour.length < shortestConversion.length) { | ||
result = colour; | ||
} else { | ||
result = shortestConversion; | ||
} | ||
return result; | ||
} | ||
} catch (e) { | ||
} else { | ||
// Possibly malformed, so pass through | ||
const result = colour; | ||
|
||
if (cache) { | ||
cache[key] = result; | ||
} | ||
|
||
return result; | ||
return colour; | ||
} | ||
}; |
This file was deleted.