Extract-inline-css NPM

extract-inline-css

Travis (.org)

Extract and replace inline CSS with classnames.

Installation

$ yarn add -D extract-inline-css

Usage

import extract from 'extract-inline-css';

extract('./index.html', {
  dist: './dist'
});

This will generate extracted.css and result.html files inside dist/ directory.

If you want to get results in string format, set out: 'object' option:

import extract from 'extract-inline-css';

const { css, html } = extract('./index.html', {
  out: 'object'
});

Input:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: #bada55;
      }
    </style>
  </head>
  <body>
    <h1 style="font-size: 22px; line-height: 1.2;">Hello world!</h1>
  </body>
</html>

Output:

result.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 class="h1_g4q7h2">Hello world!</h1>
  </body>
</html>

extracted.css

body {
  background: #bada55;
}

.h1_g4q7h2 {
  font-size: 22px;
  line-height: 1.2;
}

Options

Option	Type	Default	Description
cssFilename	`string`	`extracted.css`	Filename of the resulting CSS file
dist	`string`	`.`	Output directory path
extractGlobalStyles	`boolean`	`true`	Extract CSS from `<style>` tags
formatCss	`boolean`	`true`	Beautify CSS output
formatHtml	`boolean`	`false`	Beautify HTML output
htmlFilename	`string`	`output.html`	Filename of the resulting HTML file
keepStyleAttribute	`boolean`	`false`	Do not strip 'style' attributes from HTML tags
keepStyleTags	`boolean`	`false`	Do not strip `<style>` tags
out	`'file'` \| `'object'`	`file`	Output format

License

MIT

css extract html inline styles

cheerio js-beautify minimist

@everything-registry/sub-chunk-1639 ts_email_editor-server @dimitrilahaye/ponybook

1.0.2

2 years ago

1.0.1

4 years ago

1.0.0

4 years ago