normalize.js 53 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574
  1. "use strict";
  2. const propertyDefinitions = require("./generated/propertyDefinitions");
  3. const { hasVarFunc, isGlobalKeyword, isValidPropertyValue, splitValue } = require("./parsers");
  4. const background = require("./properties/background");
  5. const backgroundColor = require("./properties/backgroundColor");
  6. const backgroundSize = require("./properties/backgroundSize");
  7. const border = require("./properties/border");
  8. const borderWidth = require("./properties/borderWidth");
  9. const borderStyle = require("./properties/borderStyle");
  10. const borderColor = require("./properties/borderColor");
  11. const borderTop = require("./properties/borderTop");
  12. const borderRight = require("./properties/borderRight");
  13. const borderBottom = require("./properties/borderBottom");
  14. const borderLeft = require("./properties/borderLeft");
  15. const flex = require("./properties/flex");
  16. const font = require("./properties/font");
  17. const margin = require("./properties/margin");
  18. const padding = require("./properties/padding");
  19. /* constants */
  20. const BORDER_IMAGE = "border-image";
  21. const TOP = "top";
  22. const RIGHT = "right";
  23. const BOTTOM = "bottom";
  24. const LEFT = "left";
  25. const WIDTH = "width";
  26. const STYLE = "style";
  27. const COLOR = "color";
  28. const NONE = "none";
  29. const TRBL_INDICES = {
  30. [TOP]: 0,
  31. [RIGHT]: 1,
  32. [BOTTOM]: 2,
  33. [LEFT]: 3
  34. };
  35. /* shorthands */
  36. const shorthandProperties = new Map([
  37. [background.property, background],
  38. [
  39. border.property,
  40. {
  41. definition: border.definition,
  42. parse: border.parse,
  43. shorthandFor: new Map([
  44. ...border.shorthandFor,
  45. ...border.positionShorthandFor,
  46. [BORDER_IMAGE, null]
  47. ])
  48. }
  49. ],
  50. [borderWidth.property, borderWidth],
  51. [borderStyle.property, borderStyle],
  52. [borderColor.property, borderColor],
  53. [borderTop.property, borderTop],
  54. [borderRight.property, borderRight],
  55. [borderBottom.property, borderBottom],
  56. [borderLeft.property, borderLeft],
  57. ["flex", flex],
  58. ["font", font],
  59. ["margin", margin],
  60. ["padding", padding]
  61. ]);
  62. /* borders */
  63. const borderProperties = new Set([
  64. border.property,
  65. BORDER_IMAGE,
  66. ...border.shorthandFor.keys(),
  67. ...border.positionShorthandFor.keys(),
  68. ...borderTop.shorthandFor.keys(),
  69. ...borderRight.shorthandFor.keys(),
  70. ...borderBottom.shorthandFor.keys(),
  71. ...borderLeft.shorthandFor.keys()
  72. ]);
  73. const borderPositions = new Set([TOP, RIGHT, BOTTOM, LEFT]);
  74. const borderLines = new Set([WIDTH, STYLE, COLOR]);
  75. /**
  76. * Ensures consistent object shape.
  77. *
  78. * @param {string} property - The property name.
  79. * @param {string} [value=""] - The property value.
  80. * @param {string} [priority=""] - The priority.
  81. * @returns {Object} The property item object.
  82. */
  83. const createPropertyItem = (property, value = "", priority = "") => ({
  84. property,
  85. value,
  86. priority
  87. });
  88. /**
  89. * Retrieves a property item from the map or creates a default one if it doesn't exist.
  90. *
  91. * @param {string} property - The name of the property.
  92. * @param {Map} properties - The map containing all properties.
  93. * @returns {Object} The property item containing name, value, and priority.
  94. */
  95. const getPropertyItem = (property, properties) => {
  96. const propertyItem = properties.get(property) ?? createPropertyItem(property);
  97. return propertyItem;
  98. };
  99. /**
  100. * Calculates the value for a specific position (top, right, bottom, left)
  101. * based on the array of values provided for a shorthand property.
  102. *
  103. * @param {string[]} positionValues - The values extracted from the shorthand property.
  104. * @param {string} position - The specific position (top, right, bottom, left) to retrieve.
  105. * @returns {string} The calculated value for the position.
  106. */
  107. const getPositionValue = (positionValues, position) => {
  108. const [val1, val2, val3, val4] = positionValues;
  109. const index = TRBL_INDICES[position] ?? -1;
  110. // If a specific position (top, right, bottom, left) is requested.
  111. if (index !== -1) {
  112. switch (positionValues.length) {
  113. case 2: {
  114. // Index 0 (Top) & 2 (Bottom) -> val1
  115. // Index 1 (Right) & 3 (Left) -> val2
  116. return index % 2 === 0 ? val1 : val2;
  117. }
  118. case 3: {
  119. // Index 0 (Top) -> val1
  120. // Index 1 (Right) & 3 (Left) -> val2
  121. // Index 2 (Bottom) -> val3
  122. if (index === 2) {
  123. return val3;
  124. }
  125. return index % 2 === 0 ? val1 : val2;
  126. }
  127. case 4: {
  128. return positionValues[index];
  129. }
  130. case 1:
  131. default: {
  132. return val1;
  133. }
  134. }
  135. }
  136. // Fallback logic for when no specific position is requested.
  137. switch (positionValues.length) {
  138. case 2: {
  139. if (val1 === val2) {
  140. return val1;
  141. }
  142. return `${val1} ${val2}`;
  143. }
  144. case 3: {
  145. if (val1 === val3) {
  146. if (val1 === val2) {
  147. return val1;
  148. }
  149. return `${val1} ${val2}`;
  150. }
  151. return `${val1} ${val2} ${val3}`;
  152. }
  153. case 4: {
  154. if (val2 === val4) {
  155. if (val1 === val3) {
  156. if (val1 === val2) {
  157. return val1;
  158. }
  159. return `${val1} ${val2}`;
  160. }
  161. return `${val1} ${val2} ${val3}`;
  162. }
  163. return `${val1} ${val2} ${val3} ${val4}`;
  164. }
  165. case 1:
  166. default: {
  167. return val1;
  168. }
  169. }
  170. };
  171. /**
  172. * Replaces the background shorthand property based on individual longhand values.
  173. *
  174. * @param {string} property - The specific background longhand property being updated.
  175. * @param {Map} properties - The map of all properties.
  176. * @param {Object} opt - Parsing options including global object and configurations.
  177. * @returns {string} The constructed background shorthand string.
  178. */
  179. const replaceBackgroundShorthand = (property, properties, opt) => {
  180. const { value: propertyValue } = properties.get(property);
  181. const parsedValue = background.shorthandFor.get(property).parse(propertyValue, opt);
  182. const values = splitValue(parsedValue, {
  183. delimiter: ","
  184. });
  185. const { value: shorthandValue } = properties.get(background.property);
  186. const bgValues = background.parse(shorthandValue, opt);
  187. const bgLength = bgValues.length;
  188. if (property === backgroundColor.property) {
  189. bgValues[bgLength - 1][property] = parsedValue[0];
  190. } else {
  191. for (let i = 0; i < bgLength; i++) {
  192. bgValues[i][property] = values[i];
  193. }
  194. }
  195. const backgrounds = [];
  196. for (const bgValue of bgValues) {
  197. const bg = [];
  198. for (const [longhand, value] of Object.entries(bgValue)) {
  199. if (!value || value === background.initialValues.get(longhand)) {
  200. continue;
  201. }
  202. if (longhand === backgroundSize.property) {
  203. bg.push(`/ ${value}`);
  204. } else {
  205. bg.push(value);
  206. }
  207. }
  208. backgrounds.push(bg.join(" "));
  209. }
  210. return backgrounds.join(", ");
  211. };
  212. /**
  213. * Checks if a property value matches the value within a border shorthand.
  214. *
  215. * @param {string} property - The property to check.
  216. * @param {string} value - The value to compare.
  217. * @param {string} shorthandValue - The shorthand string to parse and compare against.
  218. * @param {Object} [opt={}] - Parsing options.
  219. * @returns {boolean} True if the value matches the shorthand's value.
  220. */
  221. const matchesBorderShorthandValue = (property, value, shorthandValue, opt = {}) => {
  222. const { globalObject, options } = opt;
  223. const obj = border.parse(shorthandValue, {
  224. globalObject,
  225. options
  226. });
  227. if (Object.hasOwn(obj, property)) {
  228. return value === obj[property];
  229. }
  230. return value === border.initialValues.get(property);
  231. };
  232. /**
  233. * Replaces or updates a value within a border shorthand string.
  234. *
  235. * @param {string} value - The new value to insert.
  236. * @param {string} shorthandValue - The existing shorthand string.
  237. * @param {Object} [opt={}] - Parsing options.
  238. * @returns {string} The updated border shorthand string.
  239. */
  240. const replaceBorderShorthandValue = (value, shorthandValue, opt = {}) => {
  241. const { globalObject, options } = opt;
  242. const borderFirstInitialKey = border.initialValues.keys().next().value;
  243. const borderFirstInitialValue = border.initialValues.get(borderFirstInitialKey);
  244. const parseOpt = {
  245. globalObject,
  246. options
  247. };
  248. const valueObj = border.parse(value, parseOpt);
  249. const shorthandObj = shorthandValue
  250. ? border.parse(shorthandValue, parseOpt)
  251. : {
  252. [borderFirstInitialKey]: borderFirstInitialValue
  253. };
  254. const keys = border.shorthandFor.keys();
  255. for (const key of keys) {
  256. const initialValue = border.initialValues.get(key);
  257. let parsedValue = initialValue;
  258. if (Object.hasOwn(valueObj, key)) {
  259. parsedValue = valueObj[key];
  260. }
  261. if (parsedValue === initialValue) {
  262. if (key === borderFirstInitialKey) {
  263. if (!Object.hasOwn(shorthandObj, key)) {
  264. shorthandObj[key] = parsedValue;
  265. }
  266. } else {
  267. delete shorthandObj[key];
  268. }
  269. } else {
  270. shorthandObj[key] = parsedValue;
  271. if (
  272. shorthandObj[borderFirstInitialKey] &&
  273. shorthandObj[borderFirstInitialKey] === borderFirstInitialValue
  274. ) {
  275. delete shorthandObj[borderFirstInitialKey];
  276. }
  277. }
  278. }
  279. return Object.values(shorthandObj).join(" ");
  280. };
  281. /**
  282. * Replaces a value at a specific position (top, right, bottom, left) within a position shorthand.
  283. *
  284. * @param {string} value - The new value to set.
  285. * @param {string[]} positionValues - The array of existing position values.
  286. * @param {string} position - The position to update.
  287. * @returns {string} The updated shorthand string.
  288. */
  289. const replacePositionValue = (value, positionValues, position) => {
  290. const index = TRBL_INDICES[position] ?? -1;
  291. let currentValues = positionValues;
  292. if (index !== -1) {
  293. // Loop for reducing array length (instead of recursion)
  294. while (true) {
  295. const [val1, val2, val3, val4] = currentValues;
  296. switch (currentValues.length) {
  297. case 2: {
  298. if (val1 === val2) {
  299. currentValues = [val1];
  300. continue;
  301. }
  302. switch (index) {
  303. // Top
  304. case 0: {
  305. if (val1 === value) {
  306. return currentValues.join(" ");
  307. }
  308. return `${value} ${val2} ${val1}`;
  309. }
  310. // Right
  311. case 1: {
  312. if (val2 === value) {
  313. return currentValues.join(" ");
  314. }
  315. return `${val1} ${value} ${val1} ${val2}`;
  316. }
  317. // Bottom
  318. case 2: {
  319. if (val1 === value) {
  320. return currentValues.join(" ");
  321. }
  322. return `${val1} ${val2} ${value}`;
  323. }
  324. // Left
  325. case 3:
  326. default: {
  327. if (val2 === value) {
  328. return currentValues.join(" ");
  329. }
  330. return `${val1} ${val2} ${val1} ${value}`;
  331. }
  332. }
  333. }
  334. case 3: {
  335. if (val1 === val3) {
  336. currentValues = [val1, val2];
  337. continue;
  338. }
  339. switch (index) {
  340. // Top
  341. case 0: {
  342. if (val1 === value) {
  343. return currentValues.join(" ");
  344. } else if (val3 === value) {
  345. return `${value} ${val2}`;
  346. }
  347. return `${value} ${val2} ${val3}`;
  348. }
  349. // Right
  350. case 1: {
  351. if (val2 === value) {
  352. return currentValues.join(" ");
  353. }
  354. return `${val1} ${value} ${val3} ${val2}`;
  355. }
  356. // Bottom
  357. case 2: {
  358. if (val3 === value) {
  359. return currentValues.join(" ");
  360. } else if (val1 === value) {
  361. return `${val1} ${val2}`;
  362. }
  363. return `${val1} ${val2} ${value}`;
  364. }
  365. // Left
  366. case 3:
  367. default: {
  368. if (val2 === value) {
  369. return currentValues.join(" ");
  370. }
  371. return `${val1} ${val2} ${val3} ${value}`;
  372. }
  373. }
  374. }
  375. case 4: {
  376. if (val2 === val4) {
  377. currentValues = [val1, val2, val3];
  378. continue;
  379. }
  380. switch (index) {
  381. // Top
  382. case 0: {
  383. if (val1 === value) {
  384. return currentValues.join(" ");
  385. }
  386. return `${value} ${val2} ${val3} ${val4}`;
  387. }
  388. // Right
  389. case 1: {
  390. if (val2 === value) {
  391. return currentValues.join(" ");
  392. } else if (val4 === value) {
  393. return `${val1} ${value} ${val3}`;
  394. }
  395. return `${val1} ${value} ${val3} ${val4}`;
  396. }
  397. // Bottom
  398. case 2: {
  399. if (val3 === value) {
  400. return currentValues.join(" ");
  401. }
  402. return `${val1} ${val2} ${value} ${val4}`;
  403. }
  404. // Left
  405. case 3:
  406. default: {
  407. if (val4 === value) {
  408. return currentValues.join(" ");
  409. } else if (val2 === value) {
  410. return `${val1} ${val2} ${val3}`;
  411. }
  412. return `${val1} ${val2} ${val3} ${value}`;
  413. }
  414. }
  415. }
  416. case 1:
  417. default: {
  418. const [val] = currentValues;
  419. if (val === value) {
  420. return currentValues.join(" ");
  421. }
  422. switch (index) {
  423. // Top
  424. case 0: {
  425. return `${value} ${val} ${val}`;
  426. }
  427. // Right
  428. case 1: {
  429. return `${val} ${value} ${val} ${val}`;
  430. }
  431. // Bottom
  432. case 2: {
  433. return `${val} ${val} ${value}`;
  434. }
  435. // Left
  436. case 3:
  437. default: {
  438. return `${val} ${val} ${val} ${value}`;
  439. }
  440. }
  441. }
  442. }
  443. }
  444. }
  445. // Fallback logic for when no specific position is requested.
  446. const [val1, val2, val3, val4] = currentValues;
  447. switch (currentValues.length) {
  448. case 2: {
  449. if (val1 === val2) {
  450. return val1;
  451. }
  452. return `${val1} ${val2}`;
  453. }
  454. case 3: {
  455. if (val1 === val3) {
  456. if (val1 === val2) {
  457. return val1;
  458. }
  459. return `${val1} ${val2}`;
  460. }
  461. return `${val1} ${val2} ${val3}`;
  462. }
  463. case 4: {
  464. if (val2 === val4) {
  465. if (val1 === val3) {
  466. if (val1 === val2) {
  467. return val1;
  468. }
  469. return `${val1} ${val2}`;
  470. }
  471. return `${val1} ${val2} ${val3}`;
  472. }
  473. return `${val1} ${val2} ${val3} ${val4}`;
  474. }
  475. case 1:
  476. default: {
  477. return val1;
  478. }
  479. }
  480. };
  481. /**
  482. * Handles border property preparation when the value is a string.
  483. *
  484. * @param {Object} params - The parameters object.
  485. * @param {string} params.property - The property name.
  486. * @param {string} params.value - The property value.
  487. * @param {string} params.priority - The property priority.
  488. * @param {Map} params.properties - The map of properties.
  489. * @param {Object} params.parts - The split property name parts.
  490. * @param {Object} params.opt - Parsing options.
  491. * @param {Map} params.borderItems - The map to store processed border items.
  492. */
  493. const prepareBorderStringValue = ({
  494. property,
  495. value,
  496. priority,
  497. properties,
  498. parts,
  499. opt,
  500. borderItems
  501. }) => {
  502. const { prop1, prop2, prop3 } = parts;
  503. const { globalObject, options } = opt;
  504. const parseOpt = {
  505. globalObject,
  506. options
  507. };
  508. const shorthandItem = getPropertyItem(border.property, properties);
  509. const imageItem = getPropertyItem(BORDER_IMAGE, properties);
  510. // Handle longhand properties.
  511. if (prop3) {
  512. const lineProperty = `${prop1}-${prop3}`;
  513. const lineItem = getPropertyItem(lineProperty, properties);
  514. const positionProperty = `${prop1}-${prop2}`;
  515. const positionItem = getPropertyItem(positionProperty, properties);
  516. const longhandProperty = `${prop1}-${prop2}-${prop3}`;
  517. const longhandItem = getPropertyItem(longhandProperty, properties);
  518. longhandItem.value = value;
  519. longhandItem.priority = priority;
  520. const propertyValue = hasVarFunc(value) ? "" : value;
  521. if (propertyValue === "") {
  522. shorthandItem.value = "";
  523. lineItem.value = "";
  524. positionItem.value = "";
  525. } else if (isGlobalKeyword(propertyValue)) {
  526. if (shorthandItem.value !== propertyValue) {
  527. shorthandItem.value = "";
  528. }
  529. if (lineItem.value !== propertyValue) {
  530. lineItem.value = "";
  531. }
  532. if (positionItem.value !== propertyValue) {
  533. positionItem.value = "";
  534. }
  535. } else {
  536. if (
  537. shorthandItem.value &&
  538. !matchesBorderShorthandValue(lineProperty, propertyValue, shorthandItem.value, parseOpt)
  539. ) {
  540. shorthandItem.value = "";
  541. }
  542. if (lineItem.value) {
  543. lineItem.value = replacePositionValue(propertyValue, splitValue(lineItem.value), prop2);
  544. }
  545. if (
  546. positionItem.value &&
  547. !matchesBorderShorthandValue(lineProperty, propertyValue, positionItem.value, parseOpt)
  548. ) {
  549. positionItem.value = "";
  550. }
  551. }
  552. borderItems.set(border.property, shorthandItem);
  553. borderItems.set(BORDER_IMAGE, imageItem);
  554. borderItems.set(lineProperty, lineItem);
  555. borderItems.set(positionProperty, positionItem);
  556. borderItems.set(longhandProperty, longhandItem);
  557. // Handle side-specific border shorthands (border-top, border-right, border-bottom, border-left).
  558. } else if (prop2 && borderPositions.has(prop2)) {
  559. const lineWidthProperty = `${prop1}-width`;
  560. const lineWidthItem = getPropertyItem(lineWidthProperty, properties);
  561. const lineStyleProperty = `${prop1}-style`;
  562. const lineStyleItem = getPropertyItem(lineStyleProperty, properties);
  563. const lineColorProperty = `${prop1}-color`;
  564. const lineColorItem = getPropertyItem(lineColorProperty, properties);
  565. const positionProperty = `${prop1}-${prop2}`;
  566. const positionItem = getPropertyItem(positionProperty, properties);
  567. positionItem.value = value;
  568. positionItem.priority = priority;
  569. const propertyValue = hasVarFunc(value) ? "" : value;
  570. if (propertyValue === "") {
  571. shorthandItem.value = "";
  572. lineWidthItem.value = "";
  573. lineStyleItem.value = "";
  574. lineColorItem.value = "";
  575. } else if (isGlobalKeyword(propertyValue)) {
  576. if (shorthandItem.value !== propertyValue) {
  577. shorthandItem.value = "";
  578. }
  579. if (lineWidthItem.value !== propertyValue) {
  580. lineWidthItem.value = "";
  581. }
  582. if (lineStyleItem.value !== propertyValue) {
  583. lineStyleItem.value = "";
  584. }
  585. if (lineColorItem.value !== propertyValue) {
  586. lineColorItem.value = "";
  587. }
  588. } else {
  589. if (
  590. shorthandItem.value &&
  591. !matchesBorderShorthandValue(property, propertyValue, shorthandItem.value, parseOpt)
  592. ) {
  593. shorthandItem.value = "";
  594. }
  595. if (
  596. lineWidthItem.value &&
  597. isValidPropertyValue(lineWidthProperty, propertyValue, globalObject)
  598. ) {
  599. lineWidthItem.value = propertyValue;
  600. }
  601. if (
  602. lineStyleItem.value &&
  603. isValidPropertyValue(lineStyleProperty, propertyValue, globalObject)
  604. ) {
  605. lineStyleItem.value = propertyValue;
  606. }
  607. if (
  608. lineColorItem.value &&
  609. isValidPropertyValue(lineColorProperty, propertyValue, globalObject)
  610. ) {
  611. lineColorItem.value = propertyValue;
  612. }
  613. }
  614. for (const line of borderLines) {
  615. const longhandProperty = `${prop1}-${prop2}-${line}`;
  616. const longhandItem = getPropertyItem(longhandProperty, properties);
  617. longhandItem.value = propertyValue;
  618. longhandItem.priority = priority;
  619. borderItems.set(longhandProperty, longhandItem);
  620. }
  621. borderItems.set(border.property, shorthandItem);
  622. borderItems.set(BORDER_IMAGE, imageItem);
  623. borderItems.set(lineWidthProperty, lineWidthItem);
  624. borderItems.set(lineStyleProperty, lineStyleItem);
  625. borderItems.set(lineColorProperty, lineColorItem);
  626. borderItems.set(positionProperty, positionItem);
  627. // Handle property-specific border shorthands (border-width, border-style, border-color).
  628. } else if (prop2 && borderLines.has(prop2)) {
  629. const lineProperty = `${prop1}-${prop2}`;
  630. const lineItem = getPropertyItem(lineProperty, properties);
  631. lineItem.value = value;
  632. lineItem.priority = priority;
  633. const propertyValue = hasVarFunc(value) ? "" : value;
  634. if (propertyValue === "") {
  635. shorthandItem.value = "";
  636. } else if (isGlobalKeyword(propertyValue)) {
  637. if (shorthandItem.value !== propertyValue) {
  638. shorthandItem.value = "";
  639. }
  640. }
  641. for (const position of borderPositions) {
  642. const positionProperty = `${prop1}-${position}`;
  643. const positionItem = getPropertyItem(positionProperty, properties);
  644. const longhandProperty = `${prop1}-${position}-${prop2}`;
  645. const longhandItem = getPropertyItem(longhandProperty, properties);
  646. if (propertyValue) {
  647. positionItem.value = replaceBorderShorthandValue(
  648. propertyValue,
  649. positionItem.value,
  650. parseOpt
  651. );
  652. } else {
  653. positionItem.value = "";
  654. }
  655. longhandItem.value = propertyValue;
  656. longhandItem.priority = priority;
  657. borderItems.set(positionProperty, positionItem);
  658. borderItems.set(longhandProperty, longhandItem);
  659. }
  660. borderItems.set(border.property, shorthandItem);
  661. borderItems.set(BORDER_IMAGE, imageItem);
  662. borderItems.set(lineProperty, lineItem);
  663. // Handle border shorthand.
  664. } else {
  665. const propertyValue = hasVarFunc(value) ? "" : value;
  666. imageItem.value = propertyValue ? NONE : "";
  667. for (const line of borderLines) {
  668. const lineProperty = `${prop1}-${line}`;
  669. const lineItem = getPropertyItem(lineProperty, properties);
  670. lineItem.value = propertyValue;
  671. lineItem.priority = priority;
  672. borderItems.set(lineProperty, lineItem);
  673. }
  674. for (const position of borderPositions) {
  675. const positionProperty = `${prop1}-${position}`;
  676. const positionItem = getPropertyItem(positionProperty, properties);
  677. positionItem.value = propertyValue;
  678. positionItem.priority = priority;
  679. borderItems.set(positionProperty, positionItem);
  680. for (const line of borderLines) {
  681. const longhandProperty = `${positionProperty}-${line}`;
  682. const longhandItem = getPropertyItem(longhandProperty, properties);
  683. longhandItem.value = propertyValue;
  684. longhandItem.priority = priority;
  685. borderItems.set(longhandProperty, longhandItem);
  686. }
  687. }
  688. borderItems.set(property, shorthandItem);
  689. borderItems.set(BORDER_IMAGE, imageItem);
  690. }
  691. };
  692. /**
  693. * Handles border property preparation when the value is an array.
  694. *
  695. * @param {Object} params - The parameters object.
  696. * @param {Array} params.value - The property value.
  697. * @param {string} params.priority - The property priority.
  698. * @param {Map} params.properties - The map of properties.
  699. * @param {Object} params.parts - The split property name parts.
  700. * @param {Object} params.opt - Parsing options.
  701. * @param {Map} params.borderItems - The map to store processed border items.
  702. */
  703. const prepareBorderArrayValue = ({ value, priority, properties, parts, opt, borderItems }) => {
  704. const { prop1, prop2 } = parts;
  705. const { globalObject, options } = opt;
  706. const parseOpt = {
  707. globalObject,
  708. options
  709. };
  710. if (!value.length || !borderLines.has(prop2)) {
  711. return;
  712. }
  713. const shorthandItem = getPropertyItem(border.property, properties);
  714. const imageItem = getPropertyItem(BORDER_IMAGE, properties);
  715. const lineProperty = `${prop1}-${prop2}`;
  716. const lineItem = getPropertyItem(lineProperty, properties);
  717. if (value.length === 1) {
  718. const [propertyValue] = value;
  719. if (shorthandItem.value) {
  720. if (hasVarFunc(shorthandItem.value)) {
  721. shorthandItem.value = "";
  722. } else if (propertyValue) {
  723. shorthandItem.value = replaceBorderShorthandValue(
  724. propertyValue,
  725. shorthandItem.value,
  726. parseOpt
  727. );
  728. }
  729. }
  730. } else {
  731. shorthandItem.value = "";
  732. }
  733. lineItem.value = value.join(" ");
  734. lineItem.priority = priority;
  735. const positionValues = {};
  736. const [val1, val2, val3, val4] = value;
  737. switch (value.length) {
  738. case 2: {
  739. positionValues.top = val1;
  740. positionValues.right = val2;
  741. positionValues.bottom = val1;
  742. positionValues.left = val2;
  743. break;
  744. }
  745. case 3: {
  746. positionValues.top = val1;
  747. positionValues.right = val2;
  748. positionValues.bottom = val3;
  749. positionValues.left = val2;
  750. break;
  751. }
  752. case 4: {
  753. positionValues.top = val1;
  754. positionValues.right = val2;
  755. positionValues.bottom = val3;
  756. positionValues.left = val4;
  757. break;
  758. }
  759. case 1:
  760. default: {
  761. positionValues.top = val1;
  762. positionValues.right = val1;
  763. positionValues.bottom = val1;
  764. positionValues.left = val1;
  765. }
  766. }
  767. for (const position of borderPositions) {
  768. const positionProperty = `${prop1}-${position}`;
  769. const positionItem = getPropertyItem(positionProperty, properties);
  770. if (positionItem.value && positionValues[position]) {
  771. positionItem.value = replaceBorderShorthandValue(
  772. positionValues[position],
  773. positionItem.value,
  774. parseOpt
  775. );
  776. }
  777. const longhandProperty = `${positionProperty}-${prop2}`;
  778. const longhandItem = getPropertyItem(longhandProperty, properties);
  779. longhandItem.value = positionValues[position];
  780. longhandItem.priority = priority;
  781. borderItems.set(positionProperty, positionItem);
  782. borderItems.set(longhandProperty, longhandItem);
  783. }
  784. borderItems.set(border.property, shorthandItem);
  785. borderItems.set(BORDER_IMAGE, imageItem);
  786. borderItems.set(lineProperty, lineItem);
  787. };
  788. /**
  789. * Handles border property preparation when the value is an object.
  790. *
  791. * @param {Object} params - The parameters object.
  792. * @param {string} params.property - The property name.
  793. * @param {Object} params.value - The property value.
  794. * @param {string} params.priority - The property priority.
  795. * @param {Map} params.properties - The map of properties.
  796. * @param {Object} params.parts - The split property name parts.
  797. * @param {Object} params.opt - Parsing options.
  798. * @param {Map} params.borderItems - The map to store processed border items.
  799. */
  800. const prepareBorderObjectValue = ({
  801. property,
  802. value,
  803. priority,
  804. properties,
  805. parts,
  806. opt,
  807. borderItems
  808. }) => {
  809. const { prop1, prop2 } = parts;
  810. const { globalObject, options } = opt;
  811. const parseOpt = {
  812. globalObject,
  813. options
  814. };
  815. const imageItem = getPropertyItem(BORDER_IMAGE, properties);
  816. // Handle position shorthands.
  817. if (prop2) {
  818. if (!borderPositions.has(prop2)) {
  819. return;
  820. }
  821. const shorthandItem = getPropertyItem(border.property, properties);
  822. const lineWidthProperty = `${prop1}-width`;
  823. const lineWidthItem = getPropertyItem(lineWidthProperty, properties);
  824. const lineStyleProperty = `${prop1}-style`;
  825. const lineStyleItem = getPropertyItem(lineStyleProperty, properties);
  826. const lineColorProperty = `${prop1}-color`;
  827. const lineColorItem = getPropertyItem(lineColorProperty, properties);
  828. const positionProperty = `${prop1}-${prop2}`;
  829. const positionItem = getPropertyItem(positionProperty, properties);
  830. if (shorthandItem.value) {
  831. for (const positionValue of Object.values(value)) {
  832. if (!matchesBorderShorthandValue(property, positionValue, shorthandItem.value, parseOpt)) {
  833. shorthandItem.value = "";
  834. break;
  835. }
  836. }
  837. }
  838. positionItem.value = Object.values(value).join(" ");
  839. positionItem.priority = priority;
  840. for (const line of borderLines) {
  841. const longhandProperty = `${prop1}-${prop2}-${line}`;
  842. const longhandItem = getPropertyItem(longhandProperty, properties);
  843. const itemValue = Object.hasOwn(value, longhandProperty)
  844. ? value[longhandProperty]
  845. : border.initialValues.get(`${prop1}-${line}`);
  846. if (line === WIDTH && lineWidthItem.value) {
  847. lineWidthItem.value = replacePositionValue(
  848. itemValue,
  849. splitValue(lineWidthItem.value),
  850. prop2
  851. );
  852. } else if (line === STYLE && lineStyleItem.value) {
  853. lineStyleItem.value = replacePositionValue(
  854. itemValue,
  855. splitValue(lineStyleItem.value),
  856. prop2
  857. );
  858. } else if (line === COLOR && lineColorItem.value) {
  859. lineColorItem.value = replacePositionValue(
  860. itemValue,
  861. splitValue(lineColorItem.value),
  862. prop2
  863. );
  864. }
  865. longhandItem.value = itemValue;
  866. longhandItem.priority = priority;
  867. borderItems.set(longhandProperty, longhandItem);
  868. }
  869. borderItems.set(border.property, shorthandItem);
  870. borderItems.set(BORDER_IMAGE, imageItem);
  871. borderItems.set(lineWidthProperty, lineWidthItem);
  872. borderItems.set(lineStyleProperty, lineStyleItem);
  873. borderItems.set(lineColorProperty, lineColorItem);
  874. borderItems.set(positionProperty, positionItem);
  875. // Handle border shorthand.
  876. } else {
  877. const shorthandItem = getPropertyItem(prop1, properties);
  878. const lineWidthProperty = `${prop1}-width`;
  879. const lineWidthItem = getPropertyItem(lineWidthProperty, properties);
  880. const lineStyleProperty = `${prop1}-style`;
  881. const lineStyleItem = getPropertyItem(lineStyleProperty, properties);
  882. const lineColorProperty = `${prop1}-color`;
  883. const lineColorItem = getPropertyItem(lineColorProperty, properties);
  884. const propertyValue = Object.values(value).join(" ");
  885. shorthandItem.value = propertyValue;
  886. shorthandItem.priority = priority;
  887. imageItem.value = propertyValue ? NONE : "";
  888. if (Object.hasOwn(value, lineWidthProperty)) {
  889. lineWidthItem.value = value[lineWidthProperty];
  890. } else {
  891. lineWidthItem.value = border.initialValues.get(lineWidthProperty);
  892. }
  893. lineWidthItem.priority = priority;
  894. if (Object.hasOwn(value, lineStyleProperty)) {
  895. lineStyleItem.value = value[lineStyleProperty];
  896. } else {
  897. lineStyleItem.value = border.initialValues.get(lineStyleProperty);
  898. }
  899. lineStyleItem.priority = priority;
  900. if (Object.hasOwn(value, lineColorProperty)) {
  901. lineColorItem.value = value[lineColorProperty];
  902. } else {
  903. lineColorItem.value = border.initialValues.get(lineColorProperty);
  904. }
  905. lineColorItem.priority = priority;
  906. for (const position of borderPositions) {
  907. const positionProperty = `${prop1}-${position}`;
  908. const positionItem = getPropertyItem(positionProperty, properties);
  909. positionItem.value = propertyValue;
  910. positionItem.priority = priority;
  911. for (const line of borderLines) {
  912. const longhandProperty = `${positionProperty}-${line}`;
  913. const longhandItem = getPropertyItem(longhandProperty, properties);
  914. const lineProperty = `${prop1}-${line}`;
  915. if (Object.hasOwn(value, lineProperty)) {
  916. longhandItem.value = value[lineProperty];
  917. } else {
  918. longhandItem.value = border.initialValues.get(lineProperty);
  919. }
  920. longhandItem.priority = priority;
  921. borderItems.set(longhandProperty, longhandItem);
  922. }
  923. borderItems.set(positionProperty, positionItem);
  924. }
  925. borderItems.set(property, shorthandItem);
  926. borderItems.set(BORDER_IMAGE, imageItem);
  927. borderItems.set(lineWidthProperty, lineWidthItem);
  928. borderItems.set(lineStyleProperty, lineStyleItem);
  929. borderItems.set(lineColorProperty, lineColorItem);
  930. }
  931. };
  932. /**
  933. * Prepares border properties by splitting shorthands and handling updates.
  934. *
  935. * @param {string} property - The border property name.
  936. * @param {string|Array|Object} value - The value of the property.
  937. * @param {string} priority - The priority of the property (e.g., "important").
  938. * @param {Map} properties - The map of all properties.
  939. * @param {Object} [opt={}] - Parsing options.
  940. * @returns {Map|undefined} A map of expanded or updated border properties.
  941. */
  942. const prepareBorderProperties = (property, value, priority, properties, opt = {}) => {
  943. if (typeof property !== "string" || value === null) {
  944. return;
  945. }
  946. if (!property.startsWith(border.property)) {
  947. return;
  948. }
  949. let prop2, prop3;
  950. if (property.length > border.property.length) {
  951. // Check if next char is '-'
  952. if (property.charCodeAt(border.property.length) !== 45) {
  953. return;
  954. }
  955. // property is like "border-..."
  956. const remainder = property.substring(border.property.length + 1);
  957. const hyphenIndex = remainder.indexOf("-");
  958. if (hyphenIndex !== -1) {
  959. prop2 = remainder.substring(0, hyphenIndex);
  960. prop3 = remainder.substring(hyphenIndex + 1);
  961. } else {
  962. prop2 = remainder;
  963. }
  964. }
  965. if (
  966. (borderPositions.has(prop2) && prop3 && !borderLines.has(prop3)) ||
  967. (borderLines.has(prop2) && prop3)
  968. ) {
  969. return;
  970. }
  971. const parts = {
  972. prop1: border.property,
  973. prop2,
  974. prop3
  975. };
  976. const borderItems = new Map();
  977. if (typeof value === "string") {
  978. prepareBorderStringValue({
  979. property,
  980. value,
  981. priority,
  982. properties,
  983. parts,
  984. opt,
  985. borderItems
  986. });
  987. } else if (Array.isArray(value)) {
  988. prepareBorderArrayValue({
  989. value,
  990. priority,
  991. properties,
  992. parts,
  993. opt,
  994. borderItems
  995. });
  996. } else if (value && typeof value === "object") {
  997. prepareBorderObjectValue({
  998. property,
  999. value,
  1000. priority,
  1001. properties,
  1002. parts,
  1003. opt,
  1004. borderItems
  1005. });
  1006. }
  1007. if (!borderItems.has(border.property)) {
  1008. return;
  1009. }
  1010. const borderProps = new Map([[border.property, borderItems.get(border.property)]]);
  1011. for (const line of borderLines) {
  1012. const lineProperty = `${border.property}-${line}`;
  1013. const lineItem = borderItems.get(lineProperty) ?? getPropertyItem(lineProperty, properties);
  1014. borderProps.set(lineProperty, lineItem);
  1015. }
  1016. for (const position of borderPositions) {
  1017. const positionProperty = `${border.property}-${position}`;
  1018. const positionItem =
  1019. borderItems.get(positionProperty) ?? getPropertyItem(positionProperty, properties);
  1020. borderProps.set(positionProperty, positionItem);
  1021. for (const line of borderLines) {
  1022. const longhandProperty = `${border.property}-${position}-${line}`;
  1023. const longhandItem =
  1024. borderItems.get(longhandProperty) ?? getPropertyItem(longhandProperty, properties);
  1025. borderProps.set(longhandProperty, longhandItem);
  1026. }
  1027. }
  1028. const borderImageItem = borderItems.get(BORDER_IMAGE) ?? createPropertyItem(BORDER_IMAGE);
  1029. borderProps.set(BORDER_IMAGE, borderImageItem);
  1030. return borderProps;
  1031. };
  1032. /**
  1033. * Generates a border line shorthand property if all line components are present.
  1034. *
  1035. * @param {Map} items - The map of collected property items.
  1036. * @param {string} property - The shorthand property name to generate.
  1037. * @param {string} [priority=""] - The priority of the property.
  1038. * @returns {Array} A key-value pair for the generated property.
  1039. */
  1040. const generateBorderLineShorthand = (items, property, priority = "") => {
  1041. const values = [];
  1042. for (const [, item] of items) {
  1043. const { value: itemValue } = item;
  1044. values.push(itemValue);
  1045. }
  1046. const value = getPositionValue(values);
  1047. return [property, createPropertyItem(property, value, priority)];
  1048. };
  1049. /**
  1050. * Generates a border position shorthand property if all position components are present.
  1051. *
  1052. * @param {Map} items - The map of collected property items.
  1053. * @param {string} property - The shorthand property name to generate.
  1054. * @param {string} [priority=""] - The priority of the property.
  1055. * @returns {Array} A key-value pair for the generated property.
  1056. */
  1057. const generateBorderPositionShorthand = (items, property, priority = "") => {
  1058. const values = [];
  1059. for (const [, item] of items) {
  1060. const { value: itemValue } = item;
  1061. values.push(itemValue);
  1062. }
  1063. const value = values.join(" ");
  1064. return [property, createPropertyItem(property, value, priority)];
  1065. };
  1066. /**
  1067. * Generates a border shorthand property if all components match.
  1068. *
  1069. * @param {Array} items - The collection of property values.
  1070. * @param {string} property - The shorthand property name to generate.
  1071. * @param {string} [priority=""] - The priority of the property.
  1072. * @returns {Array|undefined} A key-value pair for the generated property or undefined.
  1073. */
  1074. const generateBorderShorthand = (items, property, priority = "") => {
  1075. const values = new Set(items);
  1076. if (values.size === 1) {
  1077. const value = values.keys().next().value;
  1078. return [property, createPropertyItem(property, value, priority)];
  1079. }
  1080. };
  1081. const borderCollectionConfig = {
  1082. [WIDTH]: {
  1083. shorthand: borderWidth.property,
  1084. generator: generateBorderLineShorthand
  1085. },
  1086. [STYLE]: {
  1087. shorthand: borderStyle.property,
  1088. generator: generateBorderLineShorthand
  1089. },
  1090. [COLOR]: {
  1091. shorthand: borderColor.property,
  1092. generator: generateBorderLineShorthand
  1093. },
  1094. [TOP]: {
  1095. shorthand: borderTop.property,
  1096. generator: generateBorderPositionShorthand
  1097. },
  1098. [RIGHT]: {
  1099. shorthand: borderRight.property,
  1100. generator: generateBorderPositionShorthand
  1101. },
  1102. [BOTTOM]: {
  1103. shorthand: borderBottom.property,
  1104. generator: generateBorderPositionShorthand
  1105. },
  1106. [LEFT]: {
  1107. shorthand: borderLeft.property,
  1108. generator: generateBorderPositionShorthand
  1109. }
  1110. };
  1111. /**
  1112. * Processes and consolidates border-related longhands into shorthands where possible.
  1113. *
  1114. * @param {Map} properties - The map of current properties.
  1115. * @returns {Map} The updated map with consolidated border properties.
  1116. */
  1117. const prepareBorderShorthands = (properties) => {
  1118. const borderCollections = {};
  1119. for (const key of Object.keys(borderCollectionConfig)) {
  1120. borderCollections[key] = {
  1121. ...borderCollectionConfig[key],
  1122. items: new Map(),
  1123. priorityItems: new Map()
  1124. };
  1125. }
  1126. for (const [property, item] of properties) {
  1127. const { priority, value } = item;
  1128. let positionPart, linePart;
  1129. // We can assume property starts with "border-"
  1130. const firstHyphen = property.indexOf("-");
  1131. if (firstHyphen !== -1) {
  1132. const remainder = property.substring(firstHyphen + 1);
  1133. const secondHyphen = remainder.indexOf("-");
  1134. if (secondHyphen !== -1) {
  1135. positionPart = remainder.substring(0, secondHyphen);
  1136. linePart = remainder.substring(secondHyphen + 1);
  1137. } else {
  1138. positionPart = remainder;
  1139. linePart = undefined;
  1140. }
  1141. }
  1142. if (linePart && borderCollections[linePart]) {
  1143. const collection = borderCollections[linePart];
  1144. if (priority) {
  1145. collection.priorityItems.set(property, { property, value, priority });
  1146. } else {
  1147. collection.items.set(property, { property, value, priority });
  1148. }
  1149. }
  1150. if (positionPart && borderCollections[positionPart]) {
  1151. const collection = borderCollections[positionPart];
  1152. if (priority) {
  1153. collection.priorityItems.set(property, { property, value, priority });
  1154. } else {
  1155. collection.items.set(property, { property, value, priority });
  1156. }
  1157. }
  1158. }
  1159. const shorthandItems = [];
  1160. const shorthandPriorityItems = [];
  1161. for (const [key, collection] of Object.entries(borderCollections)) {
  1162. const { shorthand, generator, items, priorityItems } = collection;
  1163. const requiredSize = borderLines.has(key) ? 4 : 3;
  1164. if (items.size === requiredSize) {
  1165. const [property, item] = generator(items, shorthand) ?? [];
  1166. if (property && item) {
  1167. properties.set(property, item);
  1168. if (borderPositions.has(key) && properties.has(BORDER_IMAGE)) {
  1169. const { value: imageValue } = properties.get(BORDER_IMAGE);
  1170. if (imageValue === NONE) {
  1171. shorthandItems.push(item.value);
  1172. }
  1173. }
  1174. }
  1175. } else if (priorityItems.size === requiredSize) {
  1176. const [property, item] = generator(priorityItems, shorthand, "important") ?? [];
  1177. if (property && item) {
  1178. properties.set(property, item);
  1179. if (borderPositions.has(key) && properties.has(BORDER_IMAGE)) {
  1180. const { value: imageValue } = properties.get(BORDER_IMAGE);
  1181. if (imageValue === NONE) {
  1182. shorthandPriorityItems.push(item.value);
  1183. }
  1184. }
  1185. }
  1186. }
  1187. }
  1188. const mixedPriorities = shorthandItems.length && shorthandPriorityItems.length;
  1189. const imageItem = createPropertyItem(BORDER_IMAGE, NONE);
  1190. if (shorthandItems.length === 4) {
  1191. const [property, item] = generateBorderShorthand(shorthandItems, border.property) ?? [];
  1192. if (property && item) {
  1193. properties.set(property, item);
  1194. properties.delete(BORDER_IMAGE);
  1195. properties.set(BORDER_IMAGE, imageItem);
  1196. }
  1197. } else if (shorthandPriorityItems.length === 4) {
  1198. const [property, item] =
  1199. generateBorderShorthand(shorthandPriorityItems, border.property, "important") ?? [];
  1200. if (property && item) {
  1201. properties.set(property, item);
  1202. properties.delete(BORDER_IMAGE);
  1203. properties.set(BORDER_IMAGE, imageItem);
  1204. }
  1205. } else if (properties.has(BORDER_IMAGE)) {
  1206. const { value: imageValue } = properties.get(BORDER_IMAGE);
  1207. if (imageValue === NONE) {
  1208. if (mixedPriorities) {
  1209. properties.delete(BORDER_IMAGE);
  1210. properties.set(BORDER_IMAGE, imageItem);
  1211. } else {
  1212. properties.delete(BORDER_IMAGE);
  1213. }
  1214. }
  1215. }
  1216. if (mixedPriorities) {
  1217. const items = [];
  1218. const priorityItems = [];
  1219. for (const item of properties) {
  1220. const [, { priority }] = item;
  1221. if (priority) {
  1222. priorityItems.push(item);
  1223. } else {
  1224. items.push(item);
  1225. }
  1226. }
  1227. const firstPropertyKey = properties.keys().next().value;
  1228. const { priority: firstPropertyPriority } = properties.get(firstPropertyKey);
  1229. if (firstPropertyPriority) {
  1230. return new Map([...priorityItems, ...items]);
  1231. }
  1232. return new Map([...items, ...priorityItems]);
  1233. }
  1234. if (properties.has(BORDER_IMAGE)) {
  1235. properties.delete(BORDER_IMAGE);
  1236. properties.set(BORDER_IMAGE, imageItem);
  1237. }
  1238. return properties;
  1239. };
  1240. /**
  1241. * Processes shorthand properties from the shorthands map.
  1242. *
  1243. * @param {Map} shorthands - The map containing shorthand property groups.
  1244. * @returns {Map} A map of processed shorthand properties.
  1245. */
  1246. const processShorthandProperties = (shorthands) => {
  1247. const shorthandItems = new Map();
  1248. for (const [property, item] of shorthands) {
  1249. const shorthandItem = shorthandProperties.get(property);
  1250. if (item.size === shorthandItem.shorthandFor.size && shorthandItem.position) {
  1251. const positionValues = [];
  1252. let priority = "";
  1253. for (const { value: longhandValue, priority: longhandPriority } of item.values()) {
  1254. positionValues.push(longhandValue);
  1255. if (longhandPriority) {
  1256. priority = longhandPriority;
  1257. }
  1258. }
  1259. const value = getPositionValue(positionValues, shorthandItem.position);
  1260. shorthandItems.set(property, createPropertyItem(property, value, priority));
  1261. }
  1262. }
  1263. return shorthandItems;
  1264. };
  1265. /**
  1266. * Updates the longhand properties map with a new property item.
  1267. * If a property with normal priority already exists, it will be overwritten by the new item.
  1268. * If the existing property has "important" priority, it will not be overwritten.
  1269. *
  1270. * @param {string} property - The CSS property name.
  1271. * @param {Object} item - The property item object containing value and priority.
  1272. * @param {Map} longhandProperties - The map of longhand properties to update.
  1273. */
  1274. const updateLonghandProperties = (property, item, longhandProperties) => {
  1275. if (longhandProperties.has(property)) {
  1276. const { priority: longhandPriority } = longhandProperties.get(property);
  1277. if (!longhandPriority) {
  1278. longhandProperties.delete(property);
  1279. longhandProperties.set(property, item);
  1280. }
  1281. } else {
  1282. longhandProperties.set(property, item);
  1283. }
  1284. };
  1285. /**
  1286. * Processes border properties from the borders map, expanding and normalizing them.
  1287. *
  1288. * @param {Map} borders - The map containing accumulated border properties.
  1289. * @param {Object} parseOpt - Options for parsing values.
  1290. * @returns {Map} A map of fully processed and normalized border properties.
  1291. */
  1292. const processBorderProperties = (borders, parseOpt) => {
  1293. const longhandProperties = new Map();
  1294. for (const [property, item] of borders) {
  1295. if (shorthandProperties.has(property)) {
  1296. const { value, priority } = item;
  1297. if (property === border.property) {
  1298. const lineItems = border.parse(value, parseOpt);
  1299. for (const [key, initialValue] of border.initialValues) {
  1300. if (!Object.hasOwn(lineItems, key)) {
  1301. lineItems[key] = initialValue;
  1302. }
  1303. }
  1304. for (const lineProperty of Object.keys(lineItems)) {
  1305. let namePart, linePart;
  1306. const hyphenIndex = lineProperty.indexOf("-");
  1307. if (hyphenIndex !== -1) {
  1308. namePart = lineProperty.substring(0, hyphenIndex);
  1309. linePart = lineProperty.substring(hyphenIndex + 1);
  1310. } else {
  1311. // fallback for safety, though lineProperty from border.parse keys
  1312. // should have hyphen
  1313. namePart = lineProperty;
  1314. linePart = "";
  1315. }
  1316. const lineValue = lineItems[lineProperty];
  1317. for (const position of borderPositions) {
  1318. const longhandProperty = `${namePart}-${position}-${linePart}`;
  1319. const longhandItem = createPropertyItem(longhandProperty, lineValue, priority);
  1320. updateLonghandProperties(longhandProperty, longhandItem, longhandProperties);
  1321. }
  1322. }
  1323. if (value) {
  1324. longhandProperties.set(BORDER_IMAGE, createPropertyItem(BORDER_IMAGE, NONE, priority));
  1325. }
  1326. } else {
  1327. const shorthandItem = shorthandProperties.get(property);
  1328. const parsedItem = shorthandItem.parse(value, parseOpt);
  1329. if (Array.isArray(parsedItem)) {
  1330. let namePart, linePart;
  1331. const hyphenIndex = property.indexOf("-");
  1332. if (hyphenIndex !== -1) {
  1333. namePart = property.substring(0, hyphenIndex);
  1334. linePart = property.substring(hyphenIndex + 1);
  1335. } else {
  1336. namePart = property;
  1337. }
  1338. for (const position of borderPositions) {
  1339. const longhandProperty = `${namePart}-${position}-${linePart}`;
  1340. const longhandValue = getPositionValue(parsedItem, position);
  1341. const longhandItem = createPropertyItem(longhandProperty, longhandValue, priority);
  1342. updateLonghandProperties(longhandProperty, longhandItem, longhandProperties);
  1343. }
  1344. } else if (parsedItem) {
  1345. for (const [key, initialValue] of shorthandItem.initialValues) {
  1346. if (!Object.hasOwn(parsedItem, key)) {
  1347. parsedItem[key] = initialValue;
  1348. }
  1349. }
  1350. for (const longhandProperty of Object.keys(parsedItem)) {
  1351. const longhandValue = parsedItem[longhandProperty];
  1352. const longhandItem = createPropertyItem(longhandProperty, longhandValue, priority);
  1353. updateLonghandProperties(longhandProperty, longhandItem, longhandProperties);
  1354. }
  1355. }
  1356. }
  1357. } else if (longhandProperties.has(property)) {
  1358. const { priority } = longhandProperties.get(property);
  1359. if (!priority) {
  1360. longhandProperties.delete(property);
  1361. longhandProperties.set(property, item);
  1362. }
  1363. } else {
  1364. longhandProperties.set(property, item);
  1365. }
  1366. }
  1367. const borderItems = prepareBorderShorthands(longhandProperties);
  1368. return borderItems;
  1369. };
  1370. /**
  1371. * Normalize and prepare CSS properties, handling shorthands and longhands.
  1372. *
  1373. * @param {Map} properties - The initial map of properties.
  1374. * @param {Object} [opt={}] - Parsing options.
  1375. * @returns {Map} The normalized map of properties.
  1376. */
  1377. const prepareProperties = (properties, opt = {}) => {
  1378. const { globalObject, options } = opt;
  1379. const parseOpt = {
  1380. globalObject,
  1381. options
  1382. };
  1383. const parsedProperties = new Map();
  1384. const shorthands = new Map();
  1385. const borders = new Map();
  1386. let hasPrecedingBackground = false;
  1387. for (const [property, item] of properties) {
  1388. const { value, priority } = item;
  1389. const { logicalPropertyGroup: shorthandProperty } = propertyDefinitions.get(property) ?? {};
  1390. if (borderProperties.has(property)) {
  1391. borders.set(property, { property, value, priority });
  1392. } else if (shorthandProperties.has(shorthandProperty)) {
  1393. if (!shorthands.has(shorthandProperty)) {
  1394. shorthands.set(shorthandProperty, new Map());
  1395. }
  1396. const longhandItems = shorthands.get(shorthandProperty);
  1397. if (longhandItems.size) {
  1398. const firstPropertyKey = longhandItems.keys().next().value;
  1399. const { priority: firstPropertyPriority } = longhandItems.get(firstPropertyKey);
  1400. if (priority === firstPropertyPriority) {
  1401. longhandItems.set(property, { property, value, priority });
  1402. shorthands.set(shorthandProperty, longhandItems);
  1403. } else {
  1404. parsedProperties.delete(shorthandProperty);
  1405. }
  1406. } else {
  1407. longhandItems.set(property, { property, value, priority });
  1408. shorthands.set(shorthandProperty, longhandItems);
  1409. }
  1410. parsedProperties.set(property, item);
  1411. } else if (shorthandProperties.has(property)) {
  1412. const shorthandItem = shorthandProperties.get(property);
  1413. const parsedValues = shorthandItem.parse(value, parseOpt);
  1414. let omitShorthandProperty = false;
  1415. if (Array.isArray(parsedValues)) {
  1416. const [parsedValue] = parsedValues;
  1417. if (typeof parsedValue === "string") {
  1418. for (const [longhandProperty, longhandItem] of shorthandItem.shorthandFor) {
  1419. if (!priority && properties.has(longhandProperty)) {
  1420. const { priority: longhandPriority } = properties.get(longhandProperty);
  1421. if (longhandPriority) {
  1422. omitShorthandProperty = true;
  1423. continue;
  1424. }
  1425. }
  1426. const { position } = longhandItem;
  1427. const longhandValue = getPositionValue([parsedValue], position);
  1428. parsedProperties.set(
  1429. longhandProperty,
  1430. createPropertyItem(longhandProperty, longhandValue, priority)
  1431. );
  1432. }
  1433. } else if (parsedValue) {
  1434. for (const longhandProperty of Object.keys(parsedValue)) {
  1435. const longhandValue = parsedValue[longhandProperty];
  1436. parsedProperties.set(
  1437. longhandProperty,
  1438. createPropertyItem(longhandProperty, longhandValue, priority)
  1439. );
  1440. }
  1441. }
  1442. } else if (parsedValues && typeof parsedValues !== "string") {
  1443. for (const longhandProperty of Object.keys(parsedValues)) {
  1444. const longhandValue = parsedValues[longhandProperty];
  1445. parsedProperties.set(
  1446. longhandProperty,
  1447. createPropertyItem(longhandProperty, longhandValue, priority)
  1448. );
  1449. }
  1450. }
  1451. if (!omitShorthandProperty) {
  1452. if (property === background.property) {
  1453. hasPrecedingBackground = true;
  1454. }
  1455. parsedProperties.set(property, createPropertyItem(property, value, priority));
  1456. }
  1457. } else {
  1458. parsedProperties.set(property, createPropertyItem(property, value, priority));
  1459. if (hasPrecedingBackground) {
  1460. const { value: shorthandValue, priority: shorthandPriority } = properties.get(
  1461. background.property
  1462. );
  1463. if ((!shorthandPriority || priority) && !hasVarFunc(shorthandValue)) {
  1464. const replacedShorthandValue = replaceBackgroundShorthand(
  1465. property,
  1466. parsedProperties,
  1467. parseOpt
  1468. );
  1469. properties.delete(background.property);
  1470. properties.set(
  1471. background.property,
  1472. createPropertyItem(background.property, replacedShorthandValue, shorthandPriority)
  1473. );
  1474. }
  1475. }
  1476. }
  1477. }
  1478. if (shorthands.size) {
  1479. const shorthandItems = processShorthandProperties(shorthands);
  1480. for (const [property, item] of shorthandItems) {
  1481. parsedProperties.set(property, item);
  1482. }
  1483. }
  1484. if (borders.size) {
  1485. const borderItems = processBorderProperties(borders, parseOpt);
  1486. for (const [property, item] of borderItems) {
  1487. parsedProperties.set(property, item);
  1488. }
  1489. }
  1490. return parsedProperties;
  1491. };
  1492. /**
  1493. * Cleans up redundancy in border properties by removing longhands that are covered by shorthands.
  1494. *
  1495. * @param {Map} properties - The map of properties to normalize.
  1496. * @returns {Map} The normalized properties map.
  1497. */
  1498. const normalizeProperties = (properties) => {
  1499. if (properties.has(border.property)) {
  1500. for (const line of borderLines) {
  1501. properties.delete(`${border.property}-${line}`);
  1502. }
  1503. for (const position of borderPositions) {
  1504. properties.delete(`${border.property}-${position}`);
  1505. for (const line of borderLines) {
  1506. properties.delete(`${border.property}-${position}-${line}`);
  1507. }
  1508. }
  1509. properties.delete(`${border.property}-image`);
  1510. }
  1511. for (const line of borderLines) {
  1512. const lineProperty = `${border.property}-${line}`;
  1513. if (properties.has(lineProperty)) {
  1514. for (const position of borderPositions) {
  1515. const positionProperty = `${border.property}-${position}`;
  1516. const longhandProperty = `${border.property}-${position}-${line}`;
  1517. properties.delete(positionProperty);
  1518. properties.delete(longhandProperty);
  1519. }
  1520. }
  1521. }
  1522. for (const position of borderPositions) {
  1523. const positionProperty = `${border.property}-${position}`;
  1524. if (properties.has(positionProperty)) {
  1525. const longhandProperties = [];
  1526. for (const line of borderLines) {
  1527. const longhandProperty = `${border.property}-${position}-${line}`;
  1528. longhandProperties.push(longhandProperty);
  1529. }
  1530. if (longhandProperties.length === 3) {
  1531. for (const longhandProperty of longhandProperties) {
  1532. properties.delete(longhandProperty);
  1533. }
  1534. } else {
  1535. properties.delete(positionProperty);
  1536. }
  1537. }
  1538. }
  1539. return properties;
  1540. };
  1541. module.exports = {
  1542. borderProperties,
  1543. getPositionValue,
  1544. normalizeProperties,
  1545. prepareBorderProperties,
  1546. prepareProperties,
  1547. shorthandProperties
  1548. };