Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don't remove link with attribute data-embed #66

Open
tomkrej opened this issue Sep 11, 2019 · 8 comments
Open

Don't remove link with attribute data-embed #66

tomkrej opened this issue Sep 11, 2019 · 8 comments

Comments

@tomkrej
Copy link

tomkrej commented Sep 11, 2019

Hi,
I have small wish :) I am newsletter developer a I use gulp-inline-css in my devstack with two cases. First I have external link to style.css () which I need to inline and remove. And second external link for Google Fonts () which I don't want remove.

I tried to add data attribute data-embed, but it still remove element.

Can you help me, please?

@howeller
Copy link

I second this request. My links to to Google fonts get stripped out.

@jonkemp
Copy link
Owner

jonkemp commented Sep 25, 2020

@jonkemp
Copy link
Owner

jonkemp commented Sep 25, 2020

Oh I see what you are saying. Seems like data-embed is the solution here but maybe it doesn't work for the link tag.

@howeller
Copy link

howeller commented Apr 19, 2021

Maybe having an data-embed-ignore attribute for link tags to be left alone entirely. Thank you for looking into this!

@xxxKOTxxx
Copy link

xxxKOTxxx commented Feb 7, 2023

Any updates?
Same problem with Google fonts

@Chris-Reedy
Copy link

Curious if this is being addressed? Also having a problem with Google Fonts being stripped.

@cb911nr
Copy link

cb911nr commented Sep 11, 2023

Also came here for the same issue, want to ignore certain link tags, like google fonts.

@Chris-Reedy
Copy link

Chris-Reedy commented Sep 18, 2023

UPDATE

If you use data-embed="" in a Google webfont <link>, it won't be stripped. Here are the steps...

Step 1: make sure rel="stylesheet" isn't in the <link> attribute (will interrupt gulp-inline-css)
Step 2: add inline-webfontlink="" as a place holder so we can add the rel="stylesheet" back in later or else the webfont won't render (see 1st image, below)
Step 3: add data-embed="" to the <link> after the inline-webfontlink="" declaration (see 1st image, below)
Step 4: make sure your gulp-inline-css settings are correct (see 2nd image, below)
Step 5: add .pipe(replace(/inline-webfontlink="(.*)"/g, 'rel="stylesheet"')) as the last item in your var inline = function(path) { (see 3rd image, below)
Step 6: view source of rendered code to confirm (see 4th image, below)

1. HTML:

image

2. Settings:

image

3. var inline:

image

4. Rendered:

image

Credit in part to @chrisgrouge

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants