90 lines
1.5 KiB
Markdown
90 lines
1.5 KiB
Markdown
# 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
|