File Manager

Edit File: pseudoElements.js

/** @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__;
}

Back