https://github.com/cssobj/cssobj-helper-stylize
Apply css text into browser's style tag, can work with plugin-gencss.
https://github.com/cssobj/cssobj-helper-stylize
Last synced: about 1 month ago
JSON representation
Apply css text into browser's style tag, can work with plugin-gencss.
- Host: GitHub
- URL: https://github.com/cssobj/cssobj-helper-stylize
- Owner: cssobj
- Created: 2016-07-14T21:38:14.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-12-14T10:17:21.000Z (over 9 years ago)
- Last Synced: 2025-03-03T11:19:43.572Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 26.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# cssobj-helper-stylize
[](https://gitter.im/css-in-js/cssobj)
Apply css text into browser's style tag, can work with [cssobj-plugin-gencss](https://github.com/cssobj/cssobj-plugin-gencss).
## Usage
``` javascript
var cssobj_core = require('cssobj-core')
var gencss = require('cssobj-plugin-gencss')
var stylize = require('cssobj-helper-stylize')
var cssobj = cssobj_core({
plugins: [gencss()],
onUpdate: stylize({id: 'mycss'})
})
cssobj(obj)
// generated css text will be insert into
```
## Install
``` javascript
npm install cssobj/cssobj-helper-stylize
```
## API
### `stylize(option?: object) -> (result){}`
Return a function accept `result` and insert `result.css` into `` tag.
### `option`
- `id` : {string} The id for `<style>` tag, if omit, will using random string.
- `attrs` : {object} The key/val to apply to `<style>` tag as attributes.
### *RETURN*
A function can be used in cssobj `onUpdate` option.
## Example
``` javascript
// in cssobj({ onUpdate:.... })
onUpdate: stylize({name:'index-page-style'})
onUpdate: stylize({name:'index-page-style', attrs:{type:'text/css', media:'screen'} })
```
## Difference between helper-cssom
This helper take simplicy first, just update all css text into `<style>` tag, may have performance issues.
[plugin-cssom](https://github.com/cssobj/cssobj-plugin-cssom) take effiency first, it create every css rule and patch rules with `result.diff`
If you want apply cssobj once, and don't update result frequently, use `plugin-gencss` + `helper-stylize`
If you want update result frequently, use `plugin-cssom`, it optimized for this type of usage.