Have ideas to improve npm?Join in the discussion! »

    html-clean-embedded-css

    1.3.0 • Public • Published

    html-clean-embedded-css

    Expects html, removes redundant css within style tags, and returns html.

    This module currently exports an async function because one of its dependencies is expecting an asynchronous operation (reading from file system). This module does not actually use the file system, so this should not be necessary. This could be resolved in the future by patching css-razor to not be async if the file system is not accessed.

    This library is largely based on css-razor. For alternative libraries that remove redundant CSS rules, also consider:

    JavaScript Style Guide

    Install

    npm install --save html-clean-embedded-css
    # or yarn add html-clean-embedded-css 

    Running tests

    npm test

    Rebuilding API documentation

    npm run docs

    This will append to README.md by default.

    API documentation

    cleanEmbeddedCss

    Expects html, removes redundant css within style tags, and returns html. The output HTML document should render the same as the input, but with less css rules present.

    This is primarily useful if you reduce the number of requests to your web application by embedding your css into a single HTML document instead of a separate stylesheet document, and if you intend to optimize the CSS in that document after embedding it into the HTML document.

    To simplify implementation, this library does not attempt to preserve whitespace. Instead, a single style tag contained non-redundant CSS rules is prepended exactly before the closing head tag. If no closing head tag is found, the input html document is returned as-is.

    Parameters

    • html string The HTML document to parse style tags from.

    Examples

    const assert = require('assert')
    const cleanEmbeddedCss = require('html-clean-embedded-css')
     
    const redundantCssHtml = `<html><head><style>.one { color: green } .two { color: red }</style>
    </head><body><p class="one">nobody uses class two</p></body></html>`
     
    const cleanCssHtml = `<html><head>
    <style>.one { color: green }</style></head><body><p class="one">nobody uses class two</p></body></html>`
     
    ;(async () => {
      const html = await cleanEmbeddedCss(redundantCssHtml)
      assert.equal(html, cleanCssHtml)
      console.log('html with redundant embedded css cleaned to %s', html)
    })()

    Returns string html - the input HTML document but with embedded style tags having redundant css rules removed.

    Install

    npm i html-clean-embedded-css

    DownloadsWeekly Downloads

    0

    Version

    1.3.0

    License

    MIT

    Last publish

    Collaborators

    • avatar