index.es.mjs 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import postcss from 'postcss';
  2. import valuesParser from 'postcss-values-parser';
  3. var index = postcss.plugin('postcss-color-functional-notation', opts => {
  4. const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;
  5. return root => {
  6. root.walkDecls(decl => {
  7. const originalValue = decl.value;
  8. if (colorAnyRegExp.test(originalValue)) {
  9. const valueAST = valuesParser(originalValue).parse();
  10. valueAST.walkType('func', node => {
  11. if (colorRegExp.test(node.value)) {
  12. const children = node.nodes.slice(1, -1);
  13. const isFunctionalHSL = matchFunctionalHSL(node, children);
  14. const isFunctionalRGB1 = matchFunctionalRGB1(node, children);
  15. const isFunctionalRGB2 = matchFunctionalRGB2(node, children);
  16. if (isFunctionalHSL || isFunctionalRGB1 || isFunctionalRGB2) {
  17. const slashNode = children[3];
  18. const alphaNode = children[4];
  19. if (alphaNode) {
  20. if (isPercentage(alphaNode) && !isCalc(alphaNode)) {
  21. alphaNode.unit = '';
  22. alphaNode.value = String(alphaNode.value / 100);
  23. }
  24. if (isHslRgb(node)) {
  25. node.value += 'a';
  26. }
  27. } else if (isHslaRgba(node)) {
  28. node.value = node.value.slice(0, -1);
  29. }
  30. if (slashNode && isSlash(slashNode)) {
  31. slashNode.replaceWith(newComma());
  32. }
  33. if (isFunctionalRGB2) {
  34. children[0].unit = children[1].unit = children[2].unit = '';
  35. children[0].value = String(Math.floor(children[0].value * 255 / 100));
  36. children[1].value = String(Math.floor(children[1].value * 255 / 100));
  37. children[2].value = String(Math.floor(children[2].value * 255 / 100));
  38. }
  39. node.nodes.splice(3, 0, [newComma()]);
  40. node.nodes.splice(2, 0, [newComma()]);
  41. }
  42. }
  43. });
  44. const modifiedValue = String(valueAST);
  45. if (modifiedValue !== originalValue) {
  46. if (preserve) {
  47. decl.cloneBefore({
  48. value: modifiedValue
  49. });
  50. } else {
  51. decl.value = modifiedValue;
  52. }
  53. }
  54. }
  55. });
  56. };
  57. });
  58. const alphaUnitMatch = /^%?$/i;
  59. const calcFuncMatch = /^calc$/i;
  60. const colorAnyRegExp = /(^|[^\w-])(hsla?|rgba?)\(/i;
  61. const colorRegExp = /^(hsla?|rgba?)$/i;
  62. const hslishRegExp = /^hsla?$/i;
  63. const hslRgbFuncMatch = /^(hsl|rgb)$/i;
  64. const hslaRgbaFuncMatch = /^(hsla|rgba)$/i;
  65. const hueUnitMatch = /^(deg|grad|rad|turn)?$/i;
  66. const rgbishRegExp = /^rgba?$/i;
  67. const isAlphaValue = node => isCalc(node) || node.type === 'number' && alphaUnitMatch.test(node.unit);
  68. const isCalc = node => node.type === 'func' && calcFuncMatch.test(node.value);
  69. const isHue = node => isCalc(node) || node.type === 'number' && hueUnitMatch.test(node.unit);
  70. const isNumber = node => isCalc(node) || node.type === 'number' && node.unit === '';
  71. const isPercentage = node => isCalc(node) || node.type === 'number' && (node.unit === '%' || node.unit === '' && node.value === '0');
  72. const isHslish = node => node.type === 'func' && hslishRegExp.test(node.value);
  73. const isHslRgb = node => node.type === 'func' && hslRgbFuncMatch.test(node.value);
  74. const isHslaRgba = node => node.type === 'func' && hslaRgbaFuncMatch.test(node.value);
  75. const isRgbish = node => node.type === 'func' && rgbishRegExp.test(node.value);
  76. const isSlash = node => node.type === 'operator' && node.value === '/';
  77. const functionalHSLMatch = [isHue, isPercentage, isPercentage, isSlash, isAlphaValue];
  78. const functionalRGB1Match = [isNumber, isNumber, isNumber, isSlash, isAlphaValue];
  79. const functionalRGB2Match = [isPercentage, isPercentage, isPercentage, isSlash, isAlphaValue];
  80. const matchFunctionalHSL = (node, children) => isHslish(node) && children.every((child, index) => typeof functionalHSLMatch[index] === 'function' && functionalHSLMatch[index](child));
  81. const matchFunctionalRGB1 = (node, children) => isRgbish(node) && children.every((child, index) => typeof functionalRGB1Match[index] === 'function' && functionalRGB1Match[index](child));
  82. const matchFunctionalRGB2 = (node, children) => isRgbish(node) && children.every((child, index) => typeof functionalRGB2Match[index] === 'function' && functionalRGB2Match[index](child));
  83. const newComma = () => valuesParser.comma({
  84. value: ','
  85. });
  86. export default index;
  87. //# sourceMappingURL=index.es.mjs.map