forked from dcloudio/uni-app
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: @vue/component-compiler-utils support postcss8
- Loading branch information
1 parent
ace3289
commit d495867
Showing
3 changed files
with
174 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
220 changes: 119 additions & 101 deletions
220
...ges/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/scoped.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,112 +1,130 @@ | ||
"use strict"; | ||
var __importStar = (this && this.__importStar) || function (mod) { | ||
if (mod && mod.__esModule) return mod; | ||
var result = {}; | ||
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; | ||
result["default"] = mod; | ||
return result; | ||
if (mod && mod.__esModule) return mod; | ||
var result = {}; | ||
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; | ||
result["default"] = mod; | ||
return result; | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
const postcss = __importStar(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; | ||
const once = (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); | ||
} | ||
node.selector = selectorParser((selectors) => { | ||
selectors.each((selector) => { | ||
let node = null; | ||
// 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; | ||
} | ||
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 = ''; | ||
} | ||
// fixed by xxxxxx (h5,app-plus v3 平台继续使用 attribute,其他平台使用 className) | ||
if( | ||
process.env.UNI_PLATFORM === 'h5' || | ||
( | ||
process.env.UNI_PLATFORM === 'app-plus' && | ||
process.env.UNI_USING_V3 | ||
) | ||
){ | ||
selector.insertAfter(node, selectorParser.attribute({ | ||
attribute: id | ||
})); | ||
} else { | ||
selector.insertAfter(node, selectorParser.className({ | ||
value: 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(','); | ||
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; | ||
// 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; | ||
} | ||
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 = ''; | ||
} | ||
// fixed by xxxxxx (h5,app-plus v3 平台继续使用 attribute,其他平台使用 className) | ||
if ( | ||
process.env.UNI_PLATFORM === 'h5' || | ||
( | ||
process.env.UNI_PLATFORM === 'app-plus' && | ||
process.env.UNI_USING_V3 | ||
) | ||
) { | ||
selector.insertAfter(node, selectorParser.attribute({ | ||
attribute: id | ||
})); | ||
} else { | ||
selector.insertAfter(node, selectorParser.className({ | ||
value: 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(' '); | ||
} | ||
// 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(','); | ||
else { | ||
return v; | ||
} | ||
}); | ||
}) | ||
.join(','); | ||
} | ||
}); | ||
} | ||
}; | ||
|
||
const version = Number(require('postcss/package.json').version.split('.')[0]) | ||
|
||
if (version < 8) { | ||
const postcss = require('postcss') | ||
module.exports = postcss.plugin('add-id', function (opts) { | ||
return once(opts) | ||
}) | ||
} else { | ||
module.exports = function (opts) { | ||
return { | ||
postcssPlugin: 'add-id', | ||
Once: once(opts) | ||
} | ||
}); | ||
} | ||
|
||
module.exports.postcss = true | ||
} |
48 changes: 33 additions & 15 deletions
48
packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/trim.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,20 +1,38 @@ | ||
"use strict"; | ||
var __importStar = (this && this.__importStar) || function (mod) { | ||
if (mod && mod.__esModule) return mod; | ||
var result = {}; | ||
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; | ||
result["default"] = mod; | ||
return result; | ||
if (mod && mod.__esModule) return mod; | ||
var result = {}; | ||
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; | ||
result["default"] = mod; | ||
return result; | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
const postcss = __importStar(require("postcss")); | ||
exports.default = postcss.plugin('trim', () => (css) => { | ||
css.walk(({ type, raws }) => { | ||
if (type === 'rule' || type === 'atrule') { | ||
if (raws.before) | ||
raws.before = '\n'; | ||
if (raws.after) | ||
raws.after = '\n'; | ||
} | ||
}); | ||
}); | ||
const once = (css) => { | ||
css.walk(({ type, raws }) => { | ||
if (type === 'rule' || type === 'atrule') { | ||
if (raws.before) | ||
raws.before = '\n'; | ||
if (raws.after) | ||
raws.after = '\n'; | ||
} | ||
}); | ||
}; | ||
|
||
const version = Number(require('postcss/package.json').version.split('.')[0]) | ||
|
||
if (version < 8) { | ||
const postcss = require('postcss') | ||
module.exports = postcss.plugin('trim', function (opts) { | ||
return once | ||
}) | ||
} else { | ||
module.exports = function (opts) { | ||
return { | ||
postcssPlugin: 'trim', | ||
Once: once | ||
} | ||
} | ||
|
||
module.exports.postcss = true | ||
} |