Add markdown file documenting css.js features
This commit is contained in:
parent
f5f3794006
commit
f209112f58
1 changed files with 90 additions and 0 deletions
90
css.md
Normal file
90
css.md
Normal file
|
@ -0,0 +1,90 @@
|
|||
# CSS
|
||||
|
||||
A simple module for generating CSS from JS and a helper for custom properties
|
||||
aka. CSS variables.
|
||||
|
||||
## Interfaces
|
||||
|
||||
```js
|
||||
import {css} from 'css.js'
|
||||
|
||||
// CamelCase will be turned into kebab-case
|
||||
css({div: {backgroundColor: "red"}})
|
||||
// will produce:
|
||||
// div {background-color: red}
|
||||
|
||||
css({div: {
|
||||
transition: ["border 1s", ["color", "2s"]]
|
||||
}})
|
||||
// will produce:
|
||||
// div {transition: border 1s, color 12}
|
||||
|
||||
// Nesting will be resolved
|
||||
css({
|
||||
".foo": {
|
||||
color: "purple",
|
||||
".bar": {
|
||||
color: "red",
|
||||
},
|
||||
".baz": {
|
||||
color: "blue",
|
||||
},
|
||||
},
|
||||
})
|
||||
// will produce:
|
||||
// .foo {color: purple}
|
||||
// .foo .bar {color: red}
|
||||
// .foo .baz {color: blue}
|
||||
|
||||
// Nested lists will be resolved too
|
||||
css({
|
||||
".foo": {
|
||||
color: "purple",
|
||||
".bar, .baz": {
|
||||
color: "red",
|
||||
},
|
||||
},
|
||||
})
|
||||
// will produce:
|
||||
// .foo {color: purple}
|
||||
// .foo .bar, .foo .baz {color: red}
|
||||
|
||||
// A leading _ will remove the space when nesting
|
||||
css({
|
||||
".foo": {
|
||||
color: "black",
|
||||
"_bar": { color: "red" }
|
||||
}
|
||||
})
|
||||
// will produce:
|
||||
// .foo {color: black}
|
||||
// .foobar {color: red}
|
||||
|
||||
// $ will be replaced with . for convenience
|
||||
// This can be combined with _ for to avoid quoting keys
|
||||
css({
|
||||
$foo: {
|
||||
_$bar$baz: {
|
||||
color: 'red'
|
||||
}
|
||||
}
|
||||
})
|
||||
// will produce:
|
||||
// .foo.bar.baz {color: red}
|
||||
```
|
||||
|
||||
Variables helper:
|
||||
|
||||
```js
|
||||
import {variable as v} from 'css.js'
|
||||
|
||||
// Index for automatic hyphenation
|
||||
v.fooBar.toString() // var(--foo-bar)
|
||||
v.fooBar("Hello") // var(--foo-bar, Hello)
|
||||
|
||||
// Call for unchanged variable names
|
||||
v("fooBar") // var(--fooBar)
|
||||
v("fooBar", "Hello") // var(--fooBar, Hello)
|
||||
```
|
||||
|
||||
## Examples
|
Loading…
Reference in a new issue