transform-srcset.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. // vue compiler module for transforming `img:srcset` to a number of `require`s
  2. const urlToRequire = require('../url-to-require')
  3. module.exports = () => ({
  4. postTransformNode: node => {
  5. transform(node)
  6. }
  7. })
  8. function transform (node) {
  9. const tags = ['img', 'source']
  10. if (tags.indexOf(node.tag) !== -1 && node.attrs) {
  11. node.attrs.forEach(attr => {
  12. if (attr.name === 'srcset') {
  13. // same logic as in transform-require.js
  14. const value = attr.value
  15. const isStatic = value.charAt(0) === '"' && value.charAt(value.length - 1) === '"'
  16. if (!isStatic) {
  17. return
  18. }
  19. // http://w3c.github.io/html/semantics-embedded-content.html#ref-for-image-candidate-string-5
  20. const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g
  21. const imageCandidates = value.substr(1, value.length - 2).split(',').map(s => {
  22. // The attribute value arrives here with all whitespace, except normal spaces, represented by escape sequences
  23. const [url, descriptor] = s.replace(escapedSpaceCharacters, ' ').trim().split(' ', 2)
  24. return { require: urlToRequire(url), descriptor: descriptor }
  25. })
  26. // "require(url1)"
  27. // "require(url1) 1x"
  28. // "require(url1), require(url2)"
  29. // "require(url1), require(url2) 2x"
  30. // "require(url1) 1x, require(url2)"
  31. // "require(url1) 1x, require(url2) 2x"
  32. const code = imageCandidates.map(
  33. ({ require, descriptor }) => `${require} + "${descriptor ? ' ' + descriptor : ''}, " + `
  34. ).join('').slice(0, -6).concat('"').replace(/ \+ ""$/, '')
  35. attr.value = code
  36. }
  37. })
  38. }
  39. }