inline-css icon indicating copy to clipboard operation
inline-css copied to clipboard

Seems to break Processing Instructions

Open StoneCypher opened this issue 7 years ago • 4 comments

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)

StoneCypher avatar Nov 23 '16 02:11 StoneCypher

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.

Andykmcc avatar Jan 26 '17 01:01 Andykmcc

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 avatar May 29 '17 11:05 daveycakes

@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, '%>'));

stilldesign avatar Jun 16 '17 00:06 stilldesign

@daveycakes - seems to be a good notation to me

sorry it took me so long to notice and respond to this

StoneCypher avatar Jun 16 '17 01:06 StoneCypher