string-css

Create CSS-in-JS via tagged template strings.

Install

$ npm i string-css --save

API

The export is a singleton containing 3 methods:

• css
• inject
• string

Bearing in mind the use of the singleton pattern, calls to inject or string should appear after all styles are created.

.css(string)

The function that parses CSS-in-JS template strings.

import { css } from 'string-css'
 
// constants should be external
const BLACK = 'black'
const BLOCK = 'block'
 
// create rule with strings & values
// returns class names to apply to element
const rule = css`
  display: ${ BLOCK };
  width: 100px;
  height: 100px;
 
  background-color: ${ BLACK };
`
 
// apply class names to DOM element
document.getElementById('example').className = rule

.inject()

Injects created styles into the DOM, using insertRule.

import { inject } from 'string-css'
 
// synchronously creates a style tag in the head, then inserts the rules
inject()

.string()

Returns a string representation of all the created CSS.

import { string } from 'string-css'
 
// synchronously creates a string of CSS
const style = string()

See Also

• hsx - Static HTML sites with JSX and webpack (no React).
• string-dom - Create HTML strings using JSX (or functions).

License

MIT. © 2017 Michael Cavalea