Skip to content

Instantly share code, notes, and snippets.

@robdodson

robdodson/wc-loader-writeup.md

Last active July 6, 2017 02:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save robdodson/3546d5ae2191ca08bc1085673bd0451d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save robdodson/3546d5ae2191ca08bc1085673bd0451d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wc-loader-writeup.md
  • raw html will be appended to the main document. If the html appears in a <head> in the import it will get appended to <head> in the main document. Otherwise it will get appended to <body>. This is unlike the behavior of current HTML Imports. It makes things kind of like an include. The reason elements are injected is because there's no reference back to the import so if a custom element queries for its template using document.querySelector() it needs to resolve to the current document.
  • <template> elements are also injected into the main page, but they're injected into the <head> which seems...odd.
  • script elements will run as if they are es modules imported into the page. These script elements can import other modules including node_modules.
  • Linked images (like url('') in CSS) get run in a Node vm (https://nodejs.org/api/vm.html) to get access to the returned value of module.exports. Seems weird.
  • style elements will be appeneded to the <head>, meaning those styles will take effect in the main document. This is similar to how native HTML Imports apply styles to the main document. Also Polymer intends to implement similar behavior (Polymer/polymer#4679).
  • URLs in CSS will be rewritten/flattened. If you have url('./images/foo.jpg') you will end up with url('foo.jpg?someHash') and foo.jpg will be moved to the root of dist/
  • a link tag for a stylesheet will append the styles to the <head>. This is similar to how native HTML imports which link to stylesheets apply those styles to the main document.
  • a link tag for an import which links to a stylesheet will append the styles to <head>. This is similar to how native HTML imports apply styles to the main document.
  • IDs and classes are NOT renamed in any way. Maybe they should be? But this would mean also changing the names in any JavaScript that references them :\
  • The loader depends on Polyclean... that makes me a bit nervous :\ I'm not sure how maintained that project is. Although it's only using the stripCSs feature to remove whitespace from CSS.
  • I think it supports <link type="css"> which was a weird ass thing polymer did at some point.
  • Does html-loader already do most of what this loader does? Could I use this loader to just get the text of the import and hand it to html loader?
  • The tool is injecting styles into the page using JavaScript. But it would be better if these were bundled into a stylesheet that could be linked from the <head>.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment