transform-decl.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. let Declaration = require('../declaration')
  2. class TransformDecl extends Declaration {
  3. /**
  4. * Is transform contain 3D commands
  5. */
  6. contain3d(decl) {
  7. if (decl.prop === 'transform-origin') {
  8. return false
  9. }
  10. for (let func of TransformDecl.functions3d) {
  11. if (decl.value.includes(`${func}(`)) {
  12. return true
  13. }
  14. }
  15. return false
  16. }
  17. /**
  18. * Don't add prefix for IE in keyframes
  19. */
  20. insert(decl, prefix, prefixes) {
  21. if (prefix === '-ms-') {
  22. if (!this.contain3d(decl) && !this.keyframeParents(decl)) {
  23. return super.insert(decl, prefix, prefixes)
  24. }
  25. } else if (prefix === '-o-') {
  26. if (!this.contain3d(decl)) {
  27. return super.insert(decl, prefix, prefixes)
  28. }
  29. } else {
  30. return super.insert(decl, prefix, prefixes)
  31. }
  32. return undefined
  33. }
  34. /**
  35. * Recursively check all parents for @keyframes
  36. */
  37. keyframeParents(decl) {
  38. let { parent } = decl
  39. while (parent) {
  40. if (parent.type === 'atrule' && parent.name === 'keyframes') {
  41. return true
  42. }
  43. ;({ parent } = parent)
  44. }
  45. return false
  46. }
  47. /**
  48. * Replace rotateZ to rotate for IE 9
  49. */
  50. set(decl, prefix) {
  51. decl = super.set(decl, prefix)
  52. if (prefix === '-ms-') {
  53. decl.value = decl.value.replace(/rotatez/gi, 'rotate')
  54. }
  55. return decl
  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