mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-05-02 17:09:30 +08:00
510 lines
13 KiB
Text
510 lines
13 KiB
Text
var lexer = require('css-tree').lexer;
|
|
var packNumber = require('./Number').pack;
|
|
|
|
// http://www.w3.org/TR/css3-color/#svg-color
|
|
var NAME_TO_HEX = {
|
|
'aliceblue': 'f0f8ff',
|
|
'antiquewhite': 'faebd7',
|
|
'aqua': '0ff',
|
|
'aquamarine': '7fffd4',
|
|
'azure': 'f0ffff',
|
|
'beige': 'f5f5dc',
|
|
'bisque': 'ffe4c4',
|
|
'black': '000',
|
|
'blanchedalmond': 'ffebcd',
|
|
'blue': '00f',
|
|
'blueviolet': '8a2be2',
|
|
'brown': 'a52a2a',
|
|
'burlywood': 'deb887',
|
|
'cadetblue': '5f9ea0',
|
|
'chartreuse': '7fff00',
|
|
'chocolate': 'd2691e',
|
|
'coral': 'ff7f50',
|
|
'cornflowerblue': '6495ed',
|
|
'cornsilk': 'fff8dc',
|
|
'crimson': 'dc143c',
|
|
'cyan': '0ff',
|
|
'darkblue': '00008b',
|
|
'darkcyan': '008b8b',
|
|
'darkgoldenrod': 'b8860b',
|
|
'darkgray': 'a9a9a9',
|
|
'darkgrey': 'a9a9a9',
|
|
'darkgreen': '006400',
|
|
'darkkhaki': 'bdb76b',
|
|
'darkmagenta': '8b008b',
|
|
'darkolivegreen': '556b2f',
|
|
'darkorange': 'ff8c00',
|
|
'darkorchid': '9932cc',
|
|
'darkred': '8b0000',
|
|
'darksalmon': 'e9967a',
|
|
'darkseagreen': '8fbc8f',
|
|
'darkslateblue': '483d8b',
|
|
'darkslategray': '2f4f4f',
|
|
'darkslategrey': '2f4f4f',
|
|
'darkturquoise': '00ced1',
|
|
'darkviolet': '9400d3',
|
|
'deeppink': 'ff1493',
|
|
'deepskyblue': '00bfff',
|
|
'dimgray': '696969',
|
|
'dimgrey': '696969',
|
|
'dodgerblue': '1e90ff',
|
|
'firebrick': 'b22222',
|
|
'floralwhite': 'fffaf0',
|
|
'forestgreen': '228b22',
|
|
'fuchsia': 'f0f',
|
|
'gainsboro': 'dcdcdc',
|
|
'ghostwhite': 'f8f8ff',
|
|
'gold': 'ffd700',
|
|
'goldenrod': 'daa520',
|
|
'gray': '808080',
|
|
'grey': '808080',
|
|
'green': '008000',
|
|
'greenyellow': 'adff2f',
|
|
'honeydew': 'f0fff0',
|
|
'hotpink': 'ff69b4',
|
|
'indianred': 'cd5c5c',
|
|
'indigo': '4b0082',
|
|
'ivory': 'fffff0',
|
|
'khaki': 'f0e68c',
|
|
'lavender': 'e6e6fa',
|
|
'lavenderblush': 'fff0f5',
|
|
'lawngreen': '7cfc00',
|
|
'lemonchiffon': 'fffacd',
|
|
'lightblue': 'add8e6',
|
|
'lightcoral': 'f08080',
|
|
'lightcyan': 'e0ffff',
|
|
'lightgoldenrodyellow': 'fafad2',
|
|
'lightgray': 'd3d3d3',
|
|
'lightgrey': 'd3d3d3',
|
|
'lightgreen': '90ee90',
|
|
'lightpink': 'ffb6c1',
|
|
'lightsalmon': 'ffa07a',
|
|
'lightseagreen': '20b2aa',
|
|
'lightskyblue': '87cefa',
|
|
'lightslategray': '789',
|
|
'lightslategrey': '789',
|
|
'lightsteelblue': 'b0c4de',
|
|
'lightyellow': 'ffffe0',
|
|
'lime': '0f0',
|
|
'limegreen': '32cd32',
|
|
'linen': 'faf0e6',
|
|
'magenta': 'f0f',
|
|
'maroon': '800000',
|
|
'mediumaquamarine': '66cdaa',
|
|
'mediumblue': '0000cd',
|
|
'mediumorchid': 'ba55d3',
|
|
'mediumpurple': '9370db',
|
|
'mediumseagreen': '3cb371',
|
|
'mediumslateblue': '7b68ee',
|
|
'mediumspringgreen': '00fa9a',
|
|
'mediumturquoise': '48d1cc',
|
|
'mediumvioletred': 'c71585',
|
|
'midnightblue': '191970',
|
|
'mintcream': 'f5fffa',
|
|
'mistyrose': 'ffe4e1',
|
|
'moccasin': 'ffe4b5',
|
|
'navajowhite': 'ffdead',
|
|
'navy': '000080',
|
|
'oldlace': 'fdf5e6',
|
|
'olive': '808000',
|
|
'olivedrab': '6b8e23',
|
|
'orange': 'ffa500',
|
|
'orangered': 'ff4500',
|
|
'orchid': 'da70d6',
|
|
'palegoldenrod': 'eee8aa',
|
|
'palegreen': '98fb98',
|
|
'paleturquoise': 'afeeee',
|
|
'palevioletred': 'db7093',
|
|
'papayawhip': 'ffefd5',
|
|
'peachpuff': 'ffdab9',
|
|
'peru': 'cd853f',
|
|
'pink': 'ffc0cb',
|
|
'plum': 'dda0dd',
|
|
'powderblue': 'b0e0e6',
|
|
'purple': '800080',
|
|
'rebeccapurple': '639',
|
|
'red': 'f00',
|
|
'rosybrown': 'bc8f8f',
|
|
'royalblue': '4169e1',
|
|
'saddlebrown': '8b4513',
|
|
'salmon': 'fa8072',
|
|
'sandybrown': 'f4a460',
|
|
'seagreen': '2e8b57',
|
|
'seashell': 'fff5ee',
|
|
'sienna': 'a0522d',
|
|
'silver': 'c0c0c0',
|
|
'skyblue': '87ceeb',
|
|
'slateblue': '6a5acd',
|
|
'slategray': '708090',
|
|
'slategrey': '708090',
|
|
'snow': 'fffafa',
|
|
'springgreen': '00ff7f',
|
|
'steelblue': '4682b4',
|
|
'tan': 'd2b48c',
|
|
'teal': '008080',
|
|
'thistle': 'd8bfd8',
|
|
'tomato': 'ff6347',
|
|
'turquoise': '40e0d0',
|
|
'violet': 'ee82ee',
|
|
'wheat': 'f5deb3',
|
|
'white': 'fff',
|
|
'whitesmoke': 'f5f5f5',
|
|
'yellow': 'ff0',
|
|
'yellowgreen': '9acd32'
|
|
};
|
|
|
|
var HEX_TO_NAME = {
|
|
'800000': 'maroon',
|
|
'800080': 'purple',
|
|
'808000': 'olive',
|
|
'808080': 'gray',
|
|
'00ffff': 'cyan',
|
|
'f0ffff': 'azure',
|
|
'f5f5dc': 'beige',
|
|
'ffe4c4': 'bisque',
|
|
'000000': 'black',
|
|
'0000ff': 'blue',
|
|
'a52a2a': 'brown',
|
|
'ff7f50': 'coral',
|
|
'ffd700': 'gold',
|
|
'008000': 'green',
|
|
'4b0082': 'indigo',
|
|
'fffff0': 'ivory',
|
|
'f0e68c': 'khaki',
|
|
'00ff00': 'lime',
|
|
'faf0e6': 'linen',
|
|
'000080': 'navy',
|
|
'ffa500': 'orange',
|
|
'da70d6': 'orchid',
|
|
'cd853f': 'peru',
|
|
'ffc0cb': 'pink',
|
|
'dda0dd': 'plum',
|
|
'f00': 'red',
|
|
'ff0000': 'red',
|
|
'fa8072': 'salmon',
|
|
'a0522d': 'sienna',
|
|
'c0c0c0': 'silver',
|
|
'fffafa': 'snow',
|
|
'd2b48c': 'tan',
|
|
'008080': 'teal',
|
|
'ff6347': 'tomato',
|
|
'ee82ee': 'violet',
|
|
'f5deb3': 'wheat',
|
|
'ffffff': 'white',
|
|
'ffff00': 'yellow'
|
|
};
|
|
|
|
function hueToRgb(p, q, t) {
|
|
if (t < 0) {
|
|
t += 1;
|
|
}
|
|
if (t > 1) {
|
|
t -= 1;
|
|
}
|
|
if (t < 1 / 6) {
|
|
return p + (q - p) * 6 * t;
|
|
}
|
|
if (t < 1 / 2) {
|
|
return q;
|
|
}
|
|
if (t < 2 / 3) {
|
|
return p + (q - p) * (2 / 3 - t) * 6;
|
|
}
|
|
return p;
|
|
}
|
|
|
|
function hslToRgb(h, s, l, a) {
|
|
var r;
|
|
var g;
|
|
var b;
|
|
|
|
if (s === 0) {
|
|
r = g = b = l; // achromatic
|
|
} else {
|
|
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
var p = 2 * l - q;
|
|
|
|
r = hueToRgb(p, q, h + 1 / 3);
|
|
g = hueToRgb(p, q, h);
|
|
b = hueToRgb(p, q, h - 1 / 3);
|
|
}
|
|
|
|
return [
|
|
Math.round(r * 255),
|
|
Math.round(g * 255),
|
|
Math.round(b * 255),
|
|
a
|
|
];
|
|
}
|
|
|
|
function toHex(value) {
|
|
value = value.toString(16);
|
|
return value.length === 1 ? '0' + value : value;
|
|
}
|
|
|
|
function parseFunctionArgs(functionArgs, count, rgb) {
|
|
var cursor = functionArgs.head;
|
|
var args = [];
|
|
var wasValue = false;
|
|
|
|
while (cursor !== null) {
|
|
var node = cursor.data;
|
|
var type = node.type;
|
|
|
|
switch (type) {
|
|
case 'Number':
|
|
case 'Percentage':
|
|
if (wasValue) {
|
|
return;
|
|
}
|
|
|
|
wasValue = true;
|
|
args.push({
|
|
type: type,
|
|
value: Number(node.value)
|
|
});
|
|
break;
|
|
|
|
case 'Operator':
|
|
if (node.value === ',') {
|
|
if (!wasValue) {
|
|
return;
|
|
}
|
|
wasValue = false;
|
|
} else if (wasValue || node.value !== '+') {
|
|
return;
|
|
}
|
|
break;
|
|
|
|
default:
|
|
// something we couldn't understand
|
|
return;
|
|
}
|
|
|
|
cursor = cursor.next;
|
|
}
|
|
|
|
if (args.length !== count) {
|
|
// invalid arguments count
|
|
// TODO: remove those tokens
|
|
return;
|
|
}
|
|
|
|
if (args.length === 4) {
|
|
if (args[3].type !== 'Number') {
|
|
// 4th argument should be a number
|
|
// TODO: remove those tokens
|
|
return;
|
|
}
|
|
|
|
args[3].type = 'Alpha';
|
|
}
|
|
|
|
if (rgb) {
|
|
if (args[0].type !== args[1].type || args[0].type !== args[2].type) {
|
|
// invalid color, numbers and percentage shouldn't be mixed
|
|
// TODO: remove those tokens
|
|
return;
|
|
}
|
|
} else {
|
|
if (args[0].type !== 'Number' ||
|
|
args[1].type !== 'Percentage' ||
|
|
args[2].type !== 'Percentage') {
|
|
// invalid color, for hsl values should be: number, percentage, percentage
|
|
// TODO: remove those tokens
|
|
return;
|
|
}
|
|
|
|
args[0].type = 'Angle';
|
|
}
|
|
|
|
return args.map(function(arg) {
|
|
var value = Math.max(0, arg.value);
|
|
|
|
switch (arg.type) {
|
|
case 'Number':
|
|
// fit value to [0..255] range
|
|
value = Math.min(value, 255);
|
|
break;
|
|
|
|
case 'Percentage':
|
|
// convert 0..100% to value in [0..255] range
|
|
value = Math.min(value, 100) / 100;
|
|
|
|
if (!rgb) {
|
|
return value;
|
|
}
|
|
|
|
value = 255 * value;
|
|
break;
|
|
|
|
case 'Angle':
|
|
// fit value to (-360..360) range
|
|
return (((value % 360) + 360) % 360) / 360;
|
|
|
|
case 'Alpha':
|
|
// fit value to [0..1] range
|
|
return Math.min(value, 1);
|
|
}
|
|
|
|
return Math.round(value);
|
|
});
|
|
}
|
|
|
|
function compressFunction(node, item, list) {
|
|
var functionName = node.name;
|
|
var args;
|
|
|
|
if (functionName === 'rgba' || functionName === 'hsla') {
|
|
args = parseFunctionArgs(node.children, 4, functionName === 'rgba');
|
|
|
|
if (!args) {
|
|
// something went wrong
|
|
return;
|
|
}
|
|
|
|
if (functionName === 'hsla') {
|
|
args = hslToRgb.apply(null, args);
|
|
node.name = 'rgba';
|
|
}
|
|
|
|
if (args[3] === 0) {
|
|
// try to replace `rgba(x, x, x, 0)` to `transparent`
|
|
// always replace `rgba(0, 0, 0, 0)` to `transparent`
|
|
// otherwise avoid replacement in gradients since it may break color transition
|
|
// http://stackoverflow.com/questions/11829410/css3-gradient-rendering-issues-from-transparent-to-white
|
|
var scopeFunctionName = this.function && this.function.name;
|
|
if ((args[0] === 0 && args[1] === 0 && args[2] === 0) ||
|
|
!/^(?:to|from|color-stop)$|gradient$/i.test(scopeFunctionName)) {
|
|
|
|
item.data = {
|
|
type: 'Identifier',
|
|
loc: node.loc,
|
|
name: 'transparent'
|
|
};
|
|
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (args[3] !== 1) {
|
|
// replace argument values for normalized/interpolated
|
|
node.children.each(function(node, item, list) {
|
|
if (node.type === 'Operator') {
|
|
if (node.value !== ',') {
|
|
list.remove(item);
|
|
}
|
|
return;
|
|
}
|
|
|
|
item.data = {
|
|
type: 'Number',
|
|
loc: node.loc,
|
|
value: packNumber(args.shift(), null)
|
|
};
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
// otherwise convert to rgb, i.e. rgba(255, 0, 0, 1) -> rgb(255, 0, 0)
|
|
functionName = 'rgb';
|
|
}
|
|
|
|
if (functionName === 'hsl') {
|
|
args = args || parseFunctionArgs(node.children, 3, false);
|
|
|
|
if (!args) {
|
|
// something went wrong
|
|
return;
|
|
}
|
|
|
|
// convert to rgb
|
|
args = hslToRgb.apply(null, args);
|
|
functionName = 'rgb';
|
|
}
|
|
|
|
if (functionName === 'rgb') {
|
|
args = args || parseFunctionArgs(node.children, 3, true);
|
|
|
|
if (!args) {
|
|
// something went wrong
|
|
return;
|
|
}
|
|
|
|
// check if color is not at the end and not followed by space
|
|
var next = item.next;
|
|
if (next && next.data.type !== 'WhiteSpace') {
|
|
list.insert(list.createItem({
|
|
type: 'WhiteSpace',
|
|
value: ' '
|
|
}), next);
|
|
}
|
|
|
|
item.data = {
|
|
type: 'Hash',
|
|
loc: node.loc,
|
|
value: toHex(args[0]) + toHex(args[1]) + toHex(args[2])
|
|
};
|
|
|
|
compressHex(item.data, item);
|
|
}
|
|
}
|
|
|
|
function compressIdent(node, item) {
|
|
if (this.declaration === null) {
|
|
return;
|
|
}
|
|
|
|
var color = node.name.toLowerCase();
|
|
|
|
if (NAME_TO_HEX.hasOwnProperty(color) &&
|
|
lexer.matchDeclaration(this.declaration).isType(node, 'color')) {
|
|
var hex = NAME_TO_HEX[color];
|
|
|
|
if (hex.length + 1 <= color.length) {
|
|
// replace for shorter hex value
|
|
item.data = {
|
|
type: 'Hash',
|
|
loc: node.loc,
|
|
value: hex
|
|
};
|
|
} else {
|
|
// special case for consistent colors
|
|
if (color === 'grey') {
|
|
color = 'gray';
|
|
}
|
|
|
|
// just replace value for lower cased name
|
|
node.name = color;
|
|
}
|
|
}
|
|
}
|
|
|
|
function compressHex(node, item) {
|
|
var color = node.value.toLowerCase();
|
|
|
|
// #112233 -> #123
|
|
if (color.length === 6 &&
|
|
color[0] === color[1] &&
|
|
color[2] === color[3] &&
|
|
color[4] === color[5]) {
|
|
color = color[0] + color[2] + color[4];
|
|
}
|
|
|
|
if (HEX_TO_NAME[color]) {
|
|
item.data = {
|
|
type: 'Identifier',
|
|
loc: node.loc,
|
|
name: HEX_TO_NAME[color]
|
|
};
|
|
} else {
|
|
node.value = color;
|
|
}
|
|
}
|
|
|
|
module.exports = {
|
|
compressFunction: compressFunction,
|
|
compressIdent: compressIdent,
|
|
compressHex: compressHex
|
|
};
|