create-typeStyle

creates a boxed, independent instance of typestyle, with some additional goodies. This is useful if you need to create typestyles on the fly, or in different context simultaneously.

createTypeStyle also embeds csx, so there's no need to add it to your dependencies; it also duplicates some of the basic functionality offered by cssTips

It makes creating styles and working with both React and Typestyle a little bit nicer, at the price of some boilerplate written once per project

Quick Example

import { createTypeStyle } from '../createtypestyle' 
import * as React from 'react'
import { render } from 'react-dom'
 
const {  
  cssRule, 
  cssRaw,
  style,
  prepare,
  googleFont, 
  setupMount
} = createTypeStyle(React.createElement) // you can pass also Preact, Inferno, etc 
 
// creates a function that will serve to 
// mount the react element and the style later
const mount = setupMount(render)
 
// normalizes and sets best practices for
// the main style, with optional additional css
prepare('root', { fontSize:px(10) })
 
// adds a google font
googleFont('Montserrat:600|Lora:400')
 
const appClassName = style({ textAlign: "center" })
 
export const App = () =>
  <div className={appClassName}>
    <h2>Start editing to see some magic happen {"\u2728"}</h2>
  </div>
 
// mounts the app in the element with id 'root'
// and the style in the element with id 'style'
mount(App, 'root', 'style')
 

You'll find a demo in the src/demo directory

Check a live demo on codesandbox

Usage

npm install --save create-typestyle

then create a boxed typestyle:

import { createTypeStyle } from 'create-typestyle'
const {  
  cssRule,
  cssRaw,
  style,
  keyframes,
  getStyles,
  setStylesTarget,
  setupPage,
  normalize,
  prepare,
  mergeStyles,
  googleFont,
  mount, // only if you pass React.createElement
  makeComponent // only if you pass React.createElement
} = createTypeStyle()

Then use those functions exactly as you would when using regular typestyle.

create-typestyle exports everything typestyle and csx export.

Here's the complete list:

import {
  // typestyle exports
  // if you're using create-typestyle, you probably
  // don't want to use those, but they are here
  createTypeStyle,
  media,
  // csx exports
  color,
  hsl,
  hsla,
  rgb,
  rgba,
  spin,
  em,
  percent,
  px,
  rad,
  rem,
  viewHeight,
  viewWidth,
  turn,
  important,
  quote,
  url,
  red, green, blue, white//, ...other colors
} from 'create-typestyle'

API

For regular typestyle functions, check out the official doc.

All of them are included as methods of the object returned by createTypeStyle().

The complete list of methods:

const {
  // regular typestyle methods: 
  cssRule,
  cssRaw,
  style,
  keyframes,
  getStyles,
  setStylesTarget,
  // additional (taken from cssTips):
  setupPage,
  normalize,
  // create-typestyle exclusive:
  prepare,
  mergeStyles,
  googleFont,
  // for usage with React/Preact/Inferno and other React-compatible libraries
  mount,
  makeComponent
} = createTypeStyle()

create-typestyle specific methods include:

setupPage

(selector: string, style?: {}) => true

Recommended Page setup, taken straight from cssTips

• Sets up the body to be full size
• Sets up box sizing to be border box

rootSelector The main wrapper for the whole page additionalStyle any additional global style you want to apply (e.g, fonts)

const { setupPage } = createStyle();
setupPage('root',{fontSize:'10px'})

normalize

(prefix?:string) => true

Adds the rules from the normalize stylesheet Optionally, you may include a prefix to namespace all the adjustments

const { normalize } = createStyle();
normalize('root')

prepare

(selector: string, style?: {}) => true

Just a shortcut to run both setupPage and normalize

googleFont

(font:string) => true

adds an @import rule for a specified google font

const { googleFont } = createStyle();
googleFont('Montserrat:600|Lora:400');

mount

(render:Function) => (ReactElement,root_id,style_id) => true

Mounts a react app and their styles

import React from 'react';
import ReactDOM from  'react-dom';
// provided the App is to be in an element <div id='root'/>
// and the styles in a style element <style id='styles'/>
// You must pass a `React.createElement`-compatible function to `createStyle`
const { mount } = createStyle(React.createElement);
mount(ReactDOM.render)(App,'root','styles');

makeComponent

(tagName:string) => (style:object) => Component

Very simple styled component kinda thing.

import React from 'react'
// must pass a React.createElement-compatible function
const {makeComponent} = createTypeStyle(React.createElement)
const Div = makeComponent('div')
const El = Div({color:'red'})
// use it:
<El>some text</El>

note: calling makeComponent("div") a second time will return the same instance, so there's no need for an intermediary variable

License

MIT