504 lines
12 KiB
JavaScript
504 lines
12 KiB
JavaScript
|
'use strict'
|
||
|
|
|
||
|
|
let MapGenerator = require('./map-generator')
|
||
|
|
let { isClean } = require('./symbols')
|
||
|
|
let stringify = require('./stringify')
|
||
|
|
let warnOnce = require('./warn-once')
|
||
|
|
let Result = require('./result')
|
||
|
|
let parse = require('./parse')
|
||
|
|
let Root = require('./root')
|
||
|
|
|
||
|
|
const TYPE_TO_CLASS_NAME = {
|
||
|
|
root: 'Root',
|
||
|
|
atrule: 'AtRule',
|
||
|
|
rule: 'Rule',
|
||
|
|
decl: 'Declaration',
|
||
|
|
comment: 'Comment'
|
||
|
|
}
|
||
|
|
|
||
|
|
const PLUGIN_PROPS = {
|
||
|
|
postcssPlugin: true,
|
||
|
|
prepare: true,
|
||
|
|
Once: true,
|
||
|
|
Root: true,
|
||
|
|
Declaration: true,
|
||
|
|
Rule: true,
|
||
|
|
AtRule: true,
|
||
|
|
Comment: true,
|
||
|
|
DeclarationExit: true,
|
||
|
|
RuleExit: true,
|
||
|
|
AtRuleExit: true,
|
||
|
|
CommentExit: true,
|
||
|
|
RootExit: true,
|
||
|
|
OnceExit: true
|
||
|
|
}
|
||
|
|
|
||
|
|
const NOT_VISITORS = {
|
||
|
|
postcssPlugin: true,
|
||
|
|
prepare: true,
|
||
|
|
Once: true
|
||
|
|
}
|
||
|
|
|
||
|
|
const CHILDREN = 0
|
||
|
|
|
||
|
|
function isPromise(obj) {
|
||
|
|
return typeof obj === 'object' && typeof obj.then === 'function'
|
||
|
|
}
|
||
|
|
|
||
|
|
function getEvents(node) {
|
||
|
|
let key = false
|
||
|
|
let type = TYPE_TO_CLASS_NAME[node.type]
|
||
|
|
if (node.type === 'decl') {
|
||
|
|
key = node.prop.toLowerCase()
|
||
|
|
} else if (node.type === 'atrule') {
|
||
|
|
key = node.name.toLowerCase()
|
||
|
|
}
|
||
|
|
|
||
|
|
if (key && node.append) {
|
||
|
|
return [
|
||
|
|
type,
|
||
|
|
type + '-' + key,
|
||
|
|
CHILDREN,
|
||
|
|
type + 'Exit',
|
||
|
|
type + 'Exit-' + key
|
||
|
|
]
|
||
|
|
} else if (key) {
|
||
|
|
return [type, type + '-' + key, type + 'Exit', type + 'Exit-' + key]
|
||
|
|
} else if (node.append) {
|
||
|
|
return [type, CHILDREN, type + 'Exit']
|
||
|
|
} else {
|
||
|
|
return [type, type + 'Exit']
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function toStack(node) {
|
||
|
|
let events
|
||
|
|
if (node.type === 'root') {
|
||
|
|
events = ['Root', CHILDREN, 'RootExit']
|
||
|
|
} else {
|
||
|
|
events = getEvents(node)
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
node,
|
||
|
|
events,
|
||
|
|
eventIndex: 0,
|
||
|
|
visitors: [],
|
||
|
|
visitorIndex: 0,
|
||
|
|
iterator: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function cleanMarks(node) {
|
||
|
|
node[isClean] = false
|
||
|
|
if (node.nodes) node.nodes.forEach(i => cleanMarks(i))
|
||
|
|
return node
|
||
|
|
}
|
||
|
|
|
||
|
|
let postcss = {}
|
||
|
|
|
||
|
|
class LazyResult {
|
||
|
|
constructor(processor, css, opts) {
|
||
|
|
this.stringified = false
|
||
|
|
this.processed = false
|
||
|
|
|
||
|
|
let root
|
||
|
|
if (typeof css === 'object' && css !== null && css.type === 'root') {
|
||
|
|
root = cleanMarks(css)
|
||
|
|
} else if (css instanceof LazyResult || css instanceof Result) {
|
||
|
|
root = cleanMarks(css.root)
|
||
|
|
if (css.map) {
|
||
|
|
if (typeof opts.map === 'undefined') opts.map = {}
|
||
|
|
if (!opts.map.inline) opts.map.inline = false
|
||
|
|
opts.map.prev = css.map
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
let parser = parse
|
||
|
|
if (opts.syntax) parser = opts.syntax.parse
|
||
|
|
if (opts.parser) parser = opts.parser
|
||
|
|
if (parser.parse) parser = parser.parse
|
||
|
|
|
||
|
|
try {
|
||
|
|
root = parser(css, opts)
|
||
|
|
} catch (error) {
|
||
|
|
this.processed = true
|
||
|
|
this.error = error
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
this.result = new Result(processor, root, opts)
|
||
|
|
this.helpers = { ...postcss, result: this.result, postcss }
|
||
|
|
this.plugins = this.processor.plugins.map(plugin => {
|
||
|
|
if (typeof plugin === 'object' && plugin.prepare) {
|
||
|
|
return { ...plugin, ...plugin.prepare(this.result) }
|
||
|
|
} else {
|
||
|
|
return plugin
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
get [Symbol.toStringTag]() {
|
||
|
|
return 'LazyResult'
|
||
|
|
}
|
||
|
|
|
||
|
|
get processor() {
|
||
|
|
return this.result.processor
|
||
|
|
}
|
||
|
|
|
||
|
|
get opts() {
|
||
|
|
return this.result.opts
|
||
|
|
}
|
||
|
|
|
||
|
|
get css() {
|
||
|
|
return this.stringify().css
|
||
|
|
}
|
||
|
|
|
||
|
|
get content() {
|
||
|
|
return this.stringify().content
|
||
|
|
}
|
||
|
|
|
||
|
|
get map() {
|
||
|
|
return this.stringify().map
|
||
|
|
}
|
||
|
|
|
||
|
|
get root() {
|
||
|
|
return this.sync().root
|
||
|
|
}
|
||
|
|
|
||
|
|
get messages() {
|
||
|
|
return this.sync().messages
|
||
|
|
}
|
||
|
|
|
||
|
|
warnings() {
|
||
|
|
return this.sync().warnings()
|
||
|
|
}
|
||
|
|
|
||
|
|
toString() {
|
||
|
|
return this.css
|
||
|
|
}
|
||
|
|
|
||
|
|
then(onFulfilled, onRejected) {
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
if (!('from' in this.opts)) {
|
||
|
|
warnOnce(
|
||
|
|
'Without `from` option PostCSS could generate wrong source map ' +
|
||
|
|
'and will not find Browserslist config. Set it to CSS file path ' +
|
||
|
|
'or to `undefined` to prevent this warning.'
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return this.async().then(onFulfilled, onRejected)
|
||
|
|
}
|
||
|
|
|
||
|
|
catch(onRejected) {
|
||
|
|
return this.async().catch(onRejected)
|
||
|
|
}
|
||
|
|
|
||
|
|
finally(onFinally) {
|
||
|
|
return this.async().then(onFinally, onFinally)
|
||
|
|
}
|
||
|
|
|
||
|
|
async() {
|
||
|
|
if (this.error) return Promise.reject(this.error)
|
||
|
|
if (this.processed) return Promise.resolve(this.result)
|
||
|
|
if (!this.processing) {
|
||
|
|
this.processing = this.runAsync()
|
||
|
|
}
|
||
|
|
return this.processing
|
||
|
|
}
|
||
|
|
|
||
|
|
sync() {
|
||
|
|
if (this.error) throw this.error
|
||
|
|
if (this.processed) return this.result
|
||
|
|
this.processed = true
|
||
|
|
|
||
|
|
if (this.processing) {
|
||
|
|
throw this.getAsyncError()
|
||
|
|
}
|
||
|
|
|
||
|
|
for (let plugin of this.plugins) {
|
||
|
|
let promise = this.runOnRoot(plugin)
|
||
|
|
if (isPromise(promise)) {
|
||
|
|
throw this.getAsyncError()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
this.prepareVisitors()
|
||
|
|
if (this.hasListener) {
|
||
|
|
let root = this.result.root
|
||
|
|
while (!root[isClean]) {
|
||
|
|
root[isClean] = true
|
||
|
|
this.walkSync(root)
|
||
|
|
}
|
||
|
|
if (this.listeners.OnceExit) {
|
||
|
|
this.visitSync(this.listeners.OnceExit, root)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return this.result
|
||
|
|
}
|
||
|
|
|
||
|
|
stringify() {
|
||
|
|
if (this.error) throw this.error
|
||
|
|
if (this.stringified) return this.result
|
||
|
|
this.stringified = true
|
||
|
|
|
||
|
|
this.sync()
|
||
|
|
|
||
|
|
let opts = this.result.opts
|
||
|
|
let str = stringify
|
||
|
|
if (opts.syntax) str = opts.syntax.stringify
|
||
|
|
if (opts.stringifier) str = opts.stringifier
|
||
|
|
if (str.stringify) str = str.stringify
|
||
|
|
|
||
|
|
let map = new MapGenerator(str, this.result.root, this.result.opts)
|
||
|
|
let data = map.generate()
|
||
|
|
this.result.css = data[0]
|
||
|
|
this.result.map = data[1]
|
||
|
|
|
||
|
|
return this.result
|
||
|
|
}
|
||
|
|
|
||
|
|
walkSync(node) {
|
||
|
|
node[isClean] = true
|
||
|
|
let events = getEvents(node)
|
||
|
|
for (let event of events) {
|
||
|
|
if (event === CHILDREN) {
|
||
|
|
if (node.nodes) {
|
||
|
|
node.each(child => {
|
||
|
|
if (!child[isClean]) this.walkSync(child)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
let visitors = this.listeners[event]
|
||
|
|
if (visitors) {
|
||
|
|
if (this.visitSync(visitors, node.toProxy())) return
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
visitSync(visitors, node) {
|
||
|
|
for (let [plugin, visitor] of visitors) {
|
||
|
|
this.result.lastPlugin = plugin
|
||
|
|
let promise
|
||
|
|
try {
|
||
|
|
promise = visitor(node, this.helpers)
|
||
|
|
} catch (e) {
|
||
|
|
throw this.handleError(e, node.proxyOf)
|
||
|
|
}
|
||
|
|
if (node.type !== 'root' && !node.parent) return true
|
||
|
|
if (isPromise(promise)) {
|
||
|
|
throw this.getAsyncError()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
runOnRoot(plugin) {
|
||
|
|
this.result.lastPlugin = plugin
|
||
|
|
try {
|
||
|
|
if (typeof plugin === 'object' && plugin.Once) {
|
||
|
|
return plugin.Once(this.result.root, this.helpers)
|
||
|
|
} else if (typeof plugin === 'function') {
|
||
|
|
return plugin(this.result.root, this.result)
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
throw this.handleError(error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getAsyncError() {
|
||
|
|
throw new Error('Use process(css).then(cb) to work with async plugins')
|
||
|
|
}
|
||
|
|
|
||
|
|
handleError(error, node) {
|
||
|
|
let plugin = this.result.lastPlugin
|
||
|
|
try {
|
||
|
|
if (node) node.addToError(error)
|
||
|
|
this.error = error
|
||
|
|
if (error.name === 'CssSyntaxError' && !error.plugin) {
|
||
|
|
error.plugin = plugin.postcssPlugin
|
||
|
|
error.setMessage()
|
||
|
|
} else if (plugin.postcssVersion) {
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
let pluginName = plugin.postcssPlugin
|
||
|
|
let pluginVer = plugin.postcssVersion
|
||
|
|
let runtimeVer = this.result.processor.version
|
||
|
|
let a = pluginVer.split('.')
|
||
|
|
let b = runtimeVer.split('.')
|
||
|
|
|
||
|
|
if (a[0] !== b[0] || parseInt(a[1]) > parseInt(b[1])) {
|
||
|
|
console.error(
|
||
|
|
'Unknown error from PostCSS plugin. Your current PostCSS ' +
|
||
|
|
'version is ' +
|
||
|
|
runtimeVer +
|
||
|
|
', but ' +
|
||
|
|
pluginName +
|
||
|
|
' uses ' +
|
||
|
|
pluginVer +
|
||
|
|
'. Perhaps this is the source of the error below.'
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
// istanbul ignore next
|
||
|
|
if (console && console.error) console.error(err)
|
||
|
|
}
|
||
|
|
return error
|
||
|
|
}
|
||
|
|
|
||
|
|
async runAsync() {
|
||
|
|
this.plugin = 0
|
||
|
|
for (let i = 0; i < this.plugins.length; i++) {
|
||
|
|
let plugin = this.plugins[i]
|
||
|
|
let promise = this.runOnRoot(plugin)
|
||
|
|
if (isPromise(promise)) {
|
||
|
|
try {
|
||
|
|
await promise
|
||
|
|
} catch (error) {
|
||
|
|
throw this.handleError(error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
this.prepareVisitors()
|
||
|
|
if (this.hasListener) {
|
||
|
|
let root = this.result.root
|
||
|
|
while (!root[isClean]) {
|
||
|
|
root[isClean] = true
|
||
|
|
let stack = [toStack(root)]
|
||
|
|
while (stack.length > 0) {
|
||
|
|
let promise = this.visitTick(stack)
|
||
|
|
if (isPromise(promise)) {
|
||
|
|
try {
|
||
|
|
await promise
|
||
|
|
} catch (e) {
|
||
|
|
let node = stack[stack.length - 1].node
|
||
|
|
throw this.handleError(e, node)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.listeners.OnceExit) {
|
||
|
|
for (let [plugin, visitor] of this.listeners.OnceExit) {
|
||
|
|
this.result.lastPlugin = plugin
|
||
|
|
try {
|
||
|
|
await visitor(root, this.helpers)
|
||
|
|
} catch (e) {
|
||
|
|
throw this.handleError(e)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
this.processed = true
|
||
|
|
return this.stringify()
|
||
|
|
}
|
||
|
|
|
||
|
|
prepareVisitors() {
|
||
|
|
this.listeners = {}
|
||
|
|
let add = (plugin, type, cb) => {
|
||
|
|
if (!this.listeners[type]) this.listeners[type] = []
|
||
|
|
this.listeners[type].push([plugin, cb])
|
||
|
|
}
|
||
|
|
for (let plugin of this.plugins) {
|
||
|
|
if (typeof plugin === 'object') {
|
||
|
|
for (let event in plugin) {
|
||
|
|
if (!PLUGIN_PROPS[event] && /^[A-Z]/.test(event)) {
|
||
|
|
throw new Error(
|
||
|
|
`Unknown event ${event} in ${plugin.postcssPlugin}. ` +
|
||
|
|
`Try to update PostCSS (${this.processor.version} now).`
|
||
|
|
)
|
||
|
|
}
|
||
|
|
if (!NOT_VISITORS[event]) {
|
||
|
|
if (typeof plugin[event] === 'object') {
|
||
|
|
for (let filter in plugin[event]) {
|
||
|
|
if (filter === '*') {
|
||
|
|
add(plugin, event, plugin[event][filter])
|
||
|
|
} else {
|
||
|
|
add(
|
||
|
|
plugin,
|
||
|
|
event + '-' + filter.toLowerCase(),
|
||
|
|
plugin[event][filter]
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else if (typeof plugin[event] === 'function') {
|
||
|
|
add(plugin, event, plugin[event])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.hasListener = Object.keys(this.listeners).length > 0
|
||
|
|
}
|
||
|
|
|
||
|
|
visitTick(stack) {
|
||
|
|
let visit = stack[stack.length - 1]
|
||
|
|
let { node, visitors } = visit
|
||
|
|
|
||
|
|
if (node.type !== 'root' && !node.parent) {
|
||
|
|
stack.pop()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (visitors.length > 0 && visit.visitorIndex < visitors.length) {
|
||
|
|
let [plugin, visitor] = visitors[visit.visitorIndex]
|
||
|
|
visit.visitorIndex += 1
|
||
|
|
if (visit.visitorIndex === visitors.length) {
|
||
|
|
visit.visitors = []
|
||
|
|
visit.visitorIndex = 0
|
||
|
|
}
|
||
|
|
this.result.lastPlugin = plugin
|
||
|
|
try {
|
||
|
|
return visitor(node.toProxy(), this.helpers)
|
||
|
|
} catch (e) {
|
||
|
|
throw this.handleError(e, node)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (visit.iterator !== 0) {
|
||
|
|
let iterator = visit.iterator
|
||
|
|
let child
|
||
|
|
while ((child = node.nodes[node.indexes[iterator]])) {
|
||
|
|
node.indexes[iterator] += 1
|
||
|
|
if (!child[isClean]) {
|
||
|
|
child[isClean] = true
|
||
|
|
stack.push(toStack(child))
|
||
|
|
return
|
||
|
|
}
|
||
|
|
}
|
||
|
|
visit.iterator = 0
|
||
|
|
delete node.indexes[iterator]
|
||
|
|
}
|
||
|
|
|
||
|
|
let events = visit.events
|
||
|
|
while (visit.eventIndex < events.length) {
|
||
|
|
let event = events[visit.eventIndex]
|
||
|
|
visit.eventIndex += 1
|
||
|
|
if (event === CHILDREN) {
|
||
|
|
if (node.nodes && node.nodes.length) {
|
||
|
|
node[isClean] = true
|
||
|
|
visit.iterator = node.getIterator()
|
||
|
|
}
|
||
|
|
return
|
||
|
|
} else if (this.listeners[event]) {
|
||
|
|
visit.visitors = this.listeners[event]
|
||
|
|
return
|
||
|
|
}
|
||
|
|
}
|
||
|
|
stack.pop()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
LazyResult.registerPostcss = dependant => {
|
||
|
|
postcss = dependant
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = LazyResult
|
||
|
|
LazyResult.default = LazyResult
|
||
|
|
|
||
|
|
Root.registerLazyResult(LazyResult)
|