inline-css
inline-css copied to clipboard
Seems to break Processing Instructions
The code <title><%= @rails %></title>
is mangled into <title><%= @rails="" %=""></%>
This does not fit the XML interpretation of PIs (and is why you had to special-case doctypes, which are also PIs)
I'm having the exact same problem use underscore templates (which are just a copy of ERB style templates).
source:
<p><%= test %></p>
returns:
Parse Error:
<%= test="" %=""></%=></p>
I need to fix this so i will fork + PR this if i figure out how to fix it.
Hey @StoneCypher + @Andykmcc
I have started work on a feature, but need help to make sure that the thing will work. There is a branch on my fork, which you can test if you install it: npm install https://github.com/daveycakes/inline-css.git#interpol
This gives a new option, protect This property accepts an array of strings, and each string you include will be kept out out of the inlining process with replace calls, and then added back in after the inlining has completed. This can be used for template boundaries in the use case described here.
eg: inlineCss(data,{url: url, protect: ['{{','}}','<%=','%>']}).then( ... )
I want to make sure it works well before I clean it up a little and provide documentation.
@daveycakes Hey, was happy to see your branch as I've also come up against this issue right at the end of a project. I'm using silverstripe CMS which has the <% ... %>
syntax, which was being mangled.
This is more of an FYI for anyone else stumbling upon this issue.
If you're running inline-css
via gulp
you'll probably be using gulp-inline-css
, which means you'll receive src.replace is not a function, this makes sense as src
in this case is a node Buffer as opposed to a string.
An alternative approach which works with gulp-inline-css
is to use gulp-replace
and turn your special tags into HTML comments, pipe inlineCss, then remove those comments.
E.g.
var inlineCss = require('gulp-inline-css'),
replace = require('gulp-replace');
return gulp.src('templates/Includes/EmailTemplatePage.ss')
.pipe(replace(/<%/g, '<!--<%'))
.pipe(replace(/%>/g, '%>-->'))
.pipe(inlineCss())
.pipe(replace(/<!--<%/g, '<%'))
.pipe(replace(/%>-->/g, '%>'));
@daveycakes - seems to be a good notation to me
sorry it took me so long to notice and respond to this