- Notifications
You must be signed in to change notification settings - Fork28
Inline linked css in an html file. Useful for emails.
License
jonkemp/gulp-inline-css
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
gulp-inline-css
Inline your CSS properties into the
styleattribute in an html file. Useful for emails.
Inspired by the grunt plugingrunt-inline-css. Uses theinline-css module.
- Uses Promises withinline-css version 2.0
This gulp plugin takes an html file and inlines the CSS properties into the style attribute.
/path/to/file.html:
<html><head><style>p {color: red; }</style><linkrel="stylesheet"href="style.css"></head><body><p>Test</p></body></html>
style.css
p {text-decoration: underline;}
Output:
<html><head></head><body><pstyle="color: red; text-decoration: underline;">Test</p></body></html>
- HTML emails. For a comprehensive list of supported selectors seehere
- Embedding HTML in 3rd-party websites.
- Performance. Downloading external stylesheets delays the rendering of the page in the browser. Inlining CSS speeds up this process because the browser doesn't have to wait to download an external stylesheet to start rendering the page.
Install withnpm
npm install --save-dev gulp-inline-cssvargulp=require('gulp'),inlineCss=require('gulp-inline-css');gulp.task('default',function(){returngulp.src('./*.html').pipe(inlineCss()).pipe(gulp.dest('build/'));});
With options:
vargulp=require('gulp'),inlineCss=require('gulp-inline-css');gulp.task('default',function(){returngulp.src('./*.html').pipe(inlineCss({applyStyleTags:true,applyLinkTags:true,removeStyleTags:true,removeLinkTags:true})).pipe(gulp.dest('build/'));});
Options are passed directly toinline-css.
Type:String
Default:""
Extra css to apply to the file.
Type:Boolean
Default:true
Whether to inline styles in<style></style>.
Type:Boolean
Default:true
Whether to resolve<link rel="stylesheet"> tags and inline the resulting styles.
Type:Boolean
Default:true
Whether to remove the original<style></style> tags after (possibly) inlining the css from them.
Type:Boolean
Default:true
Whether to remove the original<link rel="stylesheet"> tags after (possibly) inlining the css from them.
Type:String
Default:filePath
How to resolve hrefs.Required.
Type:Boolean
Default:false
Preserves all media queries (and contained styles) within<style></style> tags as a refinement whenremoveStyleTags istrue. Other styles are removed.
Type:Boolean
Default:false
Whether to use any CSS pixel widths to createwidth attributes on elements.
Type:Boolean
Default:false
Whether to apply theborder,cellpadding andcellspacing attributes totable elements.
Type:Boolean
Default:false
Whether to remove theclass andid attributes from the markup.
Type:Object
Default:{ EJS: { start: '<%', end: '%>' }, HBS: { start: '{{', end: '}}' } }
An object where each value has astart andend to specify fenced code blocks that should be ignored during parsing and inlining. For example, Handlebars (hbs) templates areHBS: {start: '{{', end: '}}'}.codeBlocks can fix problems where otherwise inline-css might interpret code like<= as HTML, when it is meant to be template language code. Note thatcodeBlocks is a dictionary which can contain many different code blocks, so don't docodeBlocks: {...} docodeBlocks.myBlock = {...}.
When a data-embed attribute is present on a <style></style> tag, inline-css will not inline the styles and will not remove the <style></style> tags.
This can be used to embed email client support hacks that rely on css selectors into your email templates.
Options to passed tocheerio.
MIT ©Jonathan Kemp
About
Inline linked css in an html file. Useful for emails.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.