cssobj
Version:
Runtime CSS manager, Turn CSS into dynamic JS module, Stylesheet CRUD (Create, Read, Update, Delete) in CSSOM, Solve common problems of CSS-in-JS, name space (local) class names
141 lines (96 loc) • 2.85 kB
Markdown
# Dynamically update css, CRUD of stylesheet
Below example, `cssobj` will create `<style>` tag in HEAD, render CSS rules inside
```javascript
var obj = {
div: {
$id: 'div',
fontSize: '14px',
lineHeight: 1.5,
color: 'red'
}
}
var result = cssobj(obj)
```
For CRUD (Create, Read, Update, Delete), **dynamically change css**, see below:
## 1. Update property values
You want to change color to `'blue'`, code as below:
```javascript
// using static value:
obj.div.color = 'blue' // same as obj.div.color = ['blue']
result.update() // color is now 'blue'
// using function as value:
obj.div.color = function(v){
return randomColor()
}
result.update() // color is now random
```
## 2. Delete/Remove properties
You want to remove `'fontSize'` and `'lineHeight'`, code as below:
It's just work as you expected:
```javascript
delete obj.div.fontSize
delete obj.div.lineHeight
result.update()
```
## 3. Create/Add new properties
You want to add `'float'` and `'clear'`.
It's just work as you expected:
```javascript
obj.div.float = 'left'
obj.div.clear = 'both'
result.update()
```
## 4. Create/Add new rules
You want to add `':after'` rule, and `div span` rule
```javascript
obj.div['&:after'] = { fontSize:'10px', content:'"---"' }
obj.div.span = { fontSize: '18px' }
result.update()
```
## 5. Update/Replace rules
You want to replace the whole rule
```javascript
obj.div.span = { color: 'green', fontSize: '20px' }
result.update()
```
## 6. Delete/Remove rules
You want to remove `div span` rule
```javascript
delete obj.div.span
result.update()
```
## 7. Read a rule
Although `cssobj` can manage everything, you read the rule in stylesheet manually
```javascript
const rule = result.ref.div.omRule
// => [CSSStyleRule]
rule.color = 'red'
```
## 8. Delete/Destroy cssobj
Currently, `cssobj` don't provide `result.destroy()` or similar method, you should manually destroy things:
```javascript
// remove <style> tag
result.cssdom.parentNode.removeChild(el)
// GC result
result = null
```
# All the above can use `function` instead:
```javascript
obj.div.span = function() {
return { color: randomColor(), fontSize: currentSize + 'px' }
}
result.update()
```
**the parameter for value function**
If you set function for prop's value:
```javascript
obj.div.span.fontSize = function(v) {
console.log(v.raw, v.cooked, v.node, v.result)
return 1 + v.raw
}
```
`v` have below properties:
- `v.raw` : Source JS value for this property, that is: **before** any plugin, and validation check
- `v.cooked` : Last valid css value for this property, that is: returns like `null` will ignored by **cssobj**
- `v.node` : The current **virtual css** node generated from `cssobj-core`, commonly, you can check `node.prop` object for current rule's value
- `v.result` : The **cssobj** result object