html-loader icon indicating copy to clipboard operation
html-loader copied to clipboard

Supports more attributes

Open alexander-akait opened this issue 5 years ago • 15 comments

  • Operating System: any
  • Node Version: any
  • NPM Version: any
  • webpack Version: any
  • html-loader Version: 1

Feature Proposal

Supports more attributes:

  • style - parse url() in CSS
  • script with src and without src like entry

Feature Use Case

0CJS

alexander-akait avatar Mar 17 '20 16:03 alexander-akait

I would like to nominate the video tag poster attribute for this list of attributes!

I stumbled upon it today when trying to use videojs... Wouldn't it be possible to allow custom named attributes? E.g.:

loader: "html-loader",
options: {
    attributes: {
      list: [
        {
          tag: 'video',
          attribute: 'poster',
          type: 'src'
        },
      ],
    },
}

benjaminpreiss avatar May 26 '20 17:05 benjaminpreiss

https://github.com/webpack-contrib/html-loader#object

alexander-akait avatar May 26 '20 17:05 alexander-akait

We already support the poster attribute for video tag, check your version of html-loader

alexander-akait avatar May 26 '20 17:05 alexander-akait

Ah sorry for the mistake. :/

benjaminpreiss avatar May 26 '20 18:05 benjaminpreiss

Is there support for data-srcset on source? Just submitted an issue for this. #316

GuillermoCasanova avatar Aug 25 '20 15:08 GuillermoCasanova

@GuillermoCasanova It is non standard, other developers can have any data in this, you need to use options for this, the only way I can help here allow to define list of attributes in easy way:

{ 
 list: [
  // Means all default attributes
  '...', 
  {  
    tag: 'img',
    attribute: 'data-srcset',
    type: 'srcset',
  }
 ] 
}

alexander-akait avatar Aug 25 '20 15:08 alexander-akait

  • link:rel=icon:href
  • meta:msapplication-TileImage
  • meta:msapplication-config
  • link:rel=mask-icon:href
  • link:rel=apple-touch-icon:href
  • link:rel=apple-touch-icon-precomposed:href
  • link:rel=apple-touch-startup-image:href
  • link:rel=manifest:href
  • link:rel=shortcut icon:href
  • style - parse url() in CSS

Having these attributes as default would be awesome and especially useful since the interpolate option has been removed. In the meantime, is there some way to add these attributes manually?

bigskillet avatar Oct 23 '20 20:10 bigskillet

I think it is easy to implement, feel free to send a PR

alexander-akait avatar Oct 24 '20 12:10 alexander-akait

Sorry, I'm not that good at javascript, so it wouldn't be that easy for me to include these attributes. I pulled it down and made an attempt, but didn't have much luck. In the meantime, is there some way to manually add these attributes using the list tag filter? I haven't had much luck with that either.

bigskillet avatar Nov 17 '20 23:11 bigskillet

WIP on this, release will be ~~tomorrow~~ after tomorrow

alexander-akait avatar Nov 18 '20 17:11 alexander-akait

@alexander-akait Just curious if you have any timeline on getting this implemented? 😃

elliotleelewis avatar Mar 22 '21 06:03 elliotleelewis

@elliotleelewis What is attribute you need?

alexander-akait avatar Mar 22 '21 11:03 alexander-akait

@elliotleelewis What is attribute you need?

@alexander-akait The URL property in style attributes, like so:

<div id="background-image" style="background-image: url('./assets/media/photo.jpg')"></div>

elliotleelewis avatar Mar 22 '21 12:03 elliotleelewis

Yep, try to find time on this at the end of month...

alexander-akait avatar Mar 22 '21 12:03 alexander-akait

Yep, try to find time on this at the end of month...

Perfect, thank you!

elliotleelewis avatar Mar 22 '21 13:03 elliotleelewis