From dc4f2415a836346535e6f837446868a4ad0040b3 Mon Sep 17 00:00:00 2001 From: DualFroz Date: Mon, 5 Oct 2026 23:11:46 +0200 Subject: [PATCH] Check ignore next warning comments in a warn() helper --- lib/hacks/gradient.js | 5 +- lib/hacks/grid-end.js | 7 +- lib/hacks/grid-rows-columns.js | 11 +-- lib/hacks/grid-utils.js | 22 +++--- lib/processor.js | 120 ++++++++++++++++----------------- lib/transition.js | 6 +- lib/utils.js | 32 +++++++++ 7 files changed, 121 insertions(+), 82 deletions(-) diff --git a/lib/hacks/gradient.js b/lib/hacks/gradient.js index cf04031..f3e059c 100644 --- a/lib/hacks/gradient.js +++ b/lib/hacks/gradient.js @@ -370,9 +370,10 @@ class Gradient extends Value { /^(calc|min|max|clamp)$/i.test(tokens[0].value))) ) { if (decl && result) { - decl.warn( + utils.warn( result, - 'Gradient color hints are not supported by old WebKit' + 'Gradient color hints are not supported by old WebKit', + { node: decl } ) } return false diff --git a/lib/hacks/grid-end.js b/lib/hacks/grid-end.js index 63f6a42..288686c 100644 --- a/lib/hacks/grid-end.js +++ b/lib/hacks/grid-end.js @@ -1,5 +1,5 @@ let Declaration = require('../declaration') -let { isPureNumber } = require('../utils') +let { isPureNumber, warn } = require('../utils') class GridEnd extends Declaration { /** @@ -34,9 +34,10 @@ class GridEnd extends Declaration { return undefined } } else { - decl.warn( + warn( result, - `Can not prefix ${decl.prop} (${startProp} is not found)` + `Can not prefix ${decl.prop} (${startProp} is not found)`, + { node: decl } ) } } diff --git a/lib/hacks/grid-rows-columns.js b/lib/hacks/grid-rows-columns.js index f873f35..92724dc 100644 --- a/lib/hacks/grid-rows-columns.js +++ b/lib/hacks/grid-rows-columns.js @@ -1,5 +1,6 @@ let Declaration = require('../declaration') let Processor = require('../processor') +let { warn } = require('../utils') let { autoplaceGridItems, getGridGap, @@ -66,9 +67,10 @@ class GridRowsColumns extends Declaration { if (!rowDecl && hasGridTemplate) { return undefined } else if (!rowDecl && !hasGridTemplate) { - decl.warn( + warn( result, - 'Autoplacement does not work without grid-template-rows property' + 'Autoplacement does not work without grid-template-rows property', + { node: decl } ) return undefined } @@ -80,9 +82,10 @@ class GridRowsColumns extends Declaration { return i.prop === 'grid-template-columns' }) if (!columnDecl && !hasGridTemplate) { - decl.warn( + warn( result, - 'Autoplacement does not work without grid-template-columns property' + 'Autoplacement does not work without grid-template-columns property', + { node: decl } ) } diff --git a/lib/hacks/grid-utils.js b/lib/hacks/grid-utils.js index 568f83d..776a295 100644 --- a/lib/hacks/grid-utils.js +++ b/lib/hacks/grid-utils.js @@ -4,6 +4,7 @@ let list = require('postcss').list let uniq = require('../utils').uniq let escapeRegexp = require('../utils').escapeRegexp let splitSelector = require('../utils').splitSelector +let warn = require('../utils').warn const GAP_PROPS = /^(grid-)?((row|column)-)?gap$/ @@ -758,7 +759,9 @@ function warnMissedAreas(areas, decl, result) { }) if (missed.length > 0) { - decl.warn(result, 'Can not find grid areas: ' + missed.join(', ')) + warn(result, 'Can not find grid areas: ' + missed.join(', '), { + node: decl + }) } return undefined @@ -828,11 +831,12 @@ function warnTemplateSelectorNotFound(decl, result) { // warn user if we didn't find template if (!gridTemplateFound && duplicatesFound) { - decl.warn( + warn( result, 'Autoprefixer cannot find a grid-template ' + `containing the duplicate grid-area "${decl.value}" ` + - `with full selector matching: ${slicedSelectorArr.join(' ')}` + `with full selector matching: ${slicedSelectorArr.join(' ')}`, + { node: decl } ) } } @@ -861,10 +865,11 @@ function warnIfGridRowColumnExists(decl, result) { }) if (decls.length > 0) { decls.forEach(d => { - d.warn( + warn( result, 'You already have a grid-area declaration present in the rule. ' + - `You should use either grid-area or ${d.prop}, not both` + `You should use either grid-area or ${d.prop}, not both`, + { node: d } ) }) } @@ -1058,10 +1063,9 @@ function warnGridGap({ decl, gap, hasColumns, result }) { let hasBothGaps = gap.row && gap.column if (!hasColumns && (hasBothGaps || (gap.column && !gap.row))) { delete gap.column - decl.warn( - result, - 'Can not implement grid-gap without grid-template-columns' - ) + warn(result, 'Can not implement grid-gap without grid-template-columns', { + node: decl + }) } } diff --git a/lib/processor.js b/lib/processor.js index 91d5a6e..1204b6a 100644 --- a/lib/processor.js +++ b/lib/processor.js @@ -1,34 +1,14 @@ let parser = require('postcss-value-parser') let Value = require('./value') -let vendor = require('./vendor') let insertAreas = require('./hacks/grid-utils').insertAreas +let { warn } = require('./utils') 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(?!\s+warning)/i -const IGNORE_NEXT_WARNING = /(!\s*)?autoprefixer:\s*ignore\s+next\s+warning/i -const PREFIXED_VALUE = /(^|[\s,(])-\w+-/ const GRID_REGEX = /(!\s*)?autoprefixer\s*grid:\s*(on|off|(no-)?autoplace)/i -/** - * Is the node right after an `ignore next warning` control comment? - * Prefixed copies inserted before the node are skipped on the way back. - */ -function hasIgnoreWarningComment(node) { - let prev = node.prev() - while ( - prev && - prev.type === 'decl' && - (vendor.prefix(prev.prop) || PREFIXED_VALUE.test(prev.value)) - ) { - prev = prev.prev() - } - return ( - !!prev && prev.type === 'comment' && IGNORE_NEXT_WARNING.test(prev.text) - ) -} - const SIZES = [ 'width', 'height', @@ -130,26 +110,30 @@ class Processor { if (prop === 'color-adjust') { if (parent.every(i => i.prop !== 'print-color-adjust')) { - result.warn( + warn( + result, 'Replace color-adjust to print-color-adjust. ' + 'The color-adjust shorthand is currently deprecated.', { node: decl } ) } } else if (prop === 'grid-row-span') { - result.warn( + warn( + result, '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( + warn( + result, '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( + warn( + result, 'You should write display: flex by final spec ' + 'instead of display: box', { node: decl } @@ -157,14 +141,16 @@ class Processor { return undefined } else if (prop === 'text-emphasis-position') { if (value === 'under' || value === 'over') { - result.warn( + warn( + result, 'You should use 2 values for text-emphasis-position ' + 'For example, `under left` instead of just `under`.', { node: decl } ) } } else if (prop === 'text-decoration-skip' && value === 'ink') { - result.warn( + warn( + result, 'Replace text-decoration-skip: ink to ' + 'text-decoration-skip-ink: auto, because spec had been changed', { node: decl } @@ -172,11 +158,12 @@ class Processor { } else { if (gridPrefixes && this.gridStatus(decl, result)) { if (decl.value === 'subgrid') { - result.warn('IE does not support subgrid', { node: decl }) + warn(result, 'IE does not support subgrid', { node: decl }) } if (/^(align|justify|place)-items$/.test(prop) && insideGrid(decl)) { let fixed = prop.replace('-items', '-self') - result.warn( + warn( + result, `IE does not support ${prop} on grid containers. ` + `Try using ${fixed} on child elements instead: ` + `${decl.parent.selector} > * { ${fixed}: ${decl.value} }`, @@ -186,11 +173,16 @@ class Processor { /^(align|justify|place)-content$/.test(prop) && insideGrid(decl) ) { - result.warn(`IE does not support ${decl.prop} on grid containers`, { - node: decl - }) + warn( + result, + `IE does not support ${decl.prop} on grid containers`, + { + node: decl + } + ) } else if (prop === 'display' && decl.value === 'contents') { - result.warn( + warn( + result, 'Please do not use display: contents; ' + 'if you have grid setting enabled', { node: decl } @@ -203,7 +195,8 @@ class Processor { !hasRowsAndColumns(decl) && !hasGridTemplate(decl) ) { - result.warn( + warn( + result, '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 ' + @@ -214,33 +207,37 @@ class Processor { (status === true || status === 'no-autoplace') && !hasGridTemplate(decl) ) { - result.warn( + warn( + result, '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', { + warn(result, '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 }) + warn(result, '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', { + warn(result, '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', { + warn(result, 'grid-auto-flow: dense is not supported by IE', { node: decl }) } else if (!hasRows && !hasCols) { - result.warn( + warn( + result, 'grid-auto-flow works only if grid-template-rows and ' + 'grid-template-columns are present in the same rule', { node: decl } @@ -248,19 +245,20 @@ class Processor { } return undefined } else if (value.includes('auto-fit')) { - result.warn('auto-fit value is not supported by IE', { + warn(result, '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', { + warn(result, '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( + warn( + result, 'Autoprefixer currently does not support line names. ' + 'Try using grid-template-areas instead.', { node: decl, word: '[' } @@ -269,7 +267,8 @@ class Processor { } if (value.includes('radial-gradient')) { if (OLD_RADIAL.test(decl.value)) { - result.warn( + warn( + result, 'Gradient has outdated direction syntax. ' + 'New syntax is like `closest-side at 0 0` ' + 'instead of `0 0, closest-side`.', @@ -283,13 +282,15 @@ class Processor { for (let word of i.nodes) { if (word.type === 'word') { if (word.value === 'cover') { - result.warn( + warn( + result, 'Gradient has outdated direction syntax. ' + 'Replace `cover` to `farthest-corner`.', { node: decl } ) } else if (word.value === 'contain') { - result.warn( + warn( + result, 'Gradient has outdated direction syntax. ' + 'Replace `contain` to `closest-side`.', { node: decl } @@ -303,7 +304,8 @@ class Processor { } if (value.includes('linear-gradient')) { if (OLD_LINEAR.test(value)) { - result.warn( + warn( + result, 'Gradient has outdated direction syntax. ' + 'New syntax is like `to left` instead of `right`.', { node: decl } @@ -315,7 +317,8 @@ class Processor { if (SIZES.includes(decl.prop)) { if (!decl.value.includes('-fill-available')) { if (decl.value.includes('fill-available')) { - result.warn( + warn( + result, 'Replace fill-available to stretch, ' + 'because spec had been changed', { node: decl } @@ -323,7 +326,8 @@ class Processor { } else if (decl.value.includes('fill')) { let ast = parser(value) if (ast.nodes.some(i => i.type === 'word' && i.value === 'fill')) { - result.warn( + warn( + result, 'Replace fill to stretch, because spec had been changed', { node: decl } ) @@ -387,7 +391,7 @@ class Processor { } // Values - css.walkDecls(decl => { + return css.walkDecls(decl => { if (this.disabledValue(decl, result)) return let unprefixed = this.prefixes.unprefixed(decl.prop) @@ -399,16 +403,6 @@ class Processor { } Value.save(this.prefixes, decl) }) - - // Remove warnings hidden by ignore next warning control comments - result.messages = result.messages.filter(i => { - return !( - i.type === 'warning' && - i.plugin === 'autoprefixer' && - i.node && - hasIgnoreWarningComment(i.node) - ) - }) } /** @@ -437,7 +431,8 @@ class Processor { if (i.type !== 'comment') return if (/(!\s*)?autoprefixer:\s*(off|on)/i.test(i.text)) { if (typeof status !== 'undefined') { - result.warn( + warn( + result, 'Second Autoprefixer control comment ' + 'was ignored. Autoprefixer applies control ' + 'comment to whole block, not to next rules.', @@ -549,7 +544,8 @@ class Processor { let hasAutoplace = /:\s*autoplace/i.test(i.text) let noAutoplace = /no-autoplace/i.test(i.text) if (typeof status !== 'undefined') { - result.warn( + warn( + result, 'Second Autoprefixer grid control comment was ' + 'ignored. Autoprefixer applies control comments to the whole ' + 'block, not to the next rules.', diff --git a/lib/transition.js b/lib/transition.js index 1c9b343..7c9f3b9 100644 --- a/lib/transition.js +++ b/lib/transition.js @@ -2,6 +2,7 @@ let { list } = require('postcss') let parser = require('postcss-value-parser') let Browsers = require('./browsers') +let { warn } = require('./utils') let vendor = require('./vendor') class Transition { @@ -121,12 +122,13 @@ class Transition { }) if (isPrefixed && hasAssociatedProp) { - decl.warn( + warn( result, 'Replace transition-property to transition, ' + 'because Autoprefixer could not support ' + 'any cases of transition-property ' + - 'and other transition-*' + 'and other transition-*', + { node: decl } ) } } diff --git a/lib/utils.js b/lib/utils.js index 2309e8e..66934d1 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -1,5 +1,10 @@ let { list } = require('postcss') +let vendor = require('./vendor') + +const IGNORE_NEXT_WARNING = /(!\s*)?autoprefixer:\s*ignore\s+next\s+warning/i +const PREFIXED_VALUE = /(^|[\s,(])-\w+-/ + /** * Throw special error, to tell beniary, * that this error is from Autoprefixer. @@ -91,3 +96,30 @@ module.exports.isPureNumber = function (value) { } return false } + +/** + * Is the node right after an `ignore next warning` control comment? + * Prefixed copies inserted before the node are skipped on the way back. + */ +function hasIgnoreWarningComment(node) { + let prev = node.prev() + while ( + prev && + prev.type === 'decl' && + (vendor.prefix(prev.prop) || PREFIXED_VALUE.test(prev.value)) + ) { + prev = prev.prev() + } + return ( + !!prev && prev.type === 'comment' && IGNORE_NEXT_WARNING.test(prev.text) + ) +} + +/** + * Add a warning, unless the node is hidden + * by an `ignore next warning` control comment. + */ +module.exports.warn = function (result, text, opts = {}) { + if (opts.node && hasIgnoreWarningComment(opts.node)) return + result.warn(text, opts) +}