gradient.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519
  1. "use strict";
  2. function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
  3. function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); }
  4. function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
  5. function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
  6. function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
  7. function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _defaults(subClass, superClass); }
  8. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  9. var parser = require('postcss-value-parser');
  10. var range = require('normalize-range');
  11. var OldValue = require('../old-value');
  12. var Value = require('../value');
  13. var utils = require('../utils');
  14. var IS_DIRECTION = /top|left|right|bottom/gi;
  15. var Gradient = /*#__PURE__*/function (_Value) {
  16. _inheritsLoose(Gradient, _Value);
  17. function Gradient() {
  18. var _this;
  19. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  20. args[_key] = arguments[_key];
  21. }
  22. _this = _Value.call.apply(_Value, [this].concat(args)) || this;
  23. _defineProperty(_assertThisInitialized(_this), "directions", {
  24. top: 'bottom',
  25. left: 'right',
  26. bottom: 'top',
  27. right: 'left'
  28. });
  29. _defineProperty(_assertThisInitialized(_this), "oldDirections", {
  30. 'top': 'left bottom, left top',
  31. 'left': 'right top, left top',
  32. 'bottom': 'left top, left bottom',
  33. 'right': 'left top, right top',
  34. 'top right': 'left bottom, right top',
  35. 'top left': 'right bottom, left top',
  36. 'right top': 'left bottom, right top',
  37. 'right bottom': 'left top, right bottom',
  38. 'bottom right': 'left top, right bottom',
  39. 'bottom left': 'right top, left bottom',
  40. 'left top': 'right bottom, left top',
  41. 'left bottom': 'right top, left bottom'
  42. });
  43. return _this;
  44. }
  45. var _proto = Gradient.prototype;
  46. /**
  47. * Change degrees for webkit prefix
  48. */
  49. _proto.replace = function replace(string, prefix) {
  50. var ast = parser(string);
  51. for (var _iterator = _createForOfIteratorHelperLoose(ast.nodes), _step; !(_step = _iterator()).done;) {
  52. var node = _step.value;
  53. if (node.type === 'function' && node.value === this.name) {
  54. node.nodes = this.newDirection(node.nodes);
  55. node.nodes = this.normalize(node.nodes);
  56. if (prefix === '-webkit- old') {
  57. var changes = this.oldWebkit(node);
  58. if (!changes) {
  59. return false;
  60. }
  61. } else {
  62. node.nodes = this.convertDirection(node.nodes);
  63. node.value = prefix + node.value;
  64. }
  65. }
  66. }
  67. return ast.toString();
  68. }
  69. /**
  70. * Replace first token
  71. */
  72. ;
  73. _proto.replaceFirst = function replaceFirst(params) {
  74. for (var _len2 = arguments.length, words = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
  75. words[_key2 - 1] = arguments[_key2];
  76. }
  77. var prefix = words.map(function (i) {
  78. if (i === ' ') {
  79. return {
  80. type: 'space',
  81. value: i
  82. };
  83. }
  84. return {
  85. type: 'word',
  86. value: i
  87. };
  88. });
  89. return prefix.concat(params.slice(1));
  90. }
  91. /**
  92. * Convert angle unit to deg
  93. */
  94. ;
  95. _proto.normalizeUnit = function normalizeUnit(str, full) {
  96. var num = parseFloat(str);
  97. var deg = num / full * 360;
  98. return deg + "deg";
  99. }
  100. /**
  101. * Normalize angle
  102. */
  103. ;
  104. _proto.normalize = function normalize(nodes) {
  105. if (!nodes[0]) return nodes;
  106. if (/-?\d+(.\d+)?grad/.test(nodes[0].value)) {
  107. nodes[0].value = this.normalizeUnit(nodes[0].value, 400);
  108. } else if (/-?\d+(.\d+)?rad/.test(nodes[0].value)) {
  109. nodes[0].value = this.normalizeUnit(nodes[0].value, 2 * Math.PI);
  110. } else if (/-?\d+(.\d+)?turn/.test(nodes[0].value)) {
  111. nodes[0].value = this.normalizeUnit(nodes[0].value, 1);
  112. } else if (nodes[0].value.includes('deg')) {
  113. var num = parseFloat(nodes[0].value);
  114. num = range.wrap(0, 360, num);
  115. nodes[0].value = num + "deg";
  116. }
  117. if (nodes[0].value === '0deg') {
  118. nodes = this.replaceFirst(nodes, 'to', ' ', 'top');
  119. } else if (nodes[0].value === '90deg') {
  120. nodes = this.replaceFirst(nodes, 'to', ' ', 'right');
  121. } else if (nodes[0].value === '180deg') {
  122. nodes = this.replaceFirst(nodes, 'to', ' ', 'bottom');
  123. } else if (nodes[0].value === '270deg') {
  124. nodes = this.replaceFirst(nodes, 'to', ' ', 'left');
  125. }
  126. return nodes;
  127. }
  128. /**
  129. * Replace old direction to new
  130. */
  131. ;
  132. _proto.newDirection = function newDirection(params) {
  133. if (params[0].value === 'to') {
  134. return params;
  135. }
  136. IS_DIRECTION.lastIndex = 0; // reset search index of global regexp
  137. if (!IS_DIRECTION.test(params[0].value)) {
  138. return params;
  139. }
  140. params.unshift({
  141. type: 'word',
  142. value: 'to'
  143. }, {
  144. type: 'space',
  145. value: ' '
  146. });
  147. for (var i = 2; i < params.length; i++) {
  148. if (params[i].type === 'div') {
  149. break;
  150. }
  151. if (params[i].type === 'word') {
  152. params[i].value = this.revertDirection(params[i].value);
  153. }
  154. }
  155. return params;
  156. }
  157. /**
  158. * Look for at word
  159. */
  160. ;
  161. _proto.isRadial = function isRadial(params) {
  162. var state = 'before';
  163. for (var _iterator2 = _createForOfIteratorHelperLoose(params), _step2; !(_step2 = _iterator2()).done;) {
  164. var param = _step2.value;
  165. if (state === 'before' && param.type === 'space') {
  166. state = 'at';
  167. } else if (state === 'at' && param.value === 'at') {
  168. state = 'after';
  169. } else if (state === 'after' && param.type === 'space') {
  170. return true;
  171. } else if (param.type === 'div') {
  172. break;
  173. } else {
  174. state = 'before';
  175. }
  176. }
  177. return false;
  178. }
  179. /**
  180. * Change new direction to old
  181. */
  182. ;
  183. _proto.convertDirection = function convertDirection(params) {
  184. if (params.length > 0) {
  185. if (params[0].value === 'to') {
  186. this.fixDirection(params);
  187. } else if (params[0].value.includes('deg')) {
  188. this.fixAngle(params);
  189. } else if (this.isRadial(params)) {
  190. this.fixRadial(params);
  191. }
  192. }
  193. return params;
  194. }
  195. /**
  196. * Replace `to top left` to `bottom right`
  197. */
  198. ;
  199. _proto.fixDirection = function fixDirection(params) {
  200. params.splice(0, 2);
  201. for (var _iterator3 = _createForOfIteratorHelperLoose(params), _step3; !(_step3 = _iterator3()).done;) {
  202. var param = _step3.value;
  203. if (param.type === 'div') {
  204. break;
  205. }
  206. if (param.type === 'word') {
  207. param.value = this.revertDirection(param.value);
  208. }
  209. }
  210. }
  211. /**
  212. * Add 90 degrees
  213. */
  214. ;
  215. _proto.fixAngle = function fixAngle(params) {
  216. var first = params[0].value;
  217. first = parseFloat(first);
  218. first = Math.abs(450 - first) % 360;
  219. first = this.roundFloat(first, 3);
  220. params[0].value = first + "deg";
  221. }
  222. /**
  223. * Fix radial direction syntax
  224. */
  225. ;
  226. _proto.fixRadial = function fixRadial(params) {
  227. var first = [];
  228. var second = [];
  229. var a, b, c, i, next;
  230. for (i = 0; i < params.length - 2; i++) {
  231. a = params[i];
  232. b = params[i + 1];
  233. c = params[i + 2];
  234. if (a.type === 'space' && b.value === 'at' && c.type === 'space') {
  235. next = i + 3;
  236. break;
  237. } else {
  238. first.push(a);
  239. }
  240. }
  241. var div;
  242. for (i = next; i < params.length; i++) {
  243. if (params[i].type === 'div') {
  244. div = params[i];
  245. break;
  246. } else {
  247. second.push(params[i]);
  248. }
  249. }
  250. params.splice.apply(params, [0, i].concat(second, [div], first));
  251. };
  252. _proto.revertDirection = function revertDirection(word) {
  253. return this.directions[word.toLowerCase()] || word;
  254. }
  255. /**
  256. * Round float and save digits under dot
  257. */
  258. ;
  259. _proto.roundFloat = function roundFloat(_float, digits) {
  260. return parseFloat(_float.toFixed(digits));
  261. }
  262. /**
  263. * Convert to old webkit syntax
  264. */
  265. ;
  266. _proto.oldWebkit = function oldWebkit(node) {
  267. var nodes = node.nodes;
  268. var string = parser.stringify(node.nodes);
  269. if (this.name !== 'linear-gradient') {
  270. return false;
  271. }
  272. if (nodes[0] && nodes[0].value.includes('deg')) {
  273. return false;
  274. }
  275. if (string.includes('px') || string.includes('-corner') || string.includes('-side')) {
  276. return false;
  277. }
  278. var params = [[]];
  279. for (var _iterator4 = _createForOfIteratorHelperLoose(nodes), _step4; !(_step4 = _iterator4()).done;) {
  280. var i = _step4.value;
  281. params[params.length - 1].push(i);
  282. if (i.type === 'div' && i.value === ',') {
  283. params.push([]);
  284. }
  285. }
  286. this.oldDirection(params);
  287. this.colorStops(params);
  288. node.nodes = [];
  289. for (var _i = 0, _params = params; _i < _params.length; _i++) {
  290. var param = _params[_i];
  291. node.nodes = node.nodes.concat(param);
  292. }
  293. node.nodes.unshift({
  294. type: 'word',
  295. value: 'linear'
  296. }, this.cloneDiv(node.nodes));
  297. node.value = '-webkit-gradient';
  298. return true;
  299. }
  300. /**
  301. * Change direction syntax to old webkit
  302. */
  303. ;
  304. _proto.oldDirection = function oldDirection(params) {
  305. var div = this.cloneDiv(params[0]);
  306. if (params[0][0].value !== 'to') {
  307. return params.unshift([{
  308. type: 'word',
  309. value: this.oldDirections.bottom
  310. }, div]);
  311. } else {
  312. var words = [];
  313. for (var _iterator5 = _createForOfIteratorHelperLoose(params[0].slice(2)), _step5; !(_step5 = _iterator5()).done;) {
  314. var node = _step5.value;
  315. if (node.type === 'word') {
  316. words.push(node.value.toLowerCase());
  317. }
  318. }
  319. words = words.join(' ');
  320. var old = this.oldDirections[words] || words;
  321. params[0] = [{
  322. type: 'word',
  323. value: old
  324. }, div];
  325. return params[0];
  326. }
  327. }
  328. /**
  329. * Get div token from exists parameters
  330. */
  331. ;
  332. _proto.cloneDiv = function cloneDiv(params) {
  333. for (var _iterator6 = _createForOfIteratorHelperLoose(params), _step6; !(_step6 = _iterator6()).done;) {
  334. var i = _step6.value;
  335. if (i.type === 'div' && i.value === ',') {
  336. return i;
  337. }
  338. }
  339. return {
  340. type: 'div',
  341. value: ',',
  342. after: ' '
  343. };
  344. }
  345. /**
  346. * Change colors syntax to old webkit
  347. */
  348. ;
  349. _proto.colorStops = function colorStops(params) {
  350. var result = [];
  351. for (var i = 0; i < params.length; i++) {
  352. var pos = void 0;
  353. var param = params[i];
  354. var item = void 0;
  355. if (i === 0) {
  356. continue;
  357. }
  358. var color = parser.stringify(param[0]);
  359. if (param[1] && param[1].type === 'word') {
  360. pos = param[1].value;
  361. } else if (param[2] && param[2].type === 'word') {
  362. pos = param[2].value;
  363. }
  364. var stop = void 0;
  365. if (i === 1 && (!pos || pos === '0%')) {
  366. stop = "from(" + color + ")";
  367. } else if (i === params.length - 1 && (!pos || pos === '100%')) {
  368. stop = "to(" + color + ")";
  369. } else if (pos) {
  370. stop = "color-stop(" + pos + ", " + color + ")";
  371. } else {
  372. stop = "color-stop(" + color + ")";
  373. }
  374. var div = param[param.length - 1];
  375. params[i] = [{
  376. type: 'word',
  377. value: stop
  378. }];
  379. if (div.type === 'div' && div.value === ',') {
  380. item = params[i].push(div);
  381. }
  382. result.push(item);
  383. }
  384. return result;
  385. }
  386. /**
  387. * Remove old WebKit gradient too
  388. */
  389. ;
  390. _proto.old = function old(prefix) {
  391. if (prefix === '-webkit-') {
  392. var type = this.name === 'linear-gradient' ? 'linear' : 'radial';
  393. var string = '-gradient';
  394. var regexp = utils.regexp("-webkit-(" + type + "-gradient|gradient\\(\\s*" + type + ")", false);
  395. return new OldValue(this.name, prefix + this.name, string, regexp);
  396. } else {
  397. return _Value.prototype.old.call(this, prefix);
  398. }
  399. }
  400. /**
  401. * Do not add non-webkit prefixes for list-style and object
  402. */
  403. ;
  404. _proto.add = function add(decl, prefix) {
  405. var p = decl.prop;
  406. if (p.includes('mask')) {
  407. if (prefix === '-webkit-' || prefix === '-webkit- old') {
  408. return _Value.prototype.add.call(this, decl, prefix);
  409. }
  410. } else if (p === 'list-style' || p === 'list-style-image' || p === 'content') {
  411. if (prefix === '-webkit-' || prefix === '-webkit- old') {
  412. return _Value.prototype.add.call(this, decl, prefix);
  413. }
  414. } else {
  415. return _Value.prototype.add.call(this, decl, prefix);
  416. }
  417. return undefined;
  418. };
  419. return Gradient;
  420. }(Value);
  421. _defineProperty(Gradient, "names", ['linear-gradient', 'repeating-linear-gradient', 'radial-gradient', 'repeating-radial-gradient']);
  422. module.exports = Gradient;