diff options
Diffstat (limited to 'node_modules/@vue/component-compiler-utils/lib/stylePlugins')
| -rw-r--r-- | node_modules/@vue/component-compiler-utils/lib/stylePlugins/scoped.ts | 98 | ||||
| -rw-r--r-- | node_modules/@vue/component-compiler-utils/lib/stylePlugins/trim.ts | 10 |
2 files changed, 108 insertions, 0 deletions
diff --git a/node_modules/@vue/component-compiler-utils/lib/stylePlugins/scoped.ts b/node_modules/@vue/component-compiler-utils/lib/stylePlugins/scoped.ts new file mode 100644 index 00000000..c0ce6c2a --- /dev/null +++ b/node_modules/@vue/component-compiler-utils/lib/stylePlugins/scoped.ts @@ -0,0 +1,98 @@ +import { Root } from 'postcss' +import * as postcss from 'postcss' +// postcss-selector-parser does have typings but it's problematic to work with. +const selectorParser = require('postcss-selector-parser') + +export default postcss.plugin('add-id', (options: any) => (root: Root) => { + const id: string = options + const keyframes = Object.create(null) + + root.each(function rewriteSelector(node: any) { + 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: any) => { + selectors.each((selector: any) => { + let node: any = null + + selector.each((n: any) => { + // ">>>" 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(',') + } + }) + } +}) diff --git a/node_modules/@vue/component-compiler-utils/lib/stylePlugins/trim.ts b/node_modules/@vue/component-compiler-utils/lib/stylePlugins/trim.ts new file mode 100644 index 00000000..a7e9a0db --- /dev/null +++ b/node_modules/@vue/component-compiler-utils/lib/stylePlugins/trim.ts @@ -0,0 +1,10 @@ +import { Root } from 'postcss' +import * as postcss from 'postcss' + +export default postcss.plugin('trim', () => (css: Root) => { + css.walk(({ type, raws }) => { + if (type === 'rule' || type === 'atrule') { + raws.before = raws.after = '\n' + } + }) +}) |
