<commit_before><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Beautifier (by Sencha)</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="cssbeautify.js" charset="utf-8"></script>
    <script type="text/javascript">
    var formatId;
    function format() {
        if (formatId) {
            window.clearTimeout(formatId);
        }
        formatId = window.setTimeout(function () {
            var options, raw, beautified;

            options = {
                indent: '    '
            };

            if (document.getElementById('tab').checked) {
                options.indent = '\t';
            }

            if (document.getElementById('openbrace-separate-line').checked) {
                options.openbrace = 'separate-line';
            }

            raw = document.getElementById('raw').value;
            beautified = cssbeautify(raw, options);
            document.getElementById('beautified').value = beautified;
            formatId = undefined;
        }, 42);
    }
    </script>
</head>
<body>
  <div id="container">
  <div id="content">
    <p>Type any unformatted CSS:</p>
    <p><textarea id="raw" cols="70" rows="15" spellcheck="false" onChange='format()' onKeyDown='format()'>menu{color:red} navigation{background-color:#333}</textarea></p>
    <p>Beautified CSS:</p>
    <p><textarea id="beautified" cols="70" rows="15" readonly></textarea></p>
  </div>
  <div id="info">
    <p>Formatting rules:</p>
    <ul>
        <li>Comments are preserved</li>
        <li>Only one blank line between two rulesets</li>
        <li>Closed curly brace is at its own line</li>
        <li>There is no empty line between declarations inside a ruleset</li>
        <li>Between property name and value, no space before colon and only one space after colon</li>
    </ul>
    <p>Options (more coming soon):</p>
    <div style="border: 1px solid #ddd; padding-left: 5px">
    <p>Indent with<br>
    <label><input checked type="radio" name="indent" id="spaces" value="spaces" onChange='format()'>spaces</label><br>
    <label><input type="radio" name="indent" id="tab" value="tab" onChange='format()'>tab</label>
    </p>
    <p>Place open curly brace<br>
    <label><input checked type="radio" name="openbrace" id="openbrace-end-of-line" onChange='format()'>at the end-of-line</label><br>
    <label><input type="radio" name="openbrace" id="openbrace-separate-line" onChange='format()'>in a separate line</label>
    </p>
    </div>
    <p>Not handled yet</p>
    <ul>
        <li>Optionally separate each selector and put it in its own line</li>
        <li>Custom number of spaces</li>
    </ul>
  </div>
  <p><a href="http://github.com/senchalabs/cssbeautify"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/abad93f42020b733148435e2cd92ce15c542d320/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub"></a></p>
  </div>
  <script>format();</script><commit_msg>Better wording of the formatting rules.<commit_after><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Beautifier (by Sencha)</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="cssbeautify.js" charset="utf-8"></script>
    <script type="text/javascript">
    var formatId;
    function format() {
        if (formatId) {
            window.clearTimeout(formatId);
        }
        formatId = window.setTimeout(function () {
            var options, raw, beautified;

            options = {
                indent: '    '
            };

            if (document.getElementById('tab').checked) {
                options.indent = '\t';
            }

            if (document.getElementById('openbrace-separate-line').checked) {
                options.openbrace = 'separate-line';
            }

            raw = document.getElementById('raw').value;
            beautified = cssbeautify(raw, options);
            document.getElementById('beautified').value = beautified;
            formatId = undefined;
        }, 42);
    }
    </script>
</head>
<body>
  <div id="container">
  <div id="content">
    <p>Type any unformatted CSS:</p>
    <p><textarea id="raw" cols="70" rows="15" spellcheck="false" onChange='format()' onKeyDown='format()'>menu{color:red} navigation{background-color:#333}</textarea></p>
    <p>Beautified CSS:</p>
    <p><textarea id="beautified" cols="70" rows="15" readonly></textarea></p>
  </div>
  <div id="info">
    <p>Formatting rules:</p>
    <ul>
        <li>Comments are preserved</li>
        <li>Only one blank line between two rulesets</li>
        <li>Closed curly brace is at its own line</li>
        <li>There is no empty line between declarations inside a ruleset</li>
        <li>No space between property name and colon</li>
        <li>One space between colon and property value</li>
    </ul>
    <p>Options (more coming soon):</p>
    <div style="border: 1px solid #ddd; padding-left: 5px">
    <p>Indent with<br>
    <label><input checked type="radio" name="indent" id="spaces" value="spaces" onChange='format()'>spaces</label><br>
    <label><input type="radio" name="indent" id="tab" value="tab" onChange='format()'>tab</label>
    </p>
    <p>Place open curly brace<br>
    <label><input checked type="radio" name="openbrace" id="openbrace-end-of-line" onChange='format()'>at the end-of-line</label><br>
    <label><input type="radio" name="openbrace" id="openbrace-separate-line" onChange='format()'>in a separate line</label>
    </p>
    </div>
    <p>Not handled yet</p>
    <ul>
        <li>Optionally separate each selector and put it in its own line</li>
        <li>Custom number of spaces</li>
    </ul>
  </div>
  <p><a href="http://github.com/senchalabs/cssbeautify"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/abad93f42020b733148435e2cd92ce15c542d320/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub"></a></p>
  </div>
  <script>format();</script>
{'fraction_non_alphanumeric': 0.15989159891598917, 'fraction_numerical': 0.05196875498166746, 'mean_word_length': 3.196655518394649, 'pattern_counts': {'":': 0, '<': 173, '<?xml version=': 0, '>': 173, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '441051', 'n_tokens_mistral': 2263, 'n_tokens_neox': 2040, 'n_words': 435}