to-css

1.2.1 • Public • Published

to-css

Build status NPM version js-xo-style

Generate CSS from a JavaScript Object

This module does not convert property names to their dasherized counterparts, this is just a plain object to CSS stringification, though see property and value options below.

Installation

Install to-css using npm:

npm install --save to-css

Usage

Module usage

var toCss = require('to-css');
 
toCss({body: {'font-size': '10px'}}, {indent: '  '});
/**
 * body {
 *   font-size: 10px;
 * }
 */

Array values - When you want to set a property multiple times

Sometimes you want to have a CSS declaration with the same property specified multiple times with different values, for fallback values. You can use arrays for that, e.g:

var toCss = require('to-css');
 
toCss({body: {color: ['rgba(0,0,0,.5)', 'black']}}, {indent: '  '});
/**
 * body {
 *   color: rgba(0,0,0,.5);
 *   color: black;
 * }
 */

Array declarations - E.g. for @font-face

Defining multiple @font-face's can be done using arrays like this:

var toCss = require('to-css');
 
toCss({
    '@font-face': [
        {'font-family': '"MyWebFont"', src: 'url("myfont.woff2") format("woff2"), url("myfont.woff") format("woff")'},
        {'font-family': 'MyOtherFont', src: 'url("otherfont.woff2") format("woff2"), url("otherfont.woff") format("woff")'}
    ]
});
/**
 * @font-face {
 *   font-family: "MyWebFont";
 *   src: url("myfont.woff2") format("woff2"), url("myfont.woff") format("woff");
 * }
 * @font-face {
 *   font-family: "MyOtherFont";
 *   src: url("otherfont.woff2") format("woff2"), url("otherfont.woff") format("woff");
 * }
 */

Or like this:

var toCss = require('to-css');
 
toCss([
    {
        '@font-face': {
            'font-family': '"MyWebFont"',
            src: 'url("myfont.woff2") format("woff2"), url("myfont.woff") format("woff")'
        }
    },
    {
        '@font-face': {
            'font-family': 'MyOtherFont',
            src: 'url("otherfont.woff2") format("woff2"), url("otherfont.woff") format("woff")'
        }
    }
]);
/**
 * @font-face {
 *   font-family: "MyWebFont";
 *   src: url("myfont.woff2") format("woff2"), url("myfont.woff") format("woff");
 * }
 * @font-face {
 *   font-family: "MyOtherFont";
 *   src: url("otherfont.woff2") format("woff2"), url("otherfont.woff") format("woff");
 * }
 */

API

toCss(object [, options])

Name Type Description
object Object|Array Object or array to generate a CSS string from
options Object Options

Returns: String, the generated CSS string.

options.indent

Type: String|Number
Default: ""

Works like JSON.stringify's space parameter. I.e. if it's a number it indicates the number of spaces to use as white space, and if it's a string the string itself is used as white space. When empty (or NULL) no white space is used.

options.value

Type: Function
Default: NOOP

A transform function for property values, gets called for each CSS rule with value and property as params: options.value(value, property). Can return a String or an array of strings!

options.property

Type: Function
Default: NOOP

A transform function for property names, gets called for each CSS rule with property and value as params: options.property(property, value). Can return a String or an array of strings!

options.selector

Type: Function
Default: NOOP

A transform function for selectors, gets called for each CSS declaration with selector and declaration object as params: options.selector(selector, declaration). Can return a String or an array of strings!

License

MIT © Joakim Carlstein

Package Sidebar

Install

npm i to-css

Weekly Downloads

1,225

Version

1.2.1

License

MIT

Last publish

Collaborators

  • joakimbeng