https://github.com/philschatz/css-bake.js

:art: Bakes CSS/css-polyfills styles into HTML (for eBook readers or regression-testing)
https://github.com/philschatz/css-bake.js

Last synced: 23 days ago
JSON representation

:art: Bakes CSS/css-polyfills styles into HTML (for eBook readers or regression-testing)

• Host: GitHub
• URL: https://github.com/philschatz/css-bake.js
• Owner: philschatz
• Created: 2013-12-22T22:26:07.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2015-10-08T23:26:03.000Z (over 9 years ago)
• Last Synced: 2024-11-21T19:08:31.165Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 273 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
This projects uses [css-polyfills.js](http://philschatz.com/css-polyfills.js/) to generate an HTML and a CSS file from a HTML file and CSS file that contains CSS Rules not supported by browsers or reading systems.

# Install and Run

You can install locally or globally (`npm install -g css-bake`). Installing globally will give you access to `css-bake` from the commandline.

# Usage

Required args:

- `--input-html`    : existing HTML file to convert

- `--input-css`     : existing CSS file to convert

- `--output-html`   : new converted HTML file

- `--output-css`    : new converted CSS file (*optional*)

# Example

given the following HTML:

    

      

        
Hello World

      

    


and CSS files:

    .wrapped          { border: 10px solid black; }

    .wrapped::outside { border: 10px solid green; }

Run the following:

    css-bake --input-html ./test/test.html --input-css ./test/test.css --output-html ./output.html

and you should get the following `output.html`:

    

      

        

          
Hello World

        

      

    


You may also add an optional `--output-css ./output.css` which will place the styles in a CSS file instead of "baking" them into the `style="..."` attribute.

Then, `output.html` will be:

    

      

        

          
Hello World

        

      

    


and `output.css` will be:

    .wrapped {

      border: 10px solid black;

    }

    .js-polyfill-autoclass-0-dot-wrapped-outside {

      border: 10px solid green;

    }

# Bonus! Generate a Diff

To do this, you will need to:

1. generate the **old** HTML file

2. make some CSS/HTML changes

3. regenerate the **new** HTML file

4. generate the diff'd HTML file

5. Open the diff'd HTML in a browser to see the changes

Let's use the example test file in `./test/test.html`:

    # Generate the **old** HTML file (the file extension is important)

    css-bake -i ./test/test.html -c ./test/test.css -o ./old.xhtml

    # Change `./test/test.css` by commenting out a line or two and save

    # ...

    # Generate the **new** HTML file

    css-bake -i ./test/test.html -c ./test/test.css -o ./new.xhtml

    # Generate the diff'd HTML file

    # (the file extension on diff.xhtml is important if opened in a browser)

    xsltproc --stringparam oldPath ./old.xhtml ./compare.xsl ./new.xhtml > ./diff.xhtml

    # **Note:** The location of old.xhtml in the previous line is

    # relative to compare.xsl and **not** the current working directory.