1.0.6 • Published 7 years ago
@e-goi/css-inliner v1.0.6
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-inlinerUsage
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 |