| let { list } = require('postcss') |
| let parser = require('postcss-value-parser') |
|
|
| let Browsers = require('./browsers') |
| let vendor = require('./vendor') |
|
|
| class Transition { |
| constructor(prefixes) { |
| this.props = ['transition', 'transition-property'] |
| this.prefixes = prefixes |
| } |
|
|
| |
| |
| |
| add(decl, result) { |
| let prefix, prop |
| let add = this.prefixes.add[decl.prop] |
| let vendorPrefixes = this.ruleVendorPrefixes(decl) |
| let declPrefixes = vendorPrefixes || (add && add.prefixes) || [] |
|
|
| let params = this.parse(decl.value) |
| let names = params.map(i => this.findProp(i)) |
| let added = [] |
|
|
| if (names.some(i => i[0] === '-')) { |
| return |
| } |
|
|
| for (let param of params) { |
| prop = this.findProp(param) |
| if (prop[0] === '-') continue |
|
|
| let prefixer = this.prefixes.add[prop] |
| if (!prefixer || !prefixer.prefixes) continue |
|
|
| for (prefix of prefixer.prefixes) { |
| if (vendorPrefixes && !vendorPrefixes.some(p => prefix.includes(p))) { |
| continue |
| } |
|
|
| let prefixed = this.prefixes.prefixed(prop, prefix) |
| if (prefixed !== '-ms-transform' && !names.includes(prefixed)) { |
| if (!this.disabled(prop, prefix)) { |
| added.push(this.clone(prop, prefixed, param)) |
| } |
| } |
| } |
| } |
|
|
| params = params.concat(added) |
| let value = this.stringify(params) |
|
|
| let webkitClean = this.stringify( |
| this.cleanFromUnprefixed(params, '-webkit-') |
| ) |
| if (declPrefixes.includes('-webkit-')) { |
| this.cloneBefore(decl, `-webkit-${decl.prop}`, webkitClean) |
| } |
| this.cloneBefore(decl, decl.prop, webkitClean) |
| if (declPrefixes.includes('-o-')) { |
| let operaClean = this.stringify(this.cleanFromUnprefixed(params, '-o-')) |
| this.cloneBefore(decl, `-o-${decl.prop}`, operaClean) |
| } |
|
|
| for (prefix of declPrefixes) { |
| if (prefix !== '-webkit-' && prefix !== '-o-') { |
| let prefixValue = this.stringify( |
| this.cleanOtherPrefixes(params, prefix) |
| ) |
| this.cloneBefore(decl, prefix + decl.prop, prefixValue) |
| } |
| } |
|
|
| if (value !== decl.value && !this.already(decl, decl.prop, value)) { |
| this.checkForWarning(result, decl) |
| decl.cloneBefore() |
| decl.value = value |
| } |
| } |
|
|
| |
| |
| |
| already(decl, prop, value) { |
| return decl.parent.some(i => i.prop === prop && i.value === value) |
| } |
|
|
| |
| |
| |
| checkForWarning(result, decl) { |
| if (decl.prop !== 'transition-property') { |
| return |
| } |
|
|
| let isPrefixed = false |
| let hasAssociatedProp = false |
|
|
| decl.parent.each(i => { |
| if (i.type !== 'decl') { |
| return undefined |
| } |
| if (i.prop.indexOf('transition-') !== 0) { |
| return undefined |
| } |
| let values = list.comma(i.value) |
| |
| if (i.prop === 'transition-property') { |
| values.forEach(value => { |
| let lookup = this.prefixes.add[value] |
| if (lookup && lookup.prefixes && lookup.prefixes.length > 0) { |
| isPrefixed = true |
| } |
| }) |
| return undefined |
| } |
| |
| hasAssociatedProp = hasAssociatedProp || values.length > 1 |
| return false |
| }) |
|
|
| if (isPrefixed && hasAssociatedProp) { |
| decl.warn( |
| result, |
| 'Replace transition-property to transition, ' + |
| 'because Autoprefixer could not support ' + |
| 'any cases of transition-property ' + |
| 'and other transition-*' |
| ) |
| } |
| } |
|
|
| |
| |
| |
| cleanFromUnprefixed(params, prefix) { |
| let remove = params |
| .map(i => this.findProp(i)) |
| .filter(i => i.slice(0, prefix.length) === prefix) |
| .map(i => this.prefixes.unprefixed(i)) |
|
|
| let result = [] |
| for (let param of params) { |
| let prop = this.findProp(param) |
| let p = vendor.prefix(prop) |
| if (!remove.includes(prop) && (p === prefix || p === '')) { |
| result.push(param) |
| } |
| } |
| return result |
| } |
|
|
| cleanOtherPrefixes(params, prefix) { |
| return params.filter(param => { |
| let current = vendor.prefix(this.findProp(param)) |
| return current === '' || current === prefix |
| }) |
| } |
|
|
| |
| |
| |
| clone(origin, name, param) { |
| let result = [] |
| let changed = false |
| for (let i of param) { |
| if (!changed && i.type === 'word' && i.value === origin) { |
| result.push({ type: 'word', value: name }) |
| changed = true |
| } else { |
| result.push(i) |
| } |
| } |
| return result |
| } |
|
|
| |
| |
| |
| cloneBefore(decl, prop, value) { |
| if (!this.already(decl, prop, value)) { |
| decl.cloneBefore({ prop, value }) |
| } |
| } |
|
|
| |
| |
| |
| disabled(prop, prefix) { |
| let other = ['order', 'justify-content', 'align-self', 'align-content'] |
| if (prop.includes('flex') || other.includes(prop)) { |
| if (this.prefixes.options.flexbox === false) { |
| return true |
| } |
|
|
| if (this.prefixes.options.flexbox === 'no-2009') { |
| return prefix.includes('2009') |
| } |
| } |
| return undefined |
| } |
|
|
| |
| |
| |
| div(params) { |
| for (let param of params) { |
| for (let node of param) { |
| if (node.type === 'div' && node.value === ',') { |
| return node |
| } |
| } |
| } |
| return { after: ' ', type: 'div', value: ',' } |
| } |
|
|
| |
| |
| |
| findProp(param) { |
| let prop = param[0].value |
| if (/^\d/.test(prop)) { |
| for (let [i, token] of param.entries()) { |
| if (i !== 0 && token.type === 'word') { |
| return token.value |
| } |
| } |
| } |
| return prop |
| } |
|
|
| |
| |
| |
| parse(value) { |
| let ast = parser(value) |
| let result = [] |
| let param = [] |
| for (let node of ast.nodes) { |
| param.push(node) |
| if (node.type === 'div' && node.value === ',') { |
| result.push(param) |
| param = [] |
| } |
| } |
| result.push(param) |
| return result.filter(i => i.length > 0) |
| } |
|
|
| |
| |
| |
| remove(decl) { |
| let params = this.parse(decl.value) |
| params = params.filter(i => { |
| let prop = this.prefixes.remove[this.findProp(i)] |
| return !prop || !prop.remove |
| }) |
| let value = this.stringify(params) |
|
|
| if (decl.value === value) { |
| return |
| } |
|
|
| if (params.length === 0) { |
| decl.remove() |
| return |
| } |
|
|
| let double = decl.parent.some(i => { |
| return i.prop === decl.prop && i.value === value |
| }) |
| let smaller = decl.parent.some(i => { |
| return i !== decl && i.prop === decl.prop && i.value.length > value.length |
| }) |
|
|
| if (double || smaller) { |
| decl.remove() |
| return |
| } |
|
|
| decl.value = value |
| } |
|
|
| |
| |
| |
| ruleVendorPrefixes(decl) { |
| let { parent } = decl |
|
|
| if (parent.type !== 'rule') { |
| return false |
| } else if (!parent.selector.includes(':-')) { |
| return false |
| } |
|
|
| let selectors = Browsers.prefixes().filter(s => |
| parent.selector.includes(':' + s) |
| ) |
|
|
| return selectors.length > 0 ? selectors : false |
| } |
|
|
| |
| |
| |
| stringify(params) { |
| if (params.length === 0) { |
| return '' |
| } |
| let nodes = [] |
| for (let param of params) { |
| if (param[param.length - 1].type !== 'div') { |
| param.push(this.div(params)) |
| } |
| nodes.push(...param) |
| } |
| if (nodes[0].type === 'div') { |
| nodes = nodes.slice(1) |
| } |
| if (nodes[nodes.length - 1].type === 'div') { |
| nodes = nodes.slice(0, -1) |
| } |
| return parser.stringify({ nodes }) |
| } |
| } |
|
|
| module.exports = Transition |
|
|