scope-id.js
2.57 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
var postcss = require('postcss')
var selectorParser = require('postcss-selector-parser')
module.exports = postcss.plugin('add-id', function (opts) {
return function (root) {
var keyframes = Object.create(null)
root.each(function rewriteSelector (node) {
if (!node.selector) {
// handle media queries
if (node.type === 'atrule') {
if (node.name === 'media') {
node.each(rewriteSelector)
} else if (node.name === 'keyframes') {
// register keyframes
keyframes[node.params] = node.params = node.params + '-' + opts.id
}
}
return
}
node.selector = selectorParser(function (selectors) {
selectors.each(function (selector) {
var node = null
selector.each(function (n) {
// ">>>" combinator
if (n.type === 'combinator' && n.value === '>>>') {
n.value = ' '
n.spaces.before = n.spaces.after = ''
return false
}
// /deep/ alias for >>>, since >>> doesn't work in SASS
if (n.type === 'tag' && n.value === '/deep/') {
var next = n.next()
if (next.type === 'combinator' && next.value === ' ') {
next.remove()
}
n.remove()
return false
}
if (n.type !== 'pseudo' && n.type !== 'combinator') {
node = n
}
})
selector.insertAfter(node, selectorParser.attribute({
attribute: opts.id
}))
})
}).process(node.selector).result
})
// If keyframes are found in this <style>, find and rewrite animation names
// in declarations.
// Caveat: this only works for keyframes and animation rules in the same
// <style> element.
if (Object.keys(keyframes).length) {
root.walkDecls(decl => {
// individual animation-name declaration
if (/-?animation-name$/.test(decl.prop)) {
decl.value = decl.value.split(',')
.map(v => keyframes[v.trim()] || v.trim())
.join(',')
}
// shorthand
if (/-?animation$/.test(decl.prop)) {
decl.value = decl.value.split(',')
.map(v => {
var vals = v.split(/\s+/)
var name = vals[0]
if (keyframes[name]) {
return [keyframes[name]].concat(vals.slice(1)).join(' ')
} else {
return v
}
})
.join(',')
}
})
}
}
})