/** @typedef {import('postcss-selector-parser').Root} Root */ /** @typedef {import('postcss-selector-parser').Selector} Selector */ /** @typedef {import('postcss-selector-parser').Pseudo} Pseudo */ /** @typedef {import('postcss-selector-parser').Node} Node */ // There are some pseudo-elements that may or may not be: // **Actionable** // Zero or more user-action pseudo-classes may be attached to the pseudo-element itself // structural-pseudo-classes are NOT allowed but we don't make // The spec is not clear on whether this is allowed or not — but in practice it is. // **Terminal** // It MUST be placed at the end of a selector // // This is the required in the spec. However, some pseudo elements are not "terminal" because // they represent a "boundary piercing" that is compiled out by a build step. // **Jumpable** // Any terminal element may "jump" over combinators when moving to the end of the selector // // This is a backwards-compat quirk of pseudo element variants from earlier versions of Tailwind CSS. /** @typedef {'terminal' | 'actionable' | 'jumpable'} PseudoProperty */ /** @type {Record} */ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "movePseudos", { enumerable: true, get: function() { return movePseudos; } }); let elementProperties = { // Pseudo elements from the spec "::after": [ "terminal", "jumpable" ], "::backdrop": [ "terminal", "jumpable" ], "::before": [ "terminal", "jumpable" ], "::cue": [ "terminal" ], "::cue-region": [ "terminal" ], "::first-letter": [ "terminal", "jumpable" ], "::first-line": [ "terminal", "jumpable" ], "::grammar-error": [ "terminal" ], "::marker": [ "terminal", "jumpable" ], "::part": [ "terminal", "actionable" ], "::placeholder": [ "terminal", "jumpable" ], "::selection": [ "terminal", "jumpable" ], "::slotted": [ "terminal" ], "::spelling-error": [ "terminal" ], "::target-text": [ "terminal" ], // Pseudo elements from the spec with special rules "::file-selector-button": [ "terminal", "actionable" ], // Library-specific pseudo elements used by component libraries // These are Shadow DOM-like "::deep": [ "actionable" ], "::v-deep": [ "actionable" ], "::ng-deep": [ "actionable" ], // Note: As a rule, double colons (::) should be used instead of a single colon // (:). This distinguishes pseudo-classes from pseudo-elements. However, since // this distinction was not present in older versions of the W3C spec, most // browsers support both syntaxes for the original pseudo-elements. ":after": [ "terminal", "jumpable" ], ":before": [ "terminal", "jumpable" ], ":first-letter": [ "terminal", "jumpable" ], ":first-line": [ "terminal", "jumpable" ], ":where": [], ":is": [], ":has": [], // The default value is used when the pseudo-element is not recognized // Because it's not recognized, we don't know if it's terminal or not // So we assume it can be moved AND can have user-action pseudo classes attached to it __default__: [ "terminal", "actionable" ] }; function movePseudos(sel) { let [pseudos] = movablePseudos(sel); // Remove all pseudo elements from their respective selectors pseudos.forEach(([sel, pseudo])=>sel.removeChild(pseudo)); // Re-add them to the end of the selector in the correct order. // This moves terminal pseudo elements to the end of the // selector otherwise the selector will not be valid. // // Examples: // - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before` // - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before` // // The selector `::before:hover` does not work but we // can make it work for you by flipping the order. sel.nodes.push(...pseudos.map(([, pseudo])=>pseudo)); return sel; } /** @typedef {[sel: Selector, pseudo: Pseudo, attachedTo: Pseudo | null]} MovablePseudo */ /** @typedef {[pseudos: MovablePseudo[], lastSeenElement: Pseudo | null]} MovablePseudosResult */ /** * @param {Selector} sel * @returns {MovablePseudosResult} */ function movablePseudos(sel) { /** @type {MovablePseudo[]} */ let buffer = []; /** @type {Pseudo | null} */ let lastSeenElement = null; for (let node of sel.nodes){ if (node.type === "combinator") { buffer = buffer.filter(([, node])=>propertiesForPseudo(node).includes("jumpable")); lastSeenElement = null; } else if (node.type === "pseudo") { if (isMovablePseudoElement(node)) { lastSeenElement = node; buffer.push([ sel, node, null ]); } else if (lastSeenElement && isAttachablePseudoClass(node, lastSeenElement)) { buffer.push([ sel, node, lastSeenElement ]); } else { lastSeenElement = null; } var _node_nodes; for (let sub of (_node_nodes = node.nodes) !== null && _node_nodes !== void 0 ? _node_nodes : []){ let [movable, lastSeenElementInSub] = movablePseudos(sub); lastSeenElement = lastSeenElementInSub || lastSeenElement; buffer.push(...movable); } } } return [ buffer, lastSeenElement ]; } /** * @param {Node} node * @returns {boolean} */ function isPseudoElement(node) { return node.value.startsWith("::") || elementProperties[node.value] !== undefined; } /** * @param {Node} node * @returns {boolean} */ function isMovablePseudoElement(node) { return isPseudoElement(node) && propertiesForPseudo(node).includes("terminal"); } /** * @param {Node} node * @param {Pseudo} pseudo * @returns {boolean} */ function isAttachablePseudoClass(node, pseudo) { if (node.type !== "pseudo") return false; if (isPseudoElement(node)) return false; return propertiesForPseudo(pseudo).includes("actionable"); } /** * @param {Pseudo} pseudo * @returns {PseudoProperty[]} */ function propertiesForPseudo(pseudo) { var _elementProperties_pseudo_value; return (_elementProperties_pseudo_value = elementProperties[pseudo.value]) !== null && _elementProperties_pseudo_value !== void 0 ? _elementProperties_pseudo_value : elementProperties.__default__; }