<commit_before>const React = require('react');
const utils = require('styletron-utils');

const isValidAttr = require('./is-valid-attr');

const STYLES_KEY = '__STYLETRON_STYLES';
const TAG_KEY = '__STYLETRON_TAG';

module.exports = styled;

/**
 * Helper function to create styled element components
 * @packagename styletron-react
 * @param  {String|function} base     Tag name or styled element component
 * @param  {function|object} styleFn  Style object or function that returns a style object
 * @return {function}                 Styled element component
 * @example
 * import {styled} from 'styletron-react';
 *
 * const Panel = styled('div', {
 *   backgroundColor: 'lightblue',
 *   fontSize: '12px'
 * });
 *
 * <Panel>Hello World</Panel>
 * @example
 * import {styled} from 'styletron-react';
 *
 * const Panel = styled('div', (props) => ({
 *   backgroundColor: props.alert ? 'orange' : 'lightblue',
 *   fontSize: '12px'
 * }));
 *
 * <Panel alert>Danger!</Panel>
 * @example
 * import {styled} from 'styletron-react';
 *
 * const DeluxePanel = styled(Panel, (props) => ({
 *   backgroundColor: props.alert ? 'firebrick' : 'rebeccapurple',
 *   color: 'white',
 *   boxShadow: '3px 3px 3px darkgray'
 * }));
 *
 * <DeluxePanel>Bonjour Monde</DeluxePanel>
 */
function styled(base, styleArg) {
  if (typeof base === 'function' && base[TAG_KEY] && base[STYLES_KEY]) {
    // Styled component
    return createStyledElementComponent(
      base[TAG_KEY],
      base[STYLES_KEY].concat(styleArg)
    );
  }
  if (typeof base === 'string' || typeof base === 'function') {
    // Tag name or non-styled component
    return createStyledElementComponent(
      base,
      [styleArg]
    );
  }
  throw Error('Must pass in element or component');
}

function createStyledElementComponent(tagName, stylesArray) {

  class StyledElement extends React.Component {
    render() {
      const resolvedStyle = {};
      StyledElement[STYLES_KEY].forEach(style => {
        if (typeof style === 'function') {
          assign(resolvedStyle, style(this.props, this.context));
        } else if (typeof style === 'object') {
          assign(resolvedStyle, style);
        }
      });

      const styletronClassName = utils.injectStylePrefixed(this.context.styletron, resolvedStyle);

      const elementProps = typeof StyledElement[TAG_KEY] === 'string' ? omitInvalidProps(this.props) : assign({}, this.props);
      elementProps.className = this.props.className
        ? `${this.props.className} ${styletronClassName}`
        : styletronClassName;

      if (this.props.innerRef) {
        elementProps.ref = this.props.innerRef;
      }
<commit_msg>Don't pass `innerRef` prop<commit_after>const React = require('react');
const utils = require('styletron-utils');

const isValidAttr = require('./is-valid-attr');

const STYLES_KEY = '__STYLETRON_STYLES';
const TAG_KEY = '__STYLETRON_TAG';

module.exports = styled;

/**
 * Helper function to create styled element components
 * @packagename styletron-react
 * @param  {String|function} base     Tag name or styled element component
 * @param  {function|object} styleFn  Style object or function that returns a style object
 * @return {function}                 Styled element component
 * @example
 * import {styled} from 'styletron-react';
 *
 * const Panel = styled('div', {
 *   backgroundColor: 'lightblue',
 *   fontSize: '12px'
 * });
 *
 * <Panel>Hello World</Panel>
 * @example
 * import {styled} from 'styletron-react';
 *
 * const Panel = styled('div', (props) => ({
 *   backgroundColor: props.alert ? 'orange' : 'lightblue',
 *   fontSize: '12px'
 * }));
 *
 * <Panel alert>Danger!</Panel>
 * @example
 * import {styled} from 'styletron-react';
 *
 * const DeluxePanel = styled(Panel, (props) => ({
 *   backgroundColor: props.alert ? 'firebrick' : 'rebeccapurple',
 *   color: 'white',
 *   boxShadow: '3px 3px 3px darkgray'
 * }));
 *
 * <DeluxePanel><NAME></DeluxePanel>
 */
function styled(base, styleArg) {
  if (typeof base === 'function' && base[TAG_KEY] && base[STYLES_KEY]) {
    // Styled component
    return createStyledElementComponent(
      base[TAG_KEY],
      base[STYLES_KEY].concat(styleArg)
    );
  }
  if (typeof base === 'string' || typeof base === 'function') {
    // Tag name or non-styled component
    return createStyledElementComponent(
      base,
      [styleArg]
    );
  }
  throw Error('Must pass in element or component');
}

function createStyledElementComponent(tagName, stylesArray) {

  class StyledElement extends React.Component {
    render() {
      const restProps = assign({}, this.props);
      delete restProps.innerRef;

      const resolvedStyle = {};
      StyledElement[STYLES_KEY].forEach(style => {
        if (typeof style === 'function') {
          assign(resolvedStyle, style(restProps, this.context));
        } else if (typeof style === 'object') {
          assign(resolvedStyle, style);
        }
      });

      const styletronClassName = utils.injectStylePrefixed(this.context.styletron, resolvedStyle);

      const elementProps = typeof StyledElement[TAG_KEY] === 'string' ? omitInvalidProps(restProps) : restProps;
      elementProps.className = restProps.className
        ? `${restProps.className} ${styletronClassName}`
        : styletronClassName;

      if (this.props.innerRef) {
        elementProps.ref = this.props.innerRef;
      }

{'fraction_non_alphanumeric': 0.13929700576529663, 'fraction_numerical': 0.002603682350753208, 'mean_word_length': 3.500418410041841, 'pattern_counts': {'":': 0, '<': 16, '<?xml version=': 0, '>': 22, 'https://': 0, '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': '3504482', 'n_tokens_mistral': 1677, 'n_tokens_neox': 1638, 'n_words': 385}