fluent-style-sheets

fluent-style-sheets is a library that lets you define your CSS using JavaScript. It supports two usage styles: it has a fluent API that resembles CSS as much as possible or you can use it more like an EDSL.

Installation

npm i fluent-style-sheets --save-dev

Features

• Define CSS rules (.rule or .r)
  • with support for nested rules (.rule or .r, .spec or .s)
• Define CSS imports (.import or .i)

Usage styles

Fluent style

const {makeStyleSheet} = require('fluent-style-sheets');
 
const bodyBackgroundColor = '#ff00ff';
 
const styleSheet = makeStyleSheet()
    // imports
    .i('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css')
    // rules
    .r('body', {
        'background-color': bodyBackgroundColor,
        margin: 0,
    })
    // nested rules
    .r('main', (_) => _
        .r('> p', {
            'font-size': '14px',
        })
        .s(':hover', {
            color: 'red',
        })
    );
 
console.log(styleSheet.renderCSS());

EDSL style

const {makeStyleSheet} = require('fluent-style-sheets');
 
const bodyBackgroundColor = '#ff00ff';
 
const styleSheet = makeStyleSheet();
const {i, r} = styleSheet;
 
// imports
i('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
 
// rules
r('body', {
    'background-color': bodyBackgroundColor,
    margin: 0,
});
 
// nested rules
r('main', ({r, s}) => {
    r('> p', {
        'font-size': '14px',
    });
    s(':hover', {
        color: 'red',
    });
});
 
console.log(styleSheet.renderCSS());

Quick reference

makeStyleSheet

Create a new style sheet instance.

Type: function(): StyleSheet

const myStyleSheet = makeStyleSheet();

StyleSheet.i

Alias for StyleSheet.import.

StyleSheet.import

Create a new CSS @import.

Type: function(url: string, mediaQueries: ...string): StyleSheet

const myStyleSheet = makeStyleSheet();
myStyleSheet
    .import('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css')
    // using media queries:
    .import('https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css',
            'screen', 'tv and (orientation:landscape)');

StyleSheet.r

Alias for StyleSheet.rule.

StyleSheet.renderCSS

Render the style sheet to string with CSS syntax.

Type: function(signature: ?string=): string

const myStyleSheet = makeStyleSheet();
// ... build your style sheet using myStyleSheet ...
const cssWithDefaultSignature = myStyleSheet.renderCSS();  // or .renderCSS(undefined)
const cssWithNoSignature = myStyleSheet.renderCSS(null);
const cssWithCustomSignature = myStyleSheet.renderCSS(`Please don't steal my styles!`);
 

StyleSheet.rule

Create a new CSS rule.

Type: function(selectors: ...string, declarationsOrAssembler: (object | object[] | function(subcontext: Subcontext))): StyleSheet

const myStyleSheet = makeStyleSheet();
myStyleSheet
    // you can use multiple selectors
    .rule('.my-class', 'p > .my-sub-class', {
        color: '#ff00ff',
        // ...
    })
    // if no selector is specified, the rule will be global
    .rule({
        'background-color': 'red',
        // ...
    })
    .rule('.combined-class', [{
        'font-size': '12px',
        'font-weight': 'bold',
    }, {
        'font-size': '14px',  // overrides previous value
    }]);

Subcontext.r

Alias for Subcontext.rule.

Subcontext.rule

Create a new CSS rule embedded in the subcontext.

Type: function(selectors: ...string, declarationsOrAssembler: (object | object[] | function(subcontext: Subcontext))): Subcontext

const myStyleSheet = makeStyleSheet();
myStyleSheet
    .r('.my-class', (_) => _
        .rule('.my-class-2', {
            color: '#ff00ff',
            // ...
        })
        .rule('+ .siblings-to-my-class', '> .children-of-my-class', {
            margin: '1px',
            // ...
        })
        .rule('.my-class-3', (_) => _
            .rule('.my-class-4', {
                display: 'none',
            })
        )
    );
 
/* CSS:
.my-class .my-class-2 {
    color: #ff00ff;
}
 
.my-class + .siblings-to-my-class,
.my-class > .children-of-my-class {
    margin: 1px;
}
 
.my-class .my-class-3 .my-class-4 {
    display: none;
}
*/

Subcontext.s

Alias for Subcontext.spec.

Subcontext.spec

Create a rule specialization embedded in the subcontext.

Type: function(selectors: ...string, declarationsOrAssembler: (object | object[] | function(subcontext: Subcontext))): Subcontext

const myStyleSheet = makeStyleSheet();
myStyleSheet
    .r('.my-class', (_) => _
        .spec(':hover', '[data-foo="bar"]', {
            color: '#ff00ff',
            // ...
        })
        .spec('.my-other-class', (_) => _
            .r('section', {
                padding: '0px',
            })
        )
    );
 
/* CSS:
.my-class:hover,
.my-class[data-foo="bar"] {
    color: #ff00ff;
}
 
.my-class.my-other-class section {
    padding: 0px;
}
*/