tailwindcss/src/lib/resolveDefaultsAtRules.js

164 lines
4.5 KiB
JavaScript
Raw Normal View History

import postcss from 'postcss'
import selectorParser from 'postcss-selector-parser'
import { flagEnabled } from '../featureFlags'
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
let getNode = {
id(node) {
return selectorParser.attribute({
attribute: 'id',
operator: '=',
value: node.value,
quoteMark: '"',
})
},
}
function minimumImpactSelector(nodes) {
let rest = nodes
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
.filter((node) => {
// Keep non-pseudo nodes
if (node.type !== 'pseudo') return true
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
// Keep pseudo nodes that have subnodes
// E.g.: `:not()` contains subnodes inside the parentheses
if (node.nodes.length > 0) return true
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
// Keep pseudo `elements`
// This implicitly means that we ignore pseudo `classes`
return (
node.value.startsWith('::') ||
[':before', ':after', ':first-line', ':first-letter'].includes(node.value)
)
})
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
.reverse()
let searchFor = new Set(['tag', 'class', 'id', 'attribute'])
let splitPointIdx = rest.findIndex((n) => searchFor.has(n.type))
if (splitPointIdx === -1) return rest.reverse().join('').trim()
let node = rest[splitPointIdx]
let bestNode = getNode[node.type] ? getNode[node.type](node) : node
rest = rest.slice(0, splitPointIdx)
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
let combinatorIdx = rest.findIndex((n) => n.type === 'combinator' && n.value === '>')
if (combinatorIdx !== -1) {
rest.splice(0, combinatorIdx)
rest.unshift(selectorParser.universal())
}
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
return [bestNode, ...rest.reverse()].join('').trim()
}
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
export let elementSelectorParser = selectorParser((selectors) => {
return selectors.map((s) => {
let nodes = s.split((n) => n.type === 'combinator' && n.value === ' ').pop()
return minimumImpactSelector(nodes)
})
})
let cache = new Map()
function extractElementSelector(selector) {
if (!cache.has(selector)) {
cache.set(selector, elementSelectorParser.transformSync(selector))
}
return cache.get(selector)
}
export default function resolveDefaultsAtRules({ tailwindConfig }) {
return (root) => {
let variableNodeMap = new Map()
/** @type {Set<import('postcss').AtRule>} */
let universals = new Set()
root.walkAtRules('defaults', (rule) => {
if (rule.nodes && rule.nodes.length > 0) {
universals.add(rule)
return
}
let variable = rule.params
if (!variableNodeMap.has(variable)) {
variableNodeMap.set(variable, new Set())
}
variableNodeMap.get(variable).add(rule.parent)
rule.remove()
})
if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
for (let universal of universals) {
/** @type {Map<string, Set<string>>} */
let selectorGroups = new Map()
let rules = variableNodeMap.get(universal.params) ?? []
for (let rule of rules) {
for (let selector of extractElementSelector(rule.selector)) {
// If selector contains a vendor prefix after a pseudo element or class,
// we consider them separately because merging the declarations into
// a single rule will cause browsers that do not understand the
// vendor prefix to throw out the whole rule
let selectorGroupName =
selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'
let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
selectorGroups.set(selectorGroupName, selectors)
selectors.add(selector)
}
}
if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
if (selectorGroups.size === 0) {
universal.remove()
continue
}
for (let [, selectors] of selectorGroups) {
let universalRule = postcss.rule({
source: universal.source,
})
universalRule.selectors = [...selectors]
universalRule.append(universal.nodes.map((node) => node.clone()))
universal.before(universalRule)
}
}
universal.remove()
}
} else if (universals.size) {
let universalRule = postcss.rule({
selectors: ['*', '::before', '::after'],
})
for (let universal of universals) {
universalRule.append(universal.nodes)
if (!universalRule.parent) {
universal.before(universalRule)
}
if (!universalRule.source) {
universalRule.source = universal.source
}
universal.remove()
}
let backdropRule = universalRule.clone({
selectors: ['::backdrop'],
})
universalRule.after(backdropRule)
}
}
}