https://github.com/goto-bus-stop/sistyl

Simple JSON-to-CSS style sheet library.
https://github.com/goto-bus-stop/sistyl

css json

Last synced: 28 days ago
JSON representation

Simple JSON-to-CSS style sheet library.

• Host: GitHub
• URL: https://github.com/goto-bus-stop/sistyl
• Owner: goto-bus-stop
• License: mit
• Created: 2015-03-20T15:05:33.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-10-21T15:26:45.000Z (about 7 years ago)
• Last Synced: 2024-10-05T16:26:06.312Z (about 1 month ago)
• Topics: css, json
• Language: JavaScript
• Size: 29.3 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sistyl

Simple JSON-to-CSS style sheet library.

[![NPM](https://nodei.co/npm/sistyl.png?compact=true)](https://nodei.co/npm/sistyl)

## Usage

```javascript

const sistyl = require('sistyl')

let st = sistyl({

  '.selector': {

    'color': '#111',

    'background': '#333',

    '.larger': { 'font-size': '125%' }

  },

  '.hidden': { 'display': 'none !important' }

})

// #111 on a #333 background is kind of hard to read…

st.set('.selector', { 'color': '#eee' })

st.toString()

/* →

 * .selector {

 *   color: #eee;

 *   background: #333;

 * }

 *

 * .selector .larger {

 *   font-size: 125%;

 * }

 *

 * .hidden {

 *   display: none !important;

 * }

 */

```

## API

### let st = sistyl(rulesets={})

Creates a sistyl object with an optional default bunch of rulesets.

### st.set(selector, properties)

Sets some CSS properties for a selector. `properties` can contain

nested rulesets as objects or sistyl instances. Properties are merged

if the selector already exists.

```javascript

st.set('.selector', {

  'background': 'pink',

  '.nested': { 'background': 'orange' }

})

```

### st.set(rulesets)

Adds rulesets. Takes an object where keys are selectors and values

are css properties, or a sistyl instance, just like in

`st.set(selector, properties)`.

### st.unset(selector)

Removes a ruleset. Takes a CSS selector, and removes the associated

ruleset. Note that it removes *just* the given selector, and not

other rulesets that also match the selector. Specifically,

`.unset('.rem')` does *not* remove a `.keep, .rem` selector.

### st.unset(selector, property)

Removes a property from a ruleset. The same notes apply as above:

only properties on the *exact* selector string will be removed.

### st.toString()

Returns the CSS string for this sistyl object. Rulesets are separated

by a newline, and are indented by two spaces.

```css

.selector {

  background: pink;

}

.selector .nested {

  background: orange;

}

```

## License

[MIT](./LICENSE)