You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

362 lines
8.8 KiB
JavaScript

const { Rule, AtRule } = require('postcss')
let parser = require('postcss-selector-parser')
/**
* Run a selector string through postcss-selector-parser
*/
function parse(rawSelector, rule) {
let nodes
try {
parser(parsed => {
nodes = parsed
}).processSync(rawSelector)
} catch (e) {
if (rawSelector.includes(':')) {
throw rule ? rule.error('Missed semicolon') : e
} else {
throw rule ? rule.error(e.message) : e
}
}
return nodes.at(0)
}
/**
* Replaces the "&" token in a node's selector with the parent selector
* similar to what SCSS does.
*
* Mutates the nodes list
*/
function interpolateAmpInSelector(nodes, parent) {
let replaced = false
nodes.each(node => {
if (node.type === 'nesting') {
let clonedParent = parent.clone({})
if (node.value !== '&') {
node.replaceWith(
parse(node.value.replace('&', clonedParent.toString()))
)
} else {
node.replaceWith(clonedParent)
}
replaced = true
} else if ('nodes' in node && node.nodes) {
if (interpolateAmpInSelector(node, parent)) {
replaced = true
}
}
})
return replaced
}
/**
* Combines parent and child selectors, in a SCSS-like way
*/
function mergeSelectors(parent, child) {
let merged = []
parent.selectors.forEach(sel => {
let parentNode = parse(sel, parent)
child.selectors.forEach(selector => {
if (!selector) {
return
}
let node = parse(selector, child)
let replaced = interpolateAmpInSelector(node, parentNode)
if (!replaced) {
node.prepend(parser.combinator({ value: ' ' }))
node.prepend(parentNode.clone({}))
}
merged.push(node.toString())
})
})
return merged
}
/**
* Move a child and its preceeding comment(s) to after "after"
*/
function breakOut(child, after) {
let prev = child.prev()
after.after(child)
while (prev && prev.type === 'comment') {
let nextPrev = prev.prev()
after.after(prev)
prev = nextPrev
}
return child
}
function createFnAtruleChilds(bubble) {
return function atruleChilds(rule, atrule, bubbling, mergeSels = bubbling) {
let children = []
atrule.each(child => {
if (child.type === 'rule' && bubbling) {
if (mergeSels) {
child.selectors = mergeSelectors(rule, child)
}
} else if (child.type === 'atrule' && child.nodes) {
if (bubble[child.name]) {
atruleChilds(rule, child, mergeSels)
} else if (atrule[rootRuleMergeSel] !== false) {
children.push(child)
}
} else {
children.push(child)
}
})
if (bubbling) {
if (children.length) {
let clone = rule.clone({ nodes: [] })
for (let child of children) {
clone.append(child)
}
atrule.prepend(clone)
}
}
}
}
function pickDeclarations(selector, declarations, after) {
let parent = new Rule({
selector,
nodes: []
})
parent.append(declarations)
after.after(parent)
return parent
}
function atruleNames(defaults, custom) {
let list = {}
for (let name of defaults) {
list[name] = true
}
if (custom) {
for (let name of custom) {
list[name.replace(/^@/, '')] = true
}
}
return list
}
function parseRootRuleParams(params) {
params = params.trim()
let braceBlock = params.match(/^\((.*)\)$/)
if (!braceBlock) {
return { type: 'basic', selector: params }
}
let bits = braceBlock[1].match(/^(with(?:out)?):(.+)$/)
if (bits) {
let allowlist = bits[1] === 'with'
let rules = Object.fromEntries(
bits[2]
.trim()
.split(/\s+/)
.map(name => [name, true])
)
if (allowlist && rules.all) {
return { type: 'noop' }
}
let escapes = rule => !!rules[rule]
if (rules.all) {
escapes = () => true
} else if (allowlist) {
escapes = rule => (rule === 'all' ? false : !rules[rule])
}
return {
type: 'withrules',
escapes
}
}
// Unrecognized brace block
return { type: 'unknown' }
}
function getAncestorRules(leaf) {
let lineage = []
let parent = leaf.parent
while (parent && parent instanceof AtRule) {
lineage.push(parent)
parent = parent.parent
}
return lineage
}
function unwrapRootRule(rule) {
let escapes = rule[rootRuleEscapes]
if (!escapes) {
rule.after(rule.nodes)
} else {
let nodes = rule.nodes
let topEscaped
let topEscapedIdx = -1
let breakoutLeaf
let breakoutRoot
let clone
let lineage = getAncestorRules(rule)
lineage.forEach((parent, i) => {
if (escapes(parent.name)) {
topEscaped = parent
topEscapedIdx = i
breakoutRoot = clone
} else {
let oldClone = clone
clone = parent.clone({ nodes: [] })
oldClone && clone.append(oldClone)
breakoutLeaf = breakoutLeaf || clone
}
})
if (!topEscaped) {
rule.after(nodes)
} else if (!breakoutRoot) {
topEscaped.after(nodes)
} else {
let leaf = breakoutLeaf
leaf.append(nodes)
topEscaped.after(breakoutRoot)
}
if (rule.next() && topEscaped) {
let restRoot
lineage.slice(0, topEscapedIdx + 1).forEach((parent, i, arr) => {
let oldRoot = restRoot
restRoot = parent.clone({ nodes: [] })
oldRoot && restRoot.append(oldRoot)
let nextSibs = []
let _child = arr[i - 1] || rule
let next = _child.next()
while (next) {
nextSibs.push(next)
next = next.next()
}
restRoot.append(nextSibs)
})
restRoot && (breakoutRoot || nodes[nodes.length - 1]).after(restRoot)
}
}
rule.remove()
}
const rootRuleMergeSel = Symbol('rootRuleMergeSel')
const rootRuleEscapes = Symbol('rootRuleEscapes')
function normalizeRootRule(rule) {
let { params } = rule
let { type, selector, escapes } = parseRootRuleParams(params)
if (type === 'unknown') {
throw rule.error(
`Unknown @${rule.name} parameter ${JSON.stringify(params)}`
)
}
if (type === 'basic' && selector) {
let selectorBlock = new Rule({ selector, nodes: rule.nodes })
rule.removeAll()
rule.append(selectorBlock)
}
rule[rootRuleEscapes] = escapes
rule[rootRuleMergeSel] = escapes ? !escapes('all') : type === 'noop'
}
const hasRootRule = Symbol('hasRootRule')
module.exports = (opts = {}) => {
let bubble = atruleNames(
['media', 'supports', 'layer', 'container'],
opts.bubble
)
let atruleChilds = createFnAtruleChilds(bubble)
let unwrap = atruleNames(
[
'document',
'font-face',
'keyframes',
'-webkit-keyframes',
'-moz-keyframes'
],
opts.unwrap
)
let rootRuleName = (opts.rootRuleName || 'at-root').replace(/^@/, '')
let preserveEmpty = opts.preserveEmpty
return {
postcssPlugin: 'postcss-nested',
Once(root) {
root.walkAtRules(rootRuleName, node => {
normalizeRootRule(node)
root[hasRootRule] = true
})
},
Rule(rule) {
let unwrapped = false
let after = rule
let copyDeclarations = false
let declarations = []
rule.each(child => {
if (child.type === 'rule') {
if (declarations.length) {
after = pickDeclarations(rule.selector, declarations, after)
declarations = []
}
copyDeclarations = true
unwrapped = true
child.selectors = mergeSelectors(rule, child)
after = breakOut(child, after)
} else if (child.type === 'atrule') {
if (declarations.length) {
after = pickDeclarations(rule.selector, declarations, after)
declarations = []
}
if (child.name === rootRuleName) {
unwrapped = true
atruleChilds(rule, child, true, child[rootRuleMergeSel])
after = breakOut(child, after)
} else if (bubble[child.name]) {
copyDeclarations = true
unwrapped = true
atruleChilds(rule, child, true)
after = breakOut(child, after)
} else if (unwrap[child.name]) {
copyDeclarations = true
unwrapped = true
atruleChilds(rule, child, false)
after = breakOut(child, after)
} else if (copyDeclarations) {
declarations.push(child)
}
} else if (child.type === 'decl' && copyDeclarations) {
declarations.push(child)
}
})
if (declarations.length) {
after = pickDeclarations(rule.selector, declarations, after)
}
if (unwrapped && preserveEmpty !== true) {
rule.raws.semicolon = true
if (rule.nodes.length === 0) rule.remove()
}
},
RootExit(root) {
if (root[hasRootRule]) {
root.walkAtRules(rootRuleName, unwrapRootRule)
root[hasRootRule] = false
}
}
}
}
module.exports.postcss = true