diff --git a/README.md b/README.md index ad0157a..1f58bb0 100644 --- a/README.md +++ b/README.md @@ -494,12 +494,14 @@ you can use control comments to disable Autoprefixer. } ``` -There are three types of control comments: +There are four types of control comments: - `/* autoprefixer: (on|off) */`: enable/disable all Autoprefixer translations for the whole block both _before_ and _after_ the comment. - `/* autoprefixer: ignore next */`: disable Autoprefixer only for the next property or next rule selector or at-rule parameters (but not rule/at‑rule body). +- `/* autoprefixer: ignore next warning */`: hide Autoprefixer warnings only for + the next property or rule/at-rule (but not its body). Prefixes are still added. - `/* autoprefixer grid: (autoplace|no-autoplace|off) */`: control how Autoprefixer handles grid translations for the whole block: - `autoplace`: enable grid translations with autoplacement support. diff --git a/lib/processor.js b/lib/processor.js index e884ffb..50e37f8 100644 --- a/lib/processor.js +++ b/lib/processor.js @@ -5,7 +5,8 @@ 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 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 GRID_REGEX = /(!\s*)?autoprefixer\s*grid:\s*(on|off|(no-)?autoplace)/i const SIZES = [ @@ -55,6 +56,13 @@ class Processor { * Add necessary prefixes */ add(css, result) { + // Mark nodes before prefixes are inserted between them and comments + css.walkComments(comment => { + if (IGNORE_NEXT_WARNING.test(comment.text) && comment.next()) { + comment.next()._autoprefixerIgnoreWarning = true + } + }) + // At-rules let resolution = this.prefixes.add['@resolution'] let keyframes = this.prefixes.add['@keyframes'] @@ -366,7 +374,7 @@ class Processor { } // Values - return css.walkDecls(decl => { + css.walkDecls(decl => { if (this.disabledValue(decl, result)) return let unprefixed = this.prefixes.unprefixed(decl.prop) @@ -378,6 +386,16 @@ 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 && + i.node._autoprefixerIgnoreWarning + ) + }) } /** diff --git a/test/autoprefixer.test.js b/test/autoprefixer.test.js index af1da78..b5580d2 100644 --- a/test/autoprefixer.test.js +++ b/test/autoprefixer.test.js @@ -447,6 +447,21 @@ test('uses ignore next control comments', () => { check('ignore-next') }) +test('uses ignore next warning control comments', () => { + let input = read('ignore-next-warning') + let output = read('ignore-next-warning.out') + let result = postcss([prefixer('grid')]).process(input) + + equal(result.css, output) + equal( + result.warnings().map(i => i.toString()), + [ + 'autoprefixer: :33:3: Gradient has outdated direction ' + + 'syntax. New syntax is like `to left` instead of `right`.' + ] + ) +}) + test('uses block control comments', () => { check('disabled') }) diff --git a/test/cases/ignore-next-warning.css b/test/cases/ignore-next-warning.css new file mode 100644 index 0000000..c9a85a2 --- /dev/null +++ b/test/cases/ignore-next-warning.css @@ -0,0 +1,34 @@ +.grid { + grid-gap: 1px; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + /* autoprefixer: ignore next warning */ + grid-template-areas: + 'left top-void right' + 'left center right' + 'left bottom-void right'; +} + +.grid-left { + grid-area: left; +} + +.grid-center { + grid-area: center; +} + +.grid-right { + grid-area: right; +} + +.named { + grid-template-rows: 1fr; + /* autoprefixer: ignore next warning */ + grid-template-columns: [content] 1fr; +} + +.gradient { + /* autoprefixer: ignore next warning */ + background: linear-gradient(top, white, black); + mask: linear-gradient(top, white, black); +} diff --git a/test/cases/ignore-next-warning.out.css b/test/cases/ignore-next-warning.out.css new file mode 100644 index 0000000..9773a77 --- /dev/null +++ b/test/cases/ignore-next-warning.out.css @@ -0,0 +1,58 @@ +.grid { + grid-gap: 1px; + -ms-grid-columns: 1fr 1px 1fr 1px 1fr; + grid-template-columns: repeat(3, 1fr); + -ms-grid-rows: 1fr 1px 1fr 1px 1fr; + grid-template-rows: repeat(3, 1fr); + /* autoprefixer: ignore next warning */ + grid-template-areas: + 'left top-void right' + 'left center right' + 'left bottom-void right'; +} + +.grid-left { + -ms-grid-row: 1; + -ms-grid-row-span: 5; + -ms-grid-column: 1; + grid-area: left; +} + +.grid-center { + -ms-grid-row: 3; + -ms-grid-column: 3; + grid-area: center; +} + +.grid-right { + -ms-grid-row: 1; + -ms-grid-row-span: 5; + -ms-grid-column: 5; + grid-area: right; +} + +.named { + -ms-grid-rows: 1fr; + grid-template-rows: 1fr; + /* autoprefixer: ignore next warning */ + -ms-grid-columns: [content] 1fr; + grid-template-columns: [content] 1fr; +} + +.named > *:nth-child(1) { + -ms-grid-row: 1; + -ms-grid-column: 1; +} + +.named > *:nth-child(2) { + -ms-grid-row: 1; + -ms-grid-column: 2; +} + +.gradient { + /* autoprefixer: ignore next warning */ + background: -webkit-linear-gradient(top, white, black); + background: linear-gradient(top, white, black); + -webkit-mask: -webkit-linear-gradient(top, white, black); + mask: linear-gradient(top, white, black); +}