123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- function _export(target, all) {
- for(var name in all)Object.defineProperty(target, name, {
- enumerable: true,
- get: all[name]
- });
- }
- _export(exports, {
- formatVariantSelector: function() {
- return formatVariantSelector;
- },
- eliminateIrrelevantSelectors: function() {
- return eliminateIrrelevantSelectors;
- },
- finalizeSelector: function() {
- return finalizeSelector;
- },
- handleMergePseudo: function() {
- return handleMergePseudo;
- }
- });
- const _postcssselectorparser = /*#__PURE__*/ _interop_require_default(require("postcss-selector-parser"));
- const _unesc = /*#__PURE__*/ _interop_require_default(require("postcss-selector-parser/dist/util/unesc"));
- const _escapeClassName = /*#__PURE__*/ _interop_require_default(require("../util/escapeClassName"));
- const _prefixSelector = /*#__PURE__*/ _interop_require_default(require("../util/prefixSelector"));
- const _pseudoElements = require("./pseudoElements");
- const _splitAtTopLevelOnly = require("./splitAtTopLevelOnly");
- function _interop_require_default(obj) {
- return obj && obj.__esModule ? obj : {
- default: obj
- };
- }
- /** @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 */ /** @typedef {{format: string, respectPrefix: boolean}[]} RawFormats */ /** @typedef {import('postcss-selector-parser').Root} ParsedFormats */ /** @typedef {RawFormats | ParsedFormats} AcceptedFormats */ let MERGE = ":merge";
- function formatVariantSelector(formats, { context , candidate }) {
- var _context_tailwindConfig_prefix;
- let prefix = (_context_tailwindConfig_prefix = context === null || context === void 0 ? void 0 : context.tailwindConfig.prefix) !== null && _context_tailwindConfig_prefix !== void 0 ? _context_tailwindConfig_prefix : "";
- // Parse the format selector into an AST
- let parsedFormats = formats.map((format)=>{
- let ast = (0, _postcssselectorparser.default)().astSync(format.format);
- return {
- ...format,
- ast: format.respectPrefix ? (0, _prefixSelector.default)(prefix, ast) : ast
- };
- });
- // We start with the candidate selector
- let formatAst = _postcssselectorparser.default.root({
- nodes: [
- _postcssselectorparser.default.selector({
- nodes: [
- _postcssselectorparser.default.className({
- value: (0, _escapeClassName.default)(candidate)
- })
- ]
- })
- ]
- });
- // And iteratively merge each format selector into the candidate selector
- for (let { ast } of parsedFormats){
- [formatAst, ast] = handleMergePseudo(formatAst, ast);
- // 2. Merge the format selector into the current selector AST
- ast.walkNesting((nesting)=>nesting.replaceWith(...formatAst.nodes[0].nodes));
- // 3. Keep going!
- formatAst = ast;
- }
- return formatAst;
- }
- /**
- * Given any node in a selector this gets the "simple" selector it's a part of
- * A simple selector is just a list of nodes without any combinators
- * Technically :is(), :not(), :has(), etc… can have combinators but those are nested
- * inside the relevant node and won't be picked up so they're fine to ignore
- *
- * @param {Node} node
- * @returns {Node[]}
- **/ function simpleSelectorForNode(node) {
- /** @type {Node[]} */ let nodes = [];
- // Walk backwards until we hit a combinator node (or the start)
- while(node.prev() && node.prev().type !== "combinator"){
- node = node.prev();
- }
- // Now record all non-combinator nodes until we hit one (or the end)
- while(node && node.type !== "combinator"){
- nodes.push(node);
- node = node.next();
- }
- return nodes;
- }
- /**
- * Resorts the nodes in a selector to ensure they're in the correct order
- * Tags go before classes, and pseudo classes go after classes
- *
- * @param {Selector} sel
- * @returns {Selector}
- **/ function resortSelector(sel) {
- sel.sort((a, b)=>{
- if (a.type === "tag" && b.type === "class") {
- return -1;
- } else if (a.type === "class" && b.type === "tag") {
- return 1;
- } else if (a.type === "class" && b.type === "pseudo" && b.value.startsWith("::")) {
- return -1;
- } else if (a.type === "pseudo" && a.value.startsWith("::") && b.type === "class") {
- return 1;
- }
- return sel.index(a) - sel.index(b);
- });
- return sel;
- }
- function eliminateIrrelevantSelectors(sel, base) {
- let hasClassesMatchingCandidate = false;
- sel.walk((child)=>{
- if (child.type === "class" && child.value === base) {
- hasClassesMatchingCandidate = true;
- return false // Stop walking
- ;
- }
- });
- if (!hasClassesMatchingCandidate) {
- sel.remove();
- }
- // We do NOT recursively eliminate sub selectors that don't have the base class
- // as this is NOT a safe operation. For example, if we have:
- // `.space-x-2 > :not([hidden]) ~ :not([hidden])`
- // We cannot remove the [hidden] from the :not() because it would change the
- // meaning of the selector.
- // TODO: Can we do this for :matches, :is, and :where?
- }
- function finalizeSelector(current, formats, { context , candidate , base }) {
- var _context_tailwindConfig;
- var _context_tailwindConfig_separator;
- let separator = (_context_tailwindConfig_separator = context === null || context === void 0 ? void 0 : (_context_tailwindConfig = context.tailwindConfig) === null || _context_tailwindConfig === void 0 ? void 0 : _context_tailwindConfig.separator) !== null && _context_tailwindConfig_separator !== void 0 ? _context_tailwindConfig_separator : ":";
- // Split by the separator, but ignore the separator inside square brackets:
- //
- // E.g.: dark:lg:hover:[paint-order:markers]
- // ┬ ┬ ┬ ┬
- // │ │ │ ╰── We will not split here
- // ╰──┴─────┴─────────────── We will split here
- //
- base = base !== null && base !== void 0 ? base : (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(candidate, separator).pop();
- // Parse the selector into an AST
- let selector = (0, _postcssselectorparser.default)().astSync(current);
- // Normalize escaped classes, e.g.:
- //
- // The idea would be to replace the escaped `base` in the selector with the
- // `format`. However, in css you can escape the same selector in a few
- // different ways. This would result in different strings and therefore we
- // can't replace it properly.
- //
- // base: bg-[rgb(255,0,0)]
- // base in selector: bg-\\[rgb\\(255\\,0\\,0\\)\\]
- // escaped base: bg-\\[rgb\\(255\\2c 0\\2c 0\\)\\]
- //
- selector.walkClasses((node)=>{
- if (node.raws && node.value.includes(base)) {
- node.raws.value = (0, _escapeClassName.default)((0, _unesc.default)(node.raws.value));
- }
- });
- // Remove extraneous selectors that do not include the base candidate
- selector.each((sel)=>eliminateIrrelevantSelectors(sel, base));
- // If ffter eliminating irrelevant selectors, we end up with nothing
- // Then the whole "rule" this is associated with does not need to exist
- // We use `null` as a marker value for that case
- if (selector.length === 0) {
- return null;
- }
- // If there are no formats that means there were no variants added to the candidate
- // so we can just return the selector as-is
- let formatAst = Array.isArray(formats) ? formatVariantSelector(formats, {
- context,
- candidate
- }) : formats;
- if (formatAst === null) {
- return selector.toString();
- }
- let simpleStart = _postcssselectorparser.default.comment({
- value: "/*__simple__*/"
- });
- let simpleEnd = _postcssselectorparser.default.comment({
- value: "/*__simple__*/"
- });
- // We can safely replace the escaped base now, since the `base` section is
- // now in a normalized escaped value.
- selector.walkClasses((node)=>{
- if (node.value !== base) {
- return;
- }
- let parent = node.parent;
- let formatNodes = formatAst.nodes[0].nodes;
- // Perf optimization: if the parent is a single class we can just replace it and be done
- if (parent.nodes.length === 1) {
- node.replaceWith(...formatNodes);
- return;
- }
- let simpleSelector = simpleSelectorForNode(node);
- parent.insertBefore(simpleSelector[0], simpleStart);
- parent.insertAfter(simpleSelector[simpleSelector.length - 1], simpleEnd);
- for (let child of formatNodes){
- parent.insertBefore(simpleSelector[0], child.clone());
- }
- node.remove();
- // Re-sort the simple selector to ensure it's in the correct order
- simpleSelector = simpleSelectorForNode(simpleStart);
- let firstNode = parent.index(simpleStart);
- parent.nodes.splice(firstNode, simpleSelector.length, ...resortSelector(_postcssselectorparser.default.selector({
- nodes: simpleSelector
- })).nodes);
- simpleStart.remove();
- simpleEnd.remove();
- });
- // Remove unnecessary pseudo selectors that we used as placeholders
- selector.walkPseudos((p)=>{
- if (p.value === MERGE) {
- p.replaceWith(p.nodes);
- }
- });
- // Move pseudo elements to the end of the selector (if necessary)
- selector.each((sel)=>(0, _pseudoElements.movePseudos)(sel));
- return selector.toString();
- }
- function handleMergePseudo(selector, format) {
- /** @type {{pseudo: Pseudo, value: string}[]} */ let merges = [];
- // Find all :merge() pseudo-classes in `selector`
- selector.walkPseudos((pseudo)=>{
- if (pseudo.value === MERGE) {
- merges.push({
- pseudo,
- value: pseudo.nodes[0].toString()
- });
- }
- });
- // Find all :merge() "attachments" in `format` and attach them to the matching selector in `selector`
- format.walkPseudos((pseudo)=>{
- if (pseudo.value !== MERGE) {
- return;
- }
- let value = pseudo.nodes[0].toString();
- // Does `selector` contain a :merge() pseudo-class with the same value?
- let existing = merges.find((merge)=>merge.value === value);
- // Nope so there's nothing to do
- if (!existing) {
- return;
- }
- // Everything after `:merge()` up to the next combinator is what is attached to the merged selector
- let attachments = [];
- let next = pseudo.next();
- while(next && next.type !== "combinator"){
- attachments.push(next);
- next = next.next();
- }
- let combinator = next;
- existing.pseudo.parent.insertAfter(existing.pseudo, _postcssselectorparser.default.selector({
- nodes: attachments.map((node)=>node.clone())
- }));
- pseudo.remove();
- attachments.forEach((node)=>node.remove());
- // What about this case:
- // :merge(.group):focus > &
- // :merge(.group):hover &
- if (combinator && combinator.type === "combinator") {
- combinator.remove();
- }
- });
- return [
- selector,
- format
- ];
- }
|