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 |