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: 2 months 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 11 years ago)
- Default Branch: master
- Last Pushed: 2017-10-21T15:26:45.000Z (over 8 years ago)
- Last Synced: 2025-03-02T03:04:55.214Z (over 1 year 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.
[](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)