You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

179 lines
5.5 KiB

4 years ago
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _postcss = require('postcss');
  6. var _postcss2 = _interopRequireDefault(_postcss);
  7. var _postcssValueParser = require('postcss-value-parser');
  8. var _postcssValueParser2 = _interopRequireDefault(_postcssValueParser);
  9. var _cssnanoUtilGetArguments = require('cssnano-util-get-arguments');
  10. var _cssnanoUtilGetArguments2 = _interopRequireDefault(_cssnanoUtilGetArguments);
  11. var _isColorStop = require('is-color-stop');
  12. var _isColorStop2 = _interopRequireDefault(_isColorStop);
  13. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  14. const angles = {
  15. top: '0deg',
  16. right: '90deg',
  17. bottom: '180deg',
  18. left: '270deg'
  19. };
  20. function isLessThan(a, b) {
  21. return a.unit.toLowerCase() === b.unit.toLowerCase() && parseFloat(a.number) >= parseFloat(b.number);
  22. }
  23. function optimise(decl) {
  24. const value = decl.value;
  25. if (!~value.toLowerCase().indexOf('gradient')) {
  26. return;
  27. }
  28. decl.value = (0, _postcssValueParser2.default)(value).walk(node => {
  29. if (node.type !== 'function' || !node.nodes.length) {
  30. return false;
  31. }
  32. const lowerCasedValue = node.value.toLowerCase();
  33. if (lowerCasedValue === 'linear-gradient' || lowerCasedValue === 'repeating-linear-gradient' || lowerCasedValue === '-webkit-linear-gradient' || lowerCasedValue === '-webkit-repeating-linear-gradient') {
  34. let args = (0, _cssnanoUtilGetArguments2.default)(node);
  35. if (node.nodes[0].value.toLowerCase() === 'to' && args[0].length === 3) {
  36. node.nodes = node.nodes.slice(2);
  37. node.nodes[0].value = angles[node.nodes[0].value.toLowerCase()];
  38. }
  39. let lastStop = null;
  40. args.forEach((arg, index) => {
  41. if (!arg[2]) {
  42. return;
  43. }
  44. let isFinalStop = index === args.length - 1;
  45. let thisStop = (0, _postcssValueParser.unit)(arg[2].value);
  46. if (lastStop === null) {
  47. lastStop = thisStop;
  48. if (!isFinalStop && lastStop && lastStop.number === '0' && lastStop.unit.toLowerCase() !== 'deg') {
  49. arg[1].value = arg[2].value = '';
  50. }
  51. return;
  52. }
  53. if (lastStop && thisStop && isLessThan(lastStop, thisStop)) {
  54. arg[2].value = 0;
  55. }
  56. lastStop = thisStop;
  57. if (isFinalStop && arg[2].value === '100%') {
  58. arg[1].value = arg[2].value = '';
  59. }
  60. });
  61. return false;
  62. }
  63. if (lowerCasedValue === 'radial-gradient' || lowerCasedValue === 'repeating-radial-gradient') {
  64. let args = (0, _cssnanoUtilGetArguments2.default)(node);
  65. let lastStop;
  66. const hasAt = args[0].find(n => n.value.toLowerCase() === 'at');
  67. args.forEach((arg, index) => {
  68. if (!arg[2] || !index && hasAt) {
  69. return;
  70. }
  71. let thisStop = (0, _postcssValueParser.unit)(arg[2].value);
  72. if (!lastStop) {
  73. lastStop = thisStop;
  74. return;
  75. }
  76. if (lastStop && thisStop && isLessThan(lastStop, thisStop)) {
  77. arg[2].value = 0;
  78. }
  79. lastStop = thisStop;
  80. });
  81. return false;
  82. }
  83. if (lowerCasedValue === '-webkit-radial-gradient' || lowerCasedValue === '-webkit-repeating-radial-gradient') {
  84. let args = (0, _cssnanoUtilGetArguments2.default)(node);
  85. let lastStop;
  86. args.forEach(arg => {
  87. let color;
  88. let stop;
  89. if (arg[2] !== undefined) {
  90. if (arg[0].type === 'function') {
  91. color = `${arg[0].value}(${(0, _postcssValueParser.stringify)(arg[0].nodes)})`;
  92. } else {
  93. color = arg[0].value;
  94. }
  95. if (arg[2].type === 'function') {
  96. stop = `${arg[2].value}(${(0, _postcssValueParser.stringify)(arg[2].nodes)})`;
  97. } else {
  98. stop = arg[2].value;
  99. }
  100. } else {
  101. if (arg[0].type === 'function') {
  102. color = `${arg[0].value}(${(0, _postcssValueParser.stringify)(arg[0].nodes)})`;
  103. }
  104. color = arg[0].value;
  105. }
  106. color = color.toLowerCase();
  107. const colorStop = stop || stop === 0 ? (0, _isColorStop2.default)(color, stop.toLowerCase()) : (0, _isColorStop2.default)(color);
  108. if (!colorStop || !arg[2]) {
  109. return;
  110. }
  111. let thisStop = (0, _postcssValueParser.unit)(arg[2].value);
  112. if (!lastStop) {
  113. lastStop = thisStop;
  114. return;
  115. }
  116. if (lastStop && thisStop && isLessThan(lastStop, thisStop)) {
  117. arg[2].value = 0;
  118. }
  119. lastStop = thisStop;
  120. });
  121. return false;
  122. }
  123. }).toString();
  124. }
  125. exports.default = _postcss2.default.plugin('postcss-minify-gradients', () => {
  126. return css => css.walkDecls(optimise);
  127. });
  128. module.exports = exports['default'];