let parser = require('postcss-value-parser') let Value = require('./value') let insertAreas = require('./hacks/grid-utils').insertAreas const OLD_LINEAR = /(^|[^-])linear-gradient\(\s*(top|left|right|bottom)/i const OLD_RADIAL = /(^|[^-])radial-gradient\(\s*\d+(\w*|%)\s+\d+(\w*|%)\s*,/i const IGNORE_NEXT = /(!\s*)?autoprefixer:\s*ignore\s+next/i const GRID_REGEX = /(!\s*)?autoprefixer\s*grid:\s*(on|off|(no-)?autoplace)/i const SIZES = [ 'width', 'height', 'min-width', 'max-width', 'min-height', 'max-height', 'inline-size', 'min-inline-size', 'max-inline-size', 'block-size', 'min-block-size', 'max-block-size' ] function hasGridTemplate(decl) { return decl.parent.some( i => i.prop === 'grid-template' || i.prop === 'grid-template-areas' ) } function hasRowsAndColumns(decl) { let hasRows = decl.parent.some(i => i.prop === 'grid-template-rows') let hasColumns = decl.parent.some(i => i.prop === 'grid-template-columns') return hasRows && hasColumns } class Processor { constructor(prefixes) { this.prefixes = prefixes } /** * Add necessary prefixes */ add(css, result) { // At-rules let resolution = this.prefixes.add['@resolution'] let keyframes = this.prefixes.add['@keyframes'] let viewport = this.prefixes.add['@viewport'] let supports = this.prefixes.add['@supports'] css.walkAtRules(rule => { if (rule.name === 'keyframes') { if (!this.disabled(rule, result)) { return keyframes && keyframes.process(rule) } } else if (rule.name === 'viewport') { if (!this.disabled(rule, result)) { return viewport && viewport.process(rule) } } else if (rule.name === 'supports') { if ( this.prefixes.options.supports !== false && !this.disabled(rule, result) ) { return supports.process(rule) } } else if (rule.name === 'media' && rule.params.includes('-resolution')) { if (!this.disabled(rule, result)) { return resolution && resolution.process(rule) } } return undefined }) // Selectors css.walkRules(rule => { if (this.disabled(rule, result)) return undefined return this.prefixes.add.selectors.map(selector => { return selector.process(rule, result) }) }) function insideGrid(decl) { return decl.parent.nodes.some(node => { if (node.type !== 'decl') return false let displayGrid = node.prop === 'display' && /(inline-)?grid/.test(node.value) let gridTemplate = node.prop.startsWith('grid-template') let gridGap = /^grid-([A-z]+-)?gap/.test(node.prop) return displayGrid || gridTemplate || gridGap }) } function insideFlex(decl) { return decl.parent.some(node => { return node.prop === 'display' && /(inline-)?flex/.test(node.value) }) } let gridPrefixes = this.gridStatus(css, result) && this.prefixes.add['grid-area'] && this.prefixes.add['grid-area'].prefixes css.walkDecls(decl => { if (this.disabledDecl(decl, result)) return undefined let parent = decl.parent let prop = decl.prop let value = decl.value if (prop === 'color-adjust') { result.warn( 'Replace color-adjust to print-color-adjust. ' + 'The color-adjust shorthand is currently deprecated.', { node: decl } ) } else if (prop === 'grid-row-span') { result.warn( 'grid-row-span is not part of final Grid Layout. Use grid-row.', { node: decl } ) return undefined } else if (prop === 'grid-column-span') { result.warn( 'grid-column-span is not part of final Grid Layout. Use grid-column.', { node: decl } ) return undefined } else if (prop === 'display' && value === 'box') { result.warn( 'You should write display: flex by final spec ' + 'instead of display: box', { node: decl } ) return undefined } else if (prop === 'text-emphasis-position') { if (value === 'under' || value === 'over') { result.warn( 'You should use 2 values for text-emphasis-position ' + 'For example, `under left` instead of just `under`.', { node: decl } ) } } else if ( /^(align|justify|place)-(items|content)$/.test(prop) && insideFlex(decl) ) { if (value === 'start' || value === 'end') { result.warn( `${value} value has mixed support, consider using ` + `flex-${value} instead`, { node: decl } ) } } else if (prop === 'text-decoration-skip' && value === 'ink') { result.warn( 'Replace text-decoration-skip: ink to ' + 'text-decoration-skip-ink: auto, because spec had been changed', { node: decl } ) } else { if (gridPrefixes && this.gridStatus(decl, result)) { if (decl.value === 'subgrid') { result.warn('IE does not support subgrid', { node: decl }) } if (/^(align|justify|place)-items$/.test(prop) && insideGrid(decl)) { let fixed = prop.replace('-items', '-self') result.warn( `IE does not support ${prop} on grid containers. ` + `Try using ${fixed} on child elements instead: ` + `${decl.parent.selector} > * { ${fixed}: ${decl.value} }`, { node: decl } ) } else if ( /^(align|justify|place)-content$/.test(prop) && insideGrid(decl) ) { result.warn(`IE does not support ${decl.prop} on grid containers`, { node: decl }) } else if (prop === 'display' && decl.value === 'contents') { result.warn( 'Please do not use display: contents; ' + 'if you have grid setting enabled', { node: decl } ) return undefined } else if (decl.prop === 'grid-gap') { let status = this.gridStatus(decl, result) if ( status === 'autoplace' && !hasRowsAndColumns(decl) && !hasGridTemplate(decl) ) { result.warn( 'grid-gap only works if grid-template(-areas) is being ' + 'used or both rows and columns have been declared ' + 'and cells have not been manually ' + 'placed inside the explicit grid', { node: decl } ) } else if ( (status === true || status === 'no-autoplace') && !hasGridTemplate(decl) ) { result.warn( 'grid-gap only works if grid-template(-areas) is being used', { node: decl } ) } } else if (prop === 'grid-auto-columns') { result.warn('grid-auto-columns is not supported by IE', { node: decl }) return undefined } else if (prop === 'grid-auto-rows') { result.warn('grid-auto-rows is not supported by IE', { node: decl }) return undefined } else if (prop === 'grid-auto-flow') { let hasRows = parent.some(i => i.prop === 'grid-template-rows') let hasCols = parent.some(i => i.prop === 'grid-template-columns') if (hasGridTemplate(decl)) { result.warn('grid-auto-flow is not supported by IE', { node: decl }) } else if (value.includes('dense')) { result.warn('grid-auto-flow: dense is not supported by IE', { node: decl }) } else if (!hasRows && !hasCols) { result.warn( 'grid-auto-flow works only if grid-template-rows and ' + 'grid-template-columns are present in the same rule', { node: decl } ) } return undefined } else if (value.includes('auto-fit')) { result.warn('auto-fit value is not supported by IE', { node: decl, word: 'auto-fit' }) return undefined } else if (value.includes('auto-fill')) { result.warn('auto-fill value is not supported by IE', { node: decl, word: 'auto-fill' }) return undefined } else if (prop.startsWith('grid-template') && value.includes('[')) { result.warn( 'Autoprefixer currently does not support line names. ' + 'Try using grid-template-areas instead.', { node: decl, word: '[' } ) } } if (value.includes('radial-gradient')) { if (OLD_RADIAL.test(decl.value)) { result.warn( 'Gradient has outdated direction syntax. ' + 'New syntax is like `closest-side at 0 0` ' + 'instead of `0 0, closest-side`.', { node: decl } ) } else { let ast = parser(value) for (let i of ast.nodes) { if (i.type === 'function' && i.value === 'radial-gradient') { for (let word of i.nodes) { if (word.type === 'word') { if (word.value === 'cover') { result.warn( 'Gradient has outdated direction syntax. ' + 'Replace `cover` to `farthest-corner`.', { node: decl } ) } else if (word.value === 'contain') { result.warn( 'Gradient has outdated direction syntax. ' + 'Replace `contain` to `closest-side`.', { node: decl } ) } } } } } } } if (value.includes('linear-gradient')) { if (OLD_LINEAR.test(value)) { result.warn( 'Gradient has outdated direction syntax. ' + 'New syntax is like `to left` instead of `right`.', { node: decl } ) } } } if (SIZES.includes(decl.prop)) { if (!decl.value.includes('-fill-available')) { if (decl.value.includes('fill-available')) { result.warn( 'Replace fill-available to stretch, ' + 'because spec had been changed', { node: decl } ) } else if (decl.value.includes('fill')) { let ast = parser(value) if (ast.nodes.some(i => i.type === 'word' && i.value === 'fill')) { result.warn( 'Replace fill to stretch, because spec had been changed', { node: decl } ) } } } } let prefixer if (decl.prop === 'transition' || decl.prop === 'transition-property') { // Transition return this.prefixes.transition.add(decl, result) } else if (decl.prop === 'align-self') { // align-self flexbox or grid let display = this.displayType(decl) if (display !== 'grid' && this.prefixes.options.flexbox !== false) { prefixer = this.prefixes.add['align-self'] if (prefixer && prefixer.prefixes) { prefixer.process(decl) } } if (this.gridStatus(decl, result) !== false) { prefixer = this.prefixes.add['grid-row-align'] if (prefixer && prefixer.prefixes) { return prefixer.process(decl, result) } } } else if (decl.prop === 'justify-self') { // justify-self flexbox or grid if (this.gridStatus(decl, result) !== false) { prefixer = this.prefixes.add['grid-column-align'] if (prefixer && prefixer.prefixes) { return prefixer.process(decl, result) } } } else if (decl.prop === 'place-self') { prefixer = this.prefixes.add['place-self'] if ( prefixer && prefixer.prefixes && this.gridStatus(decl, result) !== false ) { return prefixer.process(decl, result) } } else { // Properties prefixer = this.prefixes.add[decl.prop] if (prefixer && prefixer.prefixes) { return prefixer.process(decl, result) } } return undefined }) // Insert grid-area prefixes. We need to be able to store the different // rules as a data and hack API is not enough for this if (this.gridStatus(css, result)) { insertAreas(css, this.disabled) } // Values return css.walkDecls(decl => { if (this.disabledValue(decl, result)) return let unprefixed = this.prefixes.unprefixed(decl.prop) let list = this.prefixes.values('add', unprefixed) if (Array.isArray(list)) { for (let value of list) { if (value.process) value.process(decl, result) } } Value.save(this.prefixes, decl) }) } /** * Remove unnecessary pefixes */ remove(css, result) { // At-rules let resolution = this.prefixes.remove['@resolution'] css.walkAtRules((rule, i) => { if (this.prefixes.remove[`@${rule.name}`]) { if (!this.disabled(rule, result)) { rule.parent.removeChild(i) } } else if ( rule.name === 'media' && rule.params.includes('-resolution') && resolution ) { resolution.clean(rule) } }) // Selectors for (let checker of this.prefixes.remove.selectors) { css.walkRules((rule, i) => { if (checker.check(rule)) { if (!this.disabled(rule, result)) { rule.parent.removeChild(i) } } }) } return css.walkDecls((decl, i) => { if (this.disabled(decl, result)) return let rule = decl.parent let unprefixed = this.prefixes.unprefixed(decl.prop) // Transition if (decl.prop === 'transition' || decl.prop === 'transition-property') { this.prefixes.transition.remove(decl) } // Properties if ( this.prefixes.remove[decl.prop] && this.prefixes.remove[decl.prop].remove ) { let notHack = this.prefixes.group(decl).down(other => { return this.prefixes.normalize(other.prop) === unprefixed }) if (unprefixed === 'flex-flow') { notHack = true } if (decl.prop === '-webkit-box-orient') { let hacks = { 'flex-direction': true, 'flex-flow': true } if (!decl.parent.some(j => hacks[j.prop])) return } if (notHack && !this.withHackValue(decl)) { if (decl.raw('before').includes('\n')) { this.reduceSpaces(decl) } rule.removeChild(i) return } } // Values for (let checker of this.prefixes.values('remove', unprefixed)) { if (!checker.check) continue if (!checker.check(decl.value)) continue unprefixed = checker.unprefixed let notHack = this.prefixes.group(decl).down(other => { return other.value.includes(unprefixed) }) if (notHack) { rule.removeChild(i) return } } }) } /** * Some rare old values, which is not in standard */ withHackValue(decl) { return decl.prop === '-webkit-background-clip' && decl.value === 'text' } /** * Check for grid/flexbox options. */ disabledValue(node, result) { if (this.gridStatus(node, result) === false && node.type === 'decl') { if (node.prop === 'display' && node.value.includes('grid')) { return true } } if (this.prefixes.options.flexbox === false && node.type === 'decl') { if (node.prop === 'display' && node.value.includes('flex')) { return true } } if (node.type === 'decl' && node.prop === 'content') { return true } return this.disabled(node, result) } /** * Check for grid/flexbox options. */ disabledDecl(node, result) { if (this.gridStatus(node, result) === false && node.type === 'decl') { if (node.prop.includes('grid') || node.prop === 'justify-items') { return true } } if (this.prefixes.options.flexbox === false && node.type === 'decl') { let other = ['order', 'justify-content', 'align-items', 'align-content'] if (node.prop.includes('flex') || other.includes(node.prop)) { return true } } return this.disabled(node, result) } /** * Check for control comment and global options */ disabled(node, result) { if (!node) return false if (node._autoprefixerDisabled !== undefined) { return node._autoprefixerDisabled } if (node.parent) { let p = node.prev() if (p && p.type === 'comment' && IGNORE_NEXT.test(p.text)) { node._autoprefixerDisabled = true node._autoprefixerSelfDisabled = true return true } } let value = null if (node.nodes) { let status node.each(i => { if (i.type !== 'comment') return if (/(!\s*)?autoprefixer:\s*(off|on)/i.test(i.text)) { if (typeof status !== 'undefined') { result.warn( 'Second Autoprefixer control comment ' + 'was ignored. Autoprefixer applies control ' + 'comment to whole block, not to next rules.', { node: i } ) } else { status = /on/i.test(i.text) } } }) if (status !== undefined) { value = !status } } if (!node.nodes || value === null) { if (node.parent) { let isParentDisabled = this.disabled(node.parent, result) if (node.parent._autoprefixerSelfDisabled === true) { value = false } else { value = isParentDisabled } } else { value = false } } node._autoprefixerDisabled = value return value } /** * Normalize spaces in cascade declaration group */ reduceSpaces(decl) { let stop = false this.prefixes.group(decl).up(() => { stop = true return true }) if (stop) { return } let parts = decl.raw('before').split('\n') let prevMin = parts[parts.length - 1].length let diff = false this.prefixes.group(decl).down(other => { parts = other.raw('before').split('\n') let last = parts.length - 1 if (parts[last].length > prevMin) { if (diff === false) { diff = parts[last].length - prevMin } parts[last] = parts[last].slice(0, -diff) other.raws.before = parts.join('\n') } }) } /** * Is it flebox or grid rule */ displayType(decl) { for (let i of decl.parent.nodes) { if (i.prop !== 'display') { continue } if (i.value.includes('flex')) { return 'flex' } if (i.value.includes('grid')) { return 'grid' } } return false } /** * Set grid option via control comment */ gridStatus(node, result) { if (!node) return false if (node._autoprefixerGridStatus !== undefined) { return node._autoprefixerGridStatus } let value = null if (node.nodes) { let status node.each(i => { if (i.type !== 'comment') return if (GRID_REGEX.test(i.text)) { let hasAutoplace = /:\s*autoplace/i.test(i.text) let noAutoplace = /no-autoplace/i.test(i.text) if (typeof status !== 'undefined') { result.warn( 'Second Autoprefixer grid control comment was ' + 'ignored. Autoprefixer applies control comments to the whole ' + 'block, not to the next rules.', { node: i } ) } else if (hasAutoplace) { status = 'autoplace' } else if (noAutoplace) { status = true } else { status = /on/i.test(i.text) } } }) if (status !== undefined) { value = status } } if (node.type === 'atrule' && node.name === 'supports') { let params = node.params if (params.includes('grid') && params.includes('auto')) { value = false } } if (!node.nodes || value === null) { if (node.parent) { let isParentGrid = this.gridStatus(node.parent, result) if (node.parent._autoprefixerSelfDisabled === true) { value = false } else { value = isParentGrid } } else if (typeof this.prefixes.options.grid !== 'undefined') { value = this.prefixes.options.grid } else if (typeof process.env.AUTOPREFIXER_GRID !== 'undefined') { if (process.env.AUTOPREFIXER_GRID === 'autoplace') { value = 'autoplace' } else { value = true } } else { value = false } } node._autoprefixerGridStatus = value return value } } module.exports = Processor