cburgmer / inlineresources Goto Github PK
View Code? Open in Web Editor NEWInlines style sheets, images, fonts and scripts in HTML documents.
Home Page: http://cburgmer.github.io/inlineresources
Inlines style sheets, images, fonts and scripts in HTML documents.
Home Page: http://cburgmer.github.io/inlineresources
The following valid RegExp fails to be correctly inlined
/</.test('<');
This is due to the necessary escaping of </
kicks in.
A solution might be to use a different escaping mechanism with \uFEFF
.
I get the Unable to load stylesheet undefined
with some third party css that uses an @page rule.
The parsing error is an issue with the parser library you're using (NV/CSSOM#5) but not showing the user that there was an error with the parsing is non-helpful.
To be able to see where the error was I edited rasterizeHTML.allinone.js
to use the following code:
c.loadAndInlineCssLinks=function(a,b){
var c=r(a)
, e=[];
console.log("filtered links",c);
return d.all(c.map(function(a){
console.log("CSS",a);
return (q(a,b)
.then(
function(b){
o(a,b.content+"\n")
,e=e.concat(b.errors)
}
,function(ee){
console.log("CSS ERROR", [a,ee]);
e.push({resourceType:"stylesheet",url:ee.url,msg:"Unable to load stylesheet "+ (ee.url ||a.getAttribute('href')) +" -- "+ee})
})
)}
Hey @barillax, in 2571b79 i've made a change to stop publishing the all-in-one packages. I just realised, that we only recently added the non-cssom one.
The benefits of not publishing those is removing the need to provide updates here if some downstream dependency changes. Naturally the user should just get those by running a local npm install.
Can you let me know if that works with your build process / otherwise whether we can come up with a good argument why we should bring back support for these?
Use browser's own cssom once the fix for https://code.google.com/p/chromium/issues/detail?id=161644 has been rolled out in Chrome. This will fix the underlying issue for #5.
Debugging rasterizeHTML.js, I came across a problem with inlineresources' handling of Data URIs in background images.
Through the function adjustPathsOfCssResources, all data URIs passed as background images will be given a relative URL based on the stylesheet they're within, which causes an incorrect external request for the image later on.
I experienced this when using SVGs as data URIs in stylesheets that were being run through rasterizeHTML.js.
I know Bower has fallen out of fashion these days, but we have a project that still uses it for external libs. It would be convenient to have a build of inlineresources
in the bower repo.
Failing that, I'd be amenable to creating and maintaining a shadow repo, a la https://github.com/nidheeshdas/bower-pdfkit that serves to simply point to the latest build. Let me know what you prefer!
I'm trying to use rasterizeHTML to rasterize html that includes an image with src that points to a server which requires Authorization through a Bearer Token.
It doesn't seem there is currently any way to attach a Header to the requests made from rasterizeHTML through inlineresources. It would be very helpful to enable this functionality, then expose it through rasterizeHTML.
I think this line:
Line 8 in 6ce255d
Is failing with this bug:
https://code.google.com/p/chromium/issues/detail?id=484930
(I may only be seeing this issue because I am trying to use relative urls to CSS files that start with "../../../
")
Loading CSS resources over a HTTP source in a background tab in Firefox seems flaky. The error "Unable to load stylesheet undefined" is returned in some cases. Further debugging around the message makes the message disappear.
cssSupport.changeFontFaceRuleSrc() seems to have problems either retrieving rule.style.getPropertyValue("font-family")
or rule.parentStyleSheet
, the latter being null.
Please release a prebuilt version, so we don't have to downloadwhole dependencies (its really slow in my country) just to build inlineresources.allinone.js
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.