transform-decl.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. let Declaration = require('../declaration')
  2. class TransformDecl extends Declaration {
  3. /**
  4. * Recursively check all parents for @keyframes
  5. */
  6. keyframeParents(decl) {
  7. let { parent } = decl
  8. while (parent) {
  9. if (parent.type === 'atrule' && parent.name === 'keyframes') {
  10. return true
  11. }
  12. ;({ parent } = parent)
  13. }
  14. return false
  15. }
  16. /**
  17. * Is transform contain 3D commands
  18. */
  19. contain3d(decl) {
  20. if (decl.prop === 'transform-origin') {
  21. return false
  22. }
  23. for (let func of TransformDecl.functions3d) {
  24. if (decl.value.includes(`${func}(`)) {
  25. return true
  26. }
  27. }
  28. return false
  29. }
  30. /**
  31. * Replace rotateZ to rotate for IE 9
  32. */
  33. set(decl, prefix) {
  34. decl = super.set(decl, prefix)
  35. if (prefix === '-ms-') {
  36. decl.value = decl.value.replace(/rotatez/gi, 'rotate')
  37. }
  38. return decl
  39. }
  40. /**
  41. * Don't add prefix for IE in keyframes
  42. */
  43. insert(decl, prefix, prefixes) {
  44. if (prefix === '-ms-') {
  45. if (!this.contain3d(decl) && !this.keyframeParents(decl)) {
  46. return super.insert(decl, prefix, prefixes)
  47. }
  48. } else if (prefix === '-o-') {
  49. if (!this.contain3d(decl)) {
  50. return super.insert(decl, prefix, prefixes)
  51. }
  52. } else {
  53. return super.insert(decl, prefix, prefixes)
  54. }
  55. return undefined
  56. }
  57. }
  58. TransformDecl.names = ['transform', 'transform-origin']
  59. TransformDecl.functions3d = [
  60. 'matrix3d',
  61. 'translate3d',
  62. 'translateZ',
  63. 'scale3d',
  64. 'scaleZ',
  65. 'rotate3d',
  66. 'rotateX',
  67. 'rotateY',
  68. 'perspective'
  69. ]
  70. module.exports = TransformDecl