<commit_before>'use strict';

(function () {

  var React = require('react');
  var ReactDOM = require('react-dom');
  var ReactStyleSheets = require('../../../../lib/index');

  var classNames = ReactStyleSheets.createUniqueClassStyles({
    container: {
      margin: [0, 'auto'],
      padding: {
        left: 15,
        right: 15
      },
      maxWidth: 768
    }
  });

  var App = React.createClass({
    render: function () {
      return (
        <div className={classNames.container}>
          <h1>
            React Style Sheets
          </h1>
          <h2>
            About
          </h2>
          <p>
            React Style Sheets allows defining styles in your javascript in a similar way to React Native,
            but unlike React Native (or libraries like {
              <a href="https://github.com/js-next/react-style">
                React Style
              </a>
            }), it has the following benefits:
          </p>
          <ul>
            <li>
              Styles are only generated once, when the script is first loaded
            </li>
            <li>
              The styles are not inlined, instead they are added in a style tag and either available globally,
              or accessed by a unique class name (more info below)
            </li>
            <li>
              No need to manually implement hover, active, etc states in javascript (more info below)
            </li>
            <li>
              You can add global styles for all HTML elements (by tag name)
              <pre>
                {
                  'ReactStyleSheets.createGlobalTagStyles({\n' +
                  '  p: {\n' +
                  '    margin: \'10px auto\'\n' +
                  '  }\n' +
                  '});'
                }
              </pre>
            </li>
            <li>
              You can use advanced selectors like hover, active, disabled, firstChild, etc
              <pre>
                {
                  'ReactStyleSheets.createGlobalTagStyles({\n' +
                  '  a: {\n' +
                  '    textDecoration: \'none\',\n' +
                  '    hover: {\n' +
                  '      textDecoration: \'underline\'\n' +
                  '    }\n' +
                  '  }\n' +
                  '});'
                }
              </pre>
            </li>
            <li>
              You can use selectors for pseudo elements like before, after, and selection
              <pre>
                {
                  'ReactStyleSheets.createGlobalTagStyles({\n' +
                  '  li: {\n' +
                  '    before: {\n' +
                  '      content: \'">"\'\n' +
                  '    }\n' +
                  '  }\n' +
                  '});'
                }
              </pre>
            </li>
            <li>
              You can nest selectors
              <pre>
                {
                  'ReactStyleSheets.createGlobalTagStyles({\n' +
                  '  li: {\n' +
                  '    firstChild: {\n' +
                  '      before: {\n' +
                  '        content: \'">"\'\n' +
                  '      }\n' +
                  '    }\n' +
                  '  }\n' +
                  '});'
                }
              </pre>
            </li>
            <li>
              You can easily define styles with our intuative API
              (automatically adds units, joins arrays, and more)
              <pre>
                {
                  'ReactStyleSheets.createGlobalTagStyles({\n' +
                  '  p: {\n' +
                  '    margin: [10, \'auto\']\n' +
                  '  }\n' +
                  '});\n\n' +

                  '// Outputs\n\n' +

                  '<style type="text/css">\n' +
                  '  p {\n' +
                  '    margin: 10px auto;\n' +
                  '  }\n' +
                  '</style>'
                }
              </pre>
              Break up styles with nesting
              <pre>
                {
                  'ReactStyleSheets.createGlobalTagStyles({\n' +
                  '  p: {\n' +
                  '    margin: {\n' +
                  '      top: 10,\n' +
                  '      bottom: 10\n' +
                  '    }\n' +
                  '  }\n' +
                  '});\n\n' +

                  '// Outputs\n\n' +

                  '<style type="text/css">\n' +
                  '  p {\n' +
                  '    margin-top: 10px;\n' +
                  '    margin-bottom: 10px;\n' +
                  '  }\n' +
                  '</style>'
                }
              </pre>
            </li>
          </ul>
          <p>
            Benefits of React Style Sheets over using CSS, and CSS pre/post-processors include
          </p>
          <ul>
            <li>
              Keep your styles, component logic, and markup in the same file
            </li>
            <li>
              Automatically add vendor prefixes
            </li>
            <li>
              No additional dependencies - parse and bundle your styles with your chosen javascript build tools
            </li>
            <li>
              Class names are unique (and obfuscated by default) preventing accidental style inheritance
              <pre>
                {
                  '// Define your styles\n\n' +

                  'var classNames = ReactStyleSheets.createUniqueClassStyles({\n' +
                  '  myClass: {\n' +
                  '    color: \'red\'\n' +
                  '  }\n' +
                  '});\n\n' +

                  '// And you end up with some classNames like the following\n\n' +

                  '{\n' +
                  '  myClass: \'myClass_obfus\'\n' +
                  '}\n\n' +

                  '// You can then use this in your React components\n\n' +

                  '<div className={classNames.myClas}>\n' +
                  '  Hello, World!\n' +
                  '</div>\n\n' +

                  '// Which references the styles generated in the style tag\n\n' +

                  '<style type="text/css">\n' +
                  '  .myClass_obfus {\n' +
                  '    color: red;\n' +
                  '  }\n' +
                  '</style>'
                }
              </pre>
            </li>
          </ul>
        </div>
      );
    }
  });

  module.exports = App;

})();<commit_msg>myClas typo<commit_after>'use strict';

