diff options
| author | ruki <waruqi@gmail.com> | 2018-11-08 00:38:48 +0800 |
|---|---|---|
| committer | ruki <waruqi@gmail.com> | 2018-11-07 21:53:09 +0800 |
| commit | 26105034da4fcce7ac883c899d781f016559310d (patch) | |
| tree | c459a5dc4e3aa0972d9919033ece511ce76dd129 /node_modules/@vue/component-compiler-utils/dist/stylePlugins/scoped.js | |
| parent | 2c77f00f1a7ecb6c8192f9c16d3b2001b254a107 (diff) | |
| download | xmake-docs-26105034da4fcce7ac883c899d781f016559310d.tar.gz xmake-docs-26105034da4fcce7ac883c899d781f016559310d.zip | |
switch to vuepress
Diffstat (limited to 'node_modules/@vue/component-compiler-utils/dist/stylePlugins/scoped.js')
| -rw-r--r-- | node_modules/@vue/component-compiler-utils/dist/stylePlugins/scoped.js | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/node_modules/@vue/component-compiler-utils/dist/stylePlugins/scoped.js b/node_modules/@vue/component-compiler-utils/dist/stylePlugins/scoped.js new file mode 100644 index 00000000..e2dbd1a9 --- /dev/null +++ b/node_modules/@vue/component-compiler-utils/dist/stylePlugins/scoped.js @@ -0,0 +1,93 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const postcss = require("postcss"); +// postcss-selector-parser does have typings but it's problematic to work with. +const selectorParser = require('postcss-selector-parser'); +exports.default = postcss.plugin('add-id', (options) => (root) => { + const id = options; + const 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 (/-?keyframes$/.test(node.name)) { + // register keyframes + keyframes[node.params] = node.params = node.params + '-' + id; + } + } + return; + } + node.selector = selectorParser((selectors) => { + selectors.each((selector) => { + let node = null; + selector.each((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/') { + const prev = n.prev(); + if (prev && prev.type === 'combinator' && prev.value === ' ') { + prev.remove(); + } + n.remove(); + return false; + } + if (n.type !== 'pseudo' && n.type !== 'combinator') { + node = n; + } + }); + if (node) { + node.spaces.after = ''; + } + else { + // For deep selectors & standalone pseudo selectors, + // the attribute selectors are prepended rather than appended. + // So all leading spaces must be eliminated to avoid problems. + selector.first.spaces.before = ''; + } + selector.insertAfter(node, selectorParser.attribute({ + attribute: id + })); + }); + }).processSync(node.selector); + }); + // 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 (/^(-\w+-)?animation-name$/.test(decl.prop)) { + decl.value = decl.value + .split(',') + .map(v => keyframes[v.trim()] || v.trim()) + .join(','); + } + // shorthand + if (/^(-\w+-)?animation$/.test(decl.prop)) { + decl.value = decl.value + .split(',') + .map(v => { + const vals = v.trim().split(/\s+/); + const i = vals.findIndex(val => keyframes[val]); + if (i !== -1) { + vals.splice(i, 1, keyframes[vals[i]]); + return vals.join(' '); + } + else { + return v; + } + }) + .join(','); + } + }); + } +}); |
