@rexlabs-spicerhaart/styling v1.5.15

Styling

The @rexlabs/styling package util encompasses a number of concerns around styling, theming, and css.

API

styled & StylesProvider

Direct exports from @rexlabs/element-styles.

StyleSheet

Uses createCssClass to simplify the generation of multiple classes. Used often with styled.

import { StyleSheet } from '@rexlabs/styling'
const styles = StyleSheet({
  container: { display: 'flex' },
  title: { fontSize: 16, color: 'black' }
})

console.log(styles.container) // css-89s89dy (a css classname)

Manually ordering StyleSheet injections

Use the StyleSheet.pause() and the StyleSheet.flush()/StyleSheet.flushReversed() functions to control the ordering of injected CSS for an App.

Case: You may want to reverse the injection order at the startup of an App, to make sure component package's define their styles BEFORE everything else, which is difficult because of the implicit import ordering in an App.

const React = require('react')
const ReactDOM = require('react-dom')
const { StyleSheet } = require('@rexlabs/styling')

StyleSheet.pause();
const App = require('view/app')
StyleSheet.flushReversed()

ReactDOM.render(<App />)

createCssClass

Uses glamor to inject styles into the head of a document, returning a unique classname.

import { createCssClass } from '@rexlabs/styling'
const container = createCssClass({ display: 'flex' })

console.log(container) // css-89s89dy (a css classname)

keyframes

Uses glamor to inject @keyframes into the head of the document, return a unique name for the keyframe animation.

import { keyframes } from '@rexlabs/styling'
const fadein = keyframes({
  '0%': { opacity: 0 },
  '100%': { opacity: 1 }
})

console.log(fadein) // animation-89s89dy (a css classname)

insertCss

Uses glamor to inject a string of real CSS into the head of a document.

import { injectCss } from '@rexlabs/styling'
injectCss(`
body {
  height: 100vh;
  width: 100vw;
}
.foo {
  color: yellow;
}
`);

reset

Injects the myer's css reset into the head of the document.

Should be used at the bootstrap of an app. At times it is better to not use this and instead use a real css file.

import { reset } from '@rexlabs/styling'
reset();

Development

Install dependencies

$ yarn

Available Commands

$ yarn test               # runs all units tests
$ yarn test:watch         # runs unit tests when files change
$ yarn build              # bundles the package for production

Legal

Copyright © 2018 Rex Software All Rights Reserved.