❤
npm
Sign UpSign In

css-surgeon
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

css-surgeon

Takes a single HTML document, removes all unused styles within style-tags and minifies the remains. The initial intent of this library was to satisfy the size limits of CSS within AMP pages. Therefore no CSS within an <style amp-boilerplate>-tag will be touched.

Build Status Coverage Status Greenkeeper badge

Installation

yarn add css-surgeon

Usage

Just pass the HTML document to the exposed operate-function. The function returns a promise which resolves with the whole document.

import {operate} from "css-surgeon";
 
const htmlWithMinifiedCss = await operate("<!doctype html><html>...");

Example

Take this HTML document for example. There are several unused rules and selectors.

<!doctype html>
<html lang="en">
<head>
    <title>single style-tag</title>
    <style>
        .used-class, .unused-partial-class {color:#000000;}
        #used-id, #unused-partial-id {color:#000000;}
        h1, h3 {color:#000000;}
 
        .unused-class {color:#000000;}
        #unused-id {color:#000000;}
        h2 {color:#000000;}
    </style> 
</head>
<body>
    <div class="used-class"></div>
    <div id="used-id"></div>
    <h1>used element</h1>
</body>
</html>

The result of the operate-function will be:

<!DOCTYPE html><html lang="en"><head>
    <title>single style-tag</title>
    <style>.used-class{color:#000}#used-id{color:#000}h1{color:#000}</style> 
</head>
<body>
    <div class="used-class"></div>
    <div id="used-id"></div>
    <h1>used element</h1>
 
 
</body></html>

Note: The strange formatting is the result of JSDOM.serialize().

Tests

$ yarn install
$ yarn test

Readme

Keywords

Package Sidebar

Install

npm i css-surgeon

Weekly Downloads

3

Version

1.0.5

License

ISC

Unpacked Size

5.24 kB

Total Files

5

Last publish

Collaborators

  • mrschneepflug
Try on RunKit
Report malware