digestioncss

v0.3.1

Published

3 years ago

Cleans up your HTML code from CSS

Downloads

0High
0Medium
0Low

alisonmonteiro

gabrieljmj

digestioncss.js

Cleans up your HTML code from CSS.

Install

$ npm install --save-dev digestioncss

Usage

You have a HTML file

<!-- file.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="hello" style="background:red">Hello!</div>
</body>
</html>

so you want take all styles attributes from HTML elements and put them on a CSS file. With digestioncss.js, just do that:

var DigestionCSS = require('digestioncss');

new DigestionCSS().digest({
 file: 'file.html',
 dest: 'public/css/file.css'
});

If the destination file already exists and is a CSS file, both will be joined. If not, it will be created. Also a link element referencing it will be added on the head of the HTML file.

#hello{background:red;}

<!-- file.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="public/css/file.css" type="text/css">
</head>
<body>
 <div id="hello">Hello!</div>
</body>
</html>

Saving HTML in a new file

Option to save your generated HTML in a new file.

new DigestionCSS().digest({
  file: 'file.html',
  newFile: 'new-file.html' // Will keep `file.html`
  dest: 'public/css/file.css'
});

Backup the original HTML

The option backupFile saves a backup from the original HTML.

new DigestionCSS().digest({
  file: 'file.html',
  backupFile: 'backup-file.html'
  dest: 'public/css/file.css'
});

Minifiers and beautifiers

There's options to enable beautifiers or minifiers for HTML and CSS. If the beautifier for a language is unabled, so it will be minified and vise-versa.

Beautify

Language|Default value --------|------------- HTML|true CSS|false

Minify

Language|Default value --------|------------- HTML|false CSS|true

Example

new DigestionCSS().digest({
  file: 'file.html',
  dest: 'public/css/file.css',
  beautify: {
    html: false,
    css: true
  }
});

Command line

You can use via command line also.

`digestioncss.json`

You can create a file with several files that you want to cleans up from CSS.

{
    "files": [
        {
            "file": "foo.html",
            "dest": "css/foocss.css"
        },
        {
            "file": "bar.html",
            "dest": "css/barcss.css",
            "minify": {
                "html": true
            }
        }
    ]
}

$ digestioncss

Without JSON file

Basic:

$ digestioncss foo.html css/foocss.css

Options

Option | Description ------- | --------- -n <file>/--new_file <file> | Sends the new HTML to another file. -b <file>/--backup_file <file> | Saves a backup from the original HTML. --minify_css | Enable minifier for CSS. --minify_html | Enable minifier for HTML. --beautify_css | Enable beautifier for CSS. --beautify_html | Enable beautifier for HTML.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme