x-css

Enables programmatic and expressive declaration of stylesheets.

How to use

import Sheet from 'x-css';

let css = new Sheet();
let width = 120;
let fade = css.anim({
  from: { opacity: 0 },
  to: { opacity: 1 }
})

css.add('div > p', {
  'width': width, // casted to '10px'
  'font-weight': 'bold',
  'animation': `${fade} 1s ease-in`
});

API

The main module exports the following:

• Sheet (default)
• Block
• Scope
• Media
• Animation
• Ruleset

Sheet()

Initializes a new Sheet, which is the main scope under which other scopes and ruleset blocks are inserted.

Extends Scope.

Sheet.anim(String name, Object frames[, Boolean withPrefixes])

Creates a new Animation scope with the given frames, and appends it to the current scope.

By default, when the Animation object is serialized, it'll include -o, -webkit and -moz prefixes. Passing false to withPrefixes will disable this.

Returns the Animation object.

Sheet.media(String params)

Creates a new Media scope with the given frames, and appends it to the current scope.

Returns the Media object.

Media(String params)

Accepts params which is a string like only screen and (orientation: portrait).

Extends Scope.

Scope()

Initializes a new Scope object.

Extends Block.

Scope.add(Block blk)

Appends the Block identified by blk to the scope. Valid Block objects are for example Ruleset or another Scope.

Scope.add(String sel, Object decs)

Creates and appends a Ruleset for the selector sel and declarations decs.

scope.add('img', {
  border: 'none'
});

Scope.remove(Block block)

Removes the child of the main scope identified by the given block.

Ruleset(String sel, Object decs)

Creates a ruleset identified by selector sel and declaration pairs decs.

Extends Block.

Animation(String name[, Boolean withPrefixes])

Creates an Animation with the given name.

By default, when the object is serialized, it'll include -o, -webkit and -moz prefixes. Passing false to withPrefixes will disable this.

Block

Abstract interface to represent any node within the style hierarchy.

Ruleset and Scope inherit from Block.

Block.serialize()

Abstract method. All blocks must be serializable as a String.

This method is implemented on Ruleset, Scope, Media and Animation.

License

MIT