(function () {

  var React = require('react');
  var ReactDOM = require('react-dom');
  var ReactStyleSheets = require('../../../../lib/index');

  var classNames = ReactStyleSheets.createUniqueClassStyles({
    container: {
      margin: [0, 'auto'],
      padding: {
        left: 15,
        right: 15
      },
      maxWidth: 768
    }
  });

  var App = React.createClass({
    render: function () {
      return (
        <div className={classNames.container}>
          <h1>
            React Style Sheets
          </h1>
          <h2>
            About
          </h2>
          <p>
            React Style Sheets allows defining styles in your javascript in a similar way to React Native,
            but unlike React Native (or libraries like {
              <a href="https://github.com/js-next/react-style">
                React Style
              </a>
            }), it has the following benefits:
          </p>
          <ul>
            <li>
              Styles are only generated once, when the script is first loaded
            </li>
            <li>
              The styles are not inlined, instead they are added in a style tag and either available globally,
              or accessed by a unique class name (more info below)
            </li>
            <li>
              No need to manually implement hover, active, etc states in javascript (more info below)
            </li>
            <li>
              You can add global styles for all HTML elements (by tag name)
              <pre>
                {
                  'ReactStyleSheets.createGlobalTagStyles({\n' +
                  '  p: {\n' +
                  '    margin: \'10px auto\'\n' +
                  '  }\n' +
                  '});'
                }
              </pre>
            </li>
            <li>
              You can use advanced selectors like hover, active, disabled, firstChild, etc
              <pre>
                {
                  'ReactStyleSheets.createGlobalTagStyles({\n' +
                  '  a: {\n' +
                  '    textDecoration: \'none\',\n' +
                  '    hover: {\n' +
                  '      textDecoration: \'underline\'\n' +
                  '    }\n' +
                  '  }\n' +
                  '});'
                }
              </pre>
            </li>
            <li>
              You can use selectors for pseudo elements like before, after, and selection
              <pre>
                {
                  'ReactStyleSheets.createGlobalTagStyles({\n' +
                  '  li: {\n' +
                  '    before: {\n' +
                  '      content: \'">"\'\n' +
                  '    }\n' +
                  '  }\n' +
                  '});'
                }
              </pre>
            </li>
            <li>
              You can nest selectors
              <pre>
                {
                  'ReactStyleSheets.createGlobalTagStyles({\n' +
                  '  li: {\n' +
                  '    firstChild: {\n' +
                  '      before: {\n' +
                  '        content: \'">"\'\n' +
                  '      }\n' +
                  '    }\n' +
                  '  }\n' +
                  '});'
                }
              </pre>
            </li>
            <li>
              You can easily define styles with our intuative API
              (automatically adds units, joins arrays, and more)
              <pre>
                {
                  'ReactStyleSheets.createGlobalTagStyles({\n' +
                  '  p: {\n' +
                  '    margin: [10, \'auto\']\n' +
                  '  }\n' +
                  '});\n\n' +

                  '// Outputs\n\n' +

                  '<style type="text/css">\n' +
                  '  p {\n' +
                  '    margin: 10px auto;\n' +
                  '  }\n' +
                  '</style>'
                }
              </pre>
              Break up styles with nesting
              <pre>
                {
                  'ReactStyleSheets.createGlobalTagStyles({\n' +
                  '  p: {\n' +
                  '    margin: {\n' +
                  '      top: 10,\n' +
                  '      bottom: 10\n' +
                  '    }\n' +
                  '  }\n' +
                  '});\n\n' +

                  '// Outputs\n\n' +

                  '<style type="text/css">\n' +
                  '  p {\n' +
                  '    margin-top: 10px;\n' +
                  '    margin-bottom: 10px;\n' +
                  '  }\n' +
                  '</style>'
                }
              </pre>
            </li>
          </ul>
          <p>
            Benefits of React Style Sheets over using CSS, and CSS pre/post-processors include
          </p>
          <ul>
            <li>
              Keep your styles, component logic, and markup in the same file
            </li>
            <li>
              Automatically add vendor prefixes
            </li>
            <li>
              No additional dependencies - parse and bundle your styles with your chosen javascript build tools
            </li>
            <li>
              Class names are unique (and obfuscated by default) preventing accidental style inheritance
              <pre>
                {
                  '// Define your styles\n\n' +

                  'var classNames = ReactStyleSheets.createUniqueClassStyles({\n' +
                  '  myClass: {\n' +
                  '    color: \'red\'\n' +
                  '  }\n' +
                  '});\n\n' +

                  '// And you end up with some classNames like the following\n\n' +

                  '{\n' +
                  '  myClass: \'myClass_obfus\'\n' +
                  '}\n\n' +

                  '// You can then use this in your React components\n\n' +

                  '<div className={classNames.myClass}>\n' +
                  '  Hello, World!\n' +
                  '</div>\n\n' +

                  '// Which references the styles generated in the style tag\n\n' +

                  '<style type="text/css">\n' +
                  '  .myClass_obfus {\n' +
                  '    color: red;\n' +
                  '  }\n' +
                  '</style>'
                }
              </pre>
            </li>
          </ul>
        </div>
      );
    }
  });

  module.exports = App;

})();
{'fraction_non_alphanumeric': 0.12254101547313584, 'fraction_numerical': 0.004043231475001944, 'mean_word_length': 0.8400572246065808, 'pattern_counts': {'":': 0, '<': 127, '<?xml version=': 0, '>': 131, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '226022', 'n_tokens_mistral': 3562, 'n_tokens_neox': 3313, 'n_words': 853}