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.

702 lines
22 KiB

4 years ago
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _postcss = require('postcss');
  6. var _stylehacks = require('stylehacks');
  7. var _insertCloned = require('../insertCloned');
  8. var _insertCloned2 = _interopRequireDefault(_insertCloned);
  9. var _parseTrbl = require('../parseTrbl');
  10. var _parseTrbl2 = _interopRequireDefault(_parseTrbl);
  11. var _hasAllProps = require('../hasAllProps');
  12. var _hasAllProps2 = _interopRequireDefault(_hasAllProps);
  13. var _getDecls = require('../getDecls');
  14. var _getDecls2 = _interopRequireDefault(_getDecls);
  15. var _getRules = require('../getRules');
  16. var _getRules2 = _interopRequireDefault(_getRules);
  17. var _getValue = require('../getValue');
  18. var _getValue2 = _interopRequireDefault(_getValue);
  19. var _mergeRules = require('../mergeRules');
  20. var _mergeRules2 = _interopRequireDefault(_mergeRules);
  21. var _minifyTrbl = require('../minifyTrbl');
  22. var _minifyTrbl2 = _interopRequireDefault(_minifyTrbl);
  23. var _minifyWsc = require('../minifyWsc');
  24. var _minifyWsc2 = _interopRequireDefault(_minifyWsc);
  25. var _canMerge = require('../canMerge');
  26. var _canMerge2 = _interopRequireDefault(_canMerge);
  27. var _remove = require('../remove');
  28. var _remove2 = _interopRequireDefault(_remove);
  29. var _trbl = require('../trbl');
  30. var _trbl2 = _interopRequireDefault(_trbl);
  31. var _isCustomProp = require('../isCustomProp');
  32. var _isCustomProp2 = _interopRequireDefault(_isCustomProp);
  33. var _canExplode = require('../canExplode');
  34. var _canExplode2 = _interopRequireDefault(_canExplode);
  35. var _getLastNode = require('../getLastNode');
  36. var _getLastNode2 = _interopRequireDefault(_getLastNode);
  37. var _parseWsc = require('../parseWsc');
  38. var _parseWsc2 = _interopRequireDefault(_parseWsc);
  39. var _validateWsc = require('../validateWsc');
  40. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  41. const wsc = ['width', 'style', 'color'];
  42. const defaults = ['medium', 'none', 'currentcolor'];
  43. function borderProperty(...parts) {
  44. return `border-${parts.join('-')}`;
  45. }
  46. function mapBorderProperty(value) {
  47. return borderProperty(value);
  48. }
  49. const directions = _trbl2.default.map(mapBorderProperty);
  50. const properties = wsc.map(mapBorderProperty);
  51. const directionalProperties = directions.reduce((prev, curr) => prev.concat(wsc.map(prop => `${curr}-${prop}`)), []);
  52. const precedence = [['border'], directions.concat(properties), directionalProperties];
  53. const allProperties = precedence.reduce((a, b) => a.concat(b));
  54. function getLevel(prop) {
  55. for (let i = 0; i < precedence.length; i++) {
  56. if (!!~precedence[i].indexOf(prop.toLowerCase())) {
  57. return i;
  58. }
  59. }
  60. }
  61. const isValueCustomProp = value => value && !!~value.search(/var\s*\(\s*--/i);
  62. function canMergeValues(values) {
  63. return !values.some(isValueCustomProp) || values.every(isValueCustomProp);
  64. }
  65. function getColorValue(decl) {
  66. if (decl.prop.substr(-5) === 'color') {
  67. return decl.value;
  68. }
  69. return (0, _parseWsc2.default)(decl.value)[2] || defaults[2];
  70. }
  71. function diffingProps(values, nextValues) {
  72. return wsc.reduce((prev, curr, i) => {
  73. if (values[i] === nextValues[i]) {
  74. return prev;
  75. }
  76. return [...prev, curr];
  77. }, []);
  78. }
  79. function mergeRedundant({ values, nextValues, decl, nextDecl, index }) {
  80. if (!(0, _canMerge2.default)([decl, nextDecl])) {
  81. return;
  82. }
  83. if ((0, _stylehacks.detect)(decl) || (0, _stylehacks.detect)(nextDecl)) {
  84. return;
  85. }
  86. const diff = diffingProps(values, nextValues);
  87. if (diff.length > 1) {
  88. return;
  89. }
  90. const prop = diff.pop();
  91. const position = wsc.indexOf(prop);
  92. const prop1 = `${nextDecl.prop}-${prop}`;
  93. const prop2 = `border-${prop}`;
  94. let props = (0, _parseTrbl2.default)(values[position]);
  95. props[index] = nextValues[position];
  96. const borderValue2 = values.filter((e, i) => i !== position).join(' ');
  97. const propValue2 = (0, _minifyTrbl2.default)(props);
  98. const origLength = ((0, _minifyWsc2.default)(decl.value) + nextDecl.prop + nextDecl.value).length;
  99. const newLength1 = decl.value.length + prop1.length + (0, _minifyWsc2.default)(nextValues[position]).length;
  100. const newLength2 = borderValue2.length + prop2.length + propValue2.length;
  101. if (newLength1 < newLength2 && newLength1 < origLength) {
  102. nextDecl.prop = prop1;
  103. nextDecl.value = nextValues[position];
  104. }
  105. if (newLength2 < newLength1 && newLength2 < origLength) {
  106. decl.value = borderValue2;
  107. nextDecl.prop = prop2;
  108. nextDecl.value = propValue2;
  109. }
  110. }
  111. function isCloseEnough(mapped) {
  112. return mapped[0] === mapped[1] && mapped[1] === mapped[2] || mapped[1] === mapped[2] && mapped[2] === mapped[3] || mapped[2] === mapped[3] && mapped[3] === mapped[0] || mapped[3] === mapped[0] && mapped[0] === mapped[1];
  113. }
  114. function getDistinctShorthands(mapped) {
  115. return mapped.reduce((a, b) => {
  116. a = Array.isArray(a) ? a : [a];
  117. if (!~a.indexOf(b)) {
  118. a.push(b);
  119. }
  120. return a;
  121. });
  122. }
  123. function explode(rule) {
  124. rule.walkDecls(/^border/i, decl => {
  125. if (!(0, _canExplode2.default)(decl, false)) {
  126. return;
  127. }
  128. if ((0, _stylehacks.detect)(decl)) {
  129. return;
  130. }
  131. const prop = decl.prop.toLowerCase();
  132. // border -> border-trbl
  133. if (prop === 'border') {
  134. if ((0, _validateWsc.isValidWsc)((0, _parseWsc2.default)(decl.value))) {
  135. directions.forEach(direction => {
  136. (0, _insertCloned2.default)(decl.parent, decl, { prop: direction });
  137. });
  138. return decl.remove();
  139. }
  140. }
  141. // border-trbl -> border-trbl-wsc
  142. if (directions.some(direction => prop === direction)) {
  143. let values = (0, _parseWsc2.default)(decl.value);
  144. if ((0, _validateWsc.isValidWsc)(values)) {
  145. wsc.forEach((d, i) => {
  146. (0, _insertCloned2.default)(decl.parent, decl, {
  147. prop: `${prop}-${d}`,
  148. value: values[i] || defaults[i]
  149. });
  150. });
  151. return decl.remove();
  152. }
  153. }
  154. // border-wsc -> border-trbl-wsc
  155. wsc.some(style => {
  156. if (prop !== borderProperty(style)) {
  157. return false;
  158. }
  159. (0, _parseTrbl2.default)(decl.value).forEach((value, i) => {
  160. (0, _insertCloned2.default)(decl.parent, decl, {
  161. prop: borderProperty(_trbl2.default[i], style),
  162. value
  163. });
  164. });
  165. return decl.remove();
  166. });
  167. });
  168. }
  169. function merge(rule) {
  170. // border-trbl-wsc -> border-trbl
  171. _trbl2.default.forEach(direction => {
  172. const prop = borderProperty(direction);
  173. (0, _mergeRules2.default)(rule, wsc.map(style => borderProperty(direction, style)), (rules, lastNode) => {
  174. if ((0, _canMerge2.default)(rules, false) && !rules.some(_stylehacks.detect)) {
  175. (0, _insertCloned2.default)(lastNode.parent, lastNode, {
  176. prop,
  177. value: rules.map(_getValue2.default).join(' ')
  178. });
  179. rules.forEach(_remove2.default);
  180. return true;
  181. }
  182. });
  183. });
  184. // border-trbl-wsc -> border-wsc
  185. wsc.forEach(style => {
  186. const prop = borderProperty(style);
  187. (0, _mergeRules2.default)(rule, _trbl2.default.map(direction => borderProperty(direction, style)), (rules, lastNode) => {
  188. if ((0, _canMerge2.default)(rules) && !rules.some(_stylehacks.detect)) {
  189. (0, _insertCloned2.default)(lastNode.parent, lastNode, {
  190. prop,
  191. value: (0, _minifyTrbl2.default)(rules.map(_getValue2.default).join(' '))
  192. });
  193. rules.forEach(_remove2.default);
  194. return true;
  195. }
  196. });
  197. });
  198. // border-trbl -> border-wsc
  199. (0, _mergeRules2.default)(rule, directions, (rules, lastNode) => {
  200. if (rules.some(_stylehacks.detect)) {
  201. return;
  202. }
  203. const values = rules.map(({ value }) => value);
  204. if (!canMergeValues(values)) {
  205. return;
  206. }
  207. const parsed = values.map(value => (0, _parseWsc2.default)(value));
  208. if (!parsed.every(_validateWsc.isValidWsc)) {
  209. return;
  210. }
  211. wsc.forEach((d, i) => {
  212. const value = parsed.map(v => v[i] || defaults[i]);
  213. if (canMergeValues(value)) {
  214. (0, _insertCloned2.default)(lastNode.parent, lastNode, {
  215. prop: borderProperty(d),
  216. value: (0, _minifyTrbl2.default)(value)
  217. });
  218. } else {
  219. (0, _insertCloned2.default)(lastNode.parent, lastNode);
  220. }
  221. });
  222. rules.forEach(_remove2.default);
  223. return true;
  224. });
  225. // border-wsc -> border
  226. // border-wsc -> border + border-color
  227. // border-wsc -> border + border-dir
  228. (0, _mergeRules2.default)(rule, properties, (rules, lastNode) => {
  229. if (rules.some(_stylehacks.detect)) {
  230. return;
  231. }
  232. const values = rules.map(node => (0, _parseTrbl2.default)(node.value));
  233. const mapped = [0, 1, 2, 3].map(i => [values[0][i], values[1][i], values[2][i]].join(' '));
  234. if (!canMergeValues(mapped)) {
  235. return;
  236. }
  237. const [width, style, color] = rules;
  238. const reduced = getDistinctShorthands(mapped);
  239. if (isCloseEnough(mapped) && (0, _canMerge2.default)(rules, false)) {
  240. const first = mapped.indexOf(reduced[0]) !== mapped.lastIndexOf(reduced[0]);
  241. const border = (0, _insertCloned2.default)(lastNode.parent, lastNode, {
  242. prop: 'border',
  243. value: first ? reduced[0] : reduced[1]
  244. });
  245. if (reduced[1]) {
  246. const value = first ? reduced[1] : reduced[0];
  247. const prop = borderProperty(_trbl2.default[mapped.indexOf(value)]);
  248. rule.insertAfter(border, Object.assign(lastNode.clone(), {
  249. prop,
  250. value
  251. }));
  252. }
  253. rules.forEach(_remove2.default);
  254. return true;
  255. } else if (reduced.length === 1) {
  256. rule.insertBefore(color, Object.assign(lastNode.clone(), {
  257. prop: 'border',
  258. value: [width, style].map(_getValue2.default).join(' ')
  259. }));
  260. rules.filter(node => node.prop.toLowerCase() !== properties[2]).forEach(_remove2.default);
  261. return true;
  262. }
  263. });
  264. // border-wsc -> border + border-trbl
  265. (0, _mergeRules2.default)(rule, properties, (rules, lastNode) => {
  266. if (rules.some(_stylehacks.detect)) {
  267. return;
  268. }
  269. const values = rules.map(node => (0, _parseTrbl2.default)(node.value));
  270. const mapped = [0, 1, 2, 3].map(i => [values[0][i], values[1][i], values[2][i]].join(' '));
  271. const reduced = getDistinctShorthands(mapped);
  272. const none = 'medium none currentcolor';
  273. if (reduced.length > 1 && reduced.length < 4 && reduced.includes(none)) {
  274. const filtered = mapped.filter(p => p !== none);
  275. const mostCommon = reduced.sort((a, b) => mapped.filter(v => v === b).length - mapped.filter(v => v === a).length)[0];
  276. const borderValue = reduced.length === 2 ? filtered[0] : mostCommon;
  277. rule.insertBefore(lastNode, Object.assign(lastNode.clone(), {
  278. prop: 'border',
  279. value: borderValue
  280. }));
  281. directions.forEach((dir, i) => {
  282. if (mapped[i] !== borderValue) {
  283. rule.insertBefore(lastNode, Object.assign(lastNode.clone(), {
  284. prop: dir,
  285. value: mapped[i]
  286. }));
  287. }
  288. });
  289. rules.forEach(_remove2.default);
  290. return true;
  291. }
  292. });
  293. // border-trbl -> border
  294. // border-trbl -> border + border-trbl
  295. (0, _mergeRules2.default)(rule, directions, (rules, lastNode) => {
  296. if (rules.some(_stylehacks.detect)) {
  297. return;
  298. }
  299. const values = rules.map(node => {
  300. const wscValue = (0, _parseWsc2.default)(node.value);
  301. if (!(0, _validateWsc.isValidWsc)(wscValue)) {
  302. return node.value;
  303. }
  304. return wscValue.map((value, i) => value || defaults[i]).join(' ');
  305. });
  306. const reduced = getDistinctShorthands(values);
  307. if (isCloseEnough(values)) {
  308. const first = values.indexOf(reduced[0]) !== values.lastIndexOf(reduced[0]);
  309. rule.insertBefore(lastNode, Object.assign(lastNode.clone(), {
  310. prop: 'border',
  311. value: (0, _minifyWsc2.default)(first ? values[0] : values[1])
  312. }));
  313. if (reduced[1]) {
  314. const value = first ? reduced[1] : reduced[0];
  315. const prop = directions[values.indexOf(value)];
  316. rule.insertBefore(lastNode, Object.assign(lastNode.clone(), {
  317. prop: prop,
  318. value: (0, _minifyWsc2.default)(value)
  319. }));
  320. }
  321. rules.forEach(_remove2.default);
  322. return true;
  323. }
  324. });
  325. // border-trbl-wsc + border-trbl (custom prop) -> border-trbl + border-trbl-wsc (custom prop)
  326. directions.forEach(direction => {
  327. wsc.forEach((style, i) => {
  328. const prop = `${direction}-${style}`;
  329. (0, _mergeRules2.default)(rule, [direction, prop], (rules, lastNode) => {
  330. if (lastNode.prop !== direction) {
  331. return;
  332. }
  333. const values = (0, _parseWsc2.default)(lastNode.value);
  334. if (!(0, _validateWsc.isValidWsc)(values)) {
  335. return;
  336. }
  337. const wscProp = rules.filter(r => r !== lastNode)[0];
  338. if (!isValueCustomProp(values[i]) || (0, _isCustomProp2.default)(wscProp)) {
  339. return;
  340. }
  341. const wscValue = values[i];
  342. values[i] = wscProp.value;
  343. if ((0, _canMerge2.default)(rules, false) && !rules.some(_stylehacks.detect)) {
  344. (0, _insertCloned2.default)(lastNode.parent, lastNode, {
  345. prop,
  346. value: wscValue
  347. });
  348. lastNode.value = (0, _minifyWsc2.default)(values);
  349. wscProp.remove();
  350. return true;
  351. }
  352. });
  353. });
  354. });
  355. // border-wsc + border (custom prop) -> border + border-wsc (custom prop)
  356. wsc.forEach((style, i) => {
  357. const prop = borderProperty(style);
  358. (0, _mergeRules2.default)(rule, ['border', prop], (rules, lastNode) => {
  359. if (lastNode.prop !== 'border') {
  360. return;
  361. }
  362. const values = (0, _parseWsc2.default)(lastNode.value);
  363. if (!(0, _validateWsc.isValidWsc)(values)) {
  364. return;
  365. }
  366. const wscProp = rules.filter(r => r !== lastNode)[0];
  367. if (!isValueCustomProp(values[i]) || (0, _isCustomProp2.default)(wscProp)) {
  368. return;
  369. }
  370. const wscValue = values[i];
  371. values[i] = wscProp.value;
  372. if ((0, _canMerge2.default)(rules, false) && !rules.some(_stylehacks.detect)) {
  373. (0, _insertCloned2.default)(lastNode.parent, lastNode, {
  374. prop,
  375. value: wscValue
  376. });
  377. lastNode.value = (0, _minifyWsc2.default)(values);
  378. wscProp.remove();
  379. return true;
  380. }
  381. });
  382. });
  383. // optimize border-trbl
  384. let decls = (0, _getDecls2.default)(rule, directions);
  385. while (decls.length) {
  386. const lastNode = decls[decls.length - 1];
  387. wsc.forEach((d, i) => {
  388. const names = directions.filter(name => name !== lastNode.prop).map(name => `${name}-${d}`);
  389. let nodes = rule.nodes.slice(0, rule.nodes.indexOf(lastNode));
  390. const border = (0, _getLastNode2.default)(nodes, 'border');
  391. if (border) {
  392. nodes = nodes.slice(nodes.indexOf(border));
  393. }
  394. const props = nodes.filter(node => node.prop && ~names.indexOf(node.prop) && node.important === lastNode.important);
  395. const rules = (0, _getRules2.default)(props, names);
  396. if ((0, _hasAllProps2.default)(rules, ...names) && !rules.some(_stylehacks.detect)) {
  397. const values = rules.map(node => node ? node.value : null);
  398. const filteredValues = values.filter(Boolean);
  399. const lastNodeValue = _postcss.list.space(lastNode.value)[i];
  400. values[directions.indexOf(lastNode.prop)] = lastNodeValue;
  401. let value = (0, _minifyTrbl2.default)(values.join(' '));
  402. if (filteredValues[0] === filteredValues[1] && filteredValues[1] === filteredValues[2]) {
  403. value = filteredValues[0];
  404. }
  405. let refNode = props[props.length - 1];
  406. if (value === lastNodeValue) {
  407. refNode = lastNode;
  408. let valueArray = _postcss.list.space(lastNode.value);
  409. valueArray.splice(i, 1);
  410. lastNode.value = valueArray.join(' ');
  411. }
  412. (0, _insertCloned2.default)(refNode.parent, refNode, {
  413. prop: borderProperty(d),
  414. value
  415. });
  416. decls = decls.filter(node => !~rules.indexOf(node));
  417. rules.forEach(_remove2.default);
  418. }
  419. });
  420. decls = decls.filter(node => node !== lastNode);
  421. }
  422. rule.walkDecls('border', decl => {
  423. const nextDecl = decl.next();
  424. if (!nextDecl || nextDecl.type !== 'decl') {
  425. return;
  426. }
  427. const index = directions.indexOf(nextDecl.prop);
  428. if (!~index) {
  429. return;
  430. }
  431. const values = (0, _parseWsc2.default)(decl.value);
  432. const nextValues = (0, _parseWsc2.default)(nextDecl.value);
  433. if (!(0, _validateWsc.isValidWsc)(values) || !(0, _validateWsc.isValidWsc)(nextValues)) {
  434. return;
  435. }
  436. const config = {
  437. values,
  438. nextValues,
  439. decl,
  440. nextDecl,
  441. index
  442. };
  443. return mergeRedundant(config);
  444. });
  445. rule.walkDecls(/^border($|-(top|right|bottom|left)$)/i, decl => {
  446. let values = (0, _parseWsc2.default)(decl.value);
  447. if (!(0, _validateWsc.isValidWsc)(values)) {
  448. return;
  449. }
  450. const position = directions.indexOf(decl.prop);
  451. let dirs = [...directions];
  452. dirs.splice(position, 1);
  453. wsc.forEach((d, i) => {
  454. const props = dirs.map(dir => `${dir}-${d}`);
  455. (0, _mergeRules2.default)(rule, [decl.prop, ...props], rules => {
  456. if (!rules.includes(decl)) {
  457. return;
  458. }
  459. const longhands = rules.filter(p => p !== decl);
  460. if (longhands[0].value.toLowerCase() === longhands[1].value.toLowerCase() && longhands[1].value.toLowerCase() === longhands[2].value.toLowerCase() && longhands[0].value.toLowerCase() === values[i].toLowerCase()) {
  461. longhands.forEach(_remove2.default);
  462. (0, _insertCloned2.default)(decl.parent, decl, {
  463. prop: borderProperty(d),
  464. value: values[i]
  465. });
  466. values[i] = null;
  467. }
  468. });
  469. const newValue = values.join(' ');
  470. if (newValue) {
  471. decl.value = newValue;
  472. } else {
  473. decl.remove();
  474. }
  475. });
  476. });
  477. // clean-up values
  478. rule.walkDecls(/^border($|-(top|right|bottom|left)$)/i, decl => {
  479. decl.value = (0, _minifyWsc2.default)(decl.value);
  480. });
  481. // border-spacing-hv -> border-spacing
  482. rule.walkDecls(/^border-spacing$/i, decl => {
  483. const value = _postcss.list.space(decl.value);
  484. // merge vertical and horizontal dups
  485. if (value.length > 1 && value[0] === value[1]) {
  486. decl.value = value.slice(1).join(' ');
  487. }
  488. });
  489. // clean-up rules
  490. decls = (0, _getDecls2.default)(rule, allProperties);
  491. while (decls.length) {
  492. const lastNode = decls[decls.length - 1];
  493. const lastPart = lastNode.prop.split('-').pop();
  494. // remove properties of lower precedence
  495. const lesser = decls.filter(node => !(0, _stylehacks.detect)(lastNode) && !(0, _stylehacks.detect)(node) && !(0, _isCustomProp2.default)(lastNode) && node !== lastNode && node.important === lastNode.important && getLevel(node.prop) > getLevel(lastNode.prop) && (!!~node.prop.toLowerCase().indexOf(lastNode.prop) || node.prop.toLowerCase().endsWith(lastPart)));
  496. lesser.forEach(_remove2.default);
  497. decls = decls.filter(node => !~lesser.indexOf(node));
  498. // get duplicate properties
  499. let duplicates = decls.filter(node => !(0, _stylehacks.detect)(lastNode) && !(0, _stylehacks.detect)(node) && node !== lastNode && node.important === lastNode.important && node.prop === lastNode.prop && !(!(0, _isCustomProp2.default)(node) && (0, _isCustomProp2.default)(lastNode)));
  500. if (duplicates.length) {
  501. if (/hsla\(|rgba\(/i.test(getColorValue(lastNode))) {
  502. const preserve = duplicates.filter(node => !/hsla\(|rgba\(/i.test(getColorValue(node))).pop();
  503. duplicates = duplicates.filter(node => node !== preserve);
  504. }
  505. duplicates.forEach(_remove2.default);
  506. }
  507. decls = decls.filter(node => node !== lastNode && !~duplicates.indexOf(node));
  508. }
  509. }
  510. exports.default = {
  511. explode,
  512. merge
  513. };
  514. module.exports = exports['default'];