Blame view

node_modules/mpvue-loader/lib/style-compiler/plugins/scope-id.js 2.85 KB
ce4c83ff   wxy   初始提交
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
  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.name === 'supports') {
              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.className({
              value: opts.id
            }))
            // TODO, options for mp
            // selector.insertAfter(node, selectorParser.attribute({
            //   attribute: opts.id
            // }))
            // selector.prepend(selectorParser.className({
            //   value: `${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(',')
          }
        })
      }
    }
  })