processor.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718
  1. let parser = require('postcss-value-parser')
  2. let Value = require('./value')
  3. let insertAreas = require('./hacks/grid-utils').insertAreas
  4. const OLD_LINEAR = /(^|[^-])linear-gradient\(\s*(top|left|right|bottom)/i
  5. const OLD_RADIAL = /(^|[^-])radial-gradient\(\s*\d+(\w*|%)\s+\d+(\w*|%)\s*,/i
  6. const IGNORE_NEXT = /(!\s*)?autoprefixer:\s*ignore\s+next/i
  7. const GRID_REGEX = /(!\s*)?autoprefixer\s*grid:\s*(on|off|(no-)?autoplace)/i
  8. const SIZES = [
  9. 'width',
  10. 'height',
  11. 'min-width',
  12. 'max-width',
  13. 'min-height',
  14. 'max-height',
  15. 'inline-size',
  16. 'min-inline-size',
  17. 'max-inline-size',
  18. 'block-size',
  19. 'min-block-size',
  20. 'max-block-size'
  21. ]
  22. function hasGridTemplate(decl) {
  23. return decl.parent.some(
  24. i => i.prop === 'grid-template' || i.prop === 'grid-template-areas'
  25. )
  26. }
  27. function hasRowsAndColumns(decl) {
  28. let hasRows = decl.parent.some(i => i.prop === 'grid-template-rows')
  29. let hasColumns = decl.parent.some(i => i.prop === 'grid-template-columns')
  30. return hasRows && hasColumns
  31. }
  32. class Processor {
  33. constructor(prefixes) {
  34. this.prefixes = prefixes
  35. }
  36. /**
  37. * Add necessary prefixes
  38. */
  39. add(css, result) {
  40. // At-rules
  41. let resolution = this.prefixes.add['@resolution']
  42. let keyframes = this.prefixes.add['@keyframes']
  43. let viewport = this.prefixes.add['@viewport']
  44. let supports = this.prefixes.add['@supports']
  45. css.walkAtRules(rule => {
  46. if (rule.name === 'keyframes') {
  47. if (!this.disabled(rule, result)) {
  48. return keyframes && keyframes.process(rule)
  49. }
  50. } else if (rule.name === 'viewport') {
  51. if (!this.disabled(rule, result)) {
  52. return viewport && viewport.process(rule)
  53. }
  54. } else if (rule.name === 'supports') {
  55. if (
  56. this.prefixes.options.supports !== false &&
  57. !this.disabled(rule, result)
  58. ) {
  59. return supports.process(rule)
  60. }
  61. } else if (rule.name === 'media' && rule.params.includes('-resolution')) {
  62. if (!this.disabled(rule, result)) {
  63. return resolution && resolution.process(rule)
  64. }
  65. }
  66. return undefined
  67. })
  68. // Selectors
  69. css.walkRules(rule => {
  70. if (this.disabled(rule, result)) return undefined
  71. return this.prefixes.add.selectors.map(selector => {
  72. return selector.process(rule, result)
  73. })
  74. })
  75. function insideGrid(decl) {
  76. return decl.parent.nodes.some(node => {
  77. if (node.type !== 'decl') return false
  78. let displayGrid =
  79. node.prop === 'display' && /(inline-)?grid/.test(node.value)
  80. let gridTemplate = node.prop.startsWith('grid-template')
  81. let gridGap = /^grid-([A-z]+-)?gap/.test(node.prop)
  82. return displayGrid || gridTemplate || gridGap
  83. })
  84. }
  85. function insideFlex(decl) {
  86. return decl.parent.some(node => {
  87. return node.prop === 'display' && /(inline-)?flex/.test(node.value)
  88. })
  89. }
  90. let gridPrefixes =
  91. this.gridStatus(css, result) &&
  92. this.prefixes.add['grid-area'] &&
  93. this.prefixes.add['grid-area'].prefixes
  94. css.walkDecls(decl => {
  95. if (this.disabledDecl(decl, result)) return undefined
  96. let parent = decl.parent
  97. let prop = decl.prop
  98. let value = decl.value
  99. if (prop === 'color-adjust') {
  100. if (parent.every(i => i.prop !== 'print-color-adjust')) {
  101. result.warn(
  102. 'Replace color-adjust to print-color-adjust. ' +
  103. 'The color-adjust shorthand is currently deprecated.',
  104. { node: decl }
  105. )
  106. }
  107. } else if (prop === 'grid-row-span') {
  108. result.warn(
  109. 'grid-row-span is not part of final Grid Layout. Use grid-row.',
  110. { node: decl }
  111. )
  112. return undefined
  113. } else if (prop === 'grid-column-span') {
  114. result.warn(
  115. 'grid-column-span is not part of final Grid Layout. Use grid-column.',
  116. { node: decl }
  117. )
  118. return undefined
  119. } else if (prop === 'display' && value === 'box') {
  120. result.warn(
  121. 'You should write display: flex by final spec ' +
  122. 'instead of display: box',
  123. { node: decl }
  124. )
  125. return undefined
  126. } else if (prop === 'text-emphasis-position') {
  127. if (value === 'under' || value === 'over') {
  128. result.warn(
  129. 'You should use 2 values for text-emphasis-position ' +
  130. 'For example, `under left` instead of just `under`.',
  131. { node: decl }
  132. )
  133. }
  134. } else if (
  135. /^(align|justify|place)-(items|content)$/.test(prop) &&
  136. insideFlex(decl)
  137. ) {
  138. if (value === 'start' || value === 'end') {
  139. result.warn(
  140. `${value} value has mixed support, consider using ` +
  141. `flex-${value} instead`,
  142. { node: decl }
  143. )
  144. }
  145. } else if (prop === 'text-decoration-skip' && value === 'ink') {
  146. result.warn(
  147. 'Replace text-decoration-skip: ink to ' +
  148. 'text-decoration-skip-ink: auto, because spec had been changed',
  149. { node: decl }
  150. )
  151. } else {
  152. if (gridPrefixes && this.gridStatus(decl, result)) {
  153. if (decl.value === 'subgrid') {
  154. result.warn('IE does not support subgrid', { node: decl })
  155. }
  156. if (/^(align|justify|place)-items$/.test(prop) && insideGrid(decl)) {
  157. let fixed = prop.replace('-items', '-self')
  158. result.warn(
  159. `IE does not support ${prop} on grid containers. ` +
  160. `Try using ${fixed} on child elements instead: ` +
  161. `${decl.parent.selector} > * { ${fixed}: ${decl.value} }`,
  162. { node: decl }
  163. )
  164. } else if (
  165. /^(align|justify|place)-content$/.test(prop) &&
  166. insideGrid(decl)
  167. ) {
  168. result.warn(`IE does not support ${decl.prop} on grid containers`, {
  169. node: decl
  170. })
  171. } else if (prop === 'display' && decl.value === 'contents') {
  172. result.warn(
  173. 'Please do not use display: contents; ' +
  174. 'if you have grid setting enabled',
  175. { node: decl }
  176. )
  177. return undefined
  178. } else if (decl.prop === 'grid-gap') {
  179. let status = this.gridStatus(decl, result)
  180. if (
  181. status === 'autoplace' &&
  182. !hasRowsAndColumns(decl) &&
  183. !hasGridTemplate(decl)
  184. ) {
  185. result.warn(
  186. 'grid-gap only works if grid-template(-areas) is being ' +
  187. 'used or both rows and columns have been declared ' +
  188. 'and cells have not been manually ' +
  189. 'placed inside the explicit grid',
  190. { node: decl }
  191. )
  192. } else if (
  193. (status === true || status === 'no-autoplace') &&
  194. !hasGridTemplate(decl)
  195. ) {
  196. result.warn(
  197. 'grid-gap only works if grid-template(-areas) is being used',
  198. { node: decl }
  199. )
  200. }
  201. } else if (prop === 'grid-auto-columns') {
  202. result.warn('grid-auto-columns is not supported by IE', {
  203. node: decl
  204. })
  205. return undefined
  206. } else if (prop === 'grid-auto-rows') {
  207. result.warn('grid-auto-rows is not supported by IE', { node: decl })
  208. return undefined
  209. } else if (prop === 'grid-auto-flow') {
  210. let hasRows = parent.some(i => i.prop === 'grid-template-rows')
  211. let hasCols = parent.some(i => i.prop === 'grid-template-columns')
  212. if (hasGridTemplate(decl)) {
  213. result.warn('grid-auto-flow is not supported by IE', {
  214. node: decl
  215. })
  216. } else if (value.includes('dense')) {
  217. result.warn('grid-auto-flow: dense is not supported by IE', {
  218. node: decl
  219. })
  220. } else if (!hasRows && !hasCols) {
  221. result.warn(
  222. 'grid-auto-flow works only if grid-template-rows and ' +
  223. 'grid-template-columns are present in the same rule',
  224. { node: decl }
  225. )
  226. }
  227. return undefined
  228. } else if (value.includes('auto-fit')) {
  229. result.warn('auto-fit value is not supported by IE', {
  230. node: decl,
  231. word: 'auto-fit'
  232. })
  233. return undefined
  234. } else if (value.includes('auto-fill')) {
  235. result.warn('auto-fill value is not supported by IE', {
  236. node: decl,
  237. word: 'auto-fill'
  238. })
  239. return undefined
  240. } else if (prop.startsWith('grid-template') && value.includes('[')) {
  241. result.warn(
  242. 'Autoprefixer currently does not support line names. ' +
  243. 'Try using grid-template-areas instead.',
  244. { node: decl, word: '[' }
  245. )
  246. }
  247. }
  248. if (value.includes('radial-gradient')) {
  249. if (OLD_RADIAL.test(decl.value)) {
  250. result.warn(
  251. 'Gradient has outdated direction syntax. ' +
  252. 'New syntax is like `closest-side at 0 0` ' +
  253. 'instead of `0 0, closest-side`.',
  254. { node: decl }
  255. )
  256. } else {
  257. let ast = parser(value)
  258. for (let i of ast.nodes) {
  259. if (i.type === 'function' && i.value === 'radial-gradient') {
  260. for (let word of i.nodes) {
  261. if (word.type === 'word') {
  262. if (word.value === 'cover') {
  263. result.warn(
  264. 'Gradient has outdated direction syntax. ' +
  265. 'Replace `cover` to `farthest-corner`.',
  266. { node: decl }
  267. )
  268. } else if (word.value === 'contain') {
  269. result.warn(
  270. 'Gradient has outdated direction syntax. ' +
  271. 'Replace `contain` to `closest-side`.',
  272. { node: decl }
  273. )
  274. }
  275. }
  276. }
  277. }
  278. }
  279. }
  280. }
  281. if (value.includes('linear-gradient')) {
  282. if (OLD_LINEAR.test(value)) {
  283. result.warn(
  284. 'Gradient has outdated direction syntax. ' +
  285. 'New syntax is like `to left` instead of `right`.',
  286. { node: decl }
  287. )
  288. }
  289. }
  290. }
  291. if (SIZES.includes(decl.prop)) {
  292. if (!decl.value.includes('-fill-available')) {
  293. if (decl.value.includes('fill-available')) {
  294. result.warn(
  295. 'Replace fill-available to stretch, ' +
  296. 'because spec had been changed',
  297. { node: decl }
  298. )
  299. } else if (decl.value.includes('fill')) {
  300. let ast = parser(value)
  301. if (ast.nodes.some(i => i.type === 'word' && i.value === 'fill')) {
  302. result.warn(
  303. 'Replace fill to stretch, because spec had been changed',
  304. { node: decl }
  305. )
  306. }
  307. }
  308. }
  309. }
  310. let prefixer
  311. if (decl.prop === 'transition' || decl.prop === 'transition-property') {
  312. // Transition
  313. return this.prefixes.transition.add(decl, result)
  314. } else if (decl.prop === 'align-self') {
  315. // align-self flexbox or grid
  316. let display = this.displayType(decl)
  317. if (display !== 'grid' && this.prefixes.options.flexbox !== false) {
  318. prefixer = this.prefixes.add['align-self']
  319. if (prefixer && prefixer.prefixes) {
  320. prefixer.process(decl)
  321. }
  322. }
  323. if (this.gridStatus(decl, result) !== false) {
  324. prefixer = this.prefixes.add['grid-row-align']
  325. if (prefixer && prefixer.prefixes) {
  326. return prefixer.process(decl, result)
  327. }
  328. }
  329. } else if (decl.prop === 'justify-self') {
  330. // justify-self flexbox or grid
  331. if (this.gridStatus(decl, result) !== false) {
  332. prefixer = this.prefixes.add['grid-column-align']
  333. if (prefixer && prefixer.prefixes) {
  334. return prefixer.process(decl, result)
  335. }
  336. }
  337. } else if (decl.prop === 'place-self') {
  338. prefixer = this.prefixes.add['place-self']
  339. if (
  340. prefixer &&
  341. prefixer.prefixes &&
  342. this.gridStatus(decl, result) !== false
  343. ) {
  344. return prefixer.process(decl, result)
  345. }
  346. } else {
  347. // Properties
  348. prefixer = this.prefixes.add[decl.prop]
  349. if (prefixer && prefixer.prefixes) {
  350. return prefixer.process(decl, result)
  351. }
  352. }
  353. return undefined
  354. })
  355. // Insert grid-area prefixes. We need to be able to store the different
  356. // rules as a data and hack API is not enough for this
  357. if (this.gridStatus(css, result)) {
  358. insertAreas(css, this.disabled)
  359. }
  360. // Values
  361. return css.walkDecls(decl => {
  362. if (this.disabledValue(decl, result)) return
  363. let unprefixed = this.prefixes.unprefixed(decl.prop)
  364. let list = this.prefixes.values('add', unprefixed)
  365. if (Array.isArray(list)) {
  366. for (let value of list) {
  367. if (value.process) value.process(decl, result)
  368. }
  369. }
  370. Value.save(this.prefixes, decl)
  371. })
  372. }
  373. /**
  374. * Remove unnecessary pefixes
  375. */
  376. remove(css, result) {
  377. // At-rules
  378. let resolution = this.prefixes.remove['@resolution']
  379. css.walkAtRules((rule, i) => {
  380. if (this.prefixes.remove[`@${rule.name}`]) {
  381. if (!this.disabled(rule, result)) {
  382. rule.parent.removeChild(i)
  383. }
  384. } else if (
  385. rule.name === 'media' &&
  386. rule.params.includes('-resolution') &&
  387. resolution
  388. ) {
  389. resolution.clean(rule)
  390. }
  391. })
  392. // Selectors
  393. for (let checker of this.prefixes.remove.selectors) {
  394. css.walkRules((rule, i) => {
  395. if (checker.check(rule)) {
  396. if (!this.disabled(rule, result)) {
  397. rule.parent.removeChild(i)
  398. }
  399. }
  400. })
  401. }
  402. return css.walkDecls((decl, i) => {
  403. if (this.disabled(decl, result)) return
  404. let rule = decl.parent
  405. let unprefixed = this.prefixes.unprefixed(decl.prop)
  406. // Transition
  407. if (decl.prop === 'transition' || decl.prop === 'transition-property') {
  408. this.prefixes.transition.remove(decl)
  409. }
  410. // Properties
  411. if (
  412. this.prefixes.remove[decl.prop] &&
  413. this.prefixes.remove[decl.prop].remove
  414. ) {
  415. let notHack = this.prefixes.group(decl).down(other => {
  416. return this.prefixes.normalize(other.prop) === unprefixed
  417. })
  418. if (unprefixed === 'flex-flow') {
  419. notHack = true
  420. }
  421. if (decl.prop === '-webkit-box-orient') {
  422. let hacks = { 'flex-direction': true, 'flex-flow': true }
  423. if (!decl.parent.some(j => hacks[j.prop])) return
  424. }
  425. if (notHack && !this.withHackValue(decl)) {
  426. if (decl.raw('before').includes('\n')) {
  427. this.reduceSpaces(decl)
  428. }
  429. rule.removeChild(i)
  430. return
  431. }
  432. }
  433. // Values
  434. for (let checker of this.prefixes.values('remove', unprefixed)) {
  435. if (!checker.check) continue
  436. if (!checker.check(decl.value)) continue
  437. unprefixed = checker.unprefixed
  438. let notHack = this.prefixes.group(decl).down(other => {
  439. return other.value.includes(unprefixed)
  440. })
  441. if (notHack) {
  442. rule.removeChild(i)
  443. return
  444. }
  445. }
  446. })
  447. }
  448. /**
  449. * Some rare old values, which is not in standard
  450. */
  451. withHackValue(decl) {
  452. return decl.prop === '-webkit-background-clip' && decl.value === 'text'
  453. }
  454. /**
  455. * Check for grid/flexbox options.
  456. */
  457. disabledValue(node, result) {
  458. if (this.gridStatus(node, result) === false && node.type === 'decl') {
  459. if (node.prop === 'display' && node.value.includes('grid')) {
  460. return true
  461. }
  462. }
  463. if (this.prefixes.options.flexbox === false && node.type === 'decl') {
  464. if (node.prop === 'display' && node.value.includes('flex')) {
  465. return true
  466. }
  467. }
  468. if (node.type === 'decl' && node.prop === 'content') {
  469. return true
  470. }
  471. return this.disabled(node, result)
  472. }
  473. /**
  474. * Check for grid/flexbox options.
  475. */
  476. disabledDecl(node, result) {
  477. if (this.gridStatus(node, result) === false && node.type === 'decl') {
  478. if (node.prop.includes('grid') || node.prop === 'justify-items') {
  479. return true
  480. }
  481. }
  482. if (this.prefixes.options.flexbox === false && node.type === 'decl') {
  483. let other = ['order', 'justify-content', 'align-items', 'align-content']
  484. if (node.prop.includes('flex') || other.includes(node.prop)) {
  485. return true
  486. }
  487. }
  488. return this.disabled(node, result)
  489. }
  490. /**
  491. * Check for control comment and global options
  492. */
  493. disabled(node, result) {
  494. if (!node) return false
  495. if (node._autoprefixerDisabled !== undefined) {
  496. return node._autoprefixerDisabled
  497. }
  498. if (node.parent) {
  499. let p = node.prev()
  500. if (p && p.type === 'comment' && IGNORE_NEXT.test(p.text)) {
  501. node._autoprefixerDisabled = true
  502. node._autoprefixerSelfDisabled = true
  503. return true
  504. }
  505. }
  506. let value = null
  507. if (node.nodes) {
  508. let status
  509. node.each(i => {
  510. if (i.type !== 'comment') return
  511. if (/(!\s*)?autoprefixer:\s*(off|on)/i.test(i.text)) {
  512. if (typeof status !== 'undefined') {
  513. result.warn(
  514. 'Second Autoprefixer control comment ' +
  515. 'was ignored. Autoprefixer applies control ' +
  516. 'comment to whole block, not to next rules.',
  517. { node: i }
  518. )
  519. } else {
  520. status = /on/i.test(i.text)
  521. }
  522. }
  523. })
  524. if (status !== undefined) {
  525. value = !status
  526. }
  527. }
  528. if (!node.nodes || value === null) {
  529. if (node.parent) {
  530. let isParentDisabled = this.disabled(node.parent, result)
  531. if (node.parent._autoprefixerSelfDisabled === true) {
  532. value = false
  533. } else {
  534. value = isParentDisabled
  535. }
  536. } else {
  537. value = false
  538. }
  539. }
  540. node._autoprefixerDisabled = value
  541. return value
  542. }
  543. /**
  544. * Normalize spaces in cascade declaration group
  545. */
  546. reduceSpaces(decl) {
  547. let stop = false
  548. this.prefixes.group(decl).up(() => {
  549. stop = true
  550. return true
  551. })
  552. if (stop) {
  553. return
  554. }
  555. let parts = decl.raw('before').split('\n')
  556. let prevMin = parts[parts.length - 1].length
  557. let diff = false
  558. this.prefixes.group(decl).down(other => {
  559. parts = other.raw('before').split('\n')
  560. let last = parts.length - 1
  561. if (parts[last].length > prevMin) {
  562. if (diff === false) {
  563. diff = parts[last].length - prevMin
  564. }
  565. parts[last] = parts[last].slice(0, -diff)
  566. other.raws.before = parts.join('\n')
  567. }
  568. })
  569. }
  570. /**
  571. * Is it flebox or grid rule
  572. */
  573. displayType(decl) {
  574. for (let i of decl.parent.nodes) {
  575. if (i.prop !== 'display') {
  576. continue
  577. }
  578. if (i.value.includes('flex')) {
  579. return 'flex'
  580. }
  581. if (i.value.includes('grid')) {
  582. return 'grid'
  583. }
  584. }
  585. return false
  586. }
  587. /**
  588. * Set grid option via control comment
  589. */
  590. gridStatus(node, result) {
  591. if (!node) return false
  592. if (node._autoprefixerGridStatus !== undefined) {
  593. return node._autoprefixerGridStatus
  594. }
  595. let value = null
  596. if (node.nodes) {
  597. let status
  598. node.each(i => {
  599. if (i.type !== 'comment') return
  600. if (GRID_REGEX.test(i.text)) {
  601. let hasAutoplace = /:\s*autoplace/i.test(i.text)
  602. let noAutoplace = /no-autoplace/i.test(i.text)
  603. if (typeof status !== 'undefined') {
  604. result.warn(
  605. 'Second Autoprefixer grid control comment was ' +
  606. 'ignored. Autoprefixer applies control comments to the whole ' +
  607. 'block, not to the next rules.',
  608. { node: i }
  609. )
  610. } else if (hasAutoplace) {
  611. status = 'autoplace'
  612. } else if (noAutoplace) {
  613. status = true
  614. } else {
  615. status = /on/i.test(i.text)
  616. }
  617. }
  618. })
  619. if (status !== undefined) {
  620. value = status
  621. }
  622. }
  623. if (node.type === 'atrule' && node.name === 'supports') {
  624. let params = node.params
  625. if (params.includes('grid') && params.includes('auto')) {
  626. value = false
  627. }
  628. }
  629. if (!node.nodes || value === null) {
  630. if (node.parent) {
  631. let isParentGrid = this.gridStatus(node.parent, result)
  632. if (node.parent._autoprefixerSelfDisabled === true) {
  633. value = false
  634. } else {
  635. value = isParentGrid
  636. }
  637. } else if (typeof this.prefixes.options.grid !== 'undefined') {
  638. value = this.prefixes.options.grid
  639. } else if (typeof process.env.AUTOPREFIXER_GRID !== 'undefined') {
  640. if (process.env.AUTOPREFIXER_GRID === 'autoplace') {
  641. value = 'autoplace'
  642. } else {
  643. value = true
  644. }
  645. } else {
  646. value = false
  647. }
  648. }
  649. node._autoprefixerGridStatus = value
  650. return value
  651. }
  652. }
  653. module.exports = Processor