Skip to content

Latest commit

 

History

History
74 lines (56 loc) · 2.1 KB

README.md

File metadata and controls

74 lines (56 loc) · 2.1 KB

css-inliner

Inline your css 100% in the browser and with no dependencies

Install

To install the package, you can use npm or yarn:

  yarn add @e-goi/css-inliner

Usage

Import the package on your code

import { cssInliner } from '@e-goi/css-inliner';

Use the main function cssInliner to inject the style on the elements.

cssInliner(
  document.querySelector('html').innerHTML,
  {
    properties: {
      width: true,
      border: true,
      cellpadding: true,
      cellspacing: true
    }
  }
).then(formatted => {
  console.log(formatted);
});

Configuration

The second parameter of cssInliner is a configuration object.

Basic configuration

Configuration Type Default Description
url string empty url to replace on relative path src and href
preserveMediaQueries boolean true define if preserver or not @media queries
apply ApplyTags - tags to get the styles
properties ApplyProperties - apply style to some attributes
remove RemoveTags - remove tags after set the css inline

ApplyTags configuration

Configuration Type Default Description
style boolean true apply style tags
link boolean true apply content from link tags

ApplyProperties configuration

Configuration Type Default Description
width boolean false apply width style to width property
border boolean false apply border style to table border property
cellpadding boolean false apply td padding style to table cellpadding property
cellspacing boolean false apply border-spacing style to table cellspacing property

RemoveTags configuration

Configuration Type Default Description
style boolean true remove style tags
link boolean true remove link tags
script boolean true remove script tags