https://github.com/jayrbolton/snabbdom-ministyle
Simple CSS-in-JS for snabbdom
https://github.com/jayrbolton/snabbdom-ministyle
Last synced: 2 months ago
JSON representation
Simple CSS-in-JS for snabbdom
- Host: GitHub
- URL: https://github.com/jayrbolton/snabbdom-ministyle
- Owner: jayrbolton
- Created: 2019-02-24T14:31:48.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-24T15:11:54.000Z (about 6 years ago)
- Last Synced: 2025-02-05T09:06:56.549Z (3 months ago)
- Language: JavaScript
- Size: 55.7 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# snabbdom-ministyle
This is a small snabbdom module for writing stylesheets inside snabbdom components. Style rules can apply to the root component, as well as any child components.
## Installation
Install with `npm i snabbdom-ministyle`
## Usage
```js
const patch = require('snabbdom').init([
// Include the module as a snabbdom plugin
require('snabbdom-ministyle'),
require('snabbdom/modules/props').default,
require('snabbdom/modules/style').default,
require('snabbdom/modules/class').default,
require('snabbdom/modules/eventlisteners').default,
require('snabbdom/modules/dataset').default,
require('snabbdom/modules/attributes').default
])
const h = require('snabbdom/h').default
// Use with the `css` property
// The `root` key applies style rules to the `div`
// Any other keys can apply to children or pseudo-selectors
h('div', {
// picostyle CSS rules below
css: {
root: [ 'color: pink' ],
' span': [ 'color: blue' ],
' > div > span': [ 'color: purple' ]
}
}, [
h('span', 'i will be blue'),
h('div', [
h('span', 'i will be purple')
])
])
```
Also see the [/examples](/examples) folder for more examples.
## API
### h(selector, { css: rules }, children)
The `rules` inside the `css` option passed to the `h()` function can have the following keys:
* The `root` node: rules applied to the root snabbdom node defined by the `h()` function
* Any other keys can be used as rules concatenated to the base node, such as child nodes or psuedo-selectors
Style rules are written as arrays of strings, where each string is the rule (key + value), such as `font-weight: 800`.
_Styling the root node:_
```js
h('div', {
css: {
root: ['color: blue']
}
}, 'root')
```
_Styling child nodes_
```js
h('fieldset', {
css: {
' label': [
'display: inline-block',
'margin-right: 1rem'
],
' input': [
'display: inline-block'
]
}
}, [
label,
input
])
```
## Development
### Tests
`npm test` runs with tape and tape-run, emulating the browser with electron.
### Running examples
Run with budo: `./node_modules/.bin/budo examples`