How to use styletron-utils - 10 common examples

To help you get started, we’ve selected a few styletron-utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github styletron / styletron / packages / styletron-react / src / styled.js View on Github external
function assignProps(styletron, styleResult, ownProps) {
  const styletronClassName = injectStylePrefixed(styletron, styleResult);
  // Skipping cloning of `ownProps` since that's already done internally
  if (ownProps.styleProps) {
    delete ownProps.styleProps;
  }
  ownProps.className = ownProps.className
    ? `${ownProps.className} ${styletronClassName}`
    : styletronClassName;
  return ownProps;
}
github jxnblk / axs / src / cx.js View on Github external
export const cx = (styles) => {
  const sx = formatStyles(styles)

  return injectStyle(styletron, sx)

  // return renderer.renderRule(() => sx)
}
github styletron / styletron / packages / styletron-react / src / __tests__ / browser.js View on Github external
function strictAssignProps(styletron, styleResult, ownProps) {
  return Object.assign({}, ownProps, {
    className: injectStylePrefixed(styletron, styleResult),
  });
}
github necolas / react-native-web / packages / benchmarks / src / implementations / styletron / Box.js View on Github external
row: injectStylePrefixed(styletron, {
    flexDirection: 'row'
  }),
  color0: injectStylePrefixed(styletron, {
    backgroundColor: '#222'
  }),
  color1: injectStylePrefixed(styletron, {
    backgroundColor: '#666'
  }),
  color2: injectStylePrefixed(styletron, {
    backgroundColor: '#999'
  }),
  color3: injectStylePrefixed(styletron, {
    backgroundColor: 'blue'
  }),
  color4: injectStylePrefixed(styletron, {
    backgroundColor: 'orange'
  }),
  color5: injectStylePrefixed(styletron, {
    backgroundColor: 'red'
  }),
  fixed: injectStylePrefixed(styletron, {
    width: '20px',
    height: '20px'
  })
};

export default Box;
github styletron / styletron / packages / benchmarks / server.js View on Github external
.add('styletron (vendor prefix)', function() {
    let styletron = new StyletronServer();
    StyletronUtils.injectStylePrefixed(styletron, {
      width: 'calc(100%)',
      height: ['min-content', 'calc(50%)'],
      boxSizing: 'border-box',
    });
    styletron.getCss();
  })
  .add('glamor (vendor prefix)', function() {
github necolas / react-native-web / packages / benchmarks / src / implementations / styletron / Box.js View on Github external
);

const styles = {
  outer: injectStylePrefixed(styletron, {
    padding: '4px'
  }),
  row: injectStylePrefixed(styletron, {
    flexDirection: 'row'
  }),
  color0: injectStylePrefixed(styletron, {
    backgroundColor: '#222'
  }),
  color1: injectStylePrefixed(styletron, {
    backgroundColor: '#666'
  }),
  color2: injectStylePrefixed(styletron, {
    backgroundColor: '#999'
  }),
  color3: injectStylePrefixed(styletron, {
    backgroundColor: 'blue'
  }),
  color4: injectStylePrefixed(styletron, {
    backgroundColor: 'orange'
  }),
  color5: injectStylePrefixed(styletron, {
    backgroundColor: 'red'
  }),
  fixed: injectStylePrefixed(styletron, {
    width: '20px',
    height: '20px'
  })
};
github necolas / react-native-web / packages / benchmarks / src / implementations / styletron / Box.js View on Github external
outer && styles.outer
    ]}
  />
);

const styles = {
  outer: injectStylePrefixed(styletron, {
    padding: '4px'
  }),
  row: injectStylePrefixed(styletron, {
    flexDirection: 'row'
  }),
  color0: injectStylePrefixed(styletron, {
    backgroundColor: '#222'
  }),
  color1: injectStylePrefixed(styletron, {
    backgroundColor: '#666'
  }),
  color2: injectStylePrefixed(styletron, {
    backgroundColor: '#999'
  }),
  color3: injectStylePrefixed(styletron, {
    backgroundColor: 'blue'
  }),
  color4: injectStylePrefixed(styletron, {
    backgroundColor: 'orange'
  }),
  color5: injectStylePrefixed(styletron, {
    backgroundColor: 'red'
  }),
  fixed: injectStylePrefixed(styletron, {
    width: '20px',
github necolas / react-native-web / packages / benchmarks / src / implementations / styletron / Box.js View on Github external
outer: injectStylePrefixed(styletron, {
    padding: '4px'
  }),
  row: injectStylePrefixed(styletron, {
    flexDirection: 'row'
  }),
  color0: injectStylePrefixed(styletron, {
    backgroundColor: '#222'
  }),
  color1: injectStylePrefixed(styletron, {
    backgroundColor: '#666'
  }),
  color2: injectStylePrefixed(styletron, {
    backgroundColor: '#999'
  }),
  color3: injectStylePrefixed(styletron, {
    backgroundColor: 'blue'
  }),
  color4: injectStylePrefixed(styletron, {
    backgroundColor: 'orange'
  }),
  color5: injectStylePrefixed(styletron, {
    backgroundColor: 'red'
  }),
  fixed: injectStylePrefixed(styletron, {
    width: '20px',
    height: '20px'
  })
};

export default Box;
github styletron / styletron / packages / styletron-inferno / src / styled.js View on Github external
function StyledComponent(props, context) {
    const newProps = assign({}, props);
    const styles = resolveStyles(stylesArray, props, context);
    const className = injectStylePrefixed(context.styletron, styles);

    newProps.className = props.className
      ? `${props.className} ${className}`
      : className;

    if (isFunction(props.innerRef)) {
      newProps.ref = props.innerRef;
      delete newProps.innerRef;
    }
    return createElement(name, newProps);
  }

styletron-utils

Generic helper utilities for Styletron

MIT
Latest version published 7 years ago

Package Health Score

53 / 100
Full package analysis

Similar packages