How to use aphrodite - 10 common examples

const {StyleSheetTestUtils} = require("aphrodite");
const Enzyme = require("enzyme");
const EnzymeAdapter = require("enzyme-adapter-react-16");

jest.spyOn(console, "error").mockImplementation((msg) => {
    throw new Error(`Unexpected call to console.error: ${msg}`);
});

StyleSheetTestUtils.suppressStyleInjection();

// Setup enzyme's react adapter
Enzyme.configure({adapter: new EnzymeAdapter()});

require("../../node_modules/jest-enzyme/lib/index.js");

styles.table__th__inner,
                    this.props.smallRow && styles.table__th__inner_smallRow,
                    this.props.headerStyles
                  )} data-l10n-id={heading} />
                  : heading
              }
            
          })}
        
      
      {this.generateTableBody()}
    
  }
}

const styles = StyleSheet.create({
  // By default the width and margin are not specified.
  // It can be specified by setting css to tableClassNames.
  // See 'styles.devices__devicesList' on syncTab.js for example.
  table: {
    boxSizing: 'border-box',
    cursor: 'default',
    borderSpacing: 0,

    // #10434: Enable border on the table by default
    borderCollapse: 'collapse'
  },

  // Setting 'fillAvailable' maximizes the width of the table.
  table_fillAvailable: {
    width: '-webkit-fill-available'
  },

let backgroundColor;
    if (this.state && this.state.highlightedSignal === signal.name) {
      // when signal highlighted,
      // darkened background and lightened text.

      const darkenedColors = shade(colors, -0.5);
      const lightenedColors = shade(colors, 0.9);
      colorRgbStr = `rgb(${lightenedColors.join(',')})`;
      backgroundColor = `rgba(${darkenedColors.join(',')},0.5)`;
    } else {
      const colorsCommaSep = colors.join(',');
      colorRgbStr = `rgb(${colorsCommaSep})`;
      backgroundColor = `rgba(${colorsCommaSep},0.2)`;
    }

    const style = StyleSheet.create({
      signal: { color: colorRgbStr, backgroundColor }
    }).signal;
    return style;
  }

marginTop: '0rem',
      display: 'flex',
      alignItems: 'center',
      paddingRight: '1rem',
      ':before': {
        display: 'none',
      },
    },
    cell_header: {},
    inner: {
      display: 'block',
      width: '100%',
    },
  };

  const styles = StyleSheet.create(deepAssign(
    base,
    {
      // responsive to two column state
      table_two: {
        display: 'flex',
        flexDirection: 'column',
        [breakpoint(bp.SMALL)]: base.table,
      },
      row_two: {
        display: 'flex',
        flexDirection: 'column',
        [breakpoint(bp.SMALL)]: base.row,
      },
      row_header_two: {
        display: 'none',
        [breakpoint(bp.SMALL)]: base.row_header,

function Arrow(_ref) {
  var direction = _ref.direction,
      icon = _ref.icon,
      onClick = _ref.onClick,
      size = _ref.size,
      theme = _ref.theme,
      props = _objectWithoutProperties(_ref, ['direction', 'icon', 'onClick', 'size', 'theme']);

  var classes = _noImportant.StyleSheet.create((0, _util.deepMerge)(defaultStyles, theme));

  return _react2.default.createElement(
    'button',
    _extends({
      type: 'button' // default: submit
      , className: (0, _noImportant.css)(classes.arrow, classes['arrow__direction__' + direction], size && classes['arrow__size__' + size]),
      onClick: onClick,
      onTouchEnd: onClick
    }, props),
    _react2.default.createElement(_Icon2.default, { fill: !!theme.arrow && theme.arrow.fill || _theme2.default.arrow.fill, type: icon })
  );
}

CONTAINER_FONT_COLOR = "rgb(255, 255, 255)";
          CONTAINER_FONT_COLOR_HOVER = "rgb(255, 255, 255)";
          CONTAINER_BORDER = "1px solid rgb(59, 89, 152)";
          SHARE_COUNTER_BORDER_LEFT = "1px solid rgba(255, 255, 255, 0.4)";
          break;
        default:
          CONTAINER_BACKGROUND = "rgb(59, 89, 152)";
          CONTAINER_BACKGROUND_HOVER = "rgb(59, 99, 162)";
          CONTAINER_FONT_COLOR = "rgb(255, 255, 255)";
          CONTAINER_FONT_COLOR_HOVER = "rgb(255, 255, 255)";
          CONTAINER_BORDER = "1px solid rgb(59, 89, 152)";
          SHARE_COUNTER_BORDER_LEFT = "1px solid rgba(255, 255, 255, 0.4)";
          break;
      }

      var Theme = _noImportant.StyleSheet.create({
        container: {
          background: CONTAINER_BACKGROUND,
          color: CONTAINER_FONT_COLOR,
          border: CONTAINER_BORDER,
          ":hover": {
            background: CONTAINER_BACKGROUND_HOVER,
            color: CONTAINER_FONT_COLOR_HOVER
          }
        },
        share_counter: {
          borderLeft: SHARE_COUNTER_BORDER_LEFT
        }
      });

      // Return element
      return React.createElement(

// @flow
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { StyleSheetTestUtils } from 'aphrodite';

configure({ adapter: new Adapter() });
StyleSheetTestUtils.suppressStyleInjection();

jest.mock('x3dom.js');

renderMethod: (root, styleTags) => {
    const { css, html } = StyleSheetServer.renderStatic(() => {
      return renderToString(root);
    });
    const head = [
      ...styleTags,
      <style data-aphrodite="">{`${css.content}`}</style>,
    ];
    const rehydrate = `window.renderedClassNames = ${JSON.stringify(
      css.renderedClassNames,
    )};`;
    const additionalScript = [
      // eslint-disable-next-line react/no-danger

function renderComponent(comp, destinations, callback = noop) {
  destinations = arrify(destinations)
  const {html, css} = StyleSheetServer.renderStatic(() => ReactDOMServer.renderToStaticMarkup(comp))
  const string = html.replace('/* aphrodite-content */', css.content)
  async.parallel(
    destinations.map(d => cb => writeFile(d, string, cb)),
    callback,
  )
}

static render(element, opts) {
    // eslint-disable-next-line global-require
    const { StyleSheetServer } = require('aphrodite')
    const { css, html } = StyleSheetServer.renderStatic(() => preactToString(element, null, opts))
    return {
      css: css.content,
      html,
    }
  }
}