123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703 |
- 'use strict';
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- var _postcss = require('postcss');
- var _stylehacks = require('stylehacks');
- var _insertCloned = require('../insertCloned');
- var _insertCloned2 = _interopRequireDefault(_insertCloned);
- var _parseTrbl = require('../parseTrbl');
- var _parseTrbl2 = _interopRequireDefault(_parseTrbl);
- var _hasAllProps = require('../hasAllProps');
- var _hasAllProps2 = _interopRequireDefault(_hasAllProps);
- var _getDecls = require('../getDecls');
- var _getDecls2 = _interopRequireDefault(_getDecls);
- var _getRules = require('../getRules');
- var _getRules2 = _interopRequireDefault(_getRules);
- var _getValue = require('../getValue');
- var _getValue2 = _interopRequireDefault(_getValue);
- var _mergeRules = require('../mergeRules');
- var _mergeRules2 = _interopRequireDefault(_mergeRules);
- var _minifyTrbl = require('../minifyTrbl');
- var _minifyTrbl2 = _interopRequireDefault(_minifyTrbl);
- var _minifyWsc = require('../minifyWsc');
- var _minifyWsc2 = _interopRequireDefault(_minifyWsc);
- var _canMerge = require('../canMerge');
- var _canMerge2 = _interopRequireDefault(_canMerge);
- var _remove = require('../remove');
- var _remove2 = _interopRequireDefault(_remove);
- var _trbl = require('../trbl');
- var _trbl2 = _interopRequireDefault(_trbl);
- var _isCustomProp = require('../isCustomProp');
- var _isCustomProp2 = _interopRequireDefault(_isCustomProp);
- var _canExplode = require('../canExplode');
- var _canExplode2 = _interopRequireDefault(_canExplode);
- var _getLastNode = require('../getLastNode');
- var _getLastNode2 = _interopRequireDefault(_getLastNode);
- var _parseWsc = require('../parseWsc');
- var _parseWsc2 = _interopRequireDefault(_parseWsc);
- var _validateWsc = require('../validateWsc');
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- const wsc = ['width', 'style', 'color'];
- const defaults = ['medium', 'none', 'currentcolor'];
- function borderProperty(...parts) {
- return `border-${parts.join('-')}`;
- }
- function mapBorderProperty(value) {
- return borderProperty(value);
- }
- const directions = _trbl2.default.map(mapBorderProperty);
- const properties = wsc.map(mapBorderProperty);
- const directionalProperties = directions.reduce((prev, curr) => prev.concat(wsc.map(prop => `${curr}-${prop}`)), []);
- const precedence = [['border'], directions.concat(properties), directionalProperties];
- const allProperties = precedence.reduce((a, b) => a.concat(b));
- function getLevel(prop) {
- for (let i = 0; i < precedence.length; i++) {
- if (!!~precedence[i].indexOf(prop.toLowerCase())) {
- return i;
- }
- }
- }
- const isValueCustomProp = value => value && !!~value.search(/var\s*\(\s*--/i);
- function canMergeValues(values) {
- return !values.some(isValueCustomProp) || values.every(isValueCustomProp);
- }
- function getColorValue(decl) {
- if (decl.prop.substr(-5) === 'color') {
- return decl.value;
- }
- return (0, _parseWsc2.default)(decl.value)[2] || defaults[2];
- }
- function diffingProps(values, nextValues) {
- return wsc.reduce((prev, curr, i) => {
- if (values[i] === nextValues[i]) {
- return prev;
- }
- return [...prev, curr];
- }, []);
- }
- function mergeRedundant({ values, nextValues, decl, nextDecl, index }) {
- if (!(0, _canMerge2.default)([decl, nextDecl])) {
- return;
- }
- if ((0, _stylehacks.detect)(decl) || (0, _stylehacks.detect)(nextDecl)) {
- return;
- }
- const diff = diffingProps(values, nextValues);
- if (diff.length > 1) {
- return;
- }
- const prop = diff.pop();
- const position = wsc.indexOf(prop);
- const prop1 = `${nextDecl.prop}-${prop}`;
- const prop2 = `border-${prop}`;
- let props = (0, _parseTrbl2.default)(values[position]);
- props[index] = nextValues[position];
- const borderValue2 = values.filter((e, i) => i !== position).join(' ');
- const propValue2 = (0, _minifyTrbl2.default)(props);
- const origLength = ((0, _minifyWsc2.default)(decl.value) + nextDecl.prop + nextDecl.value).length;
- const newLength1 = decl.value.length + prop1.length + (0, _minifyWsc2.default)(nextValues[position]).length;
- const newLength2 = borderValue2.length + prop2.length + propValue2.length;
- if (newLength1 < newLength2 && newLength1 < origLength) {
- nextDecl.prop = prop1;
- nextDecl.value = nextValues[position];
- }
- if (newLength2 < newLength1 && newLength2 < origLength) {
- decl.value = borderValue2;
- nextDecl.prop = prop2;
- nextDecl.value = propValue2;
- }
- }
- function isCloseEnough(mapped) {
- 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];
- }
- function getDistinctShorthands(mapped) {
- return mapped.reduce((a, b) => {
- a = Array.isArray(a) ? a : [a];
- if (!~a.indexOf(b)) {
- a.push(b);
- }
- return a;
- });
- }
- function explode(rule) {
- rule.walkDecls(/^border/i, decl => {
- if (!(0, _canExplode2.default)(decl, false)) {
- return;
- }
- if ((0, _stylehacks.detect)(decl)) {
- return;
- }
- const prop = decl.prop.toLowerCase();
- // border -> border-trbl
- if (prop === 'border') {
- if ((0, _validateWsc.isValidWsc)((0, _parseWsc2.default)(decl.value))) {
- directions.forEach(direction => {
- (0, _insertCloned2.default)(decl.parent, decl, { prop: direction });
- });
- return decl.remove();
- }
- }
- // border-trbl -> border-trbl-wsc
- if (directions.some(direction => prop === direction)) {
- let values = (0, _parseWsc2.default)(decl.value);
- if ((0, _validateWsc.isValidWsc)(values)) {
- wsc.forEach((d, i) => {
- (0, _insertCloned2.default)(decl.parent, decl, {
- prop: `${prop}-${d}`,
- value: values[i] || defaults[i]
- });
- });
- return decl.remove();
- }
- }
- // border-wsc -> border-trbl-wsc
- wsc.some(style => {
- if (prop !== borderProperty(style)) {
- return false;
- }
- (0, _parseTrbl2.default)(decl.value).forEach((value, i) => {
- (0, _insertCloned2.default)(decl.parent, decl, {
- prop: borderProperty(_trbl2.default[i], style),
- value
- });
- });
- return decl.remove();
- });
- });
- }
- function merge(rule) {
- // border-trbl-wsc -> border-trbl
- _trbl2.default.forEach(direction => {
- const prop = borderProperty(direction);
- (0, _mergeRules2.default)(rule, wsc.map(style => borderProperty(direction, style)), (rules, lastNode) => {
- if ((0, _canMerge2.default)(rules, false) && !rules.some(_stylehacks.detect)) {
- (0, _insertCloned2.default)(lastNode.parent, lastNode, {
- prop,
- value: rules.map(_getValue2.default).join(' ')
- });
- rules.forEach(_remove2.default);
- return true;
- }
- });
- });
- // border-trbl-wsc -> border-wsc
- wsc.forEach(style => {
- const prop = borderProperty(style);
- (0, _mergeRules2.default)(rule, _trbl2.default.map(direction => borderProperty(direction, style)), (rules, lastNode) => {
- if ((0, _canMerge2.default)(rules) && !rules.some(_stylehacks.detect)) {
- (0, _insertCloned2.default)(lastNode.parent, lastNode, {
- prop,
- value: (0, _minifyTrbl2.default)(rules.map(_getValue2.default).join(' '))
- });
- rules.forEach(_remove2.default);
- return true;
- }
- });
- });
- // border-trbl -> border-wsc
- (0, _mergeRules2.default)(rule, directions, (rules, lastNode) => {
- if (rules.some(_stylehacks.detect)) {
- return;
- }
- const values = rules.map(({ value }) => value);
- if (!canMergeValues(values)) {
- return;
- }
- const parsed = values.map(value => (0, _parseWsc2.default)(value));
- if (!parsed.every(_validateWsc.isValidWsc)) {
- return;
- }
- wsc.forEach((d, i) => {
- const value = parsed.map(v => v[i] || defaults[i]);
- if (canMergeValues(value)) {
- (0, _insertCloned2.default)(lastNode.parent, lastNode, {
- prop: borderProperty(d),
- value: (0, _minifyTrbl2.default)(value)
- });
- } else {
- (0, _insertCloned2.default)(lastNode.parent, lastNode);
- }
- });
- rules.forEach(_remove2.default);
- return true;
- });
- // border-wsc -> border
- // border-wsc -> border + border-color
- // border-wsc -> border + border-dir
- (0, _mergeRules2.default)(rule, properties, (rules, lastNode) => {
- if (rules.some(_stylehacks.detect)) {
- return;
- }
- const values = rules.map(node => (0, _parseTrbl2.default)(node.value));
- const mapped = [0, 1, 2, 3].map(i => [values[0][i], values[1][i], values[2][i]].join(' '));
- if (!canMergeValues(mapped)) {
- return;
- }
- const [width, style, color] = rules;
- const reduced = getDistinctShorthands(mapped);
- if (isCloseEnough(mapped) && (0, _canMerge2.default)(rules, false)) {
- const first = mapped.indexOf(reduced[0]) !== mapped.lastIndexOf(reduced[0]);
- const border = (0, _insertCloned2.default)(lastNode.parent, lastNode, {
- prop: 'border',
- value: first ? reduced[0] : reduced[1]
- });
- if (reduced[1]) {
- const value = first ? reduced[1] : reduced[0];
- const prop = borderProperty(_trbl2.default[mapped.indexOf(value)]);
- rule.insertAfter(border, Object.assign(lastNode.clone(), {
- prop,
- value
- }));
- }
- rules.forEach(_remove2.default);
- return true;
- } else if (reduced.length === 1) {
- rule.insertBefore(color, Object.assign(lastNode.clone(), {
- prop: 'border',
- value: [width, style].map(_getValue2.default).join(' ')
- }));
- rules.filter(node => node.prop.toLowerCase() !== properties[2]).forEach(_remove2.default);
- return true;
- }
- });
- // border-wsc -> border + border-trbl
- (0, _mergeRules2.default)(rule, properties, (rules, lastNode) => {
- if (rules.some(_stylehacks.detect)) {
- return;
- }
- const values = rules.map(node => (0, _parseTrbl2.default)(node.value));
- const mapped = [0, 1, 2, 3].map(i => [values[0][i], values[1][i], values[2][i]].join(' '));
- const reduced = getDistinctShorthands(mapped);
- const none = 'medium none currentcolor';
- if (reduced.length > 1 && reduced.length < 4 && reduced.includes(none)) {
- const filtered = mapped.filter(p => p !== none);
- const mostCommon = reduced.sort((a, b) => mapped.filter(v => v === b).length - mapped.filter(v => v === a).length)[0];
- const borderValue = reduced.length === 2 ? filtered[0] : mostCommon;
- rule.insertBefore(lastNode, Object.assign(lastNode.clone(), {
- prop: 'border',
- value: borderValue
- }));
- directions.forEach((dir, i) => {
- if (mapped[i] !== borderValue) {
- rule.insertBefore(lastNode, Object.assign(lastNode.clone(), {
- prop: dir,
- value: mapped[i]
- }));
- }
- });
- rules.forEach(_remove2.default);
- return true;
- }
- });
- // border-trbl -> border
- // border-trbl -> border + border-trbl
- (0, _mergeRules2.default)(rule, directions, (rules, lastNode) => {
- if (rules.some(_stylehacks.detect)) {
- return;
- }
- const values = rules.map(node => {
- const wscValue = (0, _parseWsc2.default)(node.value);
- if (!(0, _validateWsc.isValidWsc)(wscValue)) {
- return node.value;
- }
- return wscValue.map((value, i) => value || defaults[i]).join(' ');
- });
- const reduced = getDistinctShorthands(values);
- if (isCloseEnough(values)) {
- const first = values.indexOf(reduced[0]) !== values.lastIndexOf(reduced[0]);
- rule.insertBefore(lastNode, Object.assign(lastNode.clone(), {
- prop: 'border',
- value: (0, _minifyWsc2.default)(first ? values[0] : values[1])
- }));
- if (reduced[1]) {
- const value = first ? reduced[1] : reduced[0];
- const prop = directions[values.indexOf(value)];
- rule.insertBefore(lastNode, Object.assign(lastNode.clone(), {
- prop: prop,
- value: (0, _minifyWsc2.default)(value)
- }));
- }
- rules.forEach(_remove2.default);
- return true;
- }
- });
- // border-trbl-wsc + border-trbl (custom prop) -> border-trbl + border-trbl-wsc (custom prop)
- directions.forEach(direction => {
- wsc.forEach((style, i) => {
- const prop = `${direction}-${style}`;
- (0, _mergeRules2.default)(rule, [direction, prop], (rules, lastNode) => {
- if (lastNode.prop !== direction) {
- return;
- }
- const values = (0, _parseWsc2.default)(lastNode.value);
- if (!(0, _validateWsc.isValidWsc)(values)) {
- return;
- }
- const wscProp = rules.filter(r => r !== lastNode)[0];
- if (!isValueCustomProp(values[i]) || (0, _isCustomProp2.default)(wscProp)) {
- return;
- }
- const wscValue = values[i];
- values[i] = wscProp.value;
- if ((0, _canMerge2.default)(rules, false) && !rules.some(_stylehacks.detect)) {
- (0, _insertCloned2.default)(lastNode.parent, lastNode, {
- prop,
- value: wscValue
- });
- lastNode.value = (0, _minifyWsc2.default)(values);
- wscProp.remove();
- return true;
- }
- });
- });
- });
- // border-wsc + border (custom prop) -> border + border-wsc (custom prop)
- wsc.forEach((style, i) => {
- const prop = borderProperty(style);
- (0, _mergeRules2.default)(rule, ['border', prop], (rules, lastNode) => {
- if (lastNode.prop !== 'border') {
- return;
- }
- const values = (0, _parseWsc2.default)(lastNode.value);
- if (!(0, _validateWsc.isValidWsc)(values)) {
- return;
- }
- const wscProp = rules.filter(r => r !== lastNode)[0];
- if (!isValueCustomProp(values[i]) || (0, _isCustomProp2.default)(wscProp)) {
- return;
- }
- const wscValue = values[i];
- values[i] = wscProp.value;
- if ((0, _canMerge2.default)(rules, false) && !rules.some(_stylehacks.detect)) {
- (0, _insertCloned2.default)(lastNode.parent, lastNode, {
- prop,
- value: wscValue
- });
- lastNode.value = (0, _minifyWsc2.default)(values);
- wscProp.remove();
- return true;
- }
- });
- });
- // optimize border-trbl
- let decls = (0, _getDecls2.default)(rule, directions);
- while (decls.length) {
- const lastNode = decls[decls.length - 1];
- wsc.forEach((d, i) => {
- const names = directions.filter(name => name !== lastNode.prop).map(name => `${name}-${d}`);
- let nodes = rule.nodes.slice(0, rule.nodes.indexOf(lastNode));
- const border = (0, _getLastNode2.default)(nodes, 'border');
- if (border) {
- nodes = nodes.slice(nodes.indexOf(border));
- }
- const props = nodes.filter(node => node.prop && ~names.indexOf(node.prop) && node.important === lastNode.important);
- const rules = (0, _getRules2.default)(props, names);
- if ((0, _hasAllProps2.default)(rules, ...names) && !rules.some(_stylehacks.detect)) {
- const values = rules.map(node => node ? node.value : null);
- const filteredValues = values.filter(Boolean);
- const lastNodeValue = _postcss.list.space(lastNode.value)[i];
- values[directions.indexOf(lastNode.prop)] = lastNodeValue;
- let value = (0, _minifyTrbl2.default)(values.join(' '));
- if (filteredValues[0] === filteredValues[1] && filteredValues[1] === filteredValues[2]) {
- value = filteredValues[0];
- }
- let refNode = props[props.length - 1];
- if (value === lastNodeValue) {
- refNode = lastNode;
- let valueArray = _postcss.list.space(lastNode.value);
- valueArray.splice(i, 1);
- lastNode.value = valueArray.join(' ');
- }
- (0, _insertCloned2.default)(refNode.parent, refNode, {
- prop: borderProperty(d),
- value
- });
- decls = decls.filter(node => !~rules.indexOf(node));
- rules.forEach(_remove2.default);
- }
- });
- decls = decls.filter(node => node !== lastNode);
- }
- rule.walkDecls('border', decl => {
- const nextDecl = decl.next();
- if (!nextDecl || nextDecl.type !== 'decl') {
- return;
- }
- const index = directions.indexOf(nextDecl.prop);
- if (!~index) {
- return;
- }
- const values = (0, _parseWsc2.default)(decl.value);
- const nextValues = (0, _parseWsc2.default)(nextDecl.value);
- if (!(0, _validateWsc.isValidWsc)(values) || !(0, _validateWsc.isValidWsc)(nextValues)) {
- return;
- }
- const config = {
- values,
- nextValues,
- decl,
- nextDecl,
- index
- };
- return mergeRedundant(config);
- });
- rule.walkDecls(/^border($|-(top|right|bottom|left)$)/i, decl => {
- let values = (0, _parseWsc2.default)(decl.value);
- if (!(0, _validateWsc.isValidWsc)(values)) {
- return;
- }
- const position = directions.indexOf(decl.prop);
- let dirs = [...directions];
- dirs.splice(position, 1);
- wsc.forEach((d, i) => {
- const props = dirs.map(dir => `${dir}-${d}`);
- (0, _mergeRules2.default)(rule, [decl.prop, ...props], rules => {
- if (!rules.includes(decl)) {
- return;
- }
- const longhands = rules.filter(p => p !== decl);
- if (longhands[0].value.toLowerCase() === longhands[1].value.toLowerCase() && longhands[1].value.toLowerCase() === longhands[2].value.toLowerCase() && longhands[0].value.toLowerCase() === values[i].toLowerCase()) {
- longhands.forEach(_remove2.default);
- (0, _insertCloned2.default)(decl.parent, decl, {
- prop: borderProperty(d),
- value: values[i]
- });
- values[i] = null;
- }
- });
- const newValue = values.join(' ');
- if (newValue) {
- decl.value = newValue;
- } else {
- decl.remove();
- }
- });
- });
- // clean-up values
- rule.walkDecls(/^border($|-(top|right|bottom|left)$)/i, decl => {
- decl.value = (0, _minifyWsc2.default)(decl.value);
- });
- // border-spacing-hv -> border-spacing
- rule.walkDecls(/^border-spacing$/i, decl => {
- const value = _postcss.list.space(decl.value);
- // merge vertical and horizontal dups
- if (value.length > 1 && value[0] === value[1]) {
- decl.value = value.slice(1).join(' ');
- }
- });
- // clean-up rules
- decls = (0, _getDecls2.default)(rule, allProperties);
- while (decls.length) {
- const lastNode = decls[decls.length - 1];
- const lastPart = lastNode.prop.split('-').pop();
- // remove properties of lower precedence
- 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)));
- lesser.forEach(_remove2.default);
- decls = decls.filter(node => !~lesser.indexOf(node));
- // get duplicate properties
- 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)));
- if (duplicates.length) {
- if (/hsla\(|rgba\(/i.test(getColorValue(lastNode))) {
- const preserve = duplicates.filter(node => !/hsla\(|rgba\(/i.test(getColorValue(node))).pop();
- duplicates = duplicates.filter(node => node !== preserve);
- }
- duplicates.forEach(_remove2.default);
- }
- decls = decls.filter(node => node !== lastNode && !~duplicates.indexOf(node));
- }
- }
- exports.default = {
- explode,
- merge
- };
- module.exports = exports['default'];
|