formatVariantSelector.js
11.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
"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, {
selectorFunctions: ()=>selectorFunctions,
formatVariantSelector: ()=>formatVariantSelector,
finalizeSelector: ()=>finalizeSelector
});
const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser"));
const _unesc = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser/dist/util/unesc"));
const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("../util/escapeClassName"));
const _prefixSelector = /*#__PURE__*/ _interopRequireDefault(require("../util/prefixSelector"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
var ref;
let MERGE = ":merge";
let PARENT = "&";
let selectorFunctions = new Set([
MERGE
]);
function formatVariantSelector(current, ...others) {
for (let other of others){
let incomingValue = resolveFunctionArgument(other, MERGE);
if (incomingValue !== null) {
let existingValue = resolveFunctionArgument(current, MERGE, incomingValue);
if (existingValue !== null) {
let existingTarget = `${MERGE}(${incomingValue})`;
let splitIdx = other.indexOf(existingTarget);
let addition = other.slice(splitIdx + existingTarget.length).split(" ")[0];
current = current.replace(existingTarget, existingTarget + addition);
continue;
}
}
current = other.replace(PARENT, current);
}
return current;
}
/**
* 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 {import('postcss-selector-parser').Node} node
* @returns {import('postcss-selector-parser').Node[]}
**/ function simpleSelectorForNode(node) {
/** @type {import('postcss-selector-parser').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 {import('postcss-selector-parser').Selector} sel
* @returns {import('postcss-selector-parser').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?
}
var ref1;
function finalizeSelector(format, { selector , candidate , context , isArbitraryVariant , // 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 =candidate.split(new RegExp(`\\${(ref1 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref1 !== void 0 ? ref1 : ":"}(?![^[]*\\])`)).pop() }) {
var ref2;
let ast = (0, _postcssSelectorParser.default)().astSync(selector);
// We explicitly DO NOT prefix classes in arbitrary variants
if ((context === null || context === void 0 ? void 0 : (ref2 = context.tailwindConfig) === null || ref2 === void 0 ? void 0 : ref2.prefix) && !isArbitraryVariant) {
format = (0, _prefixSelector.default)(context.tailwindConfig.prefix, format);
}
format = format.replace(PARENT, `.${(0, _escapeClassName.default)(candidate)}`);
let formatAst = (0, _postcssSelectorParser.default)().astSync(format);
// Remove extraneous selectors that do not include the base class/candidate being matched against
// For example if we have a utility defined `.a, .b { color: red}`
// And the formatted variant is sm:b then we want the final selector to be `.sm\:b` and not `.a, .sm\:b`
ast.each((sel)=>eliminateIrrelevantSelectors(sel, base));
// 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\\)\\]
//
ast.walkClasses((node)=>{
if (node.raws && node.value.includes(base)) {
node.raws.value = (0, _escapeClassName.default)((0, _unesc.default)(node.raws.value));
}
});
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.
ast.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);
}
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();
});
// This will make sure to move pseudo's to the correct spot (the end for
// pseudo elements) because otherwise the selector will never work
// anyway.
//
// E.g.:
// - `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`
//
// `::before:hover` doesn't work, which means that we can make it work for you by flipping the order.
function collectPseudoElements(selector) {
let nodes = [];
for (let node of selector.nodes){
if (isPseudoElement(node)) {
nodes.push(node);
selector.removeChild(node);
}
if (node === null || node === void 0 ? void 0 : node.nodes) {
nodes.push(...collectPseudoElements(node));
}
}
return nodes;
}
// Remove unnecessary pseudo selectors that we used as placeholders
ast.each((selector)=>{
selector.walkPseudos((p)=>{
if (selectorFunctions.has(p.value)) {
p.replaceWith(p.nodes);
}
});
let pseudoElements = collectPseudoElements(selector);
if (pseudoElements.length > 0) {
selector.nodes.push(pseudoElements.sort(sortSelector));
}
});
return ast.toString();
}
// 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.
let pseudoElementsBC = [
":before",
":after",
":first-line",
":first-letter"
];
// These pseudo-elements _can_ be combined with other pseudo selectors AND the order does matter.
let pseudoElementExceptions = [
"::file-selector-button"
];
// This will make sure to move pseudo's to the correct spot (the end for
// pseudo elements) because otherwise the selector will never work
// anyway.
//
// E.g.:
// - `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`
//
// `::before:hover` doesn't work, which means that we can make it work
// for you by flipping the order.
function sortSelector(a, z) {
// Both nodes are non-pseudo's so we can safely ignore them and keep
// them in the same order.
if (a.type !== "pseudo" && z.type !== "pseudo") {
return 0;
}
// If one of them is a combinator, we need to keep it in the same order
// because that means it will start a new "section" in the selector.
if (a.type === "combinator" ^ z.type === "combinator") {
return 0;
}
// One of the items is a pseudo and the other one isn't. Let's move
// the pseudo to the right.
if (a.type === "pseudo" ^ z.type === "pseudo") {
return (a.type === "pseudo") - (z.type === "pseudo");
}
// Both are pseudo's, move the pseudo elements (except for
// ::file-selector-button) to the right.
return isPseudoElement(a) - isPseudoElement(z);
}
function isPseudoElement(node) {
if (node.type !== "pseudo") return false;
if (pseudoElementExceptions.includes(node.value)) return false;
return node.value.startsWith("::") || pseudoElementsBC.includes(node.value);
}
function resolveFunctionArgument(haystack, needle, arg) {
let startIdx = haystack.indexOf(arg ? `${needle}(${arg})` : needle);
if (startIdx === -1) return null;
// Start inside the `(`
startIdx += needle.length + 1;
let target = "";
let count = 0;
for (let char of haystack.slice(startIdx)){
if (char !== "(" && char !== ")") {
target += char;
} else if (char === "(") {
target += char;
count++;
} else if (char === ")") {
if (--count < 0) break; // unbalanced
target += char;
}
}
return target;
}