smatchit_tailwind_project/node_modules/tailwindcss/lib/util/pseudoElements.js

213 lines
6.8 KiB
JavaScript
Raw Normal View History

2024-07-15 12:57:41 +00:00
/** @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<string, PseudoProperty[]>} */ "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__;
}