diff --git a/packages/vue-cli-plugin-uni/packages/postcss/index.v3.js b/packages/vue-cli-plugin-uni/packages/postcss/index.v3.js index 5e1b9d7693e87f511089b05ffea6eee5f633e879..5ec3c5b8569ad9ffd9aaf26238343ed16fac436c 100644 --- a/packages/vue-cli-plugin-uni/packages/postcss/index.v3.js +++ b/packages/vue-cli-plugin-uni/packages/postcss/index.v3.js @@ -21,17 +21,38 @@ module.exports = postcss.plugin('postcss-uniapp-plugin', function (opts) { rule.selectors = rule.selectors.map(complexSelector => // complexSelector => simpleSelectors // "a.b#c" => ["a", ".b", "#c"] - transformSelector(complexSelector, simpleSelectors => + transformSelector(complexSelector, simpleSelectors => { + simpleSelectors.each((selector) => { + // find the last child node to insert attribute selector + selector.each((n) => { + // ">>>" combinator + // and /deep/ alias for >>>, since >>> doesn't work in SASS + if (n.type === 'combinator' && + (n.value === '>>>' || n.value === + '/deep/')) { + n.value = ' ' + n.spaces.before = n.spaces.after = '' + return false + } + // in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias + if (n.type === 'pseudo' && n.value === + '::v-deep') { + n.value = n.spaces.before = n.spaces.after = + '' + return false + } + }) + }) // only process type selector, leave alone class & id selectors - simpleSelectors.walkTags(tag => { + return simpleSelectors.walkTags(tag => { if (tag.value === 'page') { tag.value = 'body' } else if (~TAGS.indexOf(tag.value) && tag.value.substring( - 0, 4) !== 'uni-') { + 0, 4) !== 'uni-') { tag.value = 'uni-' + tag.value } }) - ) + }) ) } })