| 'use strict'; |
| const { list } = require('postcss'); |
| const stylehacks = require('stylehacks'); |
| const insertCloned = require('../insertCloned.js'); |
| const parseTrbl = require('../parseTrbl.js'); |
| const hasAllProps = require('../hasAllProps.js'); |
| const getDecls = require('../getDecls.js'); |
| const getRules = require('../getRules.js'); |
| const getValue = require('../getValue.js'); |
| const mergeRules = require('../mergeRules.js'); |
| const minifyTrbl = require('../minifyTrbl.js'); |
| const minifyWsc = require('../minifyWsc.js'); |
| const canMerge = require('../canMerge.js'); |
| const trbl = require('../trbl.js'); |
| const isCustomProp = require('../isCustomProp.js'); |
| const canExplode = require('../canExplode.js'); |
| const getLastNode = require('../getLastNode.js'); |
| const parseWsc = require('../parseWsc.js'); |
| const { isValidWsc } = require('../validateWsc.js'); |
| |
| const wsc = ['width', 'style', 'color']; |
| const defaults = ['medium', 'none', 'currentcolor']; |
| const colorMightRequireFallback = |
| /(hsla|rgba|color|hwb|lab|lch|oklab|oklch)\(/i; |
| |
| /** |
| * @param {...string} parts |
| * @return {string} |
| */ |
| function borderProperty(...parts) { |
| return `border-${parts.join('-')}`; |
| } |
| /** |
| * @param {string} value |
| * @return {string} |
| */ |
| function mapBorderProperty(value) { |
| return borderProperty(value); |
| } |
| |
| const directions = trbl.map(mapBorderProperty); |
| const properties = wsc.map(mapBorderProperty); |
| /** @type {string[]} */ |
| const directionalProperties = directions.reduce( |
| (prev, curr) => prev.concat(wsc.map((prop) => `${curr}-${prop}`)), |
| /** @type {string[]} */ ([]) |
| ); |
| |
| const precedence = [ |
| ['border'], |
| directions.concat(properties), |
| directionalProperties, |
| ]; |
| |
| const allProperties = precedence.reduce((a, b) => a.concat(b)); |
| |
| /** |
| * @param {string} prop |
| * @return {number | undefined} |
| */ |
| function getLevel(prop) { |
| for (let i = 0; i < precedence.length; i++) { |
| if (precedence[i].includes(prop.toLowerCase())) { |
| return i; |
| } |
| } |
| } |
| |
| /** @type {(value: string) => boolean} */ |
| const isValueCustomProp = (value) => |
| value !== undefined && value.search(/var\s*\(\s*--/i) !== -1; |
| |
| /** |
| * @param {string[]} values |
| * @return {boolean} |
| */ |
| function canMergeValues(values) { |
| return !values.some(isValueCustomProp); |
| } |
| |
| /** |
| * @param {import('postcss').Declaration} decl |
| * @return {string} |
| */ |
| function getColorValue(decl) { |
| if (decl.prop.substr(-5) === 'color') { |
| return decl.value; |
| } |
| |
| return parseWsc(decl.value)[2] || defaults[2]; |
| } |
| |
| /** |
| * @param {[string, string, string]} values |
| * @param {[string, string, string]} nextValues |
| * @return {string[]} |
| */ |
| function diffingProps(values, nextValues) { |
| return wsc.reduce((prev, curr, i) => { |
| if (values[i] === nextValues[i]) { |
| return prev; |
| } |
| |
| return [...prev, curr]; |
| }, /** @type {string[]} */ ([])); |
| } |
| |
| /** |
| * @param {{values: [string, string, string], nextValues: [string, string, string], decl: import('postcss').Declaration, nextDecl: import('postcss').Declaration, index: number}} arg |
| * @return {void} |
| */ |
| function mergeRedundant({ values, nextValues, decl, nextDecl, index }) { |
| if (!canMerge([decl, nextDecl])) { |
| return; |
| } |
| |
| if (stylehacks.detect(decl) || stylehacks.detect(nextDecl)) { |
| return; |
| } |
| |
| const diff = diffingProps(values, nextValues); |
| |
| if (diff.length !== 1) { |
| return; |
| } |
| |
| const prop = /** @type {string} */ (diff.pop()); |
| const position = wsc.indexOf(prop); |
| |
| const prop1 = `${nextDecl.prop}-${prop}`; |
| const prop2 = `border-${prop}`; |
| |
| let props = parseTrbl(values[position]); |
| |
| props[index] = nextValues[position]; |
| |
| const borderValue2 = values.filter((e, i) => i !== position).join(' '); |
| const propValue2 = minifyTrbl(props); |
| |
| const origLength = (minifyWsc(decl.value) + nextDecl.prop + nextDecl.value) |
| .length; |
| const newLength1 = |
| decl.value.length + prop1.length + minifyWsc(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; |
| } |
| } |
| |
| /** |
| * @param {string | string[]} mapped |
| * @return {boolean} |
| */ |
| 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]) |
| ); |
| } |
| |
| /** |
| * @param {string[]} mapped |
| * @return {string[]} |
| */ |
| function getDistinctShorthands(mapped) { |
| return [...new Set(mapped)]; |
| } |
| /** |
| * @param {import('postcss').Rule} rule |
| * @return {void} |
| */ |
| function explode(rule) { |
| rule.walkDecls(/^border/i, (decl) => { |
| if (!canExplode(decl, false)) { |
| return; |
| } |
| |
| if (stylehacks.detect(decl)) { |
| return; |
| } |
| |
| const prop = decl.prop.toLowerCase(); |
| |
| // border -> border-trbl |
| if (prop === 'border') { |
| if (isValidWsc(parseWsc(decl.value))) { |
| directions.forEach((direction) => { |
| insertCloned( |
| /** @type {import('postcss').Rule} */ (decl.parent), |
| decl, |
| { prop: direction } |
| ); |
| }); |
| |
| decl.remove(); |
| } |
| } |
| |
| // border-trbl -> border-trbl-wsc |
| if (directions.some((direction) => prop === direction)) { |
| let values = parseWsc(decl.value); |
| |
| if (isValidWsc(values)) { |
| wsc.forEach((d, i) => { |
| insertCloned( |
| /** @type {import('postcss').Rule} */ (decl.parent), |
| decl, |
| { |
| prop: `${prop}-${d}`, |
| value: values[i] || defaults[i], |
| } |
| ); |
| }); |
| |
| decl.remove(); |
| } |
| } |
| |
| // border-wsc -> border-trbl-wsc |
| wsc.some((style) => { |
| if (prop !== borderProperty(style)) { |
| return false; |
| } |
| |
| if (isCustomProp(decl)) { |
| decl.prop = decl.prop.toLowerCase(); |
| return false; |
| } |
| parseTrbl(decl.value).forEach((value, i) => { |
| insertCloned( |
| /** @type {import('postcss').Rule} */ (decl.parent), |
| decl, |
| { |
| prop: borderProperty(trbl[i], style), |
| value, |
| } |
| ); |
| }); |
| |
| return decl.remove(); |
| }); |
| }); |
| } |
| |
| /** |
| * @param {import('postcss').Rule} rule |
| * @return {void} |
| */ |
| function merge(rule) { |
| // border-trbl-wsc -> border-trbl |
| trbl.forEach((direction) => { |
| const prop = borderProperty(direction); |
| |
| mergeRules( |
| rule, |
| wsc.map((style) => borderProperty(direction, style)), |
| (rules, lastNode) => { |
| if (canMerge(rules, false) && !rules.some(stylehacks.detect)) { |
| insertCloned( |
| /** @type {import('postcss').Rule} */ (lastNode.parent), |
| lastNode, |
| { |
| prop, |
| value: rules.map(getValue).join(' '), |
| } |
| ); |
| for (const node of rules) { |
| node.remove(); |
| } |
| |
| return true; |
| } |
| return false; |
| } |
| ); |
| }); |
| |
| // border-trbl-wsc -> border-wsc |
| wsc.forEach((style) => { |
| const prop = borderProperty(style); |
| |
| mergeRules( |
| rule, |
| trbl.map((direction) => borderProperty(direction, style)), |
| (rules, lastNode) => { |
| if (canMerge(rules) && !rules.some(stylehacks.detect)) { |
| insertCloned( |
| /** @type {import('postcss').Rule} */ (lastNode.parent), |
| lastNode, |
| { |
| prop, |
| value: minifyTrbl(rules.map(getValue).join(' ')), |
| } |
| ); |
| |
| for (const node of rules) { |
| node.remove(); |
| } |
| |
| return true; |
| } |
| return false; |
| } |
| ); |
| }); |
| |
| // border-trbl -> border-wsc |
| mergeRules(rule, directions, (rules, lastNode) => { |
| if (rules.some(stylehacks.detect)) { |
| return false; |
| } |
| |
| const values = rules.map(({ value }) => value); |
| |
| if (!canMergeValues(values)) { |
| return false; |
| } |
| |
| const parsed = values.map((value) => parseWsc(value)); |
| |
| if (!parsed.every(isValidWsc)) { |
| return false; |
| } |
| |
| wsc.forEach((d, i) => { |
| const value = parsed.map((v) => v[i] || defaults[i]); |
| |
| if (canMergeValues(value)) { |
| insertCloned( |
| /** @type {import('postcss').Rule} */ (lastNode.parent), |
| lastNode, |
| { |
| prop: borderProperty(d), |
| value: minifyTrbl( |
| /** @type {[string, string, string, string]} */ (value) |
| ), |
| } |
| ); |
| } else { |
| insertCloned( |
| /** @type {import('postcss').Rule} */ (lastNode.parent), |
| lastNode |
| ); |
| } |
| }); |
| |
| for (const node of rules) { |
| node.remove(); |
| } |
| |
| return true; |
| }); |
| |
| // border-wsc -> border |
| // border-wsc -> border + border-color |
| // border-wsc -> border + border-dir |
| mergeRules(rule, properties, (rules, lastNode) => { |
| if (rules.some(stylehacks.detect)) { |
| return false; |
| } |
| |
| const values = rules.map((node) => parseTrbl(node.value)); |
| const mapped = [0, 1, 2, 3].map((i) => |
| [values[0][i], values[1][i], values[2][i]].join(' ') |
| ); |
| |
| if (!canMergeValues(mapped)) { |
| return false; |
| } |
| |
| const [width, style, color] = rules; |
| const reduced = getDistinctShorthands(mapped); |
| |
| if (isCloseEnough(mapped) && canMerge(rules, false)) { |
| const first = |
| mapped.indexOf(reduced[0]) !== mapped.lastIndexOf(reduced[0]); |
| |
| const border = insertCloned( |
| /** @type {import('postcss').Rule} */ (lastNode.parent), |
| lastNode, |
| { |
| prop: 'border', |
| value: first ? reduced[0] : reduced[1], |
| } |
| ); |
| |
| if (reduced[1]) { |
| const value = first ? reduced[1] : reduced[0]; |
| const prop = borderProperty(trbl[mapped.indexOf(value)]); |
| |
| rule.insertAfter( |
| border, |
| Object.assign(lastNode.clone(), { |
| prop, |
| value, |
| }) |
| ); |
| } |
| for (const node of rules) { |
| node.remove(); |
| } |
| |
| return true; |
| } else if (reduced.length === 1) { |
| rule.insertBefore( |
| color, |
| Object.assign(lastNode.clone(), { |
| prop: 'border', |
| value: [width, style].map(getValue).join(' '), |
| }) |
| ); |
| rules |
| .filter((node) => node.prop.toLowerCase() !== properties[2]) |
| .forEach((node) => node.remove()); |
| |
| return true; |
| } |
| return false; |
| }); |
| |
| // border-wsc -> border + border-trbl |
| mergeRules(rule, properties, (rules, lastNode) => { |
| if (rules.some(stylehacks.detect)) { |
| return false; |
| } |
| |
| const values = rules.map((node) => parseTrbl(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], |
| }) |
| ); |
| } |
| }); |
| |
| for (const node of rules) { |
| node.remove(); |
| } |
| |
| return true; |
| } |
| return false; |
| }); |
| |
| // border-trbl -> border |
| // border-trbl -> border + border-trbl |
| mergeRules(rule, directions, (rules, lastNode) => { |
| if (rules.some(stylehacks.detect)) { |
| return false; |
| } |
| |
| const values = rules.map((node) => { |
| const wscValue = parseWsc(node.value); |
| |
| if (!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: minifyWsc(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: minifyWsc(value), |
| }) |
| ); |
| } |
| |
| for (const node of rules) { |
| node.remove(); |
| } |
| |
| return true; |
| } |
| return false; |
| }); |
| |
| // 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}`; |
| |
| mergeRules(rule, [direction, prop], (rules, lastNode) => { |
| if (lastNode.prop !== direction) { |
| return false; |
| } |
| |
| const values = parseWsc(lastNode.value); |
| |
| if (!isValidWsc(values)) { |
| return false; |
| } |
| |
| const wscProp = rules.filter((r) => r !== lastNode)[0]; |
| |
| if (!isValueCustomProp(values[i]) || isCustomProp(wscProp)) { |
| return false; |
| } |
| |
| const wscValue = values[i]; |
| |
| values[i] = wscProp.value; |
| |
| if (canMerge(rules, false) && !rules.some(stylehacks.detect)) { |
| insertCloned( |
| /** @type {import('postcss').Rule} */ (lastNode.parent), |
| lastNode, |
| { |
| prop, |
| value: wscValue, |
| } |
| ); |
| lastNode.value = minifyWsc(/** @type {any} */ (values)); |
| |
| wscProp.remove(); |
| |
| return true; |
| } |
| return false; |
| }); |
| }); |
| }); |
| |
| // border-wsc + border (custom prop) -> border + border-wsc (custom prop) |
| wsc.forEach((style, i) => { |
| const prop = borderProperty(style); |
| mergeRules(rule, ['border', prop], (rules, lastNode) => { |
| if (lastNode.prop !== 'border') { |
| return false; |
| } |
| |
| const values = parseWsc(lastNode.value); |
| |
| if (!isValidWsc(values)) { |
| return false; |
| } |
| |
| const wscProp = rules.filter((r) => r !== lastNode)[0]; |
| |
| if (!isValueCustomProp(values[i]) || isCustomProp(wscProp)) { |
| return false; |
| } |
| |
| const wscValue = values[i]; |
| |
| values[i] = wscProp.value; |
| |
| if (canMerge(rules, false) && !rules.some(stylehacks.detect)) { |
| insertCloned( |
| /** @type {import('postcss').Rule} */ (lastNode.parent), |
| lastNode, |
| { |
| prop, |
| value: wscValue, |
| } |
| ); |
| lastNode.value = minifyWsc(/** @type {any} */ (values)); |
| wscProp.remove(); |
| |
| return true; |
| } |
| return false; |
| }); |
| }); |
| |
| // optimize border-trbl |
| let decls = getDecls(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 = getLastNode(nodes, 'border'); |
| |
| if (border) { |
| nodes = nodes.slice(nodes.indexOf(border)); |
| } |
| |
| const props = nodes.filter( |
| (node) => |
| node.type === 'decl' && |
| names.includes(node.prop) && |
| node.important === lastNode.important |
| ); |
| const rules = getRules( |
| /** @type {import('postcss').Declaration[]} */ (props), |
| names |
| ); |
| |
| if (hasAllProps(rules, ...names) && !rules.some(stylehacks.detect)) { |
| const values = rules.map((node) => (node ? node.value : null)); |
| const filteredValues = values.filter(Boolean); |
| const lastNodeValue = list.space(lastNode.value)[i]; |
| |
| values[directions.indexOf(lastNode.prop)] = lastNodeValue; |
| |
| let value = minifyTrbl(values.join(' ')); |
| |
| if ( |
| filteredValues[0] === filteredValues[1] && |
| filteredValues[1] === filteredValues[2] |
| ) { |
| value = /** @type {string} */ (filteredValues[0]); |
| } |
| |
| let refNode = props[props.length - 1]; |
| |
| if (value === lastNodeValue) { |
| refNode = lastNode; |
| let valueArray = list.space(lastNode.value); |
| valueArray.splice(i, 1); |
| lastNode.value = valueArray.join(' '); |
| } |
| |
| insertCloned( |
| /** @type {import('postcss').Rule} */ (refNode.parent), |
| /** @type {import('postcss').Declaration} */ (refNode), |
| { |
| prop: borderProperty(d), |
| value, |
| } |
| ); |
| |
| decls = decls.filter((node) => !rules.includes(node)); |
| for (const node of rules) { |
| node.remove(); |
| } |
| } |
| }); |
| |
| decls = decls.filter((node) => node !== lastNode); |
| } |
| |
| rule.walkDecls('border', (decl) => { |
| const nextDecl = decl.next(); |
| |
| if (!nextDecl || nextDecl.type !== 'decl') { |
| return false; |
| } |
| |
| const index = directions.indexOf(nextDecl.prop); |
| |
| if (index === -1) { |
| return; |
| } |
| |
| const values = parseWsc(decl.value); |
| const nextValues = parseWsc(nextDecl.value); |
| |
| if (!isValidWsc(values) || !isValidWsc(nextValues)) { |
| return; |
| } |
| |
| const config = { |
| values, |
| nextValues, |
| decl, |
| nextDecl, |
| index, |
| }; |
| |
| return mergeRedundant(config); |
| }); |
| |
| rule.walkDecls(/^border($|-(top|right|bottom|left)$)/i, (decl) => { |
| let values = parseWsc(decl.value); |
| |
| if (!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}`); |
| |
| mergeRules(rule, [decl.prop, ...props], (rules) => { |
| if (!rules.includes(decl)) { |
| return false; |
| } |
| |
| const longhands = rules.filter((p) => p !== decl); |
| |
| if ( |
| longhands[0].value.toLowerCase() === |
| longhands[1].value.toLowerCase() && |
| longhands[1].value.toLowerCase() === |
| longhands[2].value.toLowerCase() && |
| values[i] !== undefined && |
| longhands[0].value.toLowerCase() === values[i].toLowerCase() |
| ) { |
| for (const node of longhands) { |
| node.remove(); |
| } |
| |
| insertCloned( |
| /** @type {import('postcss').Rule} */ (decl.parent), |
| decl, |
| { |
| prop: borderProperty(d), |
| value: values[i], |
| } |
| ); |
| |
| /** @type {string|null} */ (values[i]) = null; |
| } |
| return false; |
| }); |
| |
| 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 = minifyWsc(decl.value); |
| }); |
| |
| // border-spacing-hv -> border-spacing |
| rule.walkDecls(/^border-spacing$/i, (decl) => { |
| const value = 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 = getDecls(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) => |
| !stylehacks.detect(lastNode) && |
| !stylehacks.detect(node) && |
| !isCustomProp(lastNode) && |
| node !== lastNode && |
| node.important === lastNode.important && |
| /** @type {number} */ (getLevel(node.prop)) > |
| /** @type {number} */ (getLevel(lastNode.prop)) && |
| (node.prop.toLowerCase().includes(lastNode.prop) || |
| node.prop.toLowerCase().endsWith(/** @type {string} */ (lastPart))) |
| ); |
| |
| for (const node of lesser) { |
| node.remove(); |
| } |
| decls = decls.filter((node) => !lesser.includes(node)); |
| |
| // get duplicate properties |
| let duplicates = decls.filter( |
| (node) => |
| !stylehacks.detect(lastNode) && |
| !stylehacks.detect(node) && |
| node !== lastNode && |
| node.important === lastNode.important && |
| node.prop === lastNode.prop && |
| !(!isCustomProp(node) && isCustomProp(lastNode)) |
| ); |
| |
| if (duplicates.length) { |
| if (colorMightRequireFallback.test(getColorValue(lastNode))) { |
| const preserve = duplicates |
| .filter( |
| (node) => !colorMightRequireFallback.test(getColorValue(node)) |
| ) |
| .pop(); |
| |
| duplicates = duplicates.filter((node) => node !== preserve); |
| } |
| for (const node of duplicates) { |
| node.remove(); |
| } |
| } |
| |
| decls = decls.filter( |
| (node) => node !== lastNode && !duplicates.includes(node) |
| ); |
| } |
| } |
| |
| module.exports = { |
| explode, |
| merge, |
| }; |
