How to use styletron-server - 9 common examples

test('innerRef not passed', t => {
  t.plan(3);

  class InnerComponent extends Preact.Component {
    render() {
      t.equal(this.props.className, 'a', 'classname passed in');
      t.equal(this.props.foo, 'bar', 'props passed through');
      return Preact.h('button', null, 'InnerComponent');
    }
  }

  const Widget = styled(InnerComponent, {color: 'red'});
  const styletron = new Styletron();

  class TestComponent extends Preact.Component {
    componentDidMount() {
      t.ok(
        isCompositeComponentWithType(this.widgetInner, InnerComponent),
        'is InnerComponent'
      );
    }

    render() {
      return Preact.h(Widget, {
        foo: 'bar',
        innerRef: c => {
          this.widgetInner = c;
        },
      });

test('core component', t => {
  const Widget = ({className}) => React.createElement('div', {className});
  const SuperWidget = core(Widget, {color: 'red'}, strictAssignProps);
  const styletron = new Styletron();
  const output = ReactTestUtils.renderIntoDocument(
    React.createElement(Provider, {styletron}, React.createElement(SuperWidget))
  );
  const div = ReactTestUtils.findRenderedDOMComponentWithTag(output, 'div');
  t.equal(div.className, 'a', 'matches expected styletron classes');
  t.equal(styletron.getCss(), '.a{color:red}');
  t.end();
});

test('styled passes through valid props', t => {
  const styletron = new StyletronServer();

  const StyledComponent = styled('div', {color: 'red'});

  const result = InfernoTestUtils.renderIntoDocument(
    createElement(
      Provider,
      {styletron},
      createElement(StyledComponent, {
        'data-bar': 'bar',
      })
    )
  );

  const element = InfernoTestUtils.findRenderedDOMElementWithTag(result, 'div');

  t.equal(

class InnerComponent extends React.Component {
    render() {
      t.deepEqual(
        this.props,
        {
          className: 'a',
          foo: 'bar',
        },
        'props match expected'
      );
      return <button>InnerComponent</button>;
    }
  }

  const Widget = core(InnerComponent, {color: 'red'}, strictAssignProps);
  const styletron = new Styletron();

  class TestComponent extends React.Component {
    componentDidMount() {
      t.ok(
        ReactTestUtils.isCompositeComponentWithType(
          this.widgetInner,
          InnerComponent
        ),
        'is InnerComponent'
      );
    }

    render() {
      return React.createElement(Widget, {
        foo: 'bar',
        innerRef: c =&gt; {

it('leaves values in place when value is not an object', () => {
    const styletron = new Styletron();
    const stub = sinon.stub(styletronUtils, 'injectStyle').returns('a');

    const styleMap = {
      col: { someCSSProperty: '12px' },
      row: 'row',
    };

    const styles = stylesHandlers.object(styleMap, styletron);

    expect(stub).to.have.been.calledWith(styletron, styleMap.col);
    expect(stub).not.to.have.been.calledWith(styletron, styleMap.row);

    expect(styles).to.deep.eq({
      col: 'a',
      row: 'row',
    });

it('resolves function with passed props, and passes to handler', () => {
    const styletron = new Styletron();
    const stub = sinon.stub(styletronUtils, 'injectStyle').returns('classname');

    const spy = sinon.spy(stylesHandlers, 'object');

    const resolveStyles = props => ({
      col: { someCSSProperty: `${props.width}` },
    });

    const props = { width: 100 };

    const styles = stylesHandlers.function(resolveStyles, styletron, props);

    expect(spy).to.have.been.calledWith(resolveStyles(props), styletron);
    expect(stub).to.have.been.calledWith(styletron, resolveStyles(props).col);

    expect(styles).to.deep.eq({

it('returns a higher order component which resolves styles', () => {
    const styletron = new Styletron();
    const styleMap = { test: true };
    const atomicStyles = { test: 'some classnames' };
    const stub = sinon.stub(internals, 'getStylesProp').returns(atomicStyles);

    const HOC = connect(Mock, styleMap);
    const wrapper = shallow(, { context: { styletron } });

    expect(stub).to.have.been.calledWith(styleMap, styletron, {});
    expect(wrapper.find(Mock).props()).to.contain({ styles: atomicStyles });
    stub.restore();
  });

function html(ctx, renderProps, reducer, clientScript): string {
  initServerI18n(ctx);
  initServerConsent(ctx);
  const state = ctx.getState();
  const jsonGlobals = JsonGlobals({state});
  initAssetURL(state.base.siteURL, state.base.routePrefix, state.base.manifest);
  const store = configureStore(state, reducer);
  const styletron = new StyletronServer({prefix: '_'});

  const reactMarkup = renderToString(
    
  );
  return rootHtml({styletron, jsonGlobals, reactMarkup, clientScript, nonce: ctx.state.nonce});
}

import { INSTANCE_KEY } from './constants';
import StyletronServer from 'styletron-server';

const topLevel = typeof global !== 'undefined' ? global : {};

let instance = topLevel[INSTANCE_KEY];

if (!instance) {
  const styletron = new StyletronServer();
  instance = topLevel[INSTANCE_KEY] = styletron;
}

export default instance